@react-magma/dropzone 12.0.0 → 12.0.1
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.
|
@@ -31,8 +31,18 @@ declare const _default: {
|
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
33
|
export default _default;
|
|
34
|
-
export declare const Default:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
export declare const
|
|
38
|
-
|
|
34
|
+
export declare const Default: {
|
|
35
|
+
render: (args: DropzoneProps) => JSX.Element;
|
|
36
|
+
};
|
|
37
|
+
export declare const NoLimits: {
|
|
38
|
+
render: (args: DropzoneProps) => JSX.Element;
|
|
39
|
+
};
|
|
40
|
+
export declare const Image: {
|
|
41
|
+
render: (args: DropzoneProps) => JSX.Element;
|
|
42
|
+
};
|
|
43
|
+
export declare const Text: {
|
|
44
|
+
render: (args: DropzoneProps) => JSX.Element;
|
|
45
|
+
};
|
|
46
|
+
export declare const Csv: {
|
|
47
|
+
render: (args: DropzoneProps) => JSX.Element;
|
|
48
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-magma/dropzone",
|
|
3
|
-
"version": "12.0.
|
|
3
|
+
"version": "12.0.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/fileuploader.js",
|
|
6
6
|
"umd:main": "dist/fileuploader.umd.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"@emotion/styled": "^11.13.0",
|
|
28
28
|
"react": "^17.0.2",
|
|
29
29
|
"react-dom": "^17.0.2",
|
|
30
|
-
"react-magma-dom": "^4.10.
|
|
30
|
+
"react-magma-dom": "^4.10.1",
|
|
31
31
|
"react-magma-icons": "^3.2.0"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@emotion/styled": "^11.13.0",
|
|
36
36
|
"react": "^17.0.2",
|
|
37
37
|
"react-dom": "^17.0.2",
|
|
38
|
-
"react-magma-dom": "^4.10.
|
|
38
|
+
"react-magma-dom": "^4.10.1-next.0",
|
|
39
39
|
"react-magma-icons": "^3.2.0"
|
|
40
40
|
},
|
|
41
41
|
"engines": {
|
|
@@ -81,178 +81,188 @@ export default {
|
|
|
81
81
|
},
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
-
export const Default =
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
>
|
|
92
|
-
<Dropzone
|
|
93
|
-
{...args}
|
|
94
|
-
accept={['.png', '.jpg', '.svg']}
|
|
95
|
-
maxFiles={5}
|
|
96
|
-
maxSize={1024 * 1024}
|
|
97
|
-
onSendFile={onSendFile}
|
|
98
|
-
sendFiles
|
|
99
|
-
labelText="Upload files"
|
|
100
|
-
helperMessage="Only PNG, JPG, and SVG files with a max size of 1MB"
|
|
101
|
-
dropzoneOptions={{
|
|
102
|
-
onDropAccepted: files => {
|
|
103
|
-
// eslint-disable-next-line no-console
|
|
104
|
-
console.log('Accepted files:', files);
|
|
105
|
-
},
|
|
84
|
+
export const Default = {
|
|
85
|
+
render: (args: DropzoneProps) => {
|
|
86
|
+
return (
|
|
87
|
+
<div
|
|
88
|
+
style={{
|
|
89
|
+
background: args.isInverse ? magma.colors.primary600 : 'none',
|
|
90
|
+
padding: '24px',
|
|
106
91
|
}}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
92
|
+
>
|
|
93
|
+
<Dropzone
|
|
94
|
+
{...args}
|
|
95
|
+
accept={['.png', '.jpg', '.svg']}
|
|
96
|
+
maxFiles={5}
|
|
97
|
+
maxSize={1024 * 1024}
|
|
98
|
+
onSendFile={onSendFile}
|
|
99
|
+
sendFiles
|
|
100
|
+
labelText="Upload files"
|
|
101
|
+
helperMessage="Only PNG, JPG, and SVG files with a max size of 1MB"
|
|
102
|
+
dropzoneOptions={{
|
|
103
|
+
onDropAccepted: files => {
|
|
104
|
+
// eslint-disable-next-line no-console
|
|
105
|
+
console.log('Accepted files:', files);
|
|
106
|
+
},
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
</div>
|
|
110
|
+
);
|
|
111
|
+
},
|
|
110
112
|
};
|
|
111
113
|
|
|
112
|
-
export const NoLimits =
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
114
|
+
export const NoLimits = {
|
|
115
|
+
render: (args: DropzoneProps) => {
|
|
116
|
+
return (
|
|
117
|
+
<div
|
|
118
|
+
style={{
|
|
119
|
+
background: args.isInverse ? magma.colors.primary600 : 'none',
|
|
120
|
+
padding: '24px',
|
|
121
|
+
}}
|
|
122
|
+
>
|
|
123
|
+
<Dropzone
|
|
124
|
+
{...args}
|
|
125
|
+
onSendFile={onSendFile}
|
|
126
|
+
labelText="Upload files"
|
|
127
|
+
helperMessage="It's a free for all, upload anything."
|
|
128
|
+
/>
|
|
129
|
+
</div>
|
|
130
|
+
);
|
|
131
|
+
},
|
|
128
132
|
};
|
|
129
133
|
|
|
130
|
-
export const Image =
|
|
131
|
-
|
|
134
|
+
export const Image = {
|
|
135
|
+
render: (args: DropzoneProps) => {
|
|
136
|
+
const [file, setFile] = useState<string>();
|
|
132
137
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
138
|
+
const onSendFile = (props: OnSendFileProps) => {
|
|
139
|
+
const { file, onFinish } = props;
|
|
140
|
+
const reader = new FileReader();
|
|
141
|
+
reader.onload = function (evt) {
|
|
142
|
+
setFile(
|
|
143
|
+
(evt &&
|
|
144
|
+
evt.target &&
|
|
145
|
+
evt.target.result &&
|
|
146
|
+
evt.target.result.toString()) ||
|
|
147
|
+
''
|
|
148
|
+
);
|
|
149
|
+
onFinish && onFinish({ file });
|
|
150
|
+
};
|
|
151
|
+
reader.readAsDataURL(file);
|
|
145
152
|
};
|
|
146
|
-
reader.readAsDataURL(file);
|
|
147
|
-
};
|
|
148
153
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
154
|
+
const onDeleteFile = () => {
|
|
155
|
+
setFile(undefined);
|
|
156
|
+
};
|
|
152
157
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
158
|
+
return (
|
|
159
|
+
<div
|
|
160
|
+
style={{
|
|
161
|
+
background: args.isInverse ? magma.colors.primary600 : 'none',
|
|
162
|
+
padding: '24px',
|
|
163
|
+
}}
|
|
164
|
+
>
|
|
165
|
+
<Dropzone
|
|
166
|
+
{...args}
|
|
167
|
+
onSendFile={onSendFile}
|
|
168
|
+
accept={['image/*']}
|
|
169
|
+
helperMessage="Only Image files"
|
|
170
|
+
sendFiles
|
|
171
|
+
onDeleteFile={onDeleteFile}
|
|
172
|
+
/>
|
|
173
|
+
{file && <img src={file} alt="" />}
|
|
174
|
+
</div>
|
|
175
|
+
);
|
|
176
|
+
},
|
|
171
177
|
};
|
|
172
178
|
|
|
173
|
-
export const Text =
|
|
174
|
-
|
|
179
|
+
export const Text = {
|
|
180
|
+
render: (args: DropzoneProps) => {
|
|
181
|
+
const [file, setFile] = useState<string>();
|
|
175
182
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
183
|
+
const onSendFile = (props: OnSendFileProps) => {
|
|
184
|
+
const { file, onFinish } = props;
|
|
185
|
+
const reader = new FileReader();
|
|
186
|
+
reader.onload = function (evt) {
|
|
187
|
+
setFile(
|
|
188
|
+
(evt &&
|
|
189
|
+
evt.target &&
|
|
190
|
+
evt.target.result &&
|
|
191
|
+
evt.target.result.toString()) ||
|
|
192
|
+
''
|
|
193
|
+
);
|
|
194
|
+
onFinish && onFinish({ file });
|
|
195
|
+
};
|
|
196
|
+
reader.readAsText(file);
|
|
188
197
|
};
|
|
189
|
-
reader.readAsText(file);
|
|
190
|
-
};
|
|
191
198
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
199
|
+
const onDeleteFile = () => {
|
|
200
|
+
setFile(undefined);
|
|
201
|
+
};
|
|
195
202
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
203
|
+
return (
|
|
204
|
+
<div
|
|
205
|
+
style={{
|
|
206
|
+
background: args.isInverse ? magma.colors.primary600 : 'none',
|
|
207
|
+
padding: '24px',
|
|
208
|
+
}}
|
|
209
|
+
>
|
|
210
|
+
<Dropzone
|
|
211
|
+
{...args}
|
|
212
|
+
onSendFile={onSendFile}
|
|
213
|
+
accept={['.txt', '.csv']}
|
|
214
|
+
helperMessage="Only TXT or CSV files"
|
|
215
|
+
sendFiles
|
|
216
|
+
onDeleteFile={onDeleteFile}
|
|
217
|
+
/>
|
|
218
|
+
{file && <Textarea textareaStyle={{ height: '250px' }} value={file} />}
|
|
219
|
+
</div>
|
|
220
|
+
);
|
|
221
|
+
},
|
|
214
222
|
};
|
|
215
223
|
|
|
216
|
-
export const Csv =
|
|
217
|
-
|
|
218
|
-
|
|
224
|
+
export const Csv = {
|
|
225
|
+
render: (args: DropzoneProps) => {
|
|
226
|
+
const [file, setFile] = useState<any>();
|
|
227
|
+
const [columns, setColumns] = useState<any>();
|
|
219
228
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
229
|
+
const onSendFile = (props: OnSendFileProps) => {
|
|
230
|
+
const { file, onFinish } = props;
|
|
231
|
+
const reader = new FileReader();
|
|
232
|
+
reader.onload = function (evt) {
|
|
233
|
+
const [columns, rows] =
|
|
234
|
+
(evt &&
|
|
235
|
+
evt.target &&
|
|
236
|
+
evt.target.result &&
|
|
237
|
+
csvJSON(evt.target.result.toString())) ||
|
|
238
|
+
[];
|
|
239
|
+
setColumns(columns);
|
|
240
|
+
setFile(rows);
|
|
241
|
+
onFinish && onFinish({ file });
|
|
242
|
+
};
|
|
243
|
+
reader.readAsText(file);
|
|
244
|
+
};
|
|
245
|
+
const onDeleteFile = () => {
|
|
246
|
+
setFile(undefined);
|
|
233
247
|
};
|
|
234
|
-
reader.readAsText(file);
|
|
235
|
-
};
|
|
236
|
-
const onDeleteFile = () => {
|
|
237
|
-
setFile(undefined);
|
|
238
|
-
};
|
|
239
248
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
249
|
+
return (
|
|
250
|
+
<div
|
|
251
|
+
style={{
|
|
252
|
+
background: args.isInverse ? magma.colors.primary600 : 'none',
|
|
253
|
+
padding: '24px',
|
|
254
|
+
}}
|
|
255
|
+
>
|
|
256
|
+
<Dropzone
|
|
257
|
+
{...args}
|
|
258
|
+
onSendFile={onSendFile}
|
|
259
|
+
accept={['.csv']}
|
|
260
|
+
helperMessage="Only CSV files"
|
|
261
|
+
sendFiles
|
|
262
|
+
onDeleteFile={onDeleteFile}
|
|
263
|
+
/>
|
|
264
|
+
{file && <Datagrid columns={columns} rows={file} />}
|
|
265
|
+
</div>
|
|
266
|
+
);
|
|
267
|
+
},
|
|
258
268
|
};
|