react-dropzone 11.5.1 → 11.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintignore +1 -3
- package/.eslintrc +1 -1
- package/.husky/commit-msg +5 -0
- package/.husky/pre-commit +5 -0
- package/.nvmrc +1 -1
- package/README.md +77 -29
- package/dist/es/index.js +157 -123
- package/dist/es/utils/index.js +39 -3
- package/dist/index.js +16 -2
- package/examples/events/README.md +3 -1
- package/examples/pintura/README.md +144 -0
- package/package.json +78 -75
- package/rollup.config.js +9 -6
- package/src/.eslintrc +7 -3
- package/src/__snapshots__/index.spec.js.snap +1 -1
- package/src/index.js +174 -133
- package/src/index.spec.js +240 -0
- package/src/utils/index.js +38 -4
- package/src/utils/index.spec.js +92 -29
- package/styleguide.config.js +2 -4
- package/typings/.eslintrc +28 -0
- package/examples/doka/README.md +0 -140
- package/tslint.json +0 -101
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
If you'd like to integrate the dropzone with the [Pintura](https://pqina.nl/pintura/?ref=react-dropzone) image editor, you just need to pass either of the selected images to the `openDefaultEditor()` method exported by Pintura:
|
|
2
|
+
|
|
3
|
+
```jsx static
|
|
4
|
+
import React, { useState, useEffect } from 'react';
|
|
5
|
+
|
|
6
|
+
// React Dropzone
|
|
7
|
+
import { useDropzone } from 'react-dropzone';
|
|
8
|
+
|
|
9
|
+
// Pintura Image Editor
|
|
10
|
+
import 'pintura/pintura.css';
|
|
11
|
+
import { openDefaultEditor } from 'pintura';
|
|
12
|
+
|
|
13
|
+
// Based on the default React Dropzone image thumbnail example
|
|
14
|
+
// The `thumbButton` style positions the edit button in the bottom right corner of the thumbnail
|
|
15
|
+
const thumbsContainer = {
|
|
16
|
+
display: 'flex',
|
|
17
|
+
flexDirection: 'row',
|
|
18
|
+
flexWrap: 'wrap',
|
|
19
|
+
marginTop: 16,
|
|
20
|
+
padding: 20,
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const thumb = {
|
|
24
|
+
position: 'relative',
|
|
25
|
+
display: 'inline-flex',
|
|
26
|
+
borderRadius: 2,
|
|
27
|
+
border: '1px solid #eaeaea',
|
|
28
|
+
marginBottom: 8,
|
|
29
|
+
marginRight: 8,
|
|
30
|
+
width: 100,
|
|
31
|
+
height: 100,
|
|
32
|
+
padding: 4,
|
|
33
|
+
boxSizing: 'border-box',
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const thumbInner = {
|
|
37
|
+
display: 'flex',
|
|
38
|
+
minWidth: 0,
|
|
39
|
+
overflow: 'hidden',
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const img = {
|
|
43
|
+
display: 'block',
|
|
44
|
+
width: 'auto',
|
|
45
|
+
height: '100%',
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const thumbButton = {
|
|
49
|
+
position: 'absolute',
|
|
50
|
+
right: 10,
|
|
51
|
+
bottom: 10,
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// This function is called when the user taps the edit button.
|
|
55
|
+
// It opens the editor and returns the modified file when done
|
|
56
|
+
const editImage = (image, done) => {
|
|
57
|
+
const imageFile = image.pintura ? image.pintura.file : image;
|
|
58
|
+
const imageState = image.pintura ? image.pintura.data : {};
|
|
59
|
+
|
|
60
|
+
const editor = openDefaultEditor({
|
|
61
|
+
src: imageFile,
|
|
62
|
+
imageState,
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
editor.on('close', () => {
|
|
66
|
+
// the user cancelled editing the image
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
editor.on('process', ({ dest, imageState }) => {
|
|
70
|
+
Object.assign(dest, {
|
|
71
|
+
pintura: { file: imageFile, data: imageState },
|
|
72
|
+
});
|
|
73
|
+
done(dest);
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
const [files, setFiles] = useState([]);
|
|
79
|
+
const { getRootProps, getInputProps } = useDropzone({
|
|
80
|
+
accept: 'image/*',
|
|
81
|
+
onDrop: (acceptedFiles) => {
|
|
82
|
+
setFiles(
|
|
83
|
+
acceptedFiles.map((file) =>
|
|
84
|
+
Object.assign(file, {
|
|
85
|
+
preview: URL.createObjectURL(file),
|
|
86
|
+
})
|
|
87
|
+
)
|
|
88
|
+
);
|
|
89
|
+
},
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
const thumbs = files.map((file, index) => (
|
|
93
|
+
<div style={thumb} key={file.name}>
|
|
94
|
+
<div style={thumbInner}>
|
|
95
|
+
<img src={file.preview} style={img} alt="" />
|
|
96
|
+
</div>
|
|
97
|
+
<button
|
|
98
|
+
style={thumbButton}
|
|
99
|
+
onClick={() =>
|
|
100
|
+
editImage(file, (output) => {
|
|
101
|
+
const updatedFiles = [...files];
|
|
102
|
+
|
|
103
|
+
// replace original image with new image
|
|
104
|
+
updatedFiles[index] = output;
|
|
105
|
+
|
|
106
|
+
// revoke preview URL for old image
|
|
107
|
+
if (file.preview) URL.revokeObjectURL(file.preview);
|
|
108
|
+
|
|
109
|
+
// set new preview URL
|
|
110
|
+
Object.assign(output, {
|
|
111
|
+
preview: URL.createObjectURL(output),
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
// update view
|
|
115
|
+
setFiles(updatedFiles);
|
|
116
|
+
})
|
|
117
|
+
}
|
|
118
|
+
>
|
|
119
|
+
Edit
|
|
120
|
+
</button>
|
|
121
|
+
</div>
|
|
122
|
+
));
|
|
123
|
+
|
|
124
|
+
useEffect(
|
|
125
|
+
() => () => {
|
|
126
|
+
// Make sure to revoke the Object URL to avoid memory leaks
|
|
127
|
+
files.forEach((file) => URL.revokeObjectURL(file.preview));
|
|
128
|
+
},
|
|
129
|
+
[files]
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
return (
|
|
133
|
+
<section className="container">
|
|
134
|
+
<div {...getRootProps({ className: 'dropzone' })}>
|
|
135
|
+
<input {...getInputProps()} />
|
|
136
|
+
<p>Drag 'n' drop some files here, or click to select files</p>
|
|
137
|
+
</div>
|
|
138
|
+
<aside style={thumbsContainer}>{thumbs}</aside>
|
|
139
|
+
</section>
|
|
140
|
+
);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
export default App;
|
|
144
|
+
```
|
package/package.json
CHANGED
|
@@ -5,19 +5,21 @@
|
|
|
5
5
|
"module": "dist/es/index.js",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"scripts": {
|
|
8
|
-
"
|
|
8
|
+
"cz": "git-cz",
|
|
9
9
|
"clean": "rimraf ./dist",
|
|
10
|
-
"build": "
|
|
10
|
+
"build": "yarn clean && yarn build:umd && yarn build:es",
|
|
11
11
|
"build:umd": "cross-env NODE_ENV=es rollup -c",
|
|
12
12
|
"build:es": "cross-env BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore '**/*.spec.js'",
|
|
13
13
|
"start": "styleguidist server",
|
|
14
14
|
"styleguide": "styleguidist build",
|
|
15
|
-
"test": "cross-env NODE_ENV=test
|
|
15
|
+
"test": "cross-env NODE_ENV=test yarn eslint:src && jest --coverage && yarn typescript",
|
|
16
16
|
"test:watch": "cross-env NODE_ENV=test jest --watch",
|
|
17
17
|
"eslint:src": "eslint .",
|
|
18
18
|
"commitmsg": "commitlint -e",
|
|
19
|
-
"
|
|
20
|
-
"
|
|
19
|
+
"prepublish": "yarn build && yarn size",
|
|
20
|
+
"_postinstall": "husky install",
|
|
21
|
+
"prepublishOnly": "pinst --disable",
|
|
22
|
+
"postpublish": "pinst --enable",
|
|
21
23
|
"logo": "cd logo && sketchtool export artboards logo.sketch",
|
|
22
24
|
"imagemin": "imagemin --out-dir=logo --plugin=pngquant --plugin=svgo",
|
|
23
25
|
"size": "size-limit",
|
|
@@ -36,18 +38,22 @@
|
|
|
36
38
|
],
|
|
37
39
|
"lint-staged": {
|
|
38
40
|
"*.js": [
|
|
39
|
-
"eslint --fix"
|
|
40
|
-
"git add"
|
|
41
|
+
"eslint --fix"
|
|
41
42
|
],
|
|
42
43
|
"*.ts": [
|
|
43
|
-
"
|
|
44
|
+
"eslint ."
|
|
44
45
|
],
|
|
45
46
|
"*.{svg,png}": [
|
|
46
|
-
"imagemin"
|
|
47
|
-
"git add"
|
|
47
|
+
"imagemin"
|
|
48
48
|
]
|
|
49
49
|
},
|
|
50
|
+
"config": {
|
|
51
|
+
"commitizen": {
|
|
52
|
+
"path": "@commitlint/prompt"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
50
55
|
"jest": {
|
|
56
|
+
"testEnvironment": "jsdom",
|
|
51
57
|
"clearMocks": true,
|
|
52
58
|
"setupFilesAfterEnv": [
|
|
53
59
|
"<rootDir>/testSetup.js"
|
|
@@ -91,85 +97,82 @@
|
|
|
91
97
|
"react": ">= 16.8"
|
|
92
98
|
},
|
|
93
99
|
"dependencies": {
|
|
94
|
-
"attr-accept": "^2.2.
|
|
95
|
-
"file-selector": "^0.
|
|
96
|
-
"prop-types": "^15.
|
|
100
|
+
"attr-accept": "^2.2.2",
|
|
101
|
+
"file-selector": "^0.4.0",
|
|
102
|
+
"prop-types": "^15.8.1"
|
|
97
103
|
},
|
|
98
104
|
"devDependencies": {
|
|
99
|
-
"@babel/cli": "^7.
|
|
100
|
-
"@babel/core": "^7.
|
|
101
|
-
"@babel/
|
|
102
|
-
"@babel/plugin-
|
|
103
|
-
"@babel/plugin-proposal-
|
|
104
|
-
"@babel/plugin-proposal-
|
|
105
|
-
"@babel/plugin-proposal-
|
|
106
|
-
"@babel/plugin-proposal-
|
|
107
|
-
"@babel/plugin-proposal-
|
|
108
|
-
"@babel/plugin-
|
|
109
|
-
"@babel/
|
|
110
|
-
"@babel/preset-
|
|
111
|
-
"@babel/
|
|
112
|
-
"@
|
|
113
|
-
"@commitlint/
|
|
114
|
-
"@commitlint/
|
|
115
|
-
"@commitlint/prompt
|
|
116
|
-
"@
|
|
117
|
-
"@
|
|
118
|
-
"@
|
|
119
|
-
"@
|
|
120
|
-
"@
|
|
105
|
+
"@babel/cli": "^7.16.8",
|
|
106
|
+
"@babel/core": "^7.16.12",
|
|
107
|
+
"@babel/eslint-parser": "^7.16.5",
|
|
108
|
+
"@babel/plugin-external-helpers": "^7.16.7",
|
|
109
|
+
"@babel/plugin-proposal-do-expressions": "^7.16.7",
|
|
110
|
+
"@babel/plugin-proposal-export-default-from": "^7.16.7",
|
|
111
|
+
"@babel/plugin-proposal-logical-assignment-operators": "^7.16.7",
|
|
112
|
+
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
|
|
113
|
+
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
|
|
114
|
+
"@babel/plugin-proposal-pipeline-operator": "^7.16.7",
|
|
115
|
+
"@babel/plugin-transform-runtime": "^7.16.10",
|
|
116
|
+
"@babel/preset-env": "^7.16.11",
|
|
117
|
+
"@babel/preset-react": "^7.16.7",
|
|
118
|
+
"@babel/register": "^7.16.9",
|
|
119
|
+
"@commitlint/cli": "^16.1.0",
|
|
120
|
+
"@commitlint/config-angular": "^16.0.0",
|
|
121
|
+
"@commitlint/prompt": "^16.1.0",
|
|
122
|
+
"@commitlint/prompt-cli": "^16.1.0",
|
|
123
|
+
"@rollup/plugin-babel": "^5.3.0",
|
|
124
|
+
"@rollup/plugin-commonjs": "^21.0.1",
|
|
125
|
+
"@rollup/plugin-node-resolve": "^13.1.3",
|
|
126
|
+
"@size-limit/preset-small-lib": "^7.0.5",
|
|
127
|
+
"@size-limit/webpack": "^7.0.5",
|
|
128
|
+
"@size-limit/webpack-why": "^7.0.5",
|
|
129
|
+
"@testing-library/dom": "^8.11.3",
|
|
130
|
+
"@testing-library/jest-dom": "^5.16.1",
|
|
131
|
+
"@testing-library/react": "^12.1.2",
|
|
132
|
+
"@testing-library/react-hooks": "^7.0.2",
|
|
121
133
|
"@types/react": "^17.0.0",
|
|
122
134
|
"@types/react-dom": "^17.0.0",
|
|
123
|
-
"
|
|
124
|
-
"
|
|
125
|
-
"babel-
|
|
135
|
+
"@typescript-eslint/eslint-plugin": "^5.10.1",
|
|
136
|
+
"@typescript-eslint/parser": "^5.10.1",
|
|
137
|
+
"babel-jest": "^27.4.6",
|
|
138
|
+
"babel-plugin-add-module-exports": "^1.0.4",
|
|
126
139
|
"babel-plugin-dynamic-import-node": "^2.3.3",
|
|
127
|
-
"commitizen": "^4.2.
|
|
128
|
-
"cross-env": "^7.0.
|
|
129
|
-
"eslint": "
|
|
130
|
-
"eslint-config-
|
|
131
|
-
"eslint-
|
|
132
|
-
"eslint-plugin-
|
|
133
|
-
"eslint-plugin-
|
|
134
|
-
"eslint-plugin-
|
|
135
|
-
"eslint-plugin-
|
|
136
|
-
"eslint-plugin-react": "
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
"imagemin-
|
|
140
|
-
"
|
|
141
|
-
"
|
|
142
|
-
"
|
|
143
|
-
"
|
|
144
|
-
"prettier": "
|
|
140
|
+
"commitizen": "^4.2.4",
|
|
141
|
+
"cross-env": "^7.0.3",
|
|
142
|
+
"eslint": "^8.8.0",
|
|
143
|
+
"eslint-config-prettier": "^8.3.0",
|
|
144
|
+
"eslint-plugin-import": "^2.25.4",
|
|
145
|
+
"eslint-plugin-jsx-a11y": "^6.5.1",
|
|
146
|
+
"eslint-plugin-node": "^11.1.0",
|
|
147
|
+
"eslint-plugin-prettier": "^4.0.0",
|
|
148
|
+
"eslint-plugin-react": "^7.28.0",
|
|
149
|
+
"eslint-plugin-react-hooks": "^4.3.0",
|
|
150
|
+
"husky": "^7.0.4",
|
|
151
|
+
"imagemin-cli": "^7.0.0",
|
|
152
|
+
"imagemin-pngquant": "^9.0.2",
|
|
153
|
+
"jest": "^27.4.7",
|
|
154
|
+
"lint-staged": "^12.3.2",
|
|
155
|
+
"markdownlint-cli": "^0.30.0",
|
|
156
|
+
"pinst": "^2.1.6",
|
|
157
|
+
"prettier": "^2.5.1",
|
|
145
158
|
"react": "^17.0.0",
|
|
146
159
|
"react-dom": "^17.0.0",
|
|
147
|
-
"react-styleguidist": "^11.0
|
|
160
|
+
"react-styleguidist": "^11.2.0",
|
|
148
161
|
"react-test-renderer": "^17.0.0",
|
|
149
162
|
"rimraf": "^3.0.2",
|
|
150
|
-
"rollup": "^2.
|
|
151
|
-
"rollup-plugin-
|
|
152
|
-
"
|
|
153
|
-
"
|
|
154
|
-
"
|
|
155
|
-
"sinon": "^9.0.3",
|
|
156
|
-
"size-limit": "^4.5.7",
|
|
157
|
-
"style-loader": "^1.2.1",
|
|
158
|
-
"styled-components": "^5.2.0",
|
|
159
|
-
"tslint": "^6.1.3",
|
|
163
|
+
"rollup": "^2.66.1",
|
|
164
|
+
"rollup-plugin-terser": "^7.0.2",
|
|
165
|
+
"size-limit": "^7.0.5",
|
|
166
|
+
"style-loader": "^3.3.1",
|
|
167
|
+
"styled-components": "^5.3.3",
|
|
160
168
|
"typescript": "^4.0.2",
|
|
161
|
-
"webpack": "^
|
|
169
|
+
"webpack": "^5.67.0",
|
|
162
170
|
"webpack-blocks": "^2.1.0"
|
|
163
171
|
},
|
|
164
172
|
"typings": "typings/react-dropzone.d.ts",
|
|
165
|
-
"
|
|
166
|
-
"commitizen": {
|
|
167
|
-
"path": "@commitlint/prompt"
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
|
-
"version": "11.5.1",
|
|
173
|
+
"version": "11.7.0",
|
|
171
174
|
"engines": {
|
|
172
|
-
"node": ">= 10"
|
|
175
|
+
"node": ">= 10.13"
|
|
173
176
|
},
|
|
174
177
|
"browserslist": [
|
|
175
178
|
"defaults"
|
package/rollup.config.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const nodeResolve = require('rollup
|
|
2
|
-
const commonjs = require('rollup
|
|
3
|
-
const babel = require('rollup
|
|
4
|
-
const {
|
|
1
|
+
const { nodeResolve } = require('@rollup/plugin-node-resolve')
|
|
2
|
+
const commonjs = require('@rollup/plugin-commonjs')
|
|
3
|
+
const { babel } = require('@rollup/plugin-babel')
|
|
4
|
+
const { terser } = require('rollup-plugin-terser')
|
|
5
5
|
|
|
6
6
|
const umdGlobals = {
|
|
7
7
|
react: 'React',
|
|
@@ -23,8 +23,11 @@ module.exports = [
|
|
|
23
23
|
plugins: [
|
|
24
24
|
nodeResolve(),
|
|
25
25
|
commonjs({ include: '**/node_modules/**' }),
|
|
26
|
-
babel({
|
|
27
|
-
|
|
26
|
+
babel({
|
|
27
|
+
exclude: '**/node_modules/**',
|
|
28
|
+
babelHelpers: 'bundled',
|
|
29
|
+
}),
|
|
30
|
+
terser()
|
|
28
31
|
]
|
|
29
32
|
}
|
|
30
33
|
]
|
package/src/.eslintrc
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"root": true,
|
|
3
|
-
"parser": "babel-
|
|
3
|
+
"parser": "@babel/eslint-parser",
|
|
4
4
|
"parserOptions": {
|
|
5
5
|
"ecmaVersion": 2017,
|
|
6
6
|
"sourceType": "module"
|
|
@@ -23,12 +23,16 @@
|
|
|
23
23
|
"eslint:recommended",
|
|
24
24
|
"plugin:react/recommended",
|
|
25
25
|
"plugin:jsx-a11y/recommended",
|
|
26
|
-
"prettier"
|
|
27
|
-
"prettier/react"
|
|
26
|
+
"prettier"
|
|
28
27
|
],
|
|
29
28
|
"rules": {
|
|
30
29
|
"react-hooks/rules-of-hooks": 2,
|
|
31
30
|
"react/forbid-prop-types": 0,
|
|
32
31
|
"react/require-default-props": 0
|
|
32
|
+
},
|
|
33
|
+
"settings": {
|
|
34
|
+
"react": {
|
|
35
|
+
"version": "detect"
|
|
36
|
+
}
|
|
33
37
|
}
|
|
34
38
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
-
exports[`useDropzone() hook behavior renders the root and input nodes with the necessary props 1`] = `"<div tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"display: none;\\" autocomplete=\\"off\\" tabindex=\\"-1\\"></div>"`;
|
|
3
|
+
exports[`useDropzone() hook behavior renders the root and input nodes with the necessary props 1`] = `"<div role=\\"button\\" tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"display: none;\\" autocomplete=\\"off\\" tabindex=\\"-1\\"></div>"`;
|