@veeqo/ui 13.2.2 → 13.2.4
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/hooks/useUploadFile/useUploadFile.cjs +3 -2
- package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.cjs.map +1 -1
- package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.d.ts +5 -1
- package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.js +3 -2
- package/dist/components/UploadFile/hooks/useUploadFile/useUploadFile.js.map +1 -1
- package/dist/components/UploadFile/types.d.ts +1 -0
- package/dist/components/UploadedFile/UploadedFile.cjs +1 -1
- package/dist/components/UploadedFile/UploadedFile.cjs.map +1 -1
- package/dist/components/UploadedFile/UploadedFile.js +1 -1
- package/dist/components/UploadedFile/UploadedFile.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,9 +22,9 @@ 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 = constants.DEFAULT_MAXIMUM_FILE_BYTES, format = constants.FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, onFileRemoved, maxFiles = constants.DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage = '', ...otherProps }, outerRef) => {
|
|
25
|
+
const UploadFile = React.forwardRef(({ id, name, maxBytes = constants.DEFAULT_MAXIMUM_FILE_BYTES, format = constants.FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, onFileRemoved, maxFiles = constants.DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage = '', onFileInputCancelled, ...otherProps }, outerRef) => {
|
|
26
26
|
var _a, _b;
|
|
27
|
-
const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile.useUploadFile();
|
|
27
|
+
const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile.useUploadFile({ onFileInputCancelled });
|
|
28
28
|
useValidateInput.useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });
|
|
29
29
|
React.useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
|
|
30
30
|
const [isDragOver, setIsDragOver] = React.useState(false);
|
|
@@ -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 {\n FileSizeUnit,\n DEFAULT_MAXIMUM_MULTIPLE_FILES,\n DEFAULT_MAXIMUM_FILE_BYTES,\n} 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 '../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 = DEFAULT_MAXIMUM_FILE_BYTES,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n onFileRemoved,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n errorMessage = '',\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\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 hasError = !!((errorMessage || inputRef.current?.validationMessage) && !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 hasError={hasError}\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 {hasError && (\n <FlexRow>\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <Error>{errorMessage || inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\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 onRemoveFile={(fileToRemove) => {\n removeFileFromList(fileToRemove);\n onFileRemoved?.(fileToRemove);\n }}\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","DEFAULT_MAXIMUM_FILE_BYTES","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 {\n FileSizeUnit,\n DEFAULT_MAXIMUM_MULTIPLE_FILES,\n DEFAULT_MAXIMUM_FILE_BYTES,\n} 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 '../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 = DEFAULT_MAXIMUM_FILE_BYTES,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n onFileRemoved,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n errorMessage = '',\n onFileInputCancelled,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile({ onFileInputCancelled });\n\n useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\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 hasError = !!((errorMessage || inputRef.current?.validationMessage) && !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 hasError={hasError}\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 {hasError && (\n <FlexRow>\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <Error>{errorMessage || inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\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 onRemoveFile={(fileToRemove) => {\n removeFileFromList(fileToRemove);\n onFileRemoved?.(fileToRemove);\n }}\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","DEFAULT_MAXIMUM_FILE_BYTES","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,9 +16,9 @@ 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 = DEFAULT_MAXIMUM_FILE_BYTES, format = FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, onFileRemoved, maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage = '', ...otherProps }, outerRef) => {
|
|
19
|
+
const UploadFile = forwardRef(({ id, name, maxBytes = DEFAULT_MAXIMUM_FILE_BYTES, format = FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, onFileRemoved, maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage = '', onFileInputCancelled, ...otherProps }, outerRef) => {
|
|
20
20
|
var _a, _b;
|
|
21
|
-
const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile();
|
|
21
|
+
const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile({ onFileInputCancelled });
|
|
22
22
|
useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });
|
|
23
23
|
useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
|
|
24
24
|
const [isDragOver, setIsDragOver] = useState(false);
|
|
@@ -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 {\n FileSizeUnit,\n DEFAULT_MAXIMUM_MULTIPLE_FILES,\n DEFAULT_MAXIMUM_FILE_BYTES,\n} 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 '../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 = DEFAULT_MAXIMUM_FILE_BYTES,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n onFileRemoved,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n errorMessage = '',\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\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 hasError = !!((errorMessage || inputRef.current?.validationMessage) && !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 hasError={hasError}\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 {hasError && (\n <FlexRow>\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <Error>{errorMessage || inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\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 onRemoveFile={(fileToRemove) => {\n removeFileFromList(fileToRemove);\n onFileRemoved?.(fileToRemove);\n }}\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":";;;;;;;;;;;;;;;;;;AA2BO,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,EAAE,EACF,IAAI,EACJ,QAAQ,GAAG,0BAA0B,EACrC,MAAM,GAAG,YAAY,CAAC,EAAE,EACxB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,QAAQ,GAAG,cAAc,GAAG,aAAa,EACjD,iBAAiB,GAAG,KAAK,EACzB,kBAAkB,EAClB,aAAa,EACb,QAAQ,GAAG,8BAA8B,EACzC,eAAe,EACf,YAAY,GAAG,EAAE,EACjB,GAAG,UAAU,EACG,EAClB,QAAQ,KACN;;AACF,IAAA,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GACzF,aAAa,EAAE;AAEjB,IAAA,gBAAgB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAE3E,IAAA,mBAAmB,CAAC,QAAQ,EAAE,MAAM,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;;IAGnD,MAAM,WAAW,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAC3D,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5D,MAAM,uBAAuB,GAAG,qBAAqB,CAAC,EAAE,SAAS,EAAE,CAAC;AAEpE,IAAA,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,KAAkC,KAAI;AACrC,QAAA,IAAI,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,SAAA,GAAA,SAAA,GAAA,KAAK,CAAE,MAAM,KAAI,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,SAAA,GAAA,SAAA,GAAA,KAAK,CAAE,MAAM,IAAG,QAAQ,EAAE;AAC7C,YAAA,kBAAkB,EAAE;AACpB,YAAA,kBAAkB,KAAlB,IAAA,IAAA,kBAAkB,KAAlB,SAAA,GAAA,SAAA,GAAA,kBAAkB,EAAI;AACtB,YAAA,OAAO,KAAK;AACb;AACD,QAAA,OAAO,IAAI;KACZ,EACD,CAAC,kBAAkB,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CACnD;;AAGD,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAe,KAAI;AAClB,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB;AACD;QAED,WAAW,CAAC,KAAK,CAAC;AACpB,KAAC,EACD,CAAC,WAAW,CAAC,CACd;;AAGD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA6B,KAAI;;QACpD,KAAK,CAAC,cAAc,EAAE;QACtB,aAAa,CAAC,IAAI,CAAC;AACnB,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,EAAE;AAC3B,KAAC;;AAGD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA6B,KAAI;QACpD,KAAK,CAAC,cAAc,EAAE;QACtB,aAAa,CAAC,KAAK,CAAC;AACtB,KAAC;;IAGD,MAAM,UAAU,GAAG,CAAC,KAA6B,KAAK,KAAK,CAAC,cAAc,EAAE;;AAG5E,IAAA,MAAM,MAAM,GAAG,CAAC,KAA6B,KAAI;QAC/C,KAAK,CAAC,cAAc,EAAE;QACtB,aAAa,CAAC,KAAK,CAAC;;AAEpB,QAAA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM;YAAE;QAEtC,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;AACrE,QAAA,IAAI,cAAc,EAAE;AAClB,YAAA,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;AACtC;AACH,KAAC;;AAGD,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;;AAChC,QAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,MAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,CAAC;AACrE,QAAA,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,SAAA,GAAA,SAAA,GAAA,QAAQ,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK;QACtC,IAAI,cAAc,IAAI,KAAK,EAAE;YAC3B,WAAW,CAAC,KAAK,CAAC;AACnB;AAAM,aAAA,IAAI,QAAQ,EAAE;YACnB,WAAW,CAAC,QAAQ,CAAC;AACtB;KACF,EAAE,CAAC,oBAAoB,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IAE3D,SAAS,CAAC,MAAK;QACb,MAAM,GAAG,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,SAAA,GAAA,QAAQ,CAAE,OAAO;QAC7B,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,SAAA,GAAA,SAAA,GAAH,GAAG,CAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;QACzC,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,SAAA,GAAA,SAAA,GAAH,GAAG,CAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAEzC,QAAA,OAAO,MAAK;YACV,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,SAAA,GAAA,SAAA,GAAH,GAAG,CAAE,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;YAC5C,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,SAAA,GAAA,SAAA,GAAH,GAAG,CAAE,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC9C,SAAC;KACF,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAElC,IAAA,MAAM,QAAQ,GAAG,CAAC,EAAE,CAAC,YAAY,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,iBAAiB,CAAA,KAAK,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,SAAA,GAAA,SAAA,GAAA,QAAQ,CAAE,MAAM,CAAA,CAAC;IAE/F,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAE,EAAE,EAAA;YACf,KAAK;AACN,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA;oBACF,WAAW;oBACZA,cAAM,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAAA;AACL,oBAAA,iBAAiB,CACb;gBACPA,cAAC,CAAA,aAAA,CAAA,iBAAiB,EAChB,EAAA,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACV,aAAA,EAAA,qBAAqB,EACjC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EAAA;oBAEvB,UAAU,GAAGA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAG,IAAA,CAAA,GAAGA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAG,IAAA,CAAA;AAC3C,oBAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,uBAAuB,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EACd,GAAA,UAAU,EACd,CAAA,CACgB,CACZ,CACJ;AACR,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;YACL,QAAQ,KACPA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACX,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,CAAA;AACF,gBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA,EAAE,YAAY,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,iBAAiB,CAAA,CAAS,CAC5D,CACX;YACA,eAAe,KACdA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,EAAE,EAAE,CAAG,EAAA,EAAE,CAAW,SAAA,CAAA,EAAA;AAC3B,gBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA;AACF,gBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,EAAE,eAAe,CAAY,CAC9B,CACX;AACA,YAAA,CAAC,iBAAiB;AACjB,gBAAA,QAAQ,IAAI;gBACV,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;oBAChC,QACEA,6BAAC,YAAY,EAAA,EACX,GAAG,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,EACnB,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,YAAY,KAAI;4BAC7B,kBAAkB,CAAC,YAAY,CAAC;AAChC,4BAAA,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAG,YAAY,CAAC;AAC/B,yBAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EAAA,CACpB;AAEN,iBAAC,CAAC;aACH,CACK,CACA;AAEhB,CAAC;;;;"}
|
|
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 {\n FileSizeUnit,\n DEFAULT_MAXIMUM_MULTIPLE_FILES,\n DEFAULT_MAXIMUM_FILE_BYTES,\n} 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 '../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 = DEFAULT_MAXIMUM_FILE_BYTES,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n onFileRemoved,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n errorMessage = '',\n onFileInputCancelled,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile({ onFileInputCancelled });\n\n useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\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 hasError = !!((errorMessage || inputRef.current?.validationMessage) && !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 hasError={hasError}\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 {hasError && (\n <FlexRow>\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <Error>{errorMessage || inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\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 onRemoveFile={(fileToRemove) => {\n removeFileFromList(fileToRemove);\n onFileRemoved?.(fileToRemove);\n }}\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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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
|
|
5
|
-
const useUploadFile = () => {
|
|
5
|
+
const useUploadFile = ({ onFileInputCancelled } = {}) => {
|
|
6
6
|
const inputRef = React.useRef(null);
|
|
7
7
|
const [fileList, setFileList] = React.useState();
|
|
8
8
|
// Keep inputRef.current.files in sync with fileList
|
|
@@ -22,6 +22,7 @@ const useUploadFile = () => {
|
|
|
22
22
|
}, [fileList, inputRef]);
|
|
23
23
|
// Restores the previous file selection when user cancels the file dialog
|
|
24
24
|
const onCancel = React.useCallback(() => {
|
|
25
|
+
onFileInputCancelled === null || onFileInputCancelled === undefined ? undefined : onFileInputCancelled();
|
|
25
26
|
// If there are no existing files to restore, just return
|
|
26
27
|
if (!fileList || fileList.length === 0)
|
|
27
28
|
return;
|
|
@@ -30,7 +31,7 @@ const useUploadFile = () => {
|
|
|
30
31
|
if (inputRef === null || inputRef === undefined ? undefined : inputRef.current) {
|
|
31
32
|
inputRef.current.files = newFileList.files;
|
|
32
33
|
}
|
|
33
|
-
}, [fileList]);
|
|
34
|
+
}, [fileList, onFileInputCancelled]);
|
|
34
35
|
const removeFileFromList = React.useCallback((fileToRemove) => {
|
|
35
36
|
if (!fileList)
|
|
36
37
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUploadFile.cjs","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const useUploadFile = () => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [fileList, setFileList] = useState<FileList>();\n\n // Keep inputRef.current.files in sync with fileList\n useEffect(() => {\n if (inputRef.current && fileList) {\n // Only update if not already the same (avoid unnecessary assignment)\n if (inputRef.current.files !== fileList) {\n const dt = new DataTransfer();\n Array.from(fileList).forEach((file) => dt.items.add(file));\n inputRef.current.files = dt.files;\n }\n }\n // If fileList is undefined, clear the input\n if (inputRef.current && !fileList) {\n inputRef.current.value = '';\n }\n }, [fileList, inputRef]);\n\n // Restores the previous file selection when user cancels the file dialog\n const onCancel = useCallback(() => {\n // If there are no existing files to restore, just return\n if (!fileList || fileList.length === 0) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n }, [fileList]);\n\n const removeFileFromList = useCallback(\n (fileToRemove: File) => {\n if (!fileList) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => {\n if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n newFileList.items.add(file);\n });\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n setFileList(newFileList.files);\n },\n [fileList],\n );\n\n const clearFileSelection = useCallback(() => {\n if (inputRef.current?.value) inputRef.current.value = '';\n setFileList(undefined);\n }, []);\n\n return {\n clearFileSelection,\n inputRef,\n onCancel,\n removeFileFromList,\n setFileList,\n fileList,\n };\n};\n"],"names":["useRef","useState","useEffect","useCallback"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"useUploadFile.cjs","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype UseUploadFileProps = {\n onFileInputCancelled?: () => void;\n};\n\nexport const useUploadFile = ({ onFileInputCancelled }: UseUploadFileProps = {}) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [fileList, setFileList] = useState<FileList>();\n\n // Keep inputRef.current.files in sync with fileList\n useEffect(() => {\n if (inputRef.current && fileList) {\n // Only update if not already the same (avoid unnecessary assignment)\n if (inputRef.current.files !== fileList) {\n const dt = new DataTransfer();\n Array.from(fileList).forEach((file) => dt.items.add(file));\n inputRef.current.files = dt.files;\n }\n }\n // If fileList is undefined, clear the input\n if (inputRef.current && !fileList) {\n inputRef.current.value = '';\n }\n }, [fileList, inputRef]);\n\n // Restores the previous file selection when user cancels the file dialog\n const onCancel = useCallback(() => {\n onFileInputCancelled?.();\n\n // If there are no existing files to restore, just return\n if (!fileList || fileList.length === 0) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n }, [fileList, onFileInputCancelled]);\n\n const removeFileFromList = useCallback(\n (fileToRemove: File) => {\n if (!fileList) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => {\n if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n newFileList.items.add(file);\n });\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n setFileList(newFileList.files);\n },\n [fileList],\n );\n\n const clearFileSelection = useCallback(() => {\n if (inputRef.current?.value) inputRef.current.value = '';\n setFileList(undefined);\n }, []);\n\n return {\n clearFileSelection,\n inputRef,\n onCancel,\n removeFileFromList,\n setFileList,\n fileList,\n };\n};\n"],"names":["useRef","useState","useEffect","useCallback"],"mappings":";;;;AAMa,MAAA,aAAa,GAAG,CAAC,EAAE,oBAAoB,EAAA,GAAyB,EAAE,KAAI;AACjF,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,EAAY;;IAGpDC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAGC,iBAAW,CAAC,MAAK;AAChC,QAAA,oBAAoB,KAApB,IAAA,IAAA,oBAAoB,KAApB,SAAA,GAAA,SAAA,GAAA,oBAAoB,EAAI;;AAGxB,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;AAExC,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEnE,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CACpC,CAAC,YAAkB,KAAI;AACrB,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACpC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AAAE,gBAAA,OAAO;AAC5C,YAAA,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACD,QAAA,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC;AAChC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,gDAAE,KAAK;AAAE,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;QACxD,WAAW,CAAC,SAAS,CAAC;KACvB,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,kBAAkB;QAClB,QAAQ;QACR,QAAQ;QACR,kBAAkB;QAClB,WAAW;QACX,QAAQ;KACT;AACH;;;;"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
2
|
+
type UseUploadFileProps = {
|
|
3
|
+
onFileInputCancelled?: () => void;
|
|
4
|
+
};
|
|
5
|
+
export declare const useUploadFile: ({ onFileInputCancelled }?: UseUploadFileProps) => {
|
|
3
6
|
clearFileSelection: () => void;
|
|
4
7
|
inputRef: import("react").MutableRefObject<HTMLInputElement | null>;
|
|
5
8
|
onCancel: () => void;
|
|
@@ -7,3 +10,4 @@ export declare const useUploadFile: () => {
|
|
|
7
10
|
setFileList: import("react").Dispatch<import("react").SetStateAction<FileList | undefined>>;
|
|
8
11
|
fileList: FileList | undefined;
|
|
9
12
|
};
|
|
13
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useRef, useState, useEffect, useCallback } from 'react';
|
|
2
2
|
|
|
3
|
-
const useUploadFile = () => {
|
|
3
|
+
const useUploadFile = ({ onFileInputCancelled } = {}) => {
|
|
4
4
|
const inputRef = useRef(null);
|
|
5
5
|
const [fileList, setFileList] = useState();
|
|
6
6
|
// Keep inputRef.current.files in sync with fileList
|
|
@@ -20,6 +20,7 @@ const useUploadFile = () => {
|
|
|
20
20
|
}, [fileList, inputRef]);
|
|
21
21
|
// Restores the previous file selection when user cancels the file dialog
|
|
22
22
|
const onCancel = useCallback(() => {
|
|
23
|
+
onFileInputCancelled === null || onFileInputCancelled === undefined ? undefined : onFileInputCancelled();
|
|
23
24
|
// If there are no existing files to restore, just return
|
|
24
25
|
if (!fileList || fileList.length === 0)
|
|
25
26
|
return;
|
|
@@ -28,7 +29,7 @@ const useUploadFile = () => {
|
|
|
28
29
|
if (inputRef === null || inputRef === undefined ? undefined : inputRef.current) {
|
|
29
30
|
inputRef.current.files = newFileList.files;
|
|
30
31
|
}
|
|
31
|
-
}, [fileList]);
|
|
32
|
+
}, [fileList, onFileInputCancelled]);
|
|
32
33
|
const removeFileFromList = useCallback((fileToRemove) => {
|
|
33
34
|
if (!fileList)
|
|
34
35
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUploadFile.js","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const useUploadFile = () => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [fileList, setFileList] = useState<FileList>();\n\n // Keep inputRef.current.files in sync with fileList\n useEffect(() => {\n if (inputRef.current && fileList) {\n // Only update if not already the same (avoid unnecessary assignment)\n if (inputRef.current.files !== fileList) {\n const dt = new DataTransfer();\n Array.from(fileList).forEach((file) => dt.items.add(file));\n inputRef.current.files = dt.files;\n }\n }\n // If fileList is undefined, clear the input\n if (inputRef.current && !fileList) {\n inputRef.current.value = '';\n }\n }, [fileList, inputRef]);\n\n // Restores the previous file selection when user cancels the file dialog\n const onCancel = useCallback(() => {\n // If there are no existing files to restore, just return\n if (!fileList || fileList.length === 0) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n }, [fileList]);\n\n const removeFileFromList = useCallback(\n (fileToRemove: File) => {\n if (!fileList) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => {\n if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n newFileList.items.add(file);\n });\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n setFileList(newFileList.files);\n },\n [fileList],\n );\n\n const clearFileSelection = useCallback(() => {\n if (inputRef.current?.value) inputRef.current.value = '';\n setFileList(undefined);\n }, []);\n\n return {\n clearFileSelection,\n inputRef,\n onCancel,\n removeFileFromList,\n setFileList,\n fileList,\n };\n};\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"useUploadFile.js","sources":["../../../../../src/components/UploadFile/hooks/useUploadFile/useUploadFile.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype UseUploadFileProps = {\n onFileInputCancelled?: () => void;\n};\n\nexport const useUploadFile = ({ onFileInputCancelled }: UseUploadFileProps = {}) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [fileList, setFileList] = useState<FileList>();\n\n // Keep inputRef.current.files in sync with fileList\n useEffect(() => {\n if (inputRef.current && fileList) {\n // Only update if not already the same (avoid unnecessary assignment)\n if (inputRef.current.files !== fileList) {\n const dt = new DataTransfer();\n Array.from(fileList).forEach((file) => dt.items.add(file));\n inputRef.current.files = dt.files;\n }\n }\n // If fileList is undefined, clear the input\n if (inputRef.current && !fileList) {\n inputRef.current.value = '';\n }\n }, [fileList, inputRef]);\n\n // Restores the previous file selection when user cancels the file dialog\n const onCancel = useCallback(() => {\n onFileInputCancelled?.();\n\n // If there are no existing files to restore, just return\n if (!fileList || fileList.length === 0) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => newFileList.items.add(file));\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n }, [fileList, onFileInputCancelled]);\n\n const removeFileFromList = useCallback(\n (fileToRemove: File) => {\n if (!fileList) return;\n\n const newFileList = new DataTransfer();\n Array.from(fileList).forEach((file) => {\n if (file.name === fileToRemove.name) return; // Skip this file (remove it)\n newFileList.items.add(file);\n });\n\n if (inputRef?.current) {\n inputRef.current.files = newFileList.files;\n }\n setFileList(newFileList.files);\n },\n [fileList],\n );\n\n const clearFileSelection = useCallback(() => {\n if (inputRef.current?.value) inputRef.current.value = '';\n setFileList(undefined);\n }, []);\n\n return {\n clearFileSelection,\n inputRef,\n onCancel,\n removeFileFromList,\n setFileList,\n fileList,\n };\n};\n"],"names":[],"mappings":";;AAMa,MAAA,aAAa,GAAG,CAAC,EAAE,oBAAoB,EAAA,GAAyB,EAAE,KAAI;AACjF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAY;;IAGpD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE;;AAEhC,YAAA,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;AACvC,gBAAA,MAAM,EAAE,GAAG,IAAI,YAAY,EAAE;gBAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC1D,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK;AAClC;AACF;;AAED,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACjC,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC5B;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;;AAGxB,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;AAChC,QAAA,oBAAoB,KAApB,IAAA,IAAA,oBAAoB,KAApB,SAAA,GAAA,SAAA,GAAA,oBAAoB,EAAI;;AAGxB,QAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;AAExC,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEnE,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AAEpC,IAAA,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,YAAkB,KAAI;AACrB,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,MAAM,WAAW,GAAG,IAAI,YAAY,EAAE;QACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACpC,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI;AAAE,gBAAA,OAAO;AAC5C,YAAA,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,IAAI,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,OAAO,EAAE;YACrB,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC3C;AACD,QAAA,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC;AAChC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;;AAC1C,QAAA,IAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,gDAAE,KAAK;AAAE,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;QACxD,WAAW,CAAC,SAAS,CAAC;KACvB,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,kBAAkB;QAClB,QAAQ;QACR,QAAQ;QACR,kBAAkB;QAClB,WAAW;QACX,QAAQ;KACT;AACH;;;;"}
|
|
@@ -10,6 +10,7 @@ export interface UploadFileProps extends React.InputHTMLAttributes<HTMLInputElem
|
|
|
10
10
|
hideUploadedFiles?: boolean;
|
|
11
11
|
onMaxFilesExceeded?: () => void;
|
|
12
12
|
onFileRemoved?: (file: File) => void;
|
|
13
|
+
onFileInputCancelled?: () => void;
|
|
13
14
|
maxFiles?: number;
|
|
14
15
|
disabledMessage?: string;
|
|
15
16
|
}
|
|
@@ -33,7 +33,7 @@ const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileType
|
|
|
33
33
|
}
|
|
34
34
|
if (!file)
|
|
35
35
|
return null;
|
|
36
|
-
const RemoveButton = (React__default.default.createElement(Button.Button, { size: "sm", variant: "flat", onClick: () => onRemoveFile && onRemoveFile(file), iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), "aria-label": `Remove file ${file.name}`, disabled: disabled }));
|
|
36
|
+
const RemoveButton = (React__default.default.createElement(Button.Button, { size: "sm", variant: "flat", onClick: () => onRemoveFile && onRemoveFile(file), iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), "aria-label": `Remove file ${file.name}`, disabled: disabled, type: "button" }));
|
|
37
37
|
const ErrorMessages = hasCriticalErrors && (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "flex-start" },
|
|
38
38
|
React__default.default.createElement(CriticalIcon.ReactComponent, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.secondary.red.base }),
|
|
39
39
|
React__default.default.createElement("div", { className: UploadedFile_module.singleLineWrapper },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadedFile.cjs","sources":["../../../src/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 { FlexRow } from '../Flex/FlexRow';\nimport { Error } from '../../hoc/withLabels/styled';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n file?: File | null;\n onRemoveFile?: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n file,\n onRemoveFile,\n disabled,\n format,\n maxBytes,\n fileTypes,\n isLoading,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n if (isLoading) {\n return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n }\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => onRemoveFile && onRemoveFile(file)}\n iconSlot={<CrossIcon />}\n aria-label={`Remove file ${file.name}`}\n disabled={disabled}\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Error className={uploadedFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Error>\n </div>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <div className={uploadedFileStyles.standardFileTextWrapper}>\n <Text\n className={uploadedFileStyles.singleLineText}\n variant=\"body\"\n style={{\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && (\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n {RemoveButton}\n </div>\n )}\n </FlexRow>\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n <FlexCol>\n <FlexRow\n alignItems=\"center\"\n style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n flexWrap=\"nowrap\"\n >\n <Image\n className={uploadedFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n </FlexRow>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && RemoveButton}\n </FlexRow>\n </div>\n );\n};\n"],"names":["usePreviewImage","useFileErrorMessages","getFileSizeString","React","Skeleton","Button","CrossIcon","FlexRow","CriticalIcon","theme","uploadedFileStyles","Error","FlexCol","Text","Image"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MA0Ba,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACS,KAAI;AACtB,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAGA,+BAAe,CAAC,EAAE,IAAI,EAAE,CAAC;AAEnE,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAGC,yCAAoB,CAAC;QAChE,IAAI;QACJ,QAAQ;QACR,SAAS;AACV,KAAA,CAAC;IAEF,MAAM,YAAY,GAAGC,mCAAiB,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,SAAS,EAAE;QACb,OAAOC,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAC,EAAA,MAAM,EAAC,MAAM,EAAA,YAAA,EAAY,cAAc,EAAA,CAAG;AAC5D;AAED,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;
|
|
1
|
+
{"version":3,"file":"UploadedFile.cjs","sources":["../../../src/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 { FlexRow } from '../Flex/FlexRow';\nimport { Error } from '../../hoc/withLabels/styled';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n file?: File | null;\n onRemoveFile?: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n file,\n onRemoveFile,\n disabled,\n format,\n maxBytes,\n fileTypes,\n isLoading,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n if (isLoading) {\n return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n }\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => onRemoveFile && onRemoveFile(file)}\n iconSlot={<CrossIcon />}\n aria-label={`Remove file ${file.name}`}\n disabled={disabled}\n type=\"button\"\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Error className={uploadedFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Error>\n </div>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <div className={uploadedFileStyles.standardFileTextWrapper}>\n <Text\n className={uploadedFileStyles.singleLineText}\n variant=\"body\"\n style={{\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && (\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n {RemoveButton}\n </div>\n )}\n </FlexRow>\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n <FlexCol>\n <FlexRow\n alignItems=\"center\"\n style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n flexWrap=\"nowrap\"\n >\n <Image\n className={uploadedFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n </FlexRow>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && RemoveButton}\n </FlexRow>\n </div>\n );\n};\n"],"names":["usePreviewImage","useFileErrorMessages","getFileSizeString","React","Skeleton","Button","CrossIcon","FlexRow","CriticalIcon","theme","uploadedFileStyles","Error","FlexCol","Text","Image"],"mappings":"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"}
|
|
@@ -27,7 +27,7 @@ const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileType
|
|
|
27
27
|
}
|
|
28
28
|
if (!file)
|
|
29
29
|
return null;
|
|
30
|
-
const RemoveButton = (React__default.createElement(Button, { size: "sm", variant: "flat", onClick: () => onRemoveFile && onRemoveFile(file), iconSlot: React__default.createElement(CrossIcon, null), "aria-label": `Remove file ${file.name}`, disabled: disabled }));
|
|
30
|
+
const RemoveButton = (React__default.createElement(Button, { size: "sm", variant: "flat", onClick: () => onRemoveFile && onRemoveFile(file), iconSlot: React__default.createElement(CrossIcon, null), "aria-label": `Remove file ${file.name}`, disabled: disabled, type: "button" }));
|
|
31
31
|
const ErrorMessages = hasCriticalErrors && (React__default.createElement(FlexRow, { alignItems: "flex-start" },
|
|
32
32
|
React__default.createElement(CriticalIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.secondary.red.base }),
|
|
33
33
|
React__default.createElement("div", { className: uploadedFileStyles.singleLineWrapper },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadedFile.js","sources":["../../../src/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 { FlexRow } from '../Flex/FlexRow';\nimport { Error } from '../../hoc/withLabels/styled';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n file?: File | null;\n onRemoveFile?: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n file,\n onRemoveFile,\n disabled,\n format,\n maxBytes,\n fileTypes,\n isLoading,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n if (isLoading) {\n return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n }\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => onRemoveFile && onRemoveFile(file)}\n iconSlot={<CrossIcon />}\n aria-label={`Remove file ${file.name}`}\n disabled={disabled}\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Error className={uploadedFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Error>\n </div>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <div className={uploadedFileStyles.standardFileTextWrapper}>\n <Text\n className={uploadedFileStyles.singleLineText}\n variant=\"body\"\n style={{\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && (\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n {RemoveButton}\n </div>\n )}\n </FlexRow>\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n <FlexCol>\n <FlexRow\n alignItems=\"center\"\n style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n flexWrap=\"nowrap\"\n >\n <Image\n className={uploadedFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n </FlexRow>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && RemoveButton}\n </FlexRow>\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;MA0Ba,YAAY,GAAG,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACS,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;AACV,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,SAAS,EAAE;QACb,OAAOA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,MAAM,EAAC,MAAM,EAAA,YAAA,EAAY,cAAc,EAAA,CAAG;AAC5D;AAED,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;
|
|
1
|
+
{"version":3,"file":"UploadedFile.js","sources":["../../../src/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 { FlexRow } from '../Flex/FlexRow';\nimport { Error } from '../../hoc/withLabels/styled';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n file?: File | null;\n onRemoveFile?: (file: File) => void;\n disabled?: boolean;\n format: FileSizeUnit;\n maxBytes: number;\n fileTypes: Array<AcceptedFileTypes>;\n isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n file,\n onRemoveFile,\n disabled,\n format,\n maxBytes,\n fileTypes,\n isLoading,\n}: UploadedFileProps) => {\n const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n file,\n maxBytes,\n fileTypes,\n });\n\n const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n if (isLoading) {\n return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n }\n\n if (!file) return null;\n\n const RemoveButton = (\n <Button\n size=\"sm\"\n variant=\"flat\"\n onClick={() => onRemoveFile && onRemoveFile(file)}\n iconSlot={<CrossIcon />}\n aria-label={`Remove file ${file.name}`}\n disabled={disabled}\n type=\"button\"\n />\n );\n\n const ErrorMessages = hasCriticalErrors && (\n <FlexRow alignItems=\"flex-start\">\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Error className={uploadedFileStyles.singleLineTextWithoutFlex}>\n {errorMessages.criticalErrors.map((error, index, array) => {\n const isNotLast = !!(array.length > index + 1);\n return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n })}\n </Error>\n </div>\n </FlexRow>\n );\n\n if (!shouldShowPreview) {\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n <FlexCol style={{ flex: 1, minWidth: 0 }}>\n <div className={uploadedFileStyles.standardFileTextWrapper}>\n <Text\n className={uploadedFileStyles.singleLineText}\n variant=\"body\"\n style={{\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {file.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.fileSizeText}\n style={{ color: theme.colors.neutral.ink.light }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && (\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n {RemoveButton}\n </div>\n )}\n </FlexRow>\n </div>\n );\n }\n\n return (\n <div\n className={\n hasCriticalErrors\n ? uploadedFileStyles.uploadedFileContainerCriticalError\n : uploadedFileStyles.uploadedFileContainer\n }\n >\n <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n <FlexCol>\n <FlexRow\n alignItems=\"center\"\n style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n flexWrap=\"nowrap\"\n >\n <Image\n className={uploadedFileStyles.previewImage}\n height=\"44\"\n width=\"44\"\n src={previewSrc}\n />\n <div className={uploadedFileStyles.singleLineWrapper}>\n <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n {file?.name}\n </Text>\n <Text\n variant=\"body\"\n className={uploadedFileStyles.singleLineTextWithoutFlex}\n style={{\n color: theme.colors.neutral.ink.light,\n }}\n >\n {fileSizeCopy}\n </Text>\n </div>\n </FlexRow>\n {ErrorMessages}\n </FlexCol>\n {onRemoveFile && RemoveButton}\n </FlexRow>\n </div>\n );\n};\n"],"names":["React"],"mappings":"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"}
|