@instructure/ui-file-drop 8.25.1-snapshot-7 → 8.25.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-file-drop
 

package/es/FileDrop/index.js

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 const _excluded = ["display", "height", "width", "minWidth", "maxWidth", "margin", "onDropAccepted", "onDropRejected"];
 
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /*
  * The MIT License (MIT)
@@ -53,196 +53,68 @@ category: components
 **/
 
 
-let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class FileDrop extends Component {
+let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class FileDrop extends Component {
+  static displayName = "FileDrop";
+  static componentId = 'FileDrop';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    onClick: function (_e) {},
+    shouldEnablePreview: false,
+    shouldAllowMultiple: false,
+    shouldAllowRepeats: true,
+    maxSize: Infinity,
+    minSize: 0,
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    messages: [],
+    display: 'block'
+  };
+
   constructor(props) {
     super(props);
-
-    this.makeStyleProps = () => {
-      return {
-        functionallyDisabled: this.functionallyDisabled,
-        visuallyDisabled: this.interaction === 'disabled',
-        dragRejected: this.state.isDragRejected || this.invalid,
-        dragAccepted: this.state.isDragAccepted
-      };
-    };
-
-    this.state = {
-      isDragAccepted: false,
-      isDragRejected: false,
-      isFocused: false,
-      isFileBrowserDisplayed: false
-    };
-    this.enterCounter = 0;
-    this.fileInputEl = null;
-    this.defaultId = null;
-    this.messagesId = '';
-    this.ref = null;
-
-    this.handleElementRef = el => {
-      this.ref = el;
-    };
-
-    this.handleDragEnter = e => {
-      var _this$props$onDragEnt, _this$props;
-
-      e.preventDefault(); // Count the dropzone and any children that are entered.
-
-      this.enterCounter += 1; // Don't trigger onDragEnter for each children after the first one
-
-      if (this.enterCounter > 1) {
-        return;
-      }
-
-      const allFilesAccepted = this.allFilesAccepted(this.getDataTransferItems(e));
-      this.setState({
-        isDragAccepted: allFilesAccepted,
-        isDragRejected: !allFilesAccepted
-      });
-      (_this$props$onDragEnt = (_this$props = this.props).onDragEnter) === null || _this$props$onDragEnt === void 0 ? void 0 : _this$props$onDragEnt.call(_this$props, e);
-    };
-
-    this.handleDragOver = e => {
-      var _this$props$onDragOve, _this$props2;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      try {
-        const event = e;
-        event.dataTransfer.dropEffect = 'copy';
-      } catch (err) {// continue regardless of error
-      }
-
-      (_this$props$onDragOve = (_this$props2 = this.props).onDragOver) === null || _this$props$onDragOve === void 0 ? void 0 : _this$props$onDragOve.call(_this$props2, e);
-      return false;
-    };
-
-    this.handleDragLeave = e => {
-      var _this$props$onDragLea, _this$props3;
-
-      e.preventDefault();
-      this.enterCounter -= 1; // Only deactivate once the dropzone and all children was left
-
-      if (this.enterCounter > 0) {
-        return;
-      }
-
-      this.setState({
-        isDragAccepted: false,
-        isDragRejected: false
-      });
-      (_this$props$onDragLea = (_this$props3 = this.props).onDragLeave) === null || _this$props$onDragLea === void 0 ? void 0 : _this$props$onDragLea.call(_this$props3, e);
-    };
-
-    this.handleChange = e => {
-      const _this$props4 = this.props,
-            onDrop = _this$props4.onDrop,
-            onDropAccepted = _this$props4.onDropAccepted,
-            onDropRejected = _this$props4.onDropRejected,
-            shouldEnablePreview = _this$props4.shouldEnablePreview;
-      const fileList = this.getDataTransferItems(e, shouldEnablePreview);
-
-      const _this$parseFiles = this.parseFiles(fileList),
-            _this$parseFiles2 = _slicedToArray(_this$parseFiles, 2),
-            accepted = _this$parseFiles2[0],
-            rejected = _this$parseFiles2[1];
-
-      e.preventDefault();
-      this.enterCounter = 0;
-      onDrop && onDrop(accepted, rejected, e);
-
-      if (rejected.length > 0 && onDropRejected) {
-        onDropRejected(rejected, e);
-      }
-
-      if (accepted.length > 0 && onDropAccepted) {
-        onDropAccepted(accepted, e);
-      }
-
-      this.setState({
-        isDragAccepted: false,
-        isDragRejected: false,
-        isFileBrowserDisplayed: false
-      });
-    };
-
-    this.fileAccepted = file => {
-      if (this.props.accept) return accepts(file, this.props.accept);else return true;
-    };
-
-    this.handleRef = el => {
-      this.fileInputEl = el;
-    };
-
-    this.handleBlur = () => {
-      this.setState({
-        isFocused: false,
-        isFileBrowserDisplayed: false
-      });
-    };
-
-    this.handleFocus = () => {
-      this.setState({
-        isFocused: true,
-        isFileBrowserDisplayed: false
-      });
-    };
-
-    this.handleClick = e => {
-      var _this$fileInputEl;
-
-      if (this.fileInputEl.value && this.props.shouldAllowRepeats) {
-        this.fileInputEl.value = null;
-      } // focus the input (because FF won't)
-
-
-      (_this$fileInputEl = this.fileInputEl) === null || _this$fileInputEl === void 0 ? void 0 : _this$fileInputEl.focus();
-      this.props.onClick(e);
-      this.setState({
-        isFileBrowserDisplayed: true
-      });
-    };
-
-    this.handleKeyDown = e => {
-      if (this.state.isFocused && keyEventIsClickButton(e)) {
-        if (this.props.shouldAllowRepeats) {
-          this.fileInputEl.value = null;
-        }
-      }
-    };
-
-    this.handleKeyUp = e => {
-      // This is to handle the case where ESC is pressed inside a Dialog so that
-      // closing the file browser dialog doesn't also close the Dialog.
-      if (e.keyCode === keycode.codes.esc && this.state.isFileBrowserDisplayed) {
-        e.stopPropagation();
-        e.nativeEvent.stopImmediatePropagation();
-        this.setState({
-          isFileBrowserDisplayed: false
-        });
-      }
-    };
-
     this.defaultId = props.deterministicId();
     this.messagesId = props.deterministicId('FileDrop-messages');
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props5;
+    var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props5 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props5, this.makeStyleProps());
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props6;
+    var _this$props$makeStyle2, _this$props2;
 
-    (_this$props$makeStyle2 = (_this$props6 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props6, this.makeStyleProps());
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
   convertToFile(fileLikeItem) {
     if (fileLikeItem instanceof DataTransferItem) return fileLikeItem.getAsFile();else return fileLikeItem;
   }
 
+  makeStyleProps = () => {
+    return {
+      functionallyDisabled: this.functionallyDisabled,
+      visuallyDisabled: this.interaction === 'disabled',
+      dragRejected: this.state.isDragRejected || this.invalid,
+      dragAccepted: this.state.isDragAccepted
+    };
+  };
+  state = {
+    isDragAccepted: false,
+    isDragRejected: false,
+    isFocused: false,
+    isFileBrowserDisplayed: false
+  };
+  enterCounter = 0;
+  fileInputEl = null;
+  defaultId = null;
+  messagesId = '';
+  ref = null;
+  handleElementRef = el => {
+    this.ref = el;
+  };
+
   get functionallyDisabled() {
     return this.interaction === 'disabled' || this.interaction === 'readonly';
   }
@@ -283,6 +155,56 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     return list;
   }
 
+  handleDragEnter = e => {
+    var _this$props$onDragEnt, _this$props3;
+
+    e.preventDefault(); // Count the dropzone and any children that are entered.
+
+    this.enterCounter += 1; // Don't trigger onDragEnter for each children after the first one
+
+    if (this.enterCounter > 1) {
+      return;
+    }
+
+    const allFilesAccepted = this.allFilesAccepted(this.getDataTransferItems(e));
+    this.setState({
+      isDragAccepted: allFilesAccepted,
+      isDragRejected: !allFilesAccepted
+    });
+    (_this$props$onDragEnt = (_this$props3 = this.props).onDragEnter) === null || _this$props$onDragEnt === void 0 ? void 0 : _this$props$onDragEnt.call(_this$props3, e);
+  };
+  handleDragOver = e => {
+    var _this$props$onDragOve, _this$props4;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      const event = e;
+      event.dataTransfer.dropEffect = 'copy';
+    } catch (err) {// continue regardless of error
+    }
+
+    (_this$props$onDragOve = (_this$props4 = this.props).onDragOver) === null || _this$props$onDragOve === void 0 ? void 0 : _this$props$onDragOve.call(_this$props4, e);
+    return false;
+  };
+  handleDragLeave = e => {
+    var _this$props$onDragLea, _this$props5;
+
+    e.preventDefault();
+    this.enterCounter -= 1; // Only deactivate once the dropzone and all children was left
+
+    if (this.enterCounter > 0) {
+      return;
+    }
+
+    this.setState({
+      isDragAccepted: false,
+      isDragRejected: false
+    });
+    (_this$props$onDragLea = (_this$props5 = this.props).onDragLeave) === null || _this$props$onDragLea === void 0 ? void 0 : _this$props$onDragLea.call(_this$props5, e);
+  };
+
   parseFiles(fileList) {
     const accepted = [];
     const rejected = [];
@@ -298,6 +220,41 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     return [accepted, rejected];
   }
 
