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
|
@@ -1,22 +1,17 @@
|
|
|
1
|
-
export default function getDataTransferFiles(event
|
|
2
|
-
let dataTransferItemsList = []
|
|
1
|
+
export default function getDataTransferFiles(event) {
|
|
2
|
+
let dataTransferItemsList = []
|
|
3
3
|
if (event.dataTransfer) {
|
|
4
|
-
const dt = event.dataTransfer
|
|
4
|
+
const dt = event.dataTransfer
|
|
5
5
|
if (dt.files && dt.files.length) {
|
|
6
|
-
dataTransferItemsList = dt.files
|
|
6
|
+
dataTransferItemsList = dt.files
|
|
7
7
|
} else if (dt.items && dt.items.length) {
|
|
8
8
|
// During the drag even the dataTransfer.files is null
|
|
9
9
|
// but Chrome implements some drag store, which is accesible via dataTransfer.items
|
|
10
|
-
dataTransferItemsList = dt.items
|
|
10
|
+
dataTransferItemsList = dt.items
|
|
11
11
|
}
|
|
12
12
|
} else if (event.target && event.target.files) {
|
|
13
|
-
dataTransferItemsList = event.target.files
|
|
13
|
+
dataTransferItemsList = event.target.files
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
if (dataTransferItemsList.length > 0) {
|
|
17
|
-
dataTransferItemsList = isMultipleAllowed ? dataTransferItemsList : [dataTransferItemsList[0]];
|
|
18
|
-
}
|
|
19
|
-
|
|
20
15
|
// Convert from DataTransferItemsList to the native Array
|
|
21
|
-
return Array.prototype.slice.call(dataTransferItemsList)
|
|
16
|
+
return Array.prototype.slice.call(dataTransferItemsList)
|
|
22
17
|
}
|
|
@@ -1,26 +1,29 @@
|
|
|
1
|
-
import getDataTransferFiles from './getDataTransferItems'
|
|
1
|
+
import getDataTransferFiles from './getDataTransferItems'
|
|
2
2
|
|
|
3
|
-
const files = [
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
3
|
+
const files = [
|
|
4
|
+
{
|
|
5
|
+
name: 'file1.pdf',
|
|
6
|
+
size: 1111,
|
|
7
|
+
type: 'application/pdf'
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
name: 'cats.gif',
|
|
11
|
+
size: 1234,
|
|
12
|
+
type: 'image/gif'
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: 'dogs.jpg',
|
|
16
|
+
size: 2345,
|
|
17
|
+
type: 'image/jpeg'
|
|
18
|
+
}
|
|
19
|
+
]
|
|
16
20
|
|
|
17
21
|
describe('getDataTransferFiles', () => {
|
|
18
|
-
|
|
19
22
|
it('should return an array', () => {
|
|
20
|
-
const res = getDataTransferFiles({})
|
|
21
|
-
expect(res).toBeInstanceOf(Array)
|
|
22
|
-
expect(res).toHaveLength(0)
|
|
23
|
-
})
|
|
23
|
+
const res = getDataTransferFiles({})
|
|
24
|
+
expect(res).toBeInstanceOf(Array)
|
|
25
|
+
expect(res).toHaveLength(0)
|
|
26
|
+
})
|
|
24
27
|
|
|
25
28
|
it('should get dataTransfer before using target', () => {
|
|
26
29
|
const event = {
|
|
@@ -30,11 +33,11 @@ describe('getDataTransferFiles', () => {
|
|
|
30
33
|
dataTransfer: {
|
|
31
34
|
files
|
|
32
35
|
}
|
|
33
|
-
}
|
|
34
|
-
const res = getDataTransferFiles(event)
|
|
35
|
-
expect(res).toBeInstanceOf(Array)
|
|
36
|
-
expect(res).toHaveLength(3)
|
|
37
|
-
})
|
|
36
|
+
}
|
|
37
|
+
const res = getDataTransferFiles(event)
|
|
38
|
+
expect(res).toBeInstanceOf(Array)
|
|
39
|
+
expect(res).toHaveLength(3)
|
|
40
|
+
})
|
|
38
41
|
|
|
39
42
|
it('should use dataTransfer.items if files is not defined', () => {
|
|
40
43
|
const event = {
|
|
@@ -44,22 +47,22 @@ describe('getDataTransferFiles', () => {
|
|
|
44
47
|
dataTransfer: {
|
|
45
48
|
items: files
|
|
46
49
|
}
|
|
47
|
-
}
|
|
48
|
-
const res = getDataTransferFiles(event)
|
|
49
|
-
expect(res).toBeInstanceOf(Array)
|
|
50
|
-
expect(res).toHaveLength(3)
|
|
51
|
-
})
|
|
50
|
+
}
|
|
51
|
+
const res = getDataTransferFiles(event)
|
|
52
|
+
expect(res).toBeInstanceOf(Array)
|
|
53
|
+
expect(res).toHaveLength(3)
|
|
54
|
+
})
|
|
52
55
|
|
|
53
56
|
it('should use event.target if dataTransfer is not defined', () => {
|
|
54
57
|
const event = {
|
|
55
58
|
target: {
|
|
56
59
|
files
|
|
57
60
|
}
|
|
58
|
-
}
|
|
59
|
-
const res = getDataTransferFiles(event)
|
|
60
|
-
expect(res).toBeInstanceOf(Array)
|
|
61
|
-
expect(res).toHaveLength(3)
|
|
62
|
-
})
|
|
61
|
+
}
|
|
62
|
+
const res = getDataTransferFiles(event)
|
|
63
|
+
expect(res).toBeInstanceOf(Array)
|
|
64
|
+
expect(res).toHaveLength(3)
|
|
65
|
+
})
|
|
63
66
|
|
|
64
67
|
it('should prioritize dataTransfer.files over .files', () => {
|
|
65
68
|
const event = {
|
|
@@ -67,36 +70,20 @@ describe('getDataTransferFiles', () => {
|
|
|
67
70
|
files: [{}, {}],
|
|
68
71
|
items: [{}, {}, {}]
|
|
69
72
|
}
|
|
70
|
-
}
|
|
71
|
-
const res = getDataTransferFiles(event)
|
|
72
|
-
expect(res).toBeInstanceOf(Array)
|
|
73
|
-
expect(res).toHaveLength(2)
|
|
74
|
-
})
|
|
75
|
-
|
|
76
|
-
it('should return first file if isMultipleAllowed is false', () => {
|
|
77
|
-
const event = {
|
|
78
|
-
target: {
|
|
79
|
-
files
|
|
80
|
-
},
|
|
81
|
-
dataTransfer: {
|
|
82
|
-
files
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
const res = getDataTransferFiles(event, false);
|
|
86
|
-
expect(res).toHaveLength(1);
|
|
87
|
-
expect(res[0].name).toEqual(files[0].name);
|
|
88
|
-
});
|
|
73
|
+
}
|
|
74
|
+
const res = getDataTransferFiles(event)
|
|
75
|
+
expect(res).toBeInstanceOf(Array)
|
|
76
|
+
expect(res).toHaveLength(2)
|
|
77
|
+
})
|
|
89
78
|
|
|
90
79
|
it('should not mutate data', () => {
|
|
91
80
|
const event = {
|
|
92
81
|
dataTransfer: {
|
|
93
82
|
files
|
|
94
83
|
}
|
|
95
|
-
}
|
|
96
|
-
expect(Object.keys(files[2])).toHaveLength(3)
|
|
97
|
-
getDataTransferFiles(event, true)
|
|
98
|
-
expect(Object.keys(files[2])).toHaveLength(3)
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
});
|
|
84
|
+
}
|
|
85
|
+
expect(Object.keys(files[2])).toHaveLength(3)
|
|
86
|
+
getDataTransferFiles(event, true)
|
|
87
|
+
expect(Object.keys(files[2])).toHaveLength(3)
|
|
88
|
+
})
|
|
89
|
+
})
|