react-dropzone 3.13.0 → 3.13.4
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/.eslintrc +3 -54
- package/.travis.yml +2 -7
- package/README.md +12 -78
- package/commitlint.config.js +1 -0
- package/dist/index.js +94 -71
- package/dist/index.js.map +1 -1
- package/examples/.eslintrc +3 -0
- package/examples/Accept/Readme.md +63 -11
- package/examples/Basic/Readme.md +9 -12
- package/examples/File Dialog/Readme.md +16 -0
- package/examples/Fullscreen/Readme.md +19 -20
- package/examples/Styling/Readme.md +23 -0
- package/package.json +28 -30
- package/src/__snapshots__/index.spec.js.snap +5 -3
- package/src/getDataTransferItems.js +7 -12
- package/src/getDataTransferItems.spec.js +48 -61
- package/src/index.js +164 -142
- package/src/index.spec.js +604 -592
- package/styleguide.config.js +28 -5
- package/testSetup.js +3 -2
- package/wallaby.config.js +3 -9
- package/webpack.config.js +3 -6
- package/yarn.lock +1549 -1029
- package/examples/Accept/index.js +0 -38
- package/examples/Basic/index.js +0 -26
- package/examples/Fullscreen/index.js +0 -78
- package/examples/Readme.md +0 -1
package/examples/Accept/index.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export default class Accept extends React.Component {
|
|
4
|
-
state = {
|
|
5
|
-
accepted: [],
|
|
6
|
-
rejected: []
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
render() {
|
|
10
|
-
return (
|
|
11
|
-
<section>
|
|
12
|
-
<div className="dropzone">
|
|
13
|
-
<Dropzone
|
|
14
|
-
accept="image/jpeg, image/png"
|
|
15
|
-
onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }}
|
|
16
|
-
>
|
|
17
|
-
<p>Try dropping some files here, or click to select files to upload.</p>
|
|
18
|
-
<p>Only *.jpeg and *.png images will be accepted</p>
|
|
19
|
-
</Dropzone>
|
|
20
|
-
</div>
|
|
21
|
-
<aside>
|
|
22
|
-
<h2>Accepted files</h2>
|
|
23
|
-
<ul>
|
|
24
|
-
{
|
|
25
|
-
this.state.accepted.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
|
|
26
|
-
}
|
|
27
|
-
</ul>
|
|
28
|
-
<h2>Rejected files</h2>
|
|
29
|
-
<ul>
|
|
30
|
-
{
|
|
31
|
-
this.state.rejected.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
|
|
32
|
-
}
|
|
33
|
-
</ul>
|
|
34
|
-
</aside>
|
|
35
|
-
</section>
|
|
36
|
-
);
|
|
37
|
-
}
|
|
38
|
-
}
|
package/examples/Basic/index.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export default class Basic extends React.Component {
|
|
4
|
-
|
|
5
|
-
state = { files: [] }
|
|
6
|
-
|
|
7
|
-
render() {
|
|
8
|
-
return (
|
|
9
|
-
<section>
|
|
10
|
-
<div className="dropzone">
|
|
11
|
-
<Dropzone onDrop={(files) => { this.setState({ files }); }}>
|
|
12
|
-
<p>Try dropping some files here, or click to select files to upload.</p>
|
|
13
|
-
</Dropzone>
|
|
14
|
-
</div>
|
|
15
|
-
<aside>
|
|
16
|
-
<h2>Dropped files</h2>
|
|
17
|
-
<ul>
|
|
18
|
-
{
|
|
19
|
-
this.state.files.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
|
|
20
|
-
}
|
|
21
|
-
</ul>
|
|
22
|
-
</aside>
|
|
23
|
-
</section>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export default class FullScreen extends React.Component {
|
|
4
|
-
state = {
|
|
5
|
-
accept: '',
|
|
6
|
-
files: [],
|
|
7
|
-
dropzoneActive: false
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
onDragEnter = () => {
|
|
11
|
-
this.setState({
|
|
12
|
-
dropzoneActive: true
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
onDragLeave = () => {
|
|
17
|
-
this.setState({
|
|
18
|
-
dropzoneActive: false
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
onDrop = (files) => {
|
|
23
|
-
this.setState({
|
|
24
|
-
files,
|
|
25
|
-
dropzoneActive: false
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
applyMimeTypes(event) {
|
|
30
|
-
this.setState({
|
|
31
|
-
accept: event.target.value
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
render = () => {
|
|
36
|
-
const { accept, files, dropzoneActive } = this.state;
|
|
37
|
-
const overlayStyle = {
|
|
38
|
-
position: 'absolute',
|
|
39
|
-
top: 0,
|
|
40
|
-
right: 0,
|
|
41
|
-
bottom: 0,
|
|
42
|
-
left: 0,
|
|
43
|
-
padding: '2.5em 0',
|
|
44
|
-
background: 'rgba(0,0,0,0.5)',
|
|
45
|
-
textAlign: 'center',
|
|
46
|
-
color: '#fff'
|
|
47
|
-
};
|
|
48
|
-
return (
|
|
49
|
-
<Dropzone
|
|
50
|
-
disableClick
|
|
51
|
-
style={{}}
|
|
52
|
-
accept={accept}
|
|
53
|
-
onDrop={this.onDrop}
|
|
54
|
-
onDragEnter={this.onDragEnter}
|
|
55
|
-
onDragLeave={this.onDragLeave}
|
|
56
|
-
>
|
|
57
|
-
{ dropzoneActive && <div style={overlayStyle}>Drop files...</div> }
|
|
58
|
-
<div>
|
|
59
|
-
<h1>My awesome app</h1>
|
|
60
|
-
<label htmlFor="mimetypes">Enter mime types you want to accept: </label>
|
|
61
|
-
<input
|
|
62
|
-
type="text"
|
|
63
|
-
id="mimetypes"
|
|
64
|
-
onChange={this.applyMimeTypes}
|
|
65
|
-
/>
|
|
66
|
-
|
|
67
|
-
<h2>Dropped files</h2>
|
|
68
|
-
<ul>
|
|
69
|
-
{
|
|
70
|
-
files.map(f => <li>{f.name} - {f.size} bytes</li>)
|
|
71
|
-
}
|
|
72
|
-
</ul>
|
|
73
|
-
|
|
74
|
-
</div>
|
|
75
|
-
</Dropzone>
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
}
|
package/examples/Readme.md
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|