react-dropzone - npm Package Compare versions

Comparing version 10.0.2 to 10.0.3

dist/es/index.js

@@ -1,5 +0,1 @@
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -21,4 +17,8 @@
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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 _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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; }
@@ -29,3 +29,3 @@
 /* eslint prefer-template: 0 */
-import React, { Fragment, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import React, { forwardRef, Fragment, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -49,3 +49,3 @@ import { fromEvent } from 'file-selector';
 
-function Dropzone(_ref) {
+var Dropzone = forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -55,8 +55,30 @@ params = _objectWithoutProperties(_ref, ["children"]);
   var _useDropzone = useDropzone(params),
-      props = _extends({}, _useDropzone); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
+      open = _useDropzone.open,
+      props = _objectWithoutProperties(_useDropzone, ["open"]);
 
+  useEffect(function () {
+    if (typeof ref === 'function') {
+      ref({
+        open: open
+      });
+    } else if (_typeof(ref) === 'object' && ref !== null) {
+      ref.current = {
+        open: open
+      };
+    }
 
-  return React.createElement(Fragment, null, children(props));
-}
+    return function () {
+      if (typeof ref === 'function') {
+        ref(null);
+      } else if (_typeof(ref) === 'object' && ref !== null) {
+        ref.current = null;
+      }
+    };
+  }); // 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 = {
@@ -63,0 +85,0 @@ /**

examples/file-dialog/README.md

@@ -5,3 +5,3 @@ You can programmatically invoke the default OS file prompt; just use the `open` method returned by the hook.
 
-If you are calling `dropzoneRef.open()` asynchronously, there’s a good chance it’s going to be blocked by the browser. So if you are calling `dropzoneRef.open()` asynchronously, be sure there is no more than *1000ms* delay between user interaction and `dropzoneRef.open()` call.
+If you are calling `open()` asynchronously, there’s a good chance it’s going to be blocked by the browser. So if you are calling `open()` asynchronously, be sure there is no more than *1000ms* delay between user interaction and `open()` call.
 
@@ -39,1 +39,37 @@ Due to the lack of official docs on this (at least we haven’t found any. If you know one, feel free to open PR), there is no guarantee that **allowed delay duration** will not be changed in later browser versions. Since implementations may differ between different browsers, avoid calling open asynchronously if possible.
 ```
+
+Or use the `ref` exposed by the `<Dropzone>` component:
+
+```jsx harmony
+import React, {createRef} from 'react';
+import Dropzone from 'react-dropzone';
+
+const dropzoneRef = createRef();
+
+<Dropzone ref={dropzoneRef}>
+  {({getRootProps, getInputProps}) => {
+    const rootProps = getRootProps({
+      // Disable click and keydown behavior
+      onClick: event => event.stopPropagation(),
+      onKeyDown: event => {
+        if (event.keyCode === 32 || event.keyCode === 13) {
+          event.stopPropagation();
+        }
+      }
+    });
+
+    return (
+      <div {...rootProps}>
+        <input {...getInputProps()} />
+        <p>Drag 'n' drop some files here</p>
+        <button
+          type="button"
+          onClick={dropzoneRef.current ? dropzoneRef.current.open : null}
+        >
+          Open File Dialog
+        </button>
+      </div>
+    );
+  }}
+</Dropzone>
+```

package.json

@@ -168,3 +168,3 @@ {
   },
-  "version": "10.0.2",
+  "version": "10.0.3",
   "engines": {
@@ -171,0 +171,0 @@ "node": ">= 8"

README.md

@@ -185,3 +185,23 @@ ![react-dropzone logo](https://raw.githubusercontent.com/react-dropzone/react-dropzone/master/logo/logo.png)
 
+If you're using the `<Dropzone>` component, though, you can set the `ref` prop on the component itself which will expose the `{open}` prop that can be used to open the file dialog programmatically:
 
+```jsx static
+import React, {createRef} from 'react'
+import Dropzone from 'react-dropzone'
+
+const dropzoneRef = createRef()
+
+<Dropzone ref={dropzoneRef}>
+  {({getRootProps, getInputProps}) => (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} />
+      <p>Drag 'n' drop some files here, or click to select files</p>
+    </div>
+  )}
+</Dropzone>
+
+dropzoneRef.open()
+```
+
+
 ## Testing
@@ -188,0 +208,0 @@

src/index.js

 /* eslint prefer-template: 0 */
 import React, {
+  forwardRef,
   Fragment,
@@ -39,8 +40,26 @@ useCallback,
  */
-function Dropzone({ children, ...params }) {
-  const { ...props } = useDropzone(params)
+const Dropzone = forwardRef(({ children, ...params }, ref) => {
+  const { open, ...props } = useDropzone(params)
+
+  useEffect(() => {
+    if (typeof ref === 'function') {
+      ref({ open })
+    } else if (typeof ref === 'object' && ref !== null) {
+      ref.current = { open }
+    }
+
+    return () => {
+      if (typeof ref === 'function') {
+        ref(null)
+      } else if (typeof ref === 'object' && ref !== null) {
+        ref.current = null
+      }
+    }
+  })
+
   // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
-  return <Fragment>{children(props)}</Fragment>
-}
+  return <Fragment>{children({ ...props, open })}</Fragment>
+})
 
+Dropzone.displayName = 'Dropzone'
 Dropzone.propTypes = {
@@ -47,0 +66,0 @@ /**

src/index.spec.js

@@ -307,2 +307,57 @@ /* eslint react/prop-types: 0 */
 
+    test('<Dropzone> exposes and sets the ref if using a ref object', () => {
+      const dropzoneRef = createRef()
+      const onClickSpy = jest.spyOn(HTMLInputElement.prototype, 'click')
+
+      const { rerender } = render(
+        <Dropzone ref={dropzoneRef}>
+          {({ getRootProps, getInputProps, isFocused }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isFocused && <div id="focus" />}
+            </div>
+          )}
+        </Dropzone>
+      )
+
+      expect(dropzoneRef.current).not.toBeNull()
+      expect(typeof dropzoneRef.current.open).toEqual('function')
+
+      dropzoneRef.current.open()
+
+      expect(onClickSpy).toHaveBeenCalled()
+
+      rerender(null)
+
+      expect(dropzoneRef.current).toBeNull()
+    })
+
+    test('<Dropzone> exposes and sets the ref if using a ref fn', () => {
+      let dropzoneRef
+      const setRef = ref => (dropzoneRef = ref)
+      const onClickSpy = jest.spyOn(HTMLInputElement.prototype, 'click')
+
+      const { rerender } = render(
+        <Dropzone ref={setRef}>
+          {({ getRootProps, getInputProps, isFocused }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isFocused && <div id="focus" />}
+            </div>
+          )}
+        </Dropzone>
+      )
+
+      expect(dropzoneRef).not.toBeNull()
+      expect(typeof dropzoneRef.open).toEqual('function')
+
+      dropzoneRef.open()
+
+      expect(onClickSpy).toHaveBeenCalled()
+
+      rerender(null)
+
+      expect(dropzoneRef).toBeNull()
+    })
+
     it('sets {isFocused} to false if {disabled} is true', () => {
@@ -309,0 +364,0 @@ const { container, rerender } = render(

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

310380

increased by1.76%

Lines of code

4342

increased by1.97%

Number of lines in readme file

354

increased by5.99%

No dependency changes