@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.
Files changed (3) hide show
  1. package/dist/src/src/components/dropzone/Dropzone.stories.d.ts +15 -5
  2. package/package.json +3 -3
  3. package/src/components/dropzone/Dropzone.stories.tsx +164 -154
package/dist/src/src/components/dropzone/Dropzone.stories.d.ts CHANGED
@@ -31,8 +31,18 @@ declare const _default: {
31
31
  };
32
32
  };
33
33
  export default _default;
34
- export declare const Default: (args: DropzoneProps) => JSX.Element;
35
- export declare const NoLimits: (args: DropzoneProps) => JSX.Element;
36
- export declare const Image: (args: DropzoneProps) => JSX.Element;
37
- export declare const Text: (args: DropzoneProps) => JSX.Element;
38
- export declare const Csv: (args: DropzoneProps) => JSX.Element;
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.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.0",
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.0-next.3",
38
+ "react-magma-dom": "^4.10.1-next.0",
39
39
  "react-magma-icons": "^3.2.0"
40
40
  },
41
41
  "engines": {
package/src/components/dropzone/Dropzone.stories.tsx CHANGED
@@ -81,178 +81,188 @@ export default {
81
81
  },
82
82
  };
83
83
 
84
- export const Default = (args: DropzoneProps) => {
85
- return (
86
- <div
87
- style={{
88
- background: args.isInverse ? magma.colors.primary600 : 'none',
89
- padding: '24px',
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
- </div>
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 = (args: DropzoneProps) => {
113
- return (
114
- <div
115
- style={{
116
- background: args.isInverse ? magma.colors.primary600 : 'none',
117
- padding: '24px',
118
- }}
119
- >
120
- <Dropzone
121
- {...args}
122
- onSendFile={onSendFile}
123
- labelText="Upload files"
124
- helperMessage="It's a free for all, upload anything."
125
- />
126
- </div>
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 = (args: DropzoneProps) => {
131
- const [file, setFile] = useState<string>();
134
+ export const Image = {
135
+ render: (args: DropzoneProps) => {
136
+ const [file, setFile] = useState<string>();
132
137
 
133
- const onSendFile = (props: OnSendFileProps) => {
134
- const { file, onFinish } = props;
135
- const reader = new FileReader();
136
- reader.onload = function (evt) {
137
- setFile(
138
- (evt &&
139
- evt.target &&
140
- evt.target.result &&
141
- evt.target.result.toString()) ||
142
- ''
143
- );
144
- onFinish && onFinish({ file });
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
- const onDeleteFile = () => {
150
- setFile(undefined);
151
- };
154
+ const onDeleteFile = () => {
155
+ setFile(undefined);
156
+ };
152
157
 
153
- return (
154
- <div
155
- style={{
156
- background: args.isInverse ? magma.colors.primary600 : 'none',
157
- padding: '24px',
158
- }}
159
- >
160
- <Dropzone
161
- {...args}
162
- onSendFile={onSendFile}
163
- accept={['image/*']}
164
- helperMessage="Only Image files"
165
- sendFiles
166
- onDeleteFile={onDeleteFile}
167
- />
168
- {file && <img src={file} alt="" />}
169
- </div>
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 = (args: DropzoneProps) => {
174
- const [file, setFile] = useState<string>();
179
+ export const Text = {
180
+ render: (args: DropzoneProps) => {
181
+ const [file, setFile] = useState<string>();
175
182
 
176
- const onSendFile = (props: OnSendFileProps) => {
177
- const { file, onFinish } = props;
178
- const reader = new FileReader();
179
- reader.onload = function (evt) {
180
- setFile(
181
- (evt &&
182
- evt.target &&
183
- evt.target.result &&
184
- evt.target.result.toString()) ||
185
- ''
186
- );
187
- onFinish && onFinish({ file });
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
- const onDeleteFile = () => {
193
- setFile(undefined);
194
- };
199
+ const onDeleteFile = () => {
200
+ setFile(undefined);
201
+ };
195
202
 
196
- return (
197
- <div
198
- style={{
199
- background: args.isInverse ? magma.colors.primary600 : 'none',
200
- padding: '24px',
201
- }}
202
- >
203
- <Dropzone
204
- {...args}
205
- onSendFile={onSendFile}
206
- accept={['.txt', '.csv']}
207
- helperMessage="Only TXT or CSV files"
208
- sendFiles
209
- onDeleteFile={onDeleteFile}
210
- />
211
- {file && <Textarea textareaStyle={{ height: '250px' }} value={file} />}
212
- </div>
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 = (args: DropzoneProps) => {
217
- const [file, setFile] = useState<any>();
218
- const [columns, setColumns] = useState<any>();
224
+ export const Csv = {
225
+ render: (args: DropzoneProps) => {
226
+ const [file, setFile] = useState<any>();
227
+ const [columns, setColumns] = useState<any>();
219
228
 
220
- const onSendFile = (props: OnSendFileProps) => {
221
- const { file, onFinish } = props;
222
- const reader = new FileReader();
223
- reader.onload = function (evt) {
224
- const [columns, rows] =
225
- (evt &&
226
- evt.target &&
227
- evt.target.result &&
228
- csvJSON(evt.target.result.toString())) ||
229
- [];
230
- setColumns(columns);
231
- setFile(rows);
232
- onFinish && onFinish({ file });
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
- return (
241
- <div
242
- style={{
243
- background: args.isInverse ? magma.colors.primary600 : 'none',
244
- padding: '24px',
245
- }}
246
- >
247
- <Dropzone
248
- {...args}
249
- onSendFile={onSendFile}
250
- accept={['.csv']}
251
- helperMessage="Only CSV files"
252
- sendFiles
253
- onDeleteFile={onDeleteFile}
254
- />
255
- {file && <Datagrid columns={columns} rows={file} />}
256
- </div>
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
  };