diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.module.scss b/src/tedi/components/form/file-dropzone/file-dropzone.module.scss index a581df3c..becd48cf 100644 --- a/src/tedi/components/form/file-dropzone/file-dropzone.module.scss +++ b/src/tedi/components/form/file-dropzone/file-dropzone.module.scss @@ -65,8 +65,12 @@ .tedi-file-dropzone__file-list { width: 100%; + padding-left: 0; margin-top: var(--layout-grid-gutters-04); - list-style: none; + + .tedi-file-dropzone__file-list-item { + padding-left: 0; + } } .tedi-file-dropzone__file-name { diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.spec.tsx b/src/tedi/components/form/file-dropzone/file-dropzone.spec.tsx index 57176cd4..0d905e2f 100644 --- a/src/tedi/components/form/file-dropzone/file-dropzone.spec.tsx +++ b/src/tedi/components/form/file-dropzone/file-dropzone.spec.tsx @@ -130,7 +130,7 @@ describe('FileDropzone', () => { }); render(); - const removeButton = screen.getByRole('button', { name: /clear/i }); + const removeButton = screen.getByRole('button', { name: /remove/i }); fireEvent.click(removeButton); expect(onFileRemove).toHaveBeenCalledWith(file); diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.tsx b/src/tedi/components/form/file-dropzone/file-dropzone.tsx index e0631cc1..318c2cec 100644 --- a/src/tedi/components/form/file-dropzone/file-dropzone.tsx +++ b/src/tedi/components/form/file-dropzone/file-dropzone.tsx @@ -7,8 +7,8 @@ import { useLabels } from '../../../providers/label-provider'; import { Icon } from '../../base/icon/icon'; import ClosingButton from '../../buttons/closing-button/closing-button'; import { Card, CardContent } from '../../cards/card'; +import { List } from '../../content/list'; import { Col, Row } from '../../layout/grid'; -import { VerticalSpacing } from '../../layout/vertical-spacing'; import FeedbackText, { FeedbackTextProps } from '../feedback-text/feedback-text'; import FormLabel, { FormLabelProps } from '../form-label/form-label'; import styles from './file-dropzone.module.scss'; @@ -42,10 +42,12 @@ export const FileDropzone = (props: FileDropzoneProps): JSX.Element => { const { innerFiles, uploadErrorHelper, onFileChange, onFileRemove } = useFileUpload(props); const { getRootProps, getInputProps, isDragActive } = useDropzone({ + disabled, accept: props.accept ? { 'application/*': [props.accept] } : undefined, multiple: props.multiple, maxSize: props.maxSize ? props.maxSize * 1024 ** 2 : undefined, onDrop: (acceptedFiles) => { + if (disabled) return; const event = { target: { files: acceptedFiles }, } as unknown as React.ChangeEvent; @@ -65,8 +67,15 @@ export const FileDropzone = (props: FileDropzoneProps): JSX.Element => { return ( <> -
- +
+
@@ -78,36 +87,39 @@ export const FileDropzone = (props: FileDropzoneProps): JSX.Element => { ) : null} {!!innerFiles.length && ( - + {innerFiles.map((file: FileUploadFile) => ( - - + - - - {file.name}{' '} - {file.isValid === false && } - - - onFileRemove(file)} /> - - - - + + + + {file.name}{' '} + {file.isValid === false && } + + + onFileRemove(file)} /> + + + + + ))} - + )} +
+ {innerFiles.length === 0 + ? getLabel('file-dropzone.no-file') + : getLabel('file-dropzone.files-selected', innerFiles.length)} +
); }; diff --git a/src/tedi/providers/label-provider/labels-map.ts b/src/tedi/providers/label-provider/labels-map.ts index d712d220..0c64d7ba 100644 --- a/src/tedi/providers/label-provider/labels-map.ts +++ b/src/tedi/providers/label-provider/labels-map.ts @@ -226,6 +226,42 @@ export const labelsMap = validateDefaultLabels({ en: 'Drop files here, or click to browse', ru: 'Перетащите файлы сюда или нажмите, чтобы выбрать', }, + 'file-dropzone.no-file': { + description: 'No file selected label for FileUpload or FileDropzone', + components: ['FileDropzone', 'FileUpload'], + et: 'Ühtegi faili pole valitud', + en: 'No file has been chosen', + ru: 'Файлы не выбраны', + }, + 'file-dropzone.selected-files': { + description: 'Selected files label for FileUpload or FileDropzone', + components: ['FileDropzone', 'FileUpload'], + et: 'Valitud failid', + en: 'Uploaded files', + ru: 'Загруженные файлы', + }, + 'file-dropzone.files-selected': { + description: 'Label for selected file count', + components: ['FileDropzone', 'FileUpload'], + et: (files: number) => (files === 1 ? `${files} fail valitud` : `${files} faili valitud`), + en: (files: number) => (files === 1 ? `${files} file selected` : `${files} files selected`), + ru: (files: number) => { + const lastDigit = files % 10; + const lastTwoDigits = files % 100; + const isSingular = lastDigit === 1 && lastTwoDigits !== 11; + const isFew = lastDigit >= 2 && lastDigit <= 4 && (lastTwoDigits < 12 || lastTwoDigits > 14); + + if (isSingular) { + return `${files} выбранный файл`; + } + + if (isFew) { + return `${files} выбранных файла`; + } + + return `${files} выбранных файлов`; + }, + }, 'modal.close': { description: 'Label for modals close button', components: ['Modal'],