From 336c615d5409f413beb54bcde55dc8c471e0e97f Mon Sep 17 00:00:00 2001 From: Roman Chubarkin Date: Fri, 9 Jul 2021 16:11:39 +0300 Subject: [PATCH] fix: review comments --- .../molecules/button-uploader/index.tsx | 3 +++ .../molecules/button-uploader/usage.mdx | 25 ++++++++++--------- src/upload/molecules/drag-uploader/usage.mdx | 5 +++- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/upload/molecules/button-uploader/index.tsx b/src/upload/molecules/button-uploader/index.tsx index 2466304e..9e940811 100644 --- a/src/upload/molecules/button-uploader/index.tsx +++ b/src/upload/molecules/button-uploader/index.tsx @@ -12,6 +12,7 @@ interface ButtonUploaderProps { icon?: React.ReactNode; maxFiles?: DropzoneOptions['maxFiles']; maxSize?: DropzoneOptions['maxFiles']; + multiple?: DropzoneOptions['multiple']; onChange: DropzoneOptions['onDrop']; onDrop: never; validator?: DropzoneOptions['validator']; @@ -26,6 +27,7 @@ export const ButtonUploaderBase: React.FC = ({ icon, maxFiles, maxSize, + multiple = false, onChange, outlined, text, @@ -37,6 +39,7 @@ export const ButtonUploaderBase: React.FC = ({ disabled, maxFiles, maxSize, + multiple, noDrag: true, onDrop: onChange, validator, diff --git a/src/upload/molecules/button-uploader/usage.mdx b/src/upload/molecules/button-uploader/usage.mdx index 14f04597..580d003a 100644 --- a/src/upload/molecules/button-uploader/usage.mdx +++ b/src/upload/molecules/button-uploader/usage.mdx @@ -48,15 +48,16 @@ To set file types, you should set the 'accept' property. ### Props -| Name | Type | Default | Description | -| ----------- | ---------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | -| `accept` | `string ӏ string[]` | | File extensions that are accepted to load | -| `disabled` | `boolean` | `false` | Enable/disable upload button | -| `icon` | `React.ReactNode` | | Button icon | -| `maxFiles` | `number` | `0` | Max number of files to load. The default value is 0 which means there is no limitation to how many files are accepted. | -| `maxSize` | `number` | `Infinity` | Max file size (in bytes) | -| `onChange` | `fn` | | Callback for change event | -| `outlined` | `boolean` | `false` | Set button to be outlined | -| `priority` | `string` | `'secondary'` | Priority prop to style upload area | -| `text` | `string` | | Button text | -| `validator` | `(file: T) => FileError \| FileError[] \| null;` | | Fn that validate loaded files | +| Name | Type | Default | Description | +| ----------- | -------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | +| `accept` | `string ӏ string[]` | | File extensions that are accepted to load | +| `disabled` | `boolean` | `false` | Enable/disable upload button | +| `icon` | `React.ReactNode` | | Button icon | +| `maxFiles` | `number` | `0` | Max number of files to load. The default value is 0 which means there is no limitation to how many files are accepted. | +| `maxSize` | `number` | `Infinity` | Max file size (in bytes) | +| `multiple` | `boolean` | `false` | allow add multiple files | +| `onChange` | `(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;` | | Callback for change event | +| `outlined` | `boolean` | `false` | Set button to be outlined | +| `priority` | `string` | `'secondary'` | Priority prop to style upload area | +| `text` | `string` | | Button text | +| `validator` | `(file: T) => FileError \| FileError[] \| null;` | | Fn that validate loaded files | diff --git a/src/upload/molecules/drag-uploader/usage.mdx b/src/upload/molecules/drag-uploader/usage.mdx index f466e4ad..42a1c2cb 100644 --- a/src/upload/molecules/drag-uploader/usage.mdx +++ b/src/upload/molecules/drag-uploader/usage.mdx @@ -4,7 +4,9 @@ import {DragUploader} from './index'; # DragUploader -Drag and drop for files. Show dialog on drop file or upload area click +Drag and drop for files. To upload files, click or drop file on uploading area, choose files in an opened dialog window. +To set file types, you should set the 'accept' property. You can pass any content to show over uploading area. +DragUploader pass priority to style uploading area. ### Example @@ -85,6 +87,7 @@ To set extensions of files that users can upload, you can pass an 'accept' prope | `disabled` | `boolean` | `false` | Enable/disable DragUploader | | `maxFiles` | `number` | `0` | Max number of files to load. The default value is 0 which means there is no limitation to how many files are accepted. | | `maxSize` | `number` | `Infinity` | Max file size (in bytes) | +| `multiple` | `boolean` | `false` | allow add multiple files | | `onDrop` | `(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;` | | Callback for when the drop event occurs | | `priority` | `string` | `'secondary'` | Priority prop to style UploaderArea component | | `validator` | `(file: T) => FileError \| FileError[] \| null;` | | Fn that validate loaded files |