fix(minimal-mode): add file button should open system dialog (#544)

uploadcare · Oct 20, 2023 · 366d524 · 366d524
1 parent c8519e9
commit 366d524
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/abstract/Block.js b/abstract/Block.js
@@ -227,6 +227,14 @@ export class Block extends BaseComponent {
       let o = Object.create(null);
       /** @private */
       this.__cfgProxy = new Proxy(o, {
+        set: (obj, key, value) => {
+          if (typeof key !== 'string') {
+            return false;
+          }
+          const sharedKey = sharedConfigKey(/** @type {keyof import('../types').ConfigType} */ (key));
+          this.$[sharedKey] = value;
+          return true;
+        },
         /**
          * @param {never} obj
          * @param {keyof import('../types').ConfigType} key

diff --git a/blocks/Config/Config.js b/blocks/Config/Config.js
@@ -59,9 +59,21 @@ export class Config extends Block {
 
   initCallback() {
     super.initCallback();
+    const anyThis = /** @type {typeof this & any} */ (this);
+
+    for (const key of plainConfigKeys) {
+      this.sub(
+        sharedConfigKey(key),
+        (value) => {
+          if (value !== initialConfig[key]) {
+            anyThis[key] = value;
+          }
+        },
+        false
+      );
+    }
 
     for (const key of allConfigKeys) {
-      const anyThis = /** @type {typeof this & any} */ (this);
       let localPropName = '__' + key;
       anyThis[localPropName] = anyThis[key];
 

diff --git a/blocks/test/raw-minimal.htm b/blocks/test/raw-minimal.htm
@@ -3,16 +3,6 @@
 
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <style>
-    .config {
-      --ctx-name: 'my-uploader';
-      --cfg-pubkey: 'demopublickey';
-      --cfg-multiple: 0;
-      --cfg-multiple-min: 0;
-      --cfg-multiple-max: 3;
-      --darkmode: 0;
-    }
-  </style>
   <script
     async=""
     src="https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=raw,min/dist/es-module-shims.js"
@@ -32,4 +22,6 @@
   </script>
 </head>
 
-<lr-file-uploader-minimal class="config" css-src="./solutions/file-uploader/minimal/index.css"></lr-file-uploader-minimal>
+<lr-file-uploader-minimal ctx-name="my-uploader" css-src="./solutions/file-uploader/minimal/index.css"></lr-file-uploader-minimal>
+<lr-config ctx-name="my-uploader" pubkey="demopublickey" crop-preset="1:1" cloudImageEditorTabs="crop" cloud-image-editor-tabs="crop"></lr-config>
+<lr-data-output ctx-name="my-uploader" use-console></lr-data-output>