react-dropzone - npm Package Compare versions

Comparing version 10.1.10 to 10.2.0

dist/es/index.js

@@ -23,4 +23,2 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
-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; }
@@ -31,3 +29,3 @@
 /* eslint prefer-template: 0 */
-import React, { forwardRef, Fragment, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -59,21 +57,7 @@ import { fromEvent } from 'file-selector';
 
-  useEffect(function () {
-    if (typeof ref === 'function') {
-      ref({
-        open: open
-      });
-    } else if (_typeof(ref) === 'object' && ref !== null) {
-      ref.current = {
-        open: open
-      };
-    }
-
-    return function () {
-      if (typeof ref === 'function') {
-        ref(null);
-      } else if (_typeof(ref) === 'object' && ref !== null) {
-        ref.current = null;
-      }
+  useImperativeHandle(ref, function () {
+    return {
+      open: open
     };
-  }, [ref]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
+  }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
 
@@ -434,3 +418,3 @@ return React.createElement(Fragment, null, children(_objectSpread({}, props, {
 
-  var openFileDialog = function openFileDialog() {
+  var openFileDialog = useCallback(function () {
     if (inputRef.current) {
@@ -443,5 +427,4 @@ dispatch({
     }
-  }; // Update file dialog active state when the window is focused on
+  }, [dispatch]); // Update file dialog active state when the window is focused on
 
-
   var onWindowFocus = function onWindowFocus() {
@@ -448,0 +431,0 @@ // Execute the timeout only if the file dialog is opened in the browser

package.json

@@ -93,24 +93,25 @@ {
   "dependencies": {
-    "attr-accept": "^1.1.3",
-    "file-selector": "^0.1.11",
+    "attr-accept": "^2.0.0",
+    "file-selector": "^0.1.12",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
     "@babel/plugin-external-helpers": "^7.2.0",
-    "@babel/plugin-proposal-export-default-from": "^7.2.0",
+    "@babel/plugin-proposal-export-default-from": "^7.5.2",
     "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.3.2",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
-    "@babel/plugin-proposal-do-expressions": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
-    "@commitlint/cli": "^7.0.0",
-    "@commitlint/config-angular": "^7.0.1",
-    "@commitlint/prompt": "^7.0.0",
-    "@commitlint/prompt-cli": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.5.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
+    "@babel/plugin-proposal-do-expressions": "^7.6.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
+    "@babel/register": "^7.6.2",
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-angular": "^8.2.0",
+    "@commitlint/prompt": "^8.2.0",
+    "@commitlint/prompt-cli": "^8.2.0",
+    "@size-limit/preset-small-lib": "^2.1.6",
     "@testing-library/dom": "^6.5.0",
@@ -122,44 +123,41 @@ "@testing-library/jest-dom": "^4.1.0",
     "@types/react-dom": "^16.9.0",
-    "babel-eslint": "*",
-    "babel-jest": "^24.1.0",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "babel-plugin-dynamic-import-node": "^2.2.0",
-    "commitizen": "^2.10.1",
-    "cross-env": "^5.2.0",
-    "eslint": "4.x",
+    "babel-eslint": "10.x",
+    "babel-jest": "^24.9.0",
+    "babel-plugin-add-module-exports": "^1.0.2",
+    "babel-plugin-dynamic-import-node": "^2.3.0",
+    "commitizen": "^3.1.2",
+    "cross-env": "^6.0.3",
+    "eslint": "6.x",
     "eslint-config-okonet": "^7.0.2",
-    "eslint-config-prettier": "2.x",
-    "eslint-plugin-flowtype": "2.x",
+    "eslint-config-prettier": "6.x",
     "eslint-plugin-import": "2.x",
-    "eslint-plugin-jsx-a11y": "5.x",
-    "eslint-plugin-node": "5.x",
-    "eslint-plugin-prettier": "2.x",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-node": "10.x",
+    "eslint-plugin-prettier": "3.x",
     "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "^1.0.2",
-    "husky": "^0.14.3",
-    "imagemin-cli": "^3.0.0",
-    "imagemin-pngquant": "^6.0.0",
-    "jest": "^24.1.0",
-    "jest-dom": "^3.1.2",
-    "lint-staged": "^7.2.2",
-    "markdownlint-cli": "^0.13.0",
+    "eslint-plugin-react-hooks": "2.x",
+    "husky": "^3.0.8",
+    "imagemin-cli": "^5.0.0",
+    "imagemin-pngquant": "^8.0.0",
+    "jest": "^24.9.0",
+    "lint-staged": "^9.4.2",
+    "markdownlint-cli": "^0.18.0",
     "prettier": "*",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-styleguidist": "^9.0.1",
+    "react-styleguidist": "^9.1.16",
     "react-test-renderer": "^16.9.0",
-    "rimraf": "^2.5.2",
-    "rollup": "^1.3.0",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-uglify": "^6.0.2",
-    "size-limit": "^0.19.2",
-    "styled-components": "^4.1.2",
-    "webpack-blocks": "^2.0.0-rc",
+    "rimraf": "^3.0.0",
+    "rollup": "^1.23.1",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-uglify": "^6.0.3",
+    "styled-components": "^4.4.0",
+    "webpack-blocks": "^2.0.1",
     "sinon": "^3.2.1",
-    "style-loader": "^0.18.2",
-    "tslint": "^5.9.1",
+    "style-loader": "^1.0.0",
+    "tslint": "^5.20.0",
     "typescript": "^3.2.4",
-    "webpack": "^4.29.5"
+    "webpack": "^4.41.1"
   },
@@ -172,3 +170,3 @@ "typings": "typings/react-dropzone.d.ts",
   },
-  "version": "10.1.10",
+  "version": "10.2.0",
   "engines": {
@@ -175,0 +173,0 @@ "node": ">= 8"

README.md

@@ -6,3 +6,3 @@ ![react-dropzone logo](https://raw.githubusercontent.com/react-dropzone/react-dropzone/master/logo/logo.png)
 [![npm](https://img.shields.io/npm/v/react-dropzone.svg?style=flat-square)](https://www.npmjs.com/package/react-dropzone)
-[![Build Status](https://img.shields.io/travis/react-dropzone/react-dropzone/master.svg?style=flat-square)](https://travis-ci.org/react-dropzone/react-dropzone)
+![Build Status](https://github.com/react-dropzone/react-dropzone/workflows/Test/badge.svg)
 [![codecov](https://img.shields.io/codecov/c/gh/react-dropzone/react-dropzone/master.svg?style=flat-square)](https://codecov.io/gh/react-dropzone/react-dropzone)
@@ -85,16 +85,18 @@ [![Open Collective](https://img.shields.io/opencollective/backers/react-dropzone.svg?style=flat-square)](#backers)
 function MyDropzone() {
-  const onDrop = useCallback(acceptedFiles => {
-    const reader = new FileReader()
+  const onDrop = useCallback((acceptedFiles) => {
+    acceptedFiles.forEach((file) => {
+      const reader = new FileReader()
 
-    reader.onabort = () => console.log('file reading was aborted')
-    reader.onerror = () => console.log('file reading has failed')
-    reader.onload = () => {
+      reader.onabort = () => console.log('file reading was aborted')
+      reader.onerror = () => console.log('file reading has failed')
+      reader.onload = () => {
       // Do whatever you want with the file contents
-      const binaryStr = reader.result
-      console.log(binaryStr)
-    }
-
-    acceptedFiles.forEach(file => reader.readAsArrayBuffer(file))
+        const binaryStr = reader.result
+        console.log(binaryStr)
+      }
+      reader.readAsArrayBuffer(file)
+    })
+    
   }, [])
-  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
+  const {getRootProps, getInputProps} = useDropzone({onDrop})
 
@@ -101,0 +103,0 @@ return (

src/index.js

@@ -7,2 +7,3 @@ /* eslint prefer-template: 0 */
   useEffect,
+  useImperativeHandle,
   useMemo,
@@ -42,18 +43,4 @@ useReducer,
 
-  useEffect(() => {
-    if (typeof ref === 'function') {
-      ref({ open })
-    } else if (typeof ref === 'object' && ref !== null) {
-      ref.current = { open }
-    }
+  useImperativeHandle(ref, () => ({ open }), [open])
 
-    return () => {
-      if (typeof ref === 'function') {
-        ref(null)
-      } else if (typeof ref === 'object' && ref !== null) {
-        ref.current = null
-      }
-    }
-  }, [ref])
-
   // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
@@ -399,3 +386,3 @@ return <Fragment>{children({ ...props, open })}</Fragment>
   // Fn for opening the file dialog programmatically
-  const openFileDialog = () => {
+  const openFileDialog = useCallback(() => {
     if (inputRef.current) {
@@ -406,3 +393,3 @@ dispatch({ type: 'openDialog' })
     }
-  }
+  }, [dispatch])
 
@@ -409,0 +396,0 @@ // Update file dialog active state when the window is focused on

testSetup.js

 // https://www.npmjs.com/package/jest-dom
-require('jest-dom/extend-expect')
+require('@testing-library/jest-dom/extend-expect')
 
@@ -4,0 +4,0 @@ // TODO: Ignore warnings about act(), it refers to having async side effects updating the state;

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

63

decreased by-3.08%

Number of lines in readme file

380

increased by0.53%

Worsened metrics

Total package byte prevSize

309113

decreased by-8.22%

Number of package files

42

decreased by-2.33%

Lines of code

4842

decreased by-2.69%

Dependency changes

• + Addedattr-accept@2.2.5(transitive)

• - Removedattr-accept@1.1.3(transitive)

• - Removedcore-js@2.6.12(transitive)

• Updatedattr-accept@^2.0.0

• Updatedfile-selector@^0.1.12