Upgrade FileChooser to use latest react-dropzone

CHANGELOG.md

@@ -2,10 +2,23 @@
 
 ## v71.0.0-SNAPSHOT - unreleased
 
+### 💥 Breaking Changes (upgrade difficulty: 🟢 TRIVIAL - `FileChooser` props)
+
+* Upgraded `FileChooser` now requires the accepted file types `accept` prop to be an object
+  mapping MIME type to list of file extensions, e.g.
+```
+    accept: {
+        'image/png': ['.png'],
+        'text/html': ['.html', '.htm']
+    }
+```
 
 ### ⚙️ Technical
 * Misc. Improvements to ViewManager
 
+### 📚 Libraries
+
+* react-dropzone `10.2.2 → 14.3.5`
 
 ## v70.0.0 - 2024-11-15
 

desktop/cmp/filechooser/FileChooser.ts

@@ -6,7 +6,7 @@
  */
 import {grid} from '@xh/hoist/cmp/grid';
 import {div, hbox, input} from '@xh/hoist/cmp/layout';
-import {BoxProps, hoistCmp, HoistProps, Some, uses} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistProps, uses} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {dropzone} from '@xh/hoist/kit/react-dropzone';
 import classNames from 'classnames';
@@ -15,8 +15,10 @@ import './FileChooser.scss';
 import {FileChooserModel} from './FileChooserModel';
 
 export interface FileChooserProps extends HoistProps<FileChooserModel>, BoxProps {
-    /** File type(s) to accept (e.g. `['.doc', '.docx', '.pdf']`). */
-    accept?: Some<string>;
+    /** Map of MIME type to file extensions to accept
+     * (e.g. `{'image/png': ['.png'], 'text/html': ['.html', '.htm']}`).
+     */
+    accept?: {[key: string]: readonly string[]};
 
     /** True (default) to allow multiple files in a single upload. */
     enableMulti?: boolean;
@@ -88,10 +90,9 @@ export const [FileChooser, fileChooser] = hoistCmp.withFactory<FileChooserProps>
                     maxSize,
                     minSize,
                     multiple: enableAddMulti,
-                    children: ({getRootProps, getInputProps, isDragActive, draggedFiles}) => {
-                        const draggedCount = draggedFiles.length,
-                            targetTxt = isDragActive
-                                ? `Drop to add ${fileNoun(draggedCount)}.`
+                    children: ({getRootProps, getInputProps, isDragActive}) => {
+                        const targetTxt = isDragActive
+                                ? `Drop to add ${fileNoun(model.draggedCount)}.`
                                 : targetText,
                             rejectTxt =
                                 lastRejectedCount && !isDragActive
@@ -115,6 +116,8 @@ export const [FileChooser, fileChooser] = hoistCmp.withFactory<FileChooserProps>
                             )
                         });
                     },
+                    onDragEnter: e => model.onDragEnter(e),
+                    onDragLeave: e => model.onDragLeave(e),
                     onDrop: (accepted, rejected) => model.onDrop(accepted, rejected, enableMulti)
                 }),
                 grid({

desktop/cmp/filechooser/FileChooserModel.ts

@@ -11,9 +11,8 @@ import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {apiDeprecated} from '@xh/hoist/utils/js';
-import {isEmpty} from 'codemirror/src/util/misc';
 import filesize from 'filesize';
-import {find, uniqBy, without} from 'lodash';
+import {find, isEmpty, uniqBy, without} from 'lodash';
 
 export class FileChooserModel extends HoistModel {
     @observable.ref
@@ -22,6 +21,9 @@ export class FileChooserModel extends HoistModel {
     @observable
     lastRejectedCount: number;
 
+    @observable
+    draggedCount: number;
+
     @managed
     gridModel: GridModel;
 
@@ -117,6 +119,16 @@ export class FileChooserModel extends HoistModel {
         });
     }
 
+    @action
+    onDragEnter(event) {
+        this.draggedCount = event.dataTransfer.items.length;
+    }
+
+    @action
+    onDragLeave(event) {
+        this.draggedCount = null;
+    }
+
     @action
     onDrop(accepted, rejected, enableMulti) {
         if (!isEmpty(accepted)) {
@@ -126,6 +138,7 @@ export class FileChooserModel extends HoistModel {
                 this.addFiles(accepted);
             }
         }
+        this.draggedCount = null;
         this.lastRejectedCount = rejected.length;
     }
 

package.json

@@ -60,6 +60,7 @@
     "jwt-decode": "~4.0.0",
     "lodash": "~4.17.21",
     "lodash-inflection": "~1.5.0",
+    "mime-types": "~2.1.35",
     "mobx": "~6.13.2",
     "mobx-react-lite": "~4.0.7",
     "moment": "~2.30.1",
@@ -68,7 +69,7 @@
     "qs": "~6.13.0",
     "react-beautiful-dnd": "~13.1.0",
     "react-dates": "~21.8.0",
-    "react-dropzone": "~10.2.2",
+    "react-dropzone": "~14.3.5",
     "react-grid-layout": "1.4.3",
     "react-markdown": "~9.0.1",
     "react-onsenui": "~1.13.2",

yarn.lock

@@ -2276,7 +2276,7 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
-attr-accept@^2.0.0:
+attr-accept@^2.2.4:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.5.tgz#d7061d958e6d4f97bf8665c68b75851a0713ab5e"
   integrity sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==
@@ -3743,12 +3743,12 @@ file-loader@~6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-file-selector@^0.1.12:
-  version "0.1.19"
-  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.19.tgz#8ecc9d069a6f544f2e4a096b64a8052e70ec8abf"
-  integrity sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==
+file-selector@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-2.1.1.tgz#21833801bfa3d696d44788c871e4e6704967627c"
+  integrity sha512-pJVY80PuSiHbnYEZ0gZYQf15x0z/lkeIF1yn95yRC/Usb43343ewXtMClQ9GLPvPm4/SscX4zvQz9QhCAyLqlg==
   dependencies:
-    tslib "^2.0.1"
+    tslib "^2.7.0"
 
 filesize@~6.4.0:
   version "6.4.0"
@@ -5608,7 +5608,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.53.0.tgz#3cb63cd820fc29896d9d4e8c32ab4fcd74ccb447"
   integrity sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==
 
-mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34, mime-types@~2.1.35:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -6417,14 +6417,14 @@ react-draggable@^4.0.3, react-draggable@^4.4.5:
     clsx "^1.1.1"
     prop-types "^15.8.1"
 
-react-dropzone@~10.2.2:
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.2.2.tgz#67b4db7459589a42c3b891a82eaf9ade7650b815"
-  integrity sha512-U5EKckXVt6IrEyhMMsgmHQiWTGLudhajPPG77KFSvgsMqNEHSyGpqWvOMc5+DhEah/vH4E1n+J5weBNLd5VtyA==
+react-dropzone@~14.3.5:
+  version "14.3.5"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.3.5.tgz#1a8bd312c8a353ec78ef402842ccb3589c225add"
+  integrity sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==
   dependencies:
-    attr-accept "^2.0.0"
-    file-selector "^0.1.12"
-    prop-types "^15.7.2"
+    attr-accept "^2.2.4"
+    file-selector "^2.1.0"
+    prop-types "^15.8.1"
 
 react-fast-compare@^3.0.1:
   version "3.2.2"
@@ -7732,7 +7732,7 @@ ts-api-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.0.tgz#709c6f2076e511a81557f3d07a0cbd566ae8195c"
   integrity sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.3.0:
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.3.0, tslib@^2.7.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==