@veeqo/ui 12.4.0-beta-4 → 12.4.0-beta-6
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/dist/components/UploadFile/UploadFile.cjs +2 -2
- package/dist/components/UploadFile/UploadFile.cjs.map +1 -1
- package/dist/components/UploadFile/UploadFile.js +2 -2
- package/dist/components/UploadFile/UploadFile.js.map +1 -1
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.cjs +2 -2
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.cjs.map +1 -1
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.js +2 -2
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.js.map +1 -1
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.module.scss.cjs +2 -2
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.module.scss.cjs.map +1 -1
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.module.scss.js +2 -2
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.module.scss.js.map +1 -1
- package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.cjs +5 -5
- package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.cjs.map +1 -1
- package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.d.ts +2 -1
- package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.js +5 -5
- package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,10 +22,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
22
22
|
|
|
23
23
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
24
24
|
|
|
25
|
-
const UploadFile = React.forwardRef(({ id, name, maxBytes = 1000000, format = constants.FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, maxFiles = constants.DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, isDirty, ...otherProps }, outerRef) => {
|
|
25
|
+
const UploadFile = React.forwardRef(({ id, name, maxBytes = 1000000, format = constants.FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, maxFiles = constants.DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage, isDirty, ...otherProps }, outerRef) => {
|
|
26
26
|
var _a;
|
|
27
27
|
const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile.useUploadFile();
|
|
28
|
-
useValidateInput.useValidateInput({ inputRef, fileList, fileTypes, maxBytes });
|
|
28
|
+
useValidateInput.useValidateInput({ customErrorMessage: errorMessage, inputRef, fileList, fileTypes, maxBytes });
|
|
29
29
|
React.useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
|
|
30
30
|
const [isDragOver, setIsDragOver] = React.useState(false);
|
|
31
31
|
// Computed properties based on params
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useState,\n DragEvent,\n forwardRef,\n useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport { FileSizeUnit, DEFAULT_MAXIMUM_MULTIPLE_FILES } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Disabled, Error, Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n (\n {\n id,\n name,\n maxBytes = 1000000,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n isDirty,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({ inputRef, fileList, fileTypes, maxBytes });\n\n useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n const [isDragOver, setIsDragOver] = useState(false);\n\n // Computed properties based on params\n const maxSizeCopy = getFileSizeString({ maxBytes, format });\n const acceptedTypesCopy = getValidTypesString({ fileTypes });\n const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n const validateMaximumFiles = useCallback(\n (files: FileList | null | undefined) => {\n if (files?.length && files?.length > maxFiles) {\n clearFileSelection();\n onMaxFilesExceeded?.();\n return false;\n }\n return true;\n },\n [clearFileSelection, maxFiles, onMaxFilesExceeded],\n );\n\n // Processes file and updates the UI appropriately:\n const updateFiles = useCallback(\n (files: FileList) => {\n if (!files.length) {\n return;\n }\n\n setFileList(files);\n },\n [setFileList],\n );\n\n // For focussing of input el and updating drop UI\n const onDragEnter = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(true);\n inputRef.current?.focus();\n };\n\n // For unfocussing of input el and updating drop UI\n const onDragLeave = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n };\n\n // Prevents default browser behaviour\n const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n // Process file when dropped into eligible area\n const onDrop = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n // Prevent reactions on dragging events that do not contain files\n if (!event.dataTransfer.files.length) return;\n\n const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n if (canUpdateFiles) {\n updateFiles(event.dataTransfer.files);\n }\n };\n\n // Updates UI based on a native file input change. Attached via useEffect below\n const onChange = useCallback(() => {\n const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n const files = inputRef?.current?.files;\n if (canUpdateFiles && files) {\n updateFiles(files);\n } else if (fileList) {\n updateFiles(fileList);\n }\n }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n useEffect(() => {\n const ref = inputRef?.current;\n ref?.addEventListener('change', onChange);\n ref?.addEventListener('cancel', onCancel);\n\n return () => {\n ref?.removeEventListener('change', onChange);\n ref?.removeEventListener('cancel', onCancel);\n };\n }, [onChange, onCancel, inputRef]);\n\n const hasUserProvidedNoFiles = !fileList?.length;\n\n return (\n <RootStack spacing=\"xs\" alignX=\"stretch\">\n <Label htmlFor={id}>\n {label}\n <FlexCol>\n <Hint>\n {maxSizeCopy}\n <br />\n {acceptedTypesCopy}\n </Hint>\n <DropZoneContainer\n isDirty={!!isDirty}\n hasUserProvidedNoFiles={hasUserProvidedNoFiles}\n isDragOver={isDragOver}\n data-testid=\"drop-zone-container\"\n onDrop={onDrop}\n onDragEnter={onDragEnter}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n >\n {isDragOver ? <DropCopy /> : <UploadCopy />}\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n accept={acceptedTypesForInputEl}\n name={name}\n disabled={disabled}\n multiple={multiple}\n {...otherProps}\n />\n </DropZoneContainer>\n </FlexCol>\n </Label>\n <FlexCol>\n {isDirty && hasUserProvidedNoFiles && (\n <FlexRow>\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <Error>{inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n <Disabled>{disabledMessage}</Disabled>\n </FlexRow>\n )}\n {!hideUploadedFiles &&\n fileList && [\n Array.from(fileList).map((file) => {\n return (\n <UploadedFile\n key={`${file.name}`}\n file={file}\n removeFileFromList={removeFileFromList}\n disabled={disabled}\n format={format}\n maxBytes={maxBytes}\n fileTypes={fileTypes}\n />\n );\n }),\n ]}\n </FlexCol>\n </RootStack>\n );\n },\n);\n"],"names":["forwardRef","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","RootStack","Label","FlexCol","Hint","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","Error","LockIcon","Disabled","UploadedFile"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useState,\n DragEvent,\n forwardRef,\n useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport { FileSizeUnit, DEFAULT_MAXIMUM_MULTIPLE_FILES } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Disabled, Error, Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n (\n {\n id,\n name,\n maxBytes = 1000000,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n errorMessage,\n isDirty,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({ customErrorMessage: errorMessage, inputRef, fileList, fileTypes, maxBytes });\n\n useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n const [isDragOver, setIsDragOver] = useState(false);\n\n // Computed properties based on params\n const maxSizeCopy = getFileSizeString({ maxBytes, format });\n const acceptedTypesCopy = getValidTypesString({ fileTypes });\n const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n const validateMaximumFiles = useCallback(\n (files: FileList | null | undefined) => {\n if (files?.length && files?.length > maxFiles) {\n clearFileSelection();\n onMaxFilesExceeded?.();\n return false;\n }\n return true;\n },\n [clearFileSelection, maxFiles, onMaxFilesExceeded],\n );\n\n // Processes file and updates the UI appropriately:\n const updateFiles = useCallback(\n (files: FileList) => {\n if (!files.length) {\n return;\n }\n\n setFileList(files);\n },\n [setFileList],\n );\n\n // For focussing of input el and updating drop UI\n const onDragEnter = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(true);\n inputRef.current?.focus();\n };\n\n // For unfocussing of input el and updating drop UI\n const onDragLeave = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n };\n\n // Prevents default browser behaviour\n const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n // Process file when dropped into eligible area\n const onDrop = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n // Prevent reactions on dragging events that do not contain files\n if (!event.dataTransfer.files.length) return;\n\n const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n if (canUpdateFiles) {\n updateFiles(event.dataTransfer.files);\n }\n };\n\n // Updates UI based on a native file input change. Attached via useEffect below\n const onChange = useCallback(() => {\n const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n const files = inputRef?.current?.files;\n if (canUpdateFiles && files) {\n updateFiles(files);\n } else if (fileList) {\n updateFiles(fileList);\n }\n }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n useEffect(() => {\n const ref = inputRef?.current;\n ref?.addEventListener('change', onChange);\n ref?.addEventListener('cancel', onCancel);\n\n return () => {\n ref?.removeEventListener('change', onChange);\n ref?.removeEventListener('cancel', onCancel);\n };\n }, [onChange, onCancel, inputRef]);\n\n const hasUserProvidedNoFiles = !fileList?.length;\n\n return (\n <RootStack spacing=\"xs\" alignX=\"stretch\">\n <Label htmlFor={id}>\n {label}\n <FlexCol>\n <Hint>\n {maxSizeCopy}\n <br />\n {acceptedTypesCopy}\n </Hint>\n <DropZoneContainer\n isDirty={!!isDirty}\n hasUserProvidedNoFiles={hasUserProvidedNoFiles}\n isDragOver={isDragOver}\n data-testid=\"drop-zone-container\"\n onDrop={onDrop}\n onDragEnter={onDragEnter}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n >\n {isDragOver ? <DropCopy /> : <UploadCopy />}\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n accept={acceptedTypesForInputEl}\n name={name}\n disabled={disabled}\n multiple={multiple}\n {...otherProps}\n />\n </DropZoneContainer>\n </FlexCol>\n </Label>\n <FlexCol>\n {isDirty && hasUserProvidedNoFiles && (\n <FlexRow>\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <Error>{inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n <Disabled>{disabledMessage}</Disabled>\n </FlexRow>\n )}\n {!hideUploadedFiles &&\n fileList && [\n Array.from(fileList).map((file) => {\n return (\n <UploadedFile\n key={`${file.name}`}\n file={file}\n removeFileFromList={removeFileFromList}\n disabled={disabled}\n format={format}\n maxBytes={maxBytes}\n fileTypes={fileTypes}\n />\n );\n }),\n ]}\n </FlexCol>\n </RootStack>\n );\n },\n);\n"],"names":["forwardRef","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","RootStack","Label","FlexCol","Hint","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","Error","LockIcon","Disabled","UploadedFile"],"mappings":"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"}
|
|
@@ -16,10 +16,10 @@ import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
|
|
|
16
16
|
import { useUploadFile } from './hooks/useUploadFile/useUploadFile.js';
|
|
17
17
|
import { useValidateInput } from './hooks/useValidateInput/useValidateInput.js';
|
|
18
18
|
|
|
19
|
-
const UploadFile = forwardRef(({ id, name, maxBytes = 1000000, format = FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, isDirty, ...otherProps }, outerRef) => {
|
|
19
|
+
const UploadFile = forwardRef(({ id, name, maxBytes = 1000000, format = FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage, isDirty, ...otherProps }, outerRef) => {
|
|
20
20
|
var _a;
|
|
21
21
|
const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile();
|
|
22
|
-
useValidateInput({ inputRef, fileList, fileTypes, maxBytes });
|
|
22
|
+
useValidateInput({ customErrorMessage: errorMessage, inputRef, fileList, fileTypes, maxBytes });
|
|
23
23
|
useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
|
|
24
24
|
const [isDragOver, setIsDragOver] = useState(false);
|
|
25
25
|
// Computed properties based on params
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadFile.js","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useState,\n DragEvent,\n forwardRef,\n useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport { FileSizeUnit, DEFAULT_MAXIMUM_MULTIPLE_FILES } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Disabled, Error, Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n (\n {\n id,\n name,\n maxBytes = 1000000,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n isDirty,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({ inputRef, fileList, fileTypes, maxBytes });\n\n useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n const [isDragOver, setIsDragOver] = useState(false);\n\n // Computed properties based on params\n const maxSizeCopy = getFileSizeString({ maxBytes, format });\n const acceptedTypesCopy = getValidTypesString({ fileTypes });\n const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n const validateMaximumFiles = useCallback(\n (files: FileList | null | undefined) => {\n if (files?.length && files?.length > maxFiles) {\n clearFileSelection();\n onMaxFilesExceeded?.();\n return false;\n }\n return true;\n },\n [clearFileSelection, maxFiles, onMaxFilesExceeded],\n );\n\n // Processes file and updates the UI appropriately:\n const updateFiles = useCallback(\n (files: FileList) => {\n if (!files.length) {\n return;\n }\n\n setFileList(files);\n },\n [setFileList],\n );\n\n // For focussing of input el and updating drop UI\n const onDragEnter = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(true);\n inputRef.current?.focus();\n };\n\n // For unfocussing of input el and updating drop UI\n const onDragLeave = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n };\n\n // Prevents default browser behaviour\n const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n // Process file when dropped into eligible area\n const onDrop = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n // Prevent reactions on dragging events that do not contain files\n if (!event.dataTransfer.files.length) return;\n\n const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n if (canUpdateFiles) {\n updateFiles(event.dataTransfer.files);\n }\n };\n\n // Updates UI based on a native file input change. Attached via useEffect below\n const onChange = useCallback(() => {\n const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n const files = inputRef?.current?.files;\n if (canUpdateFiles && files) {\n updateFiles(files);\n } else if (fileList) {\n updateFiles(fileList);\n }\n }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n useEffect(() => {\n const ref = inputRef?.current;\n ref?.addEventListener('change', onChange);\n ref?.addEventListener('cancel', onCancel);\n\n return () => {\n ref?.removeEventListener('change', onChange);\n ref?.removeEventListener('cancel', onCancel);\n };\n }, [onChange, onCancel, inputRef]);\n\n const hasUserProvidedNoFiles = !fileList?.length;\n\n return (\n <RootStack spacing=\"xs\" alignX=\"stretch\">\n <Label htmlFor={id}>\n {label}\n <FlexCol>\n <Hint>\n {maxSizeCopy}\n <br />\n {acceptedTypesCopy}\n </Hint>\n <DropZoneContainer\n isDirty={!!isDirty}\n hasUserProvidedNoFiles={hasUserProvidedNoFiles}\n isDragOver={isDragOver}\n data-testid=\"drop-zone-container\"\n onDrop={onDrop}\n onDragEnter={onDragEnter}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n >\n {isDragOver ? <DropCopy /> : <UploadCopy />}\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n accept={acceptedTypesForInputEl}\n name={name}\n disabled={disabled}\n multiple={multiple}\n {...otherProps}\n />\n </DropZoneContainer>\n </FlexCol>\n </Label>\n <FlexCol>\n {isDirty && hasUserProvidedNoFiles && (\n <FlexRow>\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <Error>{inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n <Disabled>{disabledMessage}</Disabled>\n </FlexRow>\n )}\n {!hideUploadedFiles &&\n fileList && [\n Array.from(fileList).map((file) => {\n return (\n <UploadedFile\n key={`${file.name}`}\n file={file}\n removeFileFromList={removeFileFromList}\n disabled={disabled}\n format={format}\n maxBytes={maxBytes}\n fileTypes={fileTypes}\n />\n );\n }),\n ]}\n </FlexCol>\n </RootStack>\n );\n },\n);\n"],"names":["React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UploadFile.js","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useState,\n DragEvent,\n forwardRef,\n useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport { FileSizeUnit, DEFAULT_MAXIMUM_MULTIPLE_FILES } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Disabled, Error, Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n (\n {\n id,\n name,\n maxBytes = 1000000,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n errorMessage,\n isDirty,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({ customErrorMessage: errorMessage, inputRef, fileList, fileTypes, maxBytes });\n\n useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n const [isDragOver, setIsDragOver] = useState(false);\n\n // Computed properties based on params\n const maxSizeCopy = getFileSizeString({ maxBytes, format });\n const acceptedTypesCopy = getValidTypesString({ fileTypes });\n const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n const validateMaximumFiles = useCallback(\n (files: FileList | null | undefined) => {\n if (files?.length && files?.length > maxFiles) {\n clearFileSelection();\n onMaxFilesExceeded?.();\n return false;\n }\n return true;\n },\n [clearFileSelection, maxFiles, onMaxFilesExceeded],\n );\n\n // Processes file and updates the UI appropriately:\n const updateFiles = useCallback(\n (files: FileList) => {\n if (!files.length) {\n return;\n }\n\n setFileList(files);\n },\n [setFileList],\n );\n\n // For focussing of input el and updating drop UI\n const onDragEnter = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(true);\n inputRef.current?.focus();\n };\n\n // For unfocussing of input el and updating drop UI\n const onDragLeave = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n };\n\n // Prevents default browser behaviour\n const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n // Process file when dropped into eligible area\n const onDrop = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n // Prevent reactions on dragging events that do not contain files\n if (!event.dataTransfer.files.length) return;\n\n const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n if (canUpdateFiles) {\n updateFiles(event.dataTransfer.files);\n }\n };\n\n // Updates UI based on a native file input change. Attached via useEffect below\n const onChange = useCallback(() => {\n const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n const files = inputRef?.current?.files;\n if (canUpdateFiles && files) {\n updateFiles(files);\n } else if (fileList) {\n updateFiles(fileList);\n }\n }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n useEffect(() => {\n const ref = inputRef?.current;\n ref?.addEventListener('change', onChange);\n ref?.addEventListener('cancel', onCancel);\n\n return () => {\n ref?.removeEventListener('change', onChange);\n ref?.removeEventListener('cancel', onCancel);\n };\n }, [onChange, onCancel, inputRef]);\n\n const hasUserProvidedNoFiles = !fileList?.length;\n\n return (\n <RootStack spacing=\"xs\" alignX=\"stretch\">\n <Label htmlFor={id}>\n {label}\n <FlexCol>\n <Hint>\n {maxSizeCopy}\n <br />\n {acceptedTypesCopy}\n </Hint>\n <DropZoneContainer\n isDirty={!!isDirty}\n hasUserProvidedNoFiles={hasUserProvidedNoFiles}\n isDragOver={isDragOver}\n data-testid=\"drop-zone-container\"\n onDrop={onDrop}\n onDragEnter={onDragEnter}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n >\n {isDragOver ? <DropCopy /> : <UploadCopy />}\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n accept={acceptedTypesForInputEl}\n name={name}\n disabled={disabled}\n multiple={multiple}\n {...otherProps}\n />\n </DropZoneContainer>\n </FlexCol>\n </Label>\n <FlexCol>\n {isDirty && hasUserProvidedNoFiles && (\n <FlexRow>\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <Error>{inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n <Disabled>{disabledMessage}</Disabled>\n </FlexRow>\n )}\n {!hideUploadedFiles &&\n fileList && [\n Array.from(fileList).map((file) => {\n return (\n <UploadedFile\n key={`${file.name}`}\n file={file}\n removeFileFromList={removeFileFromList}\n disabled={disabled}\n format={format}\n maxBytes={maxBytes}\n fileTypes={fileTypes}\n />\n );\n }),\n ]}\n </FlexCol>\n </RootStack>\n );\n },\n);\n"],"names":["React"],"mappings":"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"}
|
|
@@ -42,8 +42,8 @@ const UploadedFile = ({ file, removeFileFromList, disabled, format, fileTypes, m
|
|
|
42
42
|
return (React__default.default.createElement("div", { className: hasCriticalErrors
|
|
43
43
|
? UploadedFile_module.uploadedFileContainerCriticalError
|
|
44
44
|
: UploadedFile_module.uploadedFileContainer },
|
|
45
|
-
React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "space-between", alignItems: "
|
|
46
|
-
React__default.default.createElement(FlexRow.FlexRow, { alignItems: "
|
|
45
|
+
React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "space-between", alignItems: "flex-start" },
|
|
46
|
+
React__default.default.createElement(FlexRow.FlexRow, { alignItems: "flex-start", style: { flex: 1, minWidth: 0 }, justifyContent: "space-between", flexWrap: "nowrap" },
|
|
47
47
|
React__default.default.createElement(Text.Text, { className: UploadedFile_module.singleLineText, variant: "body" }, file.name),
|
|
48
48
|
React__default.default.createElement(Text.Text, { variant: "body", className: UploadedFile_module.fileSizeText, style: { color: index.theme.colors.neutral.ink.light } }, fileSizeCopy)),
|
|
49
49
|
RemoveButton),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadedFile.cjs","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../../../Button';\nimport { CriticalIcon, CrossIcon } from '../../../../icons';\nimport { Text } from '../../../Text';\nimport { Image } from '../../../Image';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { AcceptedFileTypes, FileSizeUnit } from '../../constants';\nimport { getFileSizeString } from '../../utils';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Error } from '../../../../hoc/withLabels/styled';\nimport { usePreviewImage } from '../../hooks/usePreviewImage';\nimport uploadFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from '../../hooks/useFileErrorMessages';\n\ntype UploadedFileProps = {\n file?: File | null;\n removeFileFromList: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const UploadedFile = ({\n file,\n removeFileFromList,\n disabled,\n format,\n fileTypes,\n maxBytes,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n format,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => removeFileFromList(file)}\n iconSlot={<CrossIcon />}\n aria-label=\"Remove file\"\n disabled={disabled}\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <Error className={uploadFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Error>\n </FlexCol>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadFileStyles.uploadedFileContainerCriticalError\n : uploadFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"
|
|
1
|
+
{"version":3,"file":"UploadedFile.cjs","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../../../Button';\nimport { CriticalIcon, CrossIcon } from '../../../../icons';\nimport { Text } from '../../../Text';\nimport { Image } from '../../../Image';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { AcceptedFileTypes, FileSizeUnit } from '../../constants';\nimport { getFileSizeString } from '../../utils';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Error } from '../../../../hoc/withLabels/styled';\nimport { usePreviewImage } from '../../hooks/usePreviewImage';\nimport uploadFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from '../../hooks/useFileErrorMessages';\n\ntype UploadedFileProps = {\n file?: File | null;\n removeFileFromList: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const UploadedFile = ({\n file,\n removeFileFromList,\n disabled,\n format,\n fileTypes,\n maxBytes,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n format,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => removeFileFromList(file)}\n iconSlot={<CrossIcon />}\n aria-label=\"Remove file\"\n disabled={disabled}\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <Error className={uploadFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Error>\n </FlexCol>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadFileStyles.uploadedFileContainerCriticalError\n : uploadFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"flex-start\">\n <FlexRow\n alignItems=\"flex-start\"\n style={{ flex: 1, minWidth: 0 }}\n justifyContent=\"space-between\"\n flexWrap=\"nowrap\"\n >\n <Text className={uploadFileStyles.singleLineText} variant=\"body\">\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </FlexRow>\n {RemoveButton}\n </FlexRow>\n {ErrorMessages}\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadFileStyles.uploadedFileContainerCriticalError\n : uploadFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"flex-start\">\n <FlexRow alignItems=\"center\" style={{ flex: 1, minWidth: 0 }} flexWrap=\"nowrap\">\n <Image\n className={uploadFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <FlexCol gap=\"xs\" style={{ flex: 1, minWidth: 0, marginLeft: '8px' }}>\n <Text className={uploadFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </FlexCol>\n </FlexRow>\n {RemoveButton}\n </FlexRow>\n {ErrorMessages}\n </div>\n );\n};\n"],"names":["usePreviewImage","useFileErrorMessages","getFileSizeString","React","Button","CrossIcon","FlexRow","CriticalIcon","theme","FlexCol","Error","uploadFileStyles","Text","Image"],"mappings":"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"}
|
|
@@ -36,8 +36,8 @@ const UploadedFile = ({ file, removeFileFromList, disabled, format, fileTypes, m
|
|
|
36
36
|
return (React__default.createElement("div", { className: hasCriticalErrors
|
|
37
37
|
? uploadFileStyles.uploadedFileContainerCriticalError
|
|
38
38
|
: uploadFileStyles.uploadedFileContainer },
|
|
39
|
-
React__default.createElement(FlexRow, { justifyContent: "space-between", alignItems: "
|
|
40
|
-
React__default.createElement(FlexRow, { alignItems: "
|
|
39
|
+
React__default.createElement(FlexRow, { justifyContent: "space-between", alignItems: "flex-start" },
|
|
40
|
+
React__default.createElement(FlexRow, { alignItems: "flex-start", style: { flex: 1, minWidth: 0 }, justifyContent: "space-between", flexWrap: "nowrap" },
|
|
41
41
|
React__default.createElement(Text, { className: uploadFileStyles.singleLineText, variant: "body" }, file.name),
|
|
42
42
|
React__default.createElement(Text, { variant: "body", className: uploadFileStyles.fileSizeText, style: { color: theme.colors.neutral.ink.light } }, fileSizeCopy)),
|
|
43
43
|
RemoveButton),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadedFile.js","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../../../Button';\nimport { CriticalIcon, CrossIcon } from '../../../../icons';\nimport { Text } from '../../../Text';\nimport { Image } from '../../../Image';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { AcceptedFileTypes, FileSizeUnit } from '../../constants';\nimport { getFileSizeString } from '../../utils';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Error } from '../../../../hoc/withLabels/styled';\nimport { usePreviewImage } from '../../hooks/usePreviewImage';\nimport uploadFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from '../../hooks/useFileErrorMessages';\n\ntype UploadedFileProps = {\n file?: File | null;\n removeFileFromList: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const UploadedFile = ({\n file,\n removeFileFromList,\n disabled,\n format,\n fileTypes,\n maxBytes,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n format,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => removeFileFromList(file)}\n iconSlot={<CrossIcon />}\n aria-label=\"Remove file\"\n disabled={disabled}\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <Error className={uploadFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Error>\n </FlexCol>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadFileStyles.uploadedFileContainerCriticalError\n : uploadFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"
|
|
1
|
+
{"version":3,"file":"UploadedFile.js","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../../../Button';\nimport { CriticalIcon, CrossIcon } from '../../../../icons';\nimport { Text } from '../../../Text';\nimport { Image } from '../../../Image';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { AcceptedFileTypes, FileSizeUnit } from '../../constants';\nimport { getFileSizeString } from '../../utils';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Error } from '../../../../hoc/withLabels/styled';\nimport { usePreviewImage } from '../../hooks/usePreviewImage';\nimport uploadFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from '../../hooks/useFileErrorMessages';\n\ntype UploadedFileProps = {\n file?: File | null;\n removeFileFromList: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n};\n\nexport const UploadedFile = ({\n file,\n removeFileFromList,\n disabled,\n format,\n fileTypes,\n maxBytes,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n format,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => removeFileFromList(file)}\n iconSlot={<CrossIcon />}\n aria-label=\"Remove file\"\n disabled={disabled}\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <Error className={uploadFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Error>\n </FlexCol>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadFileStyles.uploadedFileContainerCriticalError\n : uploadFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"flex-start\">\n <FlexRow\n alignItems=\"flex-start\"\n style={{ flex: 1, minWidth: 0 }}\n justifyContent=\"space-between\"\n flexWrap=\"nowrap\"\n >\n <Text className={uploadFileStyles.singleLineText} variant=\"body\">\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </FlexRow>\n {RemoveButton}\n </FlexRow>\n {ErrorMessages}\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadFileStyles.uploadedFileContainerCriticalError\n : uploadFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"flex-start\">\n <FlexRow alignItems=\"center\" style={{ flex: 1, minWidth: 0 }} flexWrap=\"nowrap\">\n <Image\n className={uploadFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <FlexCol gap=\"xs\" style={{ flex: 1, minWidth: 0, marginLeft: '8px' }}>\n <Text className={uploadFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </FlexCol>\n </FlexRow>\n {RemoveButton}\n </FlexRow>\n {ErrorMessages}\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;AAwBa,MAAA,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,kBAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,GACU,KAAI;AACtB,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,eAAe,CAAC,EAAE,IAAI,EAAE,CAAC;AAEnE,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CAAC;QAChE,IAAI;QACJ,QAAQ;QACR,SAAS;QACT,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,YAAY,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,IAAI,KAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;AAE7F,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEtB,IAAA,MAAM,YAAY,IAChBA,cAAC,CAAA,aAAA,CAAA,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAM,kBAAkB,CAAC,IAAI,CAAC,EACvC,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA,EAAA,YAAA,EACZ,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAAA,CAClB,CACH;IAED,MAAM,aAAa,GAAG,iBAAiB,KACrCA,6BAAC,OAAO,EAAA,EAAC,UAAU,EAAC,YAAY,EAAA;QAC9BA,cAAC,CAAA,aAAA,CAAA,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;AAC/E,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAA;YACtCA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAE,gBAAgB,CAAC,yBAAyB,IACzD,aAAa,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,KAAI;AACxD,gBAAA,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC;AAC9C,gBAAA,OAAO,CAAG,EAAA,KAAK,CAAC,YAAY,GAAG,SAAS,GAAG,IAAI,GAAG,EAAE,EAAE;AACxD,aAAC,CAAC,CACI,CACA,CACF,CACX;IAED,IAAI,CAAC,iBAAiB,EAAE;AACtB,QAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EACP;kBACI,gBAAgB,CAAC;kBACjB,gBAAgB,CAAC,qBAAqB,EAAA;YAG5CA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,YAAY,EAAA;gBAC7DA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,UAAU,EAAC,YAAY,EACvB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAC/B,cAAc,EAAC,eAAe,EAC9B,QAAQ,EAAC,QAAQ,EAAA;AAEjB,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,gBAAgB,CAAC,cAAc,EAAE,OAAO,EAAC,MAAM,EAAA,EAC7D,IAAI,CAAC,IAAI,CACL;AACP,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,gBAAgB,CAAC,YAAY,EACxC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,EAE/C,EAAA,YAAY,CACR,CACC;AACT,gBAAA,YAAY,CACL;YACT,aAAa,CACV;AAET;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EACP;cACI,gBAAgB,CAAC;cACjB,gBAAgB,CAAC,qBAAqB,EAAA;QAG5CA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,YAAY,EAAA;YAC7DA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAC,QAAQ,EAAA;AAC7E,gBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,SAAS,EAAE,gBAAgB,CAAC,YAAY,EACxC,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,GAAG,EAAE,UAAU,EACf,CAAA;gBACFA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA;AAClE,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,gBAAgB,CAAC,yBAAyB,EAAE,OAAO,EAAC,MAAM,EAAA,EACxE,IAAI,KAAJ,IAAA,IAAA,IAAI,6BAAJ,IAAI,CAAE,IAAI,CACN;AACP,oBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,gBAAgB,CAAC,yBAAyB,EACrD,KAAK,EAAE;4BACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;yBACtC,EAEA,EAAA,YAAY,CACR,CACC,CACF;AACT,YAAA,YAAY,CACL;QACT,aAAa,CACV;AAEV;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var uploadFileStyles = {"uploadedFileContainer":"
|
|
5
|
+
___$insertStyle("._uploadedFileContainer_1lguk_1 {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n}\n\n._uploadedFileContainerCriticalError_1lguk_7 {\n border: 1px solid var(--colors-secondary-red-base);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n}\n\n._singleLineText_1lguk_13 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 0 1 80%;\n min-width: 0;\n}\n\n._singleLineTextWithoutFlex_1lguk_21 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: none;\n min-width: 0;\n width: 100%;\n}\n\n._fileSizeText_1lguk_30 {\n white-space: nowrap;\n flex: 0 0 20%;\n text-align: right;\n}\n\n._previewImage_1lguk_36 img {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--sizes-xs);\n}");
|
|
6
|
+
var uploadFileStyles = {"uploadedFileContainer":"_uploadedFileContainer_1lguk_1","uploadedFileContainerCriticalError":"_uploadedFileContainerCriticalError_1lguk_7","singleLineText":"_singleLineText_1lguk_13","singleLineTextWithoutFlex":"_singleLineTextWithoutFlex_1lguk_21","fileSizeText":"_fileSizeText_1lguk_30","previewImage":"_previewImage_1lguk_36"};
|
|
7
7
|
|
|
8
8
|
module.exports = uploadFileStyles;
|
|
9
9
|
//# sourceMappingURL=UploadedFile.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadedFile.module.scss.cjs","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.module.scss"],"sourcesContent":[".uploadedFileContainer {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n
|
|
1
|
+
{"version":3,"file":"UploadedFile.module.scss.cjs","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.module.scss"],"sourcesContent":[".uploadedFileContainer {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n}\n\n.uploadedFileContainerCriticalError {\n border: 1px solid var(--colors-secondary-red-base);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n}\n\n.singleLineText {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 0 1 80%;\n min-width: 0;\n}\n\n.singleLineTextWithoutFlex {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: none;\n min-width: 0;\n width: 100%;\n}\n\n.fileSizeText {\n white-space: nowrap;\n flex: 0 0 20%;\n text-align: right;\n}\n\n.previewImage {\n img {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--sizes-xs);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,m2BAAA;AACA,uBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,oCAAA,CAAA,6CAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,2BAAA,CAAA,qCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var uploadFileStyles = {"uploadedFileContainer":"
|
|
3
|
+
insertStyle("._uploadedFileContainer_1lguk_1 {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n}\n\n._uploadedFileContainerCriticalError_1lguk_7 {\n border: 1px solid var(--colors-secondary-red-base);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n}\n\n._singleLineText_1lguk_13 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 0 1 80%;\n min-width: 0;\n}\n\n._singleLineTextWithoutFlex_1lguk_21 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: none;\n min-width: 0;\n width: 100%;\n}\n\n._fileSizeText_1lguk_30 {\n white-space: nowrap;\n flex: 0 0 20%;\n text-align: right;\n}\n\n._previewImage_1lguk_36 img {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--sizes-xs);\n}");
|
|
4
|
+
var uploadFileStyles = {"uploadedFileContainer":"_uploadedFileContainer_1lguk_1","uploadedFileContainerCriticalError":"_uploadedFileContainerCriticalError_1lguk_7","singleLineText":"_singleLineText_1lguk_13","singleLineTextWithoutFlex":"_singleLineTextWithoutFlex_1lguk_21","fileSizeText":"_fileSizeText_1lguk_30","previewImage":"_previewImage_1lguk_36"};
|
|
5
5
|
|
|
6
6
|
export { uploadFileStyles as default };
|
|
7
7
|
//# sourceMappingURL=UploadedFile.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadedFile.module.scss.js","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.module.scss"],"sourcesContent":[".uploadedFileContainer {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n
|
|
1
|
+
{"version":3,"file":"UploadedFile.module.scss.js","sources":["../../../../../src/components/UploadFile/components/UploadedFile/UploadedFile.module.scss"],"sourcesContent":[".uploadedFileContainer {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n}\n\n.uploadedFileContainerCriticalError {\n border: 1px solid var(--colors-secondary-red-base);\n border-radius: var(--radius-base);\n padding: var(--sizes-3);\n}\n\n.singleLineText {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 0 1 80%;\n min-width: 0;\n}\n\n.singleLineTextWithoutFlex {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: none;\n min-width: 0;\n width: 100%;\n}\n\n.fileSizeText {\n white-space: nowrap;\n flex: 0 0 20%;\n text-align: right;\n}\n\n.previewImage {\n img {\n border: 1px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--sizes-xs);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,m2BAAA;AACA,uBAAA,CAAA,uBAAA,CAAA,gCAAA,CAAA,oCAAA,CAAA,6CAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,2BAAA,CAAA,qCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var constants = require('../../constants.cjs');
|
|
5
5
|
|
|
6
|
-
const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, }) => {
|
|
6
|
+
const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, customErrorMessage, }) => {
|
|
7
7
|
// Tracks error states within the input element itself, using preset
|
|
8
8
|
// error messages and assigns these to the input component based on the file
|
|
9
9
|
const setInputValidation = React.useCallback(() => {
|
|
10
10
|
var _a, _b, _c, _d;
|
|
11
|
-
let errorMessage = constants.InputErrorStateMessages.VALID;
|
|
11
|
+
let errorMessage = customErrorMessage || constants.InputErrorStateMessages.VALID;
|
|
12
12
|
if (!((_b = (_a = inputRef.current) === null || _a === undefined ? undefined : _a.files) === null || _b === undefined ? undefined : _b.length)) {
|
|
13
13
|
(_c = inputRef.current) === null || _c === undefined ? undefined : _c.setCustomValidity(errorMessage);
|
|
14
14
|
return;
|
|
@@ -58,11 +58,11 @@ const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, }) => {
|
|
|
58
58
|
}
|
|
59
59
|
// If no errors, errorMessage remains VALID
|
|
60
60
|
(_d = inputRef.current) === null || _d === undefined ? undefined : _d.setCustomValidity(errorMessage);
|
|
61
|
-
}, [inputRef, maxBytes, fileTypes]);
|
|
62
|
-
// Validate input whenever fileList changes
|
|
61
|
+
}, [customErrorMessage, inputRef, maxBytes, fileTypes]);
|
|
62
|
+
// Validate input whenever fileList or the custom error message changes
|
|
63
63
|
React.useEffect(() => {
|
|
64
64
|
setInputValidation();
|
|
65
|
-
}, [fileList, setInputValidation]);
|
|
65
|
+
}, [fileList, setInputValidation, customErrorMessage]);
|
|
66
66
|
};
|
|
67
67
|
|
|
68
68
|
exports.useValidateInput = useValidateInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useValidateInput.cjs","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\n\ntype UseValidateInputProps = {\n fileTypes: Array<AcceptedFileTypes>;\n maxBytes: number;\n fileList: FileList | undefined;\n inputRef: React.MutableRefObject<HTMLInputElement | null>;\n};\n\nexport const useValidateInput = ({\n fileList,\n fileTypes,\n inputRef,\n maxBytes,\n}: UseValidateInputProps) => {\n // Tracks error states within the input element itself, using preset\n // error messages and assigns these to the input component based on the file\n const setInputValidation = useCallback(() => {\n let errorMessage = InputErrorStateMessages.VALID;\n\n if (!inputRef.current?.files?.length) {\n inputRef.current?.setCustomValidity(errorMessage);\n return;\n }\n\n const results = {\n numberOfInvalidFormatFiles: 0,\n numberOfInvalidSizeFiles: 0,\n totalFiles: inputRef.current.files.length,\n };\n\n Array.from(inputRef.current.files).forEach((file) => {\n // Check file size\n if (file.size > maxBytes) {\n results.numberOfInvalidSizeFiles += 1;\n }\n\n // Check file type/format\n const [, extension] = file.type.split('/');\n const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n if (!isTypeValid) {\n results.numberOfInvalidFormatFiles += 1;\n }\n });\n\n // Determine appropriate error message based on validation results\n const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n const isSingleFile = results.totalFiles === 1;\n\n if (hasFormatErrors && hasSizeErrors) {\n // Both format and size errors exist\n errorMessage = InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n } else if (hasFormatErrors && !hasSizeErrors) {\n // Only format errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_FORMAT;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_FORMATS;\n }\n } else if (!hasFormatErrors && hasSizeErrors) {\n // Only size errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_SIZE;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_SIZES;\n }\n }\n // If no errors, errorMessage remains VALID\n\n inputRef.current?.setCustomValidity(errorMessage);\n }, [inputRef, maxBytes, fileTypes]);\n\n // Validate input whenever fileList changes\n useEffect(() => {\n setInputValidation();\n }, [fileList, setInputValidation]);\n};\n"],"names":["useCallback","InputErrorStateMessages","useEffect"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"useValidateInput.cjs","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\n\ntype UseValidateInputProps = {\n fileTypes: Array<AcceptedFileTypes>;\n maxBytes: number;\n fileList: FileList | undefined;\n inputRef: React.MutableRefObject<HTMLInputElement | null>;\n customErrorMessage?: string;\n};\n\nexport const useValidateInput = ({\n fileList,\n fileTypes,\n inputRef,\n maxBytes,\n customErrorMessage,\n}: UseValidateInputProps) => {\n // Tracks error states within the input element itself, using preset\n // error messages and assigns these to the input component based on the file\n const setInputValidation = useCallback(() => {\n let errorMessage = customErrorMessage || InputErrorStateMessages.VALID;\n\n if (!inputRef.current?.files?.length) {\n inputRef.current?.setCustomValidity(errorMessage);\n return;\n }\n\n const results = {\n numberOfInvalidFormatFiles: 0,\n numberOfInvalidSizeFiles: 0,\n totalFiles: inputRef.current.files.length,\n };\n\n Array.from(inputRef.current.files).forEach((file) => {\n // Check file size\n if (file.size > maxBytes) {\n results.numberOfInvalidSizeFiles += 1;\n }\n\n // Check file type/format\n const [, extension] = file.type.split('/');\n const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n if (!isTypeValid) {\n results.numberOfInvalidFormatFiles += 1;\n }\n });\n\n // Determine appropriate error message based on validation results\n const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n const isSingleFile = results.totalFiles === 1;\n\n if (hasFormatErrors && hasSizeErrors) {\n // Both format and size errors exist\n errorMessage = InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n } else if (hasFormatErrors && !hasSizeErrors) {\n // Only format errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_FORMAT;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_FORMATS;\n }\n } else if (!hasFormatErrors && hasSizeErrors) {\n // Only size errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_SIZE;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_SIZES;\n }\n }\n // If no errors, errorMessage remains VALID\n\n inputRef.current?.setCustomValidity(errorMessage);\n }, [customErrorMessage, inputRef, maxBytes, fileTypes]);\n\n // Validate input whenever fileList or the custom error message changes\n useEffect(() => {\n setInputValidation();\n }, [fileList, setInputValidation, customErrorMessage]);\n};\n"],"names":["useCallback","InputErrorStateMessages","useEffect"],"mappings":";;;;;AAWa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,kBAAkB,GACI,KAAI;;;AAG1B,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,YAAY,GAAG,kBAAkB,IAAIC,iCAAuB,CAAC,KAAK;AAEtE,QAAA,IAAI,EAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM,CAAA,EAAE;YACpC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;YACjD;AACD;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,0BAA0B,EAAE,CAAC;AAC7B,YAAA,wBAAwB,EAAE,CAAC;AAC3B,YAAA,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM;SAC1C;AAED,QAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;;AAElD,YAAA,IAAI,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE;AACxB,gBAAA,OAAO,CAAC,wBAAwB,IAAI,CAAC;AACtC;;AAGD,YAAA,MAAM,GAAG,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAC1C,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;YACvF,IAAI,CAAC,WAAW,EAAE;AAChB,gBAAA,OAAO,CAAC,0BAA0B,IAAI,CAAC;AACxC;AACH,SAAC,CAAC;;AAGF,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,0BAA0B,GAAG,CAAC;AAC9D,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,wBAAwB,GAAG,CAAC;AAC1D,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,KAAK,CAAC;QAE7C,IAAI,eAAe,IAAI,aAAa,EAAE;;AAEpC,YAAA,YAAY,GAAGA,iCAAuB,CAAC,uBAAuB;AAC/D;AAAM,aAAA,IAAI,eAAe,IAAI,CAAC,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAGA,iCAAuB,CAAC,cAAc;AACtD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAGA,iCAAuB,CAAC,eAAe;AACvD;AACF;AAAM,aAAA,IAAI,CAAC,eAAe,IAAI,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAGA,iCAAuB,CAAC,YAAY;AACpD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAGA,iCAAuB,CAAC,aAAa;AACrD;AACF;;QAGD,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;KAClD,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;;IAGvDC,eAAS,CAAC,MAAK;AACb,QAAA,kBAAkB,EAAE;KACrB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AACxD;;;;"}
|
|
@@ -5,6 +5,7 @@ type UseValidateInputProps = {
|
|
|
5
5
|
maxBytes: number;
|
|
6
6
|
fileList: FileList | undefined;
|
|
7
7
|
inputRef: React.MutableRefObject<HTMLInputElement | null>;
|
|
8
|
+
customErrorMessage?: string;
|
|
8
9
|
};
|
|
9
|
-
export declare const useValidateInput: ({ fileList, fileTypes, inputRef, maxBytes, }: UseValidateInputProps) => void;
|
|
10
|
+
export declare const useValidateInput: ({ fileList, fileTypes, inputRef, maxBytes, customErrorMessage, }: UseValidateInputProps) => void;
|
|
10
11
|
export {};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { useCallback, useEffect } from 'react';
|
|
2
2
|
import { InputErrorStateMessages } from '../../constants.js';
|
|
3
3
|
|
|
4
|
-
const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, }) => {
|
|
4
|
+
const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, customErrorMessage, }) => {
|
|
5
5
|
// Tracks error states within the input element itself, using preset
|
|
6
6
|
// error messages and assigns these to the input component based on the file
|
|
7
7
|
const setInputValidation = useCallback(() => {
|
|
8
8
|
var _a, _b, _c, _d;
|
|
9
|
-
let errorMessage = InputErrorStateMessages.VALID;
|
|
9
|
+
let errorMessage = customErrorMessage || InputErrorStateMessages.VALID;
|
|
10
10
|
if (!((_b = (_a = inputRef.current) === null || _a === undefined ? undefined : _a.files) === null || _b === undefined ? undefined : _b.length)) {
|
|
11
11
|
(_c = inputRef.current) === null || _c === undefined ? undefined : _c.setCustomValidity(errorMessage);
|
|
12
12
|
return;
|
|
@@ -56,11 +56,11 @@ const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, }) => {
|
|
|
56
56
|
}
|
|
57
57
|
// If no errors, errorMessage remains VALID
|
|
58
58
|
(_d = inputRef.current) === null || _d === undefined ? undefined : _d.setCustomValidity(errorMessage);
|
|
59
|
-
}, [inputRef, maxBytes, fileTypes]);
|
|
60
|
-
// Validate input whenever fileList changes
|
|
59
|
+
}, [customErrorMessage, inputRef, maxBytes, fileTypes]);
|
|
60
|
+
// Validate input whenever fileList or the custom error message changes
|
|
61
61
|
useEffect(() => {
|
|
62
62
|
setInputValidation();
|
|
63
|
-
}, [fileList, setInputValidation]);
|
|
63
|
+
}, [fileList, setInputValidation, customErrorMessage]);
|
|
64
64
|
};
|
|
65
65
|
|
|
66
66
|
export { useValidateInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useValidateInput.js","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\n\ntype UseValidateInputProps = {\n fileTypes: Array<AcceptedFileTypes>;\n maxBytes: number;\n fileList: FileList | undefined;\n inputRef: React.MutableRefObject<HTMLInputElement | null>;\n};\n\nexport const useValidateInput = ({\n fileList,\n fileTypes,\n inputRef,\n maxBytes,\n}: UseValidateInputProps) => {\n // Tracks error states within the input element itself, using preset\n // error messages and assigns these to the input component based on the file\n const setInputValidation = useCallback(() => {\n let errorMessage = InputErrorStateMessages.VALID;\n\n if (!inputRef.current?.files?.length) {\n inputRef.current?.setCustomValidity(errorMessage);\n return;\n }\n\n const results = {\n numberOfInvalidFormatFiles: 0,\n numberOfInvalidSizeFiles: 0,\n totalFiles: inputRef.current.files.length,\n };\n\n Array.from(inputRef.current.files).forEach((file) => {\n // Check file size\n if (file.size > maxBytes) {\n results.numberOfInvalidSizeFiles += 1;\n }\n\n // Check file type/format\n const [, extension] = file.type.split('/');\n const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n if (!isTypeValid) {\n results.numberOfInvalidFormatFiles += 1;\n }\n });\n\n // Determine appropriate error message based on validation results\n const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n const isSingleFile = results.totalFiles === 1;\n\n if (hasFormatErrors && hasSizeErrors) {\n // Both format and size errors exist\n errorMessage = InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n } else if (hasFormatErrors && !hasSizeErrors) {\n // Only format errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_FORMAT;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_FORMATS;\n }\n } else if (!hasFormatErrors && hasSizeErrors) {\n // Only size errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_SIZE;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_SIZES;\n }\n }\n // If no errors, errorMessage remains VALID\n\n inputRef.current?.setCustomValidity(errorMessage);\n }, [inputRef, maxBytes, fileTypes]);\n\n // Validate input whenever fileList changes\n useEffect(() => {\n setInputValidation();\n }, [fileList, setInputValidation]);\n};\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"useValidateInput.js","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\n\ntype UseValidateInputProps = {\n fileTypes: Array<AcceptedFileTypes>;\n maxBytes: number;\n fileList: FileList | undefined;\n inputRef: React.MutableRefObject<HTMLInputElement | null>;\n customErrorMessage?: string;\n};\n\nexport const useValidateInput = ({\n fileList,\n fileTypes,\n inputRef,\n maxBytes,\n customErrorMessage,\n}: UseValidateInputProps) => {\n // Tracks error states within the input element itself, using preset\n // error messages and assigns these to the input component based on the file\n const setInputValidation = useCallback(() => {\n let errorMessage = customErrorMessage || InputErrorStateMessages.VALID;\n\n if (!inputRef.current?.files?.length) {\n inputRef.current?.setCustomValidity(errorMessage);\n return;\n }\n\n const results = {\n numberOfInvalidFormatFiles: 0,\n numberOfInvalidSizeFiles: 0,\n totalFiles: inputRef.current.files.length,\n };\n\n Array.from(inputRef.current.files).forEach((file) => {\n // Check file size\n if (file.size > maxBytes) {\n results.numberOfInvalidSizeFiles += 1;\n }\n\n // Check file type/format\n const [, extension] = file.type.split('/');\n const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n if (!isTypeValid) {\n results.numberOfInvalidFormatFiles += 1;\n }\n });\n\n // Determine appropriate error message based on validation results\n const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n const isSingleFile = results.totalFiles === 1;\n\n if (hasFormatErrors && hasSizeErrors) {\n // Both format and size errors exist\n errorMessage = InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n } else if (hasFormatErrors && !hasSizeErrors) {\n // Only format errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_FORMAT;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_FORMATS;\n }\n } else if (!hasFormatErrors && hasSizeErrors) {\n // Only size errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_SIZE;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_SIZES;\n }\n }\n // If no errors, errorMessage remains VALID\n\n inputRef.current?.setCustomValidity(errorMessage);\n }, [customErrorMessage, inputRef, maxBytes, fileTypes]);\n\n // Validate input whenever fileList or the custom error message changes\n useEffect(() => {\n setInputValidation();\n }, [fileList, setInputValidation, customErrorMessage]);\n};\n"],"names":[],"mappings":";;;AAWa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,kBAAkB,GACI,KAAI;;;AAG1B,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,YAAY,GAAG,kBAAkB,IAAI,uBAAuB,CAAC,KAAK;AAEtE,QAAA,IAAI,EAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM,CAAA,EAAE;YACpC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;YACjD;AACD;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,0BAA0B,EAAE,CAAC;AAC7B,YAAA,wBAAwB,EAAE,CAAC;AAC3B,YAAA,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM;SAC1C;AAED,QAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;;AAElD,YAAA,IAAI,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE;AACxB,gBAAA,OAAO,CAAC,wBAAwB,IAAI,CAAC;AACtC;;AAGD,YAAA,MAAM,GAAG,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAC1C,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;YACvF,IAAI,CAAC,WAAW,EAAE;AAChB,gBAAA,OAAO,CAAC,0BAA0B,IAAI,CAAC;AACxC;AACH,SAAC,CAAC;;AAGF,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,0BAA0B,GAAG,CAAC;AAC9D,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,wBAAwB,GAAG,CAAC;AAC1D,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,KAAK,CAAC;QAE7C,IAAI,eAAe,IAAI,aAAa,EAAE;;AAEpC,YAAA,YAAY,GAAG,uBAAuB,CAAC,uBAAuB;AAC/D;AAAM,aAAA,IAAI,eAAe,IAAI,CAAC,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAG,uBAAuB,CAAC,cAAc;AACtD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAG,uBAAuB,CAAC,eAAe;AACvD;AACF;AAAM,aAAA,IAAI,CAAC,eAAe,IAAI,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAG,uBAAuB,CAAC,YAAY;AACpD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAG,uBAAuB,CAAC,aAAa;AACrD;AACF;;QAGD,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;KAClD,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;;IAGvD,SAAS,CAAC,MAAK;AACb,QAAA,kBAAkB,EAAE;KACrB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AACxD;;;;"}
|