react-dropzone 11.5.0 → 11.6.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 +153 -121
- 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/examples/previews/README.md +1 -1
- package/examples/styling/README.md +9 -9
- package/package.json +79 -75
- package/rollup.config.js +9 -6
- package/src/.eslintrc +7 -3
- package/src/index.js +172 -133
- package/src/index.spec.js +212 -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
|
+
```
|
|
@@ -22,7 +22,7 @@ const baseStyle = {
|
|
|
22
22
|
transition: 'border .24s ease-in-out'
|
|
23
23
|
};
|
|
24
24
|
|
|
25
|
-
const
|
|
25
|
+
const focusedStyle = {
|
|
26
26
|
borderColor: '#2196f3'
|
|
27
27
|
};
|
|
28
28
|
|
|
@@ -38,20 +38,20 @@ function StyledDropzone(props) {
|
|
|
38
38
|
const {
|
|
39
39
|
getRootProps,
|
|
40
40
|
getInputProps,
|
|
41
|
-
|
|
41
|
+
isFocused,
|
|
42
42
|
isDragAccept,
|
|
43
43
|
isDragReject
|
|
44
44
|
} = useDropzone({accept: 'image/*'});
|
|
45
45
|
|
|
46
46
|
const style = useMemo(() => ({
|
|
47
47
|
...baseStyle,
|
|
48
|
-
...(
|
|
48
|
+
...(isFocused ? focusedStyle : {}),
|
|
49
49
|
...(isDragAccept ? acceptStyle : {}),
|
|
50
50
|
...(isDragReject ? rejectStyle : {})
|
|
51
51
|
}), [
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
isFocused,
|
|
53
|
+
isDragAccept,
|
|
54
|
+
isDragReject
|
|
55
55
|
]);
|
|
56
56
|
|
|
57
57
|
return (
|
|
@@ -81,7 +81,7 @@ const getColor = (props) => {
|
|
|
81
81
|
if (props.isDragReject) {
|
|
82
82
|
return '#ff1744';
|
|
83
83
|
}
|
|
84
|
-
if (props.
|
|
84
|
+
if (props.isFocused) {
|
|
85
85
|
return '#2196f3';
|
|
86
86
|
}
|
|
87
87
|
return '#eeeeee';
|
|
@@ -107,14 +107,14 @@ function StyledDropzone(props) {
|
|
|
107
107
|
const {
|
|
108
108
|
getRootProps,
|
|
109
109
|
getInputProps,
|
|
110
|
-
|
|
110
|
+
isFocused,
|
|
111
111
|
isDragAccept,
|
|
112
112
|
isDragReject
|
|
113
113
|
} = useDropzone({accept: 'image/*'});
|
|
114
114
|
|
|
115
115
|
return (
|
|
116
116
|
<div className="container">
|
|
117
|
-
<Container {...getRootProps({
|
|
117
|
+
<Container {...getRootProps({isFocused, isDragAccept, isDragReject})}>
|
|
118
118
|
<input {...getInputProps()} />
|
|
119
119
|
<p>Drag 'n' drop some files here, or click to select files</p>
|
|
120
120
|
</Container>
|
package/package.json
CHANGED
|
@@ -3,20 +3,23 @@
|
|
|
3
3
|
"description": "Simple HTML5 drag-drop zone with React.js",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/es/index.js",
|
|
6
|
+
"sideEffects": false,
|
|
6
7
|
"scripts": {
|
|
7
|
-
"
|
|
8
|
+
"cz": "git-cz",
|
|
8
9
|
"clean": "rimraf ./dist",
|
|
9
|
-
"build": "
|
|
10
|
+
"build": "yarn clean && yarn build:umd && yarn build:es",
|
|
10
11
|
"build:umd": "cross-env NODE_ENV=es rollup -c",
|
|
11
12
|
"build:es": "cross-env BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore '**/*.spec.js'",
|
|
12
13
|
"start": "styleguidist server",
|
|
13
14
|
"styleguide": "styleguidist build",
|
|
14
|
-
"test": "cross-env NODE_ENV=test
|
|
15
|
+
"test": "cross-env NODE_ENV=test yarn eslint:src && jest --coverage && yarn typescript",
|
|
15
16
|
"test:watch": "cross-env NODE_ENV=test jest --watch",
|
|
16
17
|
"eslint:src": "eslint .",
|
|
17
18
|
"commitmsg": "commitlint -e",
|
|
18
|
-
"
|
|
19
|
-
"
|
|
19
|
+
"prepublish": "yarn build && yarn size",
|
|
20
|
+
"_postinstall": "husky install",
|
|
21
|
+
"prepublishOnly": "pinst --disable",
|
|
22
|
+
"postpublish": "pinst --enable",
|
|
20
23
|
"logo": "cd logo && sketchtool export artboards logo.sketch",
|
|
21
24
|
"imagemin": "imagemin --out-dir=logo --plugin=pngquant --plugin=svgo",
|
|
22
25
|
"size": "size-limit",
|
|
@@ -35,18 +38,22 @@
|
|
|
35
38
|
],
|
|
36
39
|
"lint-staged": {
|
|
37
40
|
"*.js": [
|
|
38
|
-
"eslint --fix"
|
|
39
|
-
"git add"
|
|
41
|
+
"eslint --fix"
|
|
40
42
|
],
|
|
41
43
|
"*.ts": [
|
|
42
|
-
"
|
|
44
|
+
"eslint ."
|
|
43
45
|
],
|
|
44
46
|
"*.{svg,png}": [
|
|
45
|
-
"imagemin"
|
|
46
|
-
"git add"
|
|
47
|
+
"imagemin"
|
|
47
48
|
]
|
|
48
49
|
},
|
|
50
|
+
"config": {
|
|
51
|
+
"commitizen": {
|
|
52
|
+
"path": "@commitlint/prompt"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
49
55
|
"jest": {
|
|
56
|
+
"testEnvironment": "jsdom",
|
|
50
57
|
"clearMocks": true,
|
|
51
58
|
"setupFilesAfterEnv": [
|
|
52
59
|
"<rootDir>/testSetup.js"
|
|
@@ -90,85 +97,82 @@
|
|
|
90
97
|
"react": ">= 16.8"
|
|
91
98
|
},
|
|
92
99
|
"dependencies": {
|
|
93
|
-
"attr-accept": "^2.2.
|
|
94
|
-
"file-selector": "^0.
|
|
95
|
-
"prop-types": "^15.
|
|
100
|
+
"attr-accept": "^2.2.2",
|
|
101
|
+
"file-selector": "^0.4.0",
|
|
102
|
+
"prop-types": "^15.8.1"
|
|
96
103
|
},
|
|
97
104
|
"devDependencies": {
|
|
98
|
-
"@babel/cli": "^7.
|
|
99
|
-
"@babel/core": "^7.
|
|
100
|
-
"@babel/
|
|
101
|
-
"@babel/plugin-
|
|
102
|
-
"@babel/plugin-proposal-
|
|
103
|
-
"@babel/plugin-proposal-
|
|
104
|
-
"@babel/plugin-proposal-
|
|
105
|
-
"@babel/plugin-proposal-
|
|
106
|
-
"@babel/plugin-proposal-
|
|
107
|
-
"@babel/plugin-
|
|
108
|
-
"@babel/
|
|
109
|
-
"@babel/preset-
|
|
110
|
-
"@babel/
|
|
111
|
-
"@
|
|
112
|
-
"@commitlint/
|
|
113
|
-
"@commitlint/
|
|
114
|
-
"@commitlint/prompt
|
|
115
|
-
"@
|
|
116
|
-
"@
|
|
117
|
-
"@
|
|
118
|
-
"@
|
|
119
|
-
"@
|
|
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",
|
|
120
133
|
"@types/react": "^17.0.0",
|
|
121
134
|
"@types/react-dom": "^17.0.0",
|
|
122
|
-
"
|
|
123
|
-
"
|
|
124
|
-
"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",
|
|
125
139
|
"babel-plugin-dynamic-import-node": "^2.3.3",
|
|
126
|
-
"commitizen": "^4.2.
|
|
127
|
-
"cross-env": "^7.0.
|
|
128
|
-
"eslint": "
|
|
129
|
-
"eslint-config-
|
|
130
|
-
"eslint-
|
|
131
|
-
"eslint-plugin-
|
|
132
|
-
"eslint-plugin-
|
|
133
|
-
"eslint-plugin-
|
|
134
|
-
"eslint-plugin-
|
|
135
|
-
"eslint-plugin-react": "
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
"imagemin-
|
|
139
|
-
"
|
|
140
|
-
"
|
|
141
|
-
"
|
|
142
|
-
"
|
|
143
|
-
"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",
|
|
144
158
|
"react": "^17.0.0",
|
|
145
159
|
"react-dom": "^17.0.0",
|
|
146
|
-
"react-styleguidist": "^11.0
|
|
160
|
+
"react-styleguidist": "^11.2.0",
|
|
147
161
|
"react-test-renderer": "^17.0.0",
|
|
148
162
|
"rimraf": "^3.0.2",
|
|
149
|
-
"rollup": "^2.
|
|
150
|
-
"rollup-plugin-
|
|
151
|
-
"
|
|
152
|
-
"
|
|
153
|
-
"
|
|
154
|
-
"sinon": "^9.0.3",
|
|
155
|
-
"size-limit": "^4.5.7",
|
|
156
|
-
"style-loader": "^1.2.1",
|
|
157
|
-
"styled-components": "^5.2.0",
|
|
158
|
-
"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",
|
|
159
168
|
"typescript": "^4.0.2",
|
|
160
|
-
"webpack": "^
|
|
169
|
+
"webpack": "^5.67.0",
|
|
161
170
|
"webpack-blocks": "^2.1.0"
|
|
162
171
|
},
|
|
163
172
|
"typings": "typings/react-dropzone.d.ts",
|
|
164
|
-
"
|
|
165
|
-
"commitizen": {
|
|
166
|
-
"path": "@commitlint/prompt"
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
"version": "11.5.0",
|
|
173
|
+
"version": "11.6.0",
|
|
170
174
|
"engines": {
|
|
171
|
-
"node": ">= 10"
|
|
175
|
+
"node": ">= 10.13"
|
|
172
176
|
},
|
|
173
177
|
"browserslist": [
|
|
174
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
|
}
|