+  handleChange = e => {
+    const _this$props6 = this.props,
+          onDrop = _this$props6.onDrop,
+          onDropAccepted = _this$props6.onDropAccepted,
+          onDropRejected = _this$props6.onDropRejected,
+          shouldEnablePreview = _this$props6.shouldEnablePreview;
+    const fileList = this.getDataTransferItems(e, shouldEnablePreview);
+
+    const _this$parseFiles = this.parseFiles(fileList),
+          _this$parseFiles2 = _slicedToArray(_this$parseFiles, 2),
+          accepted = _this$parseFiles2[0],
+          rejected = _this$parseFiles2[1];
+
+    e.preventDefault();
+    this.enterCounter = 0;
+    onDrop && onDrop(accepted, rejected, e);
+
+    if (rejected.length > 0 && onDropRejected) {
+      onDropRejected(rejected, e);
+    }
+
+    if (accepted.length > 0 && onDropAccepted) {
+      onDropAccepted(accepted, e);
+    }
+
+    this.setState({
+      isDragAccepted: false,
+      isDragRejected: false,
+      isFileBrowserDisplayed: false
+    });
+  };
+  fileAccepted = file => {
+    if (this.props.accept) return accepts(file, this.props.accept);else return true;
+  };
+
   fileMatchSize(file) {
     return file.size <= this.props.maxSize && file.size >= this.props.minSize;
   }
