From 91491547d8dc774e41cf40525e8fc25592b16a52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Tue, 5 Nov 2024 14:31:57 +0100 Subject: [PATCH] fix(Upload): fix `UploadFile` type to include `id` as required --- .../src/components/upload/Upload.tsx | 7 ++++-- .../src/components/upload/UploadDropzone.tsx | 8 ++++-- .../components/upload/UploadFileListCell.tsx | 4 +-- .../src/components/upload/UploadVerify.tsx | 3 ++- .../upload/__tests__/useUpload.test.tsx | 2 +- .../src/components/upload/types.ts | 13 ++++++---- .../src/components/upload/useUpload.ts | 25 +++++++++++-------- .../extensions/forms/Field/Upload/Upload.tsx | 3 ++- 8 files changed, 40 insertions(+), 25 deletions(-) diff --git a/packages/dnb-eufemia/src/components/upload/Upload.tsx b/packages/dnb-eufemia/src/components/upload/Upload.tsx index fb065a95366..a28a3f71511 100644 --- a/packages/dnb-eufemia/src/components/upload/Upload.tsx +++ b/packages/dnb-eufemia/src/components/upload/Upload.tsx @@ -75,7 +75,7 @@ const Upload = (localProps: UploadAllProps) => { useUpload(id) const onInputUpload = useCallback( - (newFiles: UploadFile[]) => { + (newFiles: Array) => { const mergedFiles = [ ...files, ...newFiles.map((fileItem) => { @@ -100,7 +100,10 @@ const Upload = (localProps: UploadAllProps) => { } ) - const validFiles = [...verifiedFiles].slice(0, filesAmountLimit) + const validFiles = [...verifiedFiles].slice( + 0, + filesAmountLimit + ) as Array setFiles(validFiles) setInternalFiles(mergedFiles) diff --git a/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx b/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx index 35697bec15a..75fc703a8b5 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx @@ -9,7 +9,11 @@ import classnames from 'classnames' import HeightAnimation from '../height-animation/HeightAnimation' import { UploadContext } from './UploadContext' -import type { UploadAllProps, UploadFile, UploadProps } from './types' +import type { + UploadAllProps, + UploadFileNative, + UploadProps, +} from './types' export type UploadDragEvent = React.DragEvent | DragEvent @@ -28,7 +32,7 @@ export default function UploadDropzone({ const getFiles = useCallback((event: UploadDragEvent) => { const fileData = event.dataTransfer - const files: UploadFile[] = [] + const files: Array = [] Array.from(fileData.files).forEach((file) => { files.push({ file }) diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx index 999c92b0afe..6a49076473e 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx @@ -19,7 +19,7 @@ import { file_xml_medium as xml, file_medium as file, } from '../../icons' -import { UploadFile } from './types' +import { UploadFile, UploadFileNative } from './types' // Shared import { getPreviousSibling, warn } from '../../shared/component-helper' @@ -42,7 +42,7 @@ export type UploadFileListCellProps = { /** * Uploaded file */ - uploadFile: UploadFile + uploadFile: UploadFile | UploadFileNative /** * Calls onDelete when clicking the delete button diff --git a/packages/dnb-eufemia/src/components/upload/UploadVerify.tsx b/packages/dnb-eufemia/src/components/upload/UploadVerify.tsx index d72bb069ace..6f2ff30f0a2 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadVerify.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadVerify.tsx @@ -4,12 +4,13 @@ import { UploadContextProps, UploadAcceptedFileTypes, UploadAcceptedFileTypesWithFileMaxSize, + UploadFileNative, } from './types' export const BYTES_IN_A_MEGA_BYTE = 1048576 export function verifyFiles( - files: UploadFile[], + files: Array, context: Pick< UploadContextProps, | 'errorUnsupportedFile' diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/useUpload.test.tsx b/packages/dnb-eufemia/src/components/upload/__tests__/useUpload.test.tsx index 6688578cfd1..3550fc8fda7 100644 --- a/packages/dnb-eufemia/src/components/upload/__tests__/useUpload.test.tsx +++ b/packages/dnb-eufemia/src/components/upload/__tests__/useUpload.test.tsx @@ -81,7 +81,7 @@ describe('useUpload', () => { render() const sharedState = createSharedState<{ - files?: UploadFile[] + files?: Array }>(id) const sharedStateFiles = sharedState.get().files expect(sharedStateFiles).toEqual([mockFile]) diff --git a/packages/dnb-eufemia/src/components/upload/types.ts b/packages/dnb-eufemia/src/components/upload/types.ts index c93e10d2dd8..50aa6e602c7 100644 --- a/packages/dnb-eufemia/src/components/upload/types.ts +++ b/packages/dnb-eufemia/src/components/upload/types.ts @@ -46,7 +46,7 @@ export type UploadProps = { /** * will be called on `files` changes made by the user. Access the files with `{ files }`. */ - onChange?: ({ files }: { files: UploadFile[] }) => void + onChange?: ({ files }: { files: Array }) => void /** * will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`. @@ -80,13 +80,16 @@ export type UploadAllProps = UploadProps & export type UploadContextProps = { id?: string - onInputUpload: (files: UploadFile[]) => void + onInputUpload: (files: Array) => void } & Partial export type UploadFile = { file: File - errorMessage?: React.ReactNode + id: string + exists: boolean isLoading?: boolean - exists?: boolean - id?: string + errorMessage?: React.ReactNode } + +export type UploadFileNative = Omit & + Partial> diff --git a/packages/dnb-eufemia/src/components/upload/useUpload.ts b/packages/dnb-eufemia/src/components/upload/useUpload.ts index 03530988e1d..f0f1e88f8a5 100644 --- a/packages/dnb-eufemia/src/components/upload/useUpload.ts +++ b/packages/dnb-eufemia/src/components/upload/useUpload.ts @@ -1,13 +1,16 @@ import { useCallback, useMemo } from 'react' import { useSharedState } from '../../shared/helpers/useSharedState' -import type { UploadFile } from './types' +import type { UploadFile, UploadFileNative } from './types' export type useUploadReturn = { - files: UploadFile[] - setFiles: (files: UploadFile[]) => void - internalFiles: UploadFile[] - setInternalFiles: (files: UploadFile[]) => void - getExistingFile: (file: File, fileItems?: UploadFile[]) => UploadFile + files: Array + setFiles: (files: Array) => void + internalFiles: Array + setInternalFiles: (files: Array) => void + getExistingFile: ( + file: File, + fileItems?: Array + ) => UploadFile } /** @@ -15,19 +18,19 @@ export type useUploadReturn = { */ function useUpload(id: string): useUploadReturn { const { data, extend } = useSharedState<{ - files?: UploadFile[] - internalFiles?: UploadFile[] + files?: Array + internalFiles?: Array }>(id) const setFiles = useCallback( - (files: UploadFile[]) => { + (files: Array) => { extend({ files }) }, [extend] ) const setInternalFiles = useCallback( - (internalFiles: UploadFile[]) => { + (internalFiles: Array) => { extend({ internalFiles }) }, [extend] @@ -40,7 +43,7 @@ function useUpload(id: string): useUploadReturn { ) const getExistingFile = useCallback( - (file: File, fileItems: UploadFile[] = files) => { + (file: File, fileItems: Array = files) => { return fileItems.find(({ file: f }) => { return ( f.name === file.name && diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx index ba72ac0ed21..29099b27da8 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx @@ -10,6 +10,7 @@ import { import { FieldHelpProps, FieldProps } from '../../types' import Upload, { UploadFile, + UploadFileNative, UploadProps, } from '../../../../components/Upload' import useUpload from '../../../../components/upload/useUpload' @@ -19,7 +20,7 @@ import { useTranslation as useSharedTranslation } from '../../../../shared' import { SpacingProps } from '../../../../shared/types' import { FormError } from '../../utils' -export type UploadValue = Array +export type UploadValue = Array export type Props = FieldHelpProps & Omit, 'name'> & SpacingProps & {