|
- function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
- function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
- function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
- function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
-
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-
- function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
- /* eslint prefer-template: 0 */
- import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from 'react';
- import PropTypes from 'prop-types';
- import { fromEvent } from 'file-selector';
- import { allFilesAccepted, composeEventHandlers, fileAccepted, fileMatchSize, isEvtWithFiles, isIeOrEdge, isPropagationStopped, onDocumentDragOver } from './utils/index';
- /**
- * Convenience wrapper component for the `useDropzone` hook
- *
- * ```jsx
- * <Dropzone>
- * {({getRootProps, getInputProps}) => (
- * <div {...getRootProps()}>
- * <input {...getInputProps()} />
- * <p>Drag 'n' drop some files here, or click to select files</p>
- * </div>
- * )}
- * </Dropzone>
- * ```
- */
-
- var Dropzone = forwardRef(function (_ref, ref) {
- var children = _ref.children,
- params = _objectWithoutProperties(_ref, ["children"]);
-
- var _useDropzone = useDropzone(params),
- open = _useDropzone.open,
- props = _objectWithoutProperties(_useDropzone, ["open"]);
-
- useImperativeHandle(ref, function () {
- return {
- open: open
- };
- }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
-
- return React.createElement(Fragment, null, children(_objectSpread({}, props, {
- open: open
- })));
- });
- Dropzone.displayName = 'Dropzone';
- Dropzone.propTypes = {
- /**
- * Render function that exposes the dropzone state and prop getter fns
- *
- * @param {object} params
- * @param {Function} params.getRootProps Returns the props you should apply to the root drop container you render
- * @param {Function} params.getInputProps Returns the props you should apply to hidden file input you render
- * @param {Function} params.open Open the native file selection dialog
- * @param {boolean} params.isFocused Dropzone area is in focus
- * @param {boolean} params.isFileDialogActive File dialog is opened
- * @param {boolean} params.isDragActive Active drag is in progress
- * @param {boolean} params.isDragAccept Dragged files are accepted
- * @param {boolean} params.isDragReject Some dragged files are rejected
- * @param {File[]} params.draggedFiles Files in active drag
- * @param {File[]} params.acceptedFiles Accepted files
- * @param {File[]} params.rejectedFiles Rejected files
- */
- children: PropTypes.func,
-
- /**
- * Set accepted file types.
- * See https://github.com/okonet/attr-accept for more information.
- * Keep in mind that mime type determination is not reliable across platforms. CSV files,
- * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under
- * Windows. In some cases there might not be a mime type set at all.
- * See: https://github.com/react-dropzone/react-dropzone/issues/276
- */
- accept: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
- /**
- * Allow drag 'n' drop (or selection from the file dialog) of multiple files
- */
- multiple: PropTypes.bool,
-
- /**
- * If false, allow dropped items to take over the current browser window
- */
- preventDropOnDocument: PropTypes.bool,
-
- /**
- * If true, disables click to open the native file selection dialog
- */
- noClick: PropTypes.bool,
-
- /**
- * If true, disables SPACE/ENTER to open the native file selection dialog.
- * Note that it also stops tracking the focus state.
- */
- noKeyboard: PropTypes.bool,
-
- /**
- * If true, disables drag 'n' drop
- */
- noDrag: PropTypes.bool,
-
- /**
- * If true, stops drag event propagation to parents
- */
- noDragEventsBubbling: PropTypes.bool,
-
- /**
- * Minimum file size (in bytes)
- */
- minSize: PropTypes.number,
-
- /**
- * Maximum file size (in bytes)
- */
- maxSize: PropTypes.number,
-
- /**
- * Enable/disable the dropzone
- */
- disabled: PropTypes.bool,
-
- /**
- * Use this to provide a custom file aggregator
- *
- * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
- */
- getFilesFromEvent: PropTypes.func,
-
- /**
- * Cb for when closing the file dialog with no selection
- */
- onFileDialogCancel: PropTypes.func,
-
- /**
- * Cb for when the `dragenter` event occurs.
- *
- * @param {DragEvent} event
- */
- onDragEnter: PropTypes.func,
-
- /**
- * Cb for when the `dragleave` event occurs
- *
- * @param {DragEvent} event
- */
- onDragLeave: PropTypes.func,
-
- /**
- * Cb for when the `dragover` event occurs
- *
- * @param {DragEvent} event
- */
- onDragOver: PropTypes.func,
-
- /**
- * Cb for when the `drop` event occurs.
- * Note that this callback is invoked after the `getFilesFromEvent` callback is done.
- *
- * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.
- * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.
- * If `multiple` is set to false and additional files are droppped,
- * all files besides the first will be rejected.
- * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.
- *
- * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.
- * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.
- *
- * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
- * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
- *
- * ```js
- * function onDrop(acceptedFiles) {
- * const req = request.post('/upload')
- * acceptedFiles.forEach(file => {
- * req.attach(file.name, file)
- * })
- * req.end(callback)
- * }
- * ```
- *
- * @param {File[]} acceptedFiles
- * @param {File[]} rejectedFiles
- * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
- */
- onDrop: PropTypes.func,
-
- /**
- * Cb for when the `drop` event occurs.
- * Note that if no files are accepted, this callback is not invoked.
- *
- * @param {File[]} files
- * @param {(DragEvent|Event)} event
- */
- onDropAccepted: PropTypes.func,
-
- /**
- * Cb for when the `drop` event occurs.
- * Note that if no files are rejected, this callback is not invoked.
- *
- * @param {object[]} files
- * @param {(DragEvent|Event)} event
- */
- onDropRejected: PropTypes.func
- };
- export default Dropzone;
- /**
- * A function that is invoked for the `dragenter`,
- * `dragover` and `dragleave` events.
- * It is not invoked if the items are not files (such as link, text, etc.).
- *
- * @callback dragCb
- * @param {DragEvent} event
- */
-
- /**
- * A function that is invoked for the `drop` or input change event.
- * It is not invoked if the items are not files (such as link, text, etc.).
- *
- * @callback dropCb
- * @param {File[]} acceptedFiles List of accepted files
- * @param {File[]} rejectedFiles List of rejected files
- * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
- */
-
- /**
- * A function that is invoked for the `drop` or input change event.
- * It is not invoked if the items are files (such as link, text, etc.).
- *
- * @callback dropAcceptedCb
- * @param {File[]} files List of accepted files that meet the given criteria
- * (`accept`, `multiple`, `minSize`, `maxSize`)
- * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
- */
-
- /**
- * A function that is invoked for the `drop` or input change event.
- *
- * @callback dropRejectedCb
- * @param {File[]} files List of rejected files that do not meet the given criteria
- * (`accept`, `multiple`, `minSize`, `maxSize`)
- * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
- */
-
- /**
- * A function that is used aggregate files,
- * in a asynchronous fashion, from drag or input change events.
- *
- * @callback getFilesFromEvent
- * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
- * @returns {(File[]|Promise<File[]>)}
- */
-
- /**
- * An object with the current dropzone state and some helper functions.
- *
- * @typedef {object} DropzoneState
- * @property {Function} getRootProps Returns the props you should apply to the root drop container you render
- * @property {Function} getInputProps Returns the props you should apply to hidden file input you render
- * @property {Function} open Open the native file selection dialog
- * @property {boolean} isFocused Dropzone area is in focus
- * @property {boolean} isFileDialogActive File dialog is opened
- * @property {boolean} isDragActive Active drag is in progress
- * @property {boolean} isDragAccept Dragged files are accepted
- * @property {boolean} isDragReject Some dragged files are rejected
- * @property {File[]} draggedFiles Files in active drag
- * @property {File[]} acceptedFiles Accepted files
- * @property {File[]} rejectedFiles Rejected files
- */
-
- var initialState = {
- isFocused: false,
- isFileDialogActive: false,
- isDragActive: false,
- isDragAccept: false,
- isDragReject: false,
- draggedFiles: [],
- acceptedFiles: [],
- rejectedFiles: []
- };
- /**
- * A React hook that creates a drag 'n' drop area.
- *
- * ```jsx
- * function MyDropzone(props) {
- * const {getRootProps, getInputProps} = useDropzone({
- * onDrop: acceptedFiles => {
- * // do something with the File objects, e.g. upload to some server
- * }
- * });
- * return (
- * <div {...getRootProps()}>
- * <input {...getInputProps()} />
- * <p>Drag and drop some files here, or click to select files</p>
- * </div>
- * )
- * }
- * ```
- *
- * @function useDropzone
- *
- * @param {object} props
- * @param {string|string[]} [props.accept] Set accepted file types.
- * See https://github.com/okonet/attr-accept for more information.
- * Keep in mind that mime type determination is not reliable across platforms. CSV files,
- * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under
- * Windows. In some cases there might not be a mime type set at all.
- * See: https://github.com/react-dropzone/react-dropzone/issues/276
- * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files
- * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window
- * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog
- * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.
- * Note that it also stops tracking the focus state.
- * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop
- * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents
- * @param {number} [props.minSize=0] Minimum file size (in bytes)
- * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)
- * @param {boolean} [props.disabled=false] Enable/disable the dropzone
- * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator
- * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection
- * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.
- * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs
- * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs
- * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.
- * Note that this callback is invoked after the `getFilesFromEvent` callback is done.
- *
- * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.
- * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.
- * If `multiple` is set to false and additional files are droppped,
- * all files besides the first will be rejected.
- * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.
- *
- * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.
- * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.
- *
- * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
- * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
- *
- * ```js
- * function onDrop(acceptedFiles) {
- * const req = request.post('/upload')
- * acceptedFiles.forEach(file => {
- * req.attach(file.name, file)
- * })
- * req.end(callback)
- * }
- * ```
- * @param {dropAcceptedCb} [props.onDropAccepted]
- * @param {dropRejectedCb} [props.onDropRejected]
- *
- * @returns {DropzoneState}
- */
-
- export function useDropzone() {
- var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
- accept = _ref2.accept,
- _ref2$disabled = _ref2.disabled,
- disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
- _ref2$getFilesFromEve = _ref2.getFilesFromEvent,
- getFilesFromEvent = _ref2$getFilesFromEve === void 0 ? fromEvent : _ref2$getFilesFromEve,
- _ref2$maxSize = _ref2.maxSize,
- maxSize = _ref2$maxSize === void 0 ? Infinity : _ref2$maxSize,
- _ref2$minSize = _ref2.minSize,
- minSize = _ref2$minSize === void 0 ? 0 : _ref2$minSize,
- _ref2$multiple = _ref2.multiple,
- multiple = _ref2$multiple === void 0 ? true : _ref2$multiple,
- onDragEnter = _ref2.onDragEnter,
- onDragLeave = _ref2.onDragLeave,
- onDragOver = _ref2.onDragOver,
- onDrop = _ref2.onDrop,
- onDropAccepted = _ref2.onDropAccepted,
- onDropRejected = _ref2.onDropRejected,
- onFileDialogCancel = _ref2.onFileDialogCancel,
- _ref2$preventDropOnDo = _ref2.preventDropOnDocument,
- preventDropOnDocument = _ref2$preventDropOnDo === void 0 ? true : _ref2$preventDropOnDo,
- _ref2$noClick = _ref2.noClick,
- noClick = _ref2$noClick === void 0 ? false : _ref2$noClick,
- _ref2$noKeyboard = _ref2.noKeyboard,
- noKeyboard = _ref2$noKeyboard === void 0 ? false : _ref2$noKeyboard,
- _ref2$noDrag = _ref2.noDrag,
- noDrag = _ref2$noDrag === void 0 ? false : _ref2$noDrag,
- _ref2$noDragEventsBub = _ref2.noDragEventsBubbling,
- noDragEventsBubbling = _ref2$noDragEventsBub === void 0 ? false : _ref2$noDragEventsBub;
-
- var rootRef = useRef(null);
- var inputRef = useRef(null);
-
- var _useReducer = useReducer(reducer, initialState),
- _useReducer2 = _slicedToArray(_useReducer, 2),
- state = _useReducer2[0],
- dispatch = _useReducer2[1];
-
- var isFocused = state.isFocused,
- isFileDialogActive = state.isFileDialogActive,
- draggedFiles = state.draggedFiles; // Fn for opening the file dialog programmatically
-
- var openFileDialog = useCallback(function () {
- if (inputRef.current) {
- dispatch({
- type: 'openDialog'
- });
- inputRef.current.value = null;
- inputRef.current.click();
- }
- }, [dispatch]); // Update file dialog active state when the window is focused on
-
- var onWindowFocus = function onWindowFocus() {
- // Execute the timeout only if the file dialog is opened in the browser
- if (isFileDialogActive) {
- setTimeout(function () {
- if (inputRef.current) {
- var files = inputRef.current.files;
-
- if (!files.length) {
- dispatch({
- type: 'closeDialog'
- });
-
- if (typeof onFileDialogCancel === 'function') {
- onFileDialogCancel();
- }
- }
- }
- }, 300);
- }
- };
-
- useEffect(function () {
- window.addEventListener('focus', onWindowFocus, false);
- return function () {
- window.removeEventListener('focus', onWindowFocus, false);
- };
- }, [inputRef, isFileDialogActive, onFileDialogCancel]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
-
- var onKeyDownCb = useCallback(function (event) {
- // Ignore keyboard events bubbling up the DOM tree
- if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
- return;
- }
-
- if (event.keyCode === 32 || event.keyCode === 13) {
- event.preventDefault();
- openFileDialog();
- }
- }, [rootRef, inputRef]); // Update focus state for the dropzone
-
- var onFocusCb = useCallback(function () {
- dispatch({
- type: 'focus'
- });
- }, []);
- var onBlurCb = useCallback(function () {
- dispatch({
- type: 'blur'
- });
- }, []); // Cb to open the file dialog when click occurs on the dropzone
-
- var onClickCb = useCallback(function () {
- if (noClick) {
- return;
- } // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
- // to ensure React can handle state changes
- // See: https://github.com/react-dropzone/react-dropzone/issues/450
-
-
- if (isIeOrEdge()) {
- setTimeout(openFileDialog, 0);
- } else {
- openFileDialog();
- }
- }, [inputRef, noClick]);
- var dragTargetsRef = useRef([]);
-
- var onDocumentDrop = function onDocumentDrop(event) {
- if (rootRef.current && rootRef.current.contains(event.target)) {
- // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
- return;
- }
-
- event.preventDefault();
- dragTargetsRef.current = [];
- };
-
- useEffect(function () {
- if (preventDropOnDocument) {
- document.addEventListener('dragover', onDocumentDragOver, false);
- document.addEventListener('drop', onDocumentDrop, false);
- }
-
- return function () {
- if (preventDropOnDocument) {
- document.removeEventListener('dragover', onDocumentDragOver);
- document.removeEventListener('drop', onDocumentDrop);
- }
- };
- }, [rootRef, preventDropOnDocument]);
- var onDragEnterCb = useCallback(function (event) {
- event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done
-
- event.persist();
- stopPropagation(event); // Count the dropzone and any children that are entered.
-
- if (dragTargetsRef.current.indexOf(event.target) === -1) {
- dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);
- }
-
- if (isEvtWithFiles(event)) {
- Promise.resolve(getFilesFromEvent(event)).then(function (draggedFiles) {
- if (isPropagationStopped(event) && !noDragEventsBubbling) {
- return;
- }
-
- dispatch({
- draggedFiles: draggedFiles,
- isDragActive: true,
- type: 'setDraggedFiles'
- });
-
- if (onDragEnter) {
- onDragEnter(event);
- }
- });
- }
- }, [getFilesFromEvent, onDragEnter, noDragEventsBubbling]);
- var onDragOverCb = useCallback(function (event) {
- event.preventDefault();
- event.persist();
- stopPropagation(event);
-
- if (event.dataTransfer) {
- try {
- event.dataTransfer.dropEffect = 'copy';
- } catch (_unused) {}
- /* eslint-disable-line no-empty */
-
- }
-
- if (isEvtWithFiles(event) && onDragOver) {
- onDragOver(event);
- }
-
- return false;
- }, [onDragOver, noDragEventsBubbling]);
- var onDragLeaveCb = useCallback(function (event) {
- event.preventDefault();
- event.persist();
- stopPropagation(event); // Only deactivate once the dropzone and all children have been left
-
- var targets = dragTargetsRef.current.filter(function (target) {
- return target !== event.target && rootRef.current && rootRef.current.contains(target);
- });
- dragTargetsRef.current = targets;
-
- if (targets.length > 0) {
- return;
- }
-
- dispatch({
- isDragActive: false,
- type: 'setDraggedFiles',
- draggedFiles: []
- });
-
- if (isEvtWithFiles(event) && onDragLeave) {
- onDragLeave(event);
- }
- }, [rootRef, onDragLeave, noDragEventsBubbling]);
- var onDropCb = useCallback(function (event) {
- event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done
-
- event.persist();
- stopPropagation(event);
- dragTargetsRef.current = [];
-
- if (isEvtWithFiles(event)) {
- Promise.resolve(getFilesFromEvent(event)).then(function (files) {
- if (isPropagationStopped(event) && !noDragEventsBubbling) {
- return;
- }
-
- var acceptedFiles = [];
- var rejectedFiles = [];
- files.forEach(function (file) {
- if (fileAccepted(file, accept) && fileMatchSize(file, minSize, maxSize)) {
- acceptedFiles.push(file);
- } else {
- rejectedFiles.push(file);
- }
- });
-
- if (!multiple && acceptedFiles.length > 1) {
- rejectedFiles.push.apply(rejectedFiles, _toConsumableArray(acceptedFiles.splice(0))); // Reject everything and empty accepted files
- }
-
- dispatch({
- acceptedFiles: acceptedFiles,
- rejectedFiles: rejectedFiles,
- type: 'setFiles'
- });
-
- if (onDrop) {
- onDrop(acceptedFiles, rejectedFiles, event);
- }
-
- if (rejectedFiles.length > 0 && onDropRejected) {
- onDropRejected(rejectedFiles, event);
- }
-
- if (acceptedFiles.length > 0 && onDropAccepted) {
- onDropAccepted(acceptedFiles, event);
- }
- });
- }
-
- dispatch({
- type: 'reset'
- });
- }, [multiple, accept, minSize, maxSize, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected, noDragEventsBubbling]);
-
- var composeHandler = function composeHandler(fn) {
- return disabled ? null : fn;
- };
-
- var composeKeyboardHandler = function composeKeyboardHandler(fn) {
- return noKeyboard ? null : composeHandler(fn);
- };
-
- var composeDragHandler = function composeDragHandler(fn) {
- return noDrag ? null : composeHandler(fn);
- };
-
- var stopPropagation = function stopPropagation(event) {
- if (noDragEventsBubbling) {
- event.stopPropagation();
- }
- };
-
- var getRootProps = useMemo(function () {
- return function () {
- var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
- _ref3$refKey = _ref3.refKey,
- refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
- onKeyDown = _ref3.onKeyDown,
- onFocus = _ref3.onFocus,
- onBlur = _ref3.onBlur,
- onClick = _ref3.onClick,
- onDragEnter = _ref3.onDragEnter,
- onDragOver = _ref3.onDragOver,
- onDragLeave = _ref3.onDragLeave,
- onDrop = _ref3.onDrop,
- rest = _objectWithoutProperties(_ref3, ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"]);
-
- return _objectSpread(_defineProperty({
- onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
- onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
- onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
- onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
- onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),
- onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),
- onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
- onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb))
- }, refKey, rootRef), !disabled && !noKeyboard ? {
- tabIndex: 0
- } : {}, {}, rest);
- };
- }, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onClickCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, noKeyboard, noDrag, disabled]);
- var onInputElementClick = useCallback(function (event) {
- event.stopPropagation();
- }, []);
- var getInputProps = useMemo(function () {
- return function () {
- var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
- _ref4$refKey = _ref4.refKey,
- refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
- onChange = _ref4.onChange,
- onClick = _ref4.onClick,
- rest = _objectWithoutProperties(_ref4, ["refKey", "onChange", "onClick"]);
-
- var inputProps = _defineProperty({
- accept: accept,
- multiple: multiple,
- type: 'file',
- style: {
- display: 'none'
- },
- onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
- onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
- autoComplete: 'off',
- tabIndex: -1
- }, refKey, inputRef);
-
- return _objectSpread({}, inputProps, {}, rest);
- };
- }, [inputRef, accept, multiple, onDropCb, disabled]);
- var fileCount = draggedFiles.length;
- var isDragAccept = fileCount > 0 && allFilesAccepted({
- files: draggedFiles,
- accept: accept,
- minSize: minSize,
- maxSize: maxSize,
- multiple: multiple
- });
- var isDragReject = fileCount > 0 && !isDragAccept;
- return _objectSpread({}, state, {
- isDragAccept: isDragAccept,
- isDragReject: isDragReject,
- isFocused: isFocused && !disabled,
- getRootProps: getRootProps,
- getInputProps: getInputProps,
- rootRef: rootRef,
- inputRef: inputRef,
- open: composeHandler(openFileDialog)
- });
- }
-
- function reducer(state, action) {
- /* istanbul ignore next */
- switch (action.type) {
- case 'focus':
- return _objectSpread({}, state, {
- isFocused: true
- });
-
- case 'blur':
- return _objectSpread({}, state, {
- isFocused: false
- });
-
- case 'openDialog':
- return _objectSpread({}, state, {
- isFileDialogActive: true
- });
-
- case 'closeDialog':
- return _objectSpread({}, state, {
- isFileDialogActive: false
- });
-
- case 'setDraggedFiles':
- /* eslint no-case-declarations: 0 */
- var isDragActive = action.isDragActive,
- draggedFiles = action.draggedFiles;
- return _objectSpread({}, state, {
- draggedFiles: draggedFiles,
- isDragActive: isDragActive
- });
-
- case 'setFiles':
- return _objectSpread({}, state, {
- acceptedFiles: action.acceptedFiles,
- rejectedFiles: action.rejectedFiles
- });
-
- case 'reset':
- return _objectSpread({}, state, {
- isFileDialogActive: false,
- isDragActive: false,
- draggedFiles: [],
- acceptedFiles: [],
- rejectedFiles: []
- });
-
- default:
- return state;
- }
- }
|