@@ -320,6 +277,54 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     });
   }
 
+  handleRef = el => {
+    this.fileInputEl = el;
+  };
+  handleBlur = () => {
+    this.setState({
+      isFocused: false,
+      isFileBrowserDisplayed: false
+    });
+  };
+  handleFocus = () => {
+    this.setState({
+      isFocused: true,
+      isFileBrowserDisplayed: false
+    });
+  };
+  handleClick = e => {
+    var _this$fileInputEl;
+
+    if (this.fileInputEl.value && this.props.shouldAllowRepeats) {
+      this.fileInputEl.value = null;
+    } // focus the input (because FF won't)
+
+
+    (_this$fileInputEl = this.fileInputEl) === null || _this$fileInputEl === void 0 ? void 0 : _this$fileInputEl.focus();
+    this.props.onClick(e);
+    this.setState({
+      isFileBrowserDisplayed: true
+    });
+  };
+  handleKeyDown = e => {
+    if (this.state.isFocused && keyEventIsClickButton(e)) {
+      if (this.props.shouldAllowRepeats) {
+        this.fileInputEl.value = null;
+      }
+    }
+  };
+  handleKeyUp = e => {
+    // This is to handle the case where ESC is pressed inside a Dialog so that
+    // closing the file browser dialog doesn't also close the Dialog.
+    if (e.keyCode === keycode.codes.esc && this.state.isFileBrowserDisplayed) {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      this.setState({
+        isFileBrowserDisplayed: false
+      });
+    }
+  };
+
   render() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
 
@@ -390,16 +395,6 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     })) : null);
   }
 
-}, _class2.displayName = "FileDrop", _class2.componentId = 'FileDrop', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  onClick: function (_e) {},
-  shouldEnablePreview: false,
-  shouldAllowMultiple: false,
-  shouldAllowRepeats: true,
-  maxSize: Infinity,
-  minSize: 0,
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  messages: [],
-  display: 'block'
-}, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default FileDrop;
 export { FileDrop };