Create class MinimalFileInput

computablefacts · Dec 11, 2023 · c8c6fb2 · c8c6fb2
1 parent f3ae94b
commit c8c6fb2
Show file tree

Hide file tree

Showing 8 changed files with 291 additions and 13 deletions.
diff --git a/dist/cjs/main.js b/dist/cjs/main.js
diff --git a/dist/cjs/main.js.map b/dist/cjs/main.js.map
diff --git a/dist/esm/main.js b/dist/esm/main.js
diff --git a/dist/esm/main.js.map b/dist/esm/main.js.map
diff --git a/dist/index.html b/dist/index.html
@@ -13,6 +13,7 @@
   <link href="blueprintjs/blueprint-datetime.css" rel="stylesheet"/>
 </head>
 <body>
+<div id="file-input"></div>
 <div id="suggest"></div>
 <div id="multiselect"></div>
 <div id="list"></div>
@@ -488,6 +489,20 @@
     });
   }
 
+  function testFileInput() {
+
+    const root = document.getElementById('file-input');
+
+    const fileInput = new com.computablefacts.blueprintjs.MinimalFileInput(root);
+    // fileInput.disabled = true;
+    fileInput.text = 'Sélectionner un fichier...';
+    fileInput.buttonText = 'Rechercher...';
+
+    fileInput.onSelectionChange((file) => {
+      console.log(file);
+    });
+  }
+
   testWhoAmI();
   testTable();
   testSelect1();
@@ -508,6 +523,7 @@
   testList();
   testMultiSelect();
   testSuggest();
+  testFileInput();
 
 </script>
 </body>

diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/dist/main.min.js.map b/dist/main.min.js.map
diff --git a/src/blueprintjs.js b/src/blueprintjs.js
@@ -10,6 +10,7 @@ import {
   Card,
   Checkbox,
   Drawer,
+  FileInput,
   Icon,
   Intent,
   Menu,
@@ -2091,4 +2092,91 @@ blueprintjs.MinimalSuggest = class extends blueprintjs.Blueprintjs {
       }
     });
   }
+}
+
+/**
+ * A skeleton to ease the creation of a minimal Blueprintjs file input element.
+ *
+ * @memberOf module:blueprintjs
+ * @extends {blueprintjs.Blueprintjs}
+ * @type {blueprintjs.MinimalFileInput}
+ */
+blueprintjs.MinimalFileInput = class extends blueprintjs.Blueprintjs {
+
+  /**
+   * @param {Element} container the parent element.
+   * @constructor
+   */
+  constructor(container) {
+    super(container);
+    this.observers_ = new observers.Subject();
+    this.disabled_ = false;
+    this.text_ = null;
+    this.buttonText_ = null;
+    this.fill_ = true;
+    this.render();
+  }
+
+  get disabled() {
+    return this.disabled_;
+  }
+
+  set disabled(value) {
+    this.disabled_ = value;
+    this.render();
+  }
+
+  get fill() {
+    return this.fill_;
+  }
+
+  set fill(value) {
+    this.fill_ = value;
+    this.render();
+  }
+
+  get text() {
+    return this.text_;
+  }
+
+  set text(value) {
+    this.text_ = value;
+    this.render();
+  }
+
+  get buttonText() {
+    return this.buttonText_;
+  }
+
+  set buttonText(value) {
+    this.buttonText_ = value;
+    this.render();
+  }
+
+  /**
+   * Listen to the `selection-change` event.
+   *
+   * @param {function(*): void} callback the callback to call when the event is triggered.
+   * @name onSelectionChange
+   * @function
+   * @public
+   */
+  onSelectionChange(callback) {
+    this.observers_.register('selection-change', (file) => {
+      // console.log('Selected file is ', file);
+      if (callback) {
+        callback(file);
+      }
+    });
+  }
+
+  _newElement() {
+    return React.createElement(FileInput, {
+      disabled: this.disabled, text: this.text, buttonText: this.buttonText, fill: this.fill, onInputChange: (el) => {
+        this.text = el.target.files[0].name;
+        this.render();
+        this.observers_.notify('selection-change', el.target.files[0]);
+      },
+    });
+  }
 }