feat(Value.Upload): add async onFileClick event (#4397)

Co-authored-by: Tobias Høegh <[email protected]>
dnbexperience · Dec 13, 2024 · be1c21c · be1c21c
1 parent 0c58973
commit be1c21c
Show file tree

Hide file tree

Showing 17 changed files with 398 additions and 146 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx
@@ -1,6 +1,7 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
 import { Form, Value, Field } from '@dnb/eufemia/src/extensions/forms'
 import { Flex, Span } from '@dnb/eufemia/src'
+import { createRequest } from '../../Form/SubmitIndicator/Examples'
 import { createMockFile } from '../../../../../../docs/uilib/components/upload/Examples'
 
 export const Placeholder = () => {
@@ -152,7 +153,11 @@ export const Label = () => {
 
 export const LabelAndValue = () => {
   return (
-    <ComponentBox hideCode scope={{ createMockFile }}>
+    <ComponentBox
+      hideCode
+      scope={{ createMockFile }}
+      data-visual-test="upload-value-label-and-value"
+    >
       <Value.Upload
         label="Label text"
         value={[
@@ -172,6 +177,36 @@ export const LabelAndValue = () => {
   )
 }
 
+export const LabelAndValueOnFileClick = () => {
+  return (
+    <ComponentBox
+      hideCode
+      scope={{ createMockFile }}
+      data-visual-test="upload-value-label-and-value-on-file-click"
+    >
+      <Value.Upload
+        onFileClick={() => {
+          console.log('Clicked on file')
+        }}
+        label="Label text"
+        value={[
+          {
+            file: createMockFile('fileName-1.png', 1000000, 'image/png'),
+            exists: false,
+            id: '1',
+          },
+          {
+            file: createMockFile('fileName-2.png', 2000000, 'image/png'),
+            exists: false,
+            isLoading: true,
+            id: '2',
+          },
+        ]}
+      />
+    </ComponentBox>
+  )
+}
+
 export const Inline = () => {
   return (
     <ComponentBox
@@ -255,6 +290,68 @@ export const ListVariants = () => {
   )
 }
 
+export const ListVariantsOnFileClick = () => {
+  return (
+    <ComponentBox
+      scope={{ createMockFile }}
+      data-visual-test="upload-value-lists-on-file-click"
+      hideCode
+    >
+      <Value.Upload
+        onFileClick={() => {
+          console.log('Clicked on file')
+        }}
+        value={[
+          {
+            file: createMockFile('fileName-1.png', 1000000, 'image/png'),
+            exists: false,
+            isLoading: true,
+            id: '1',
+          },
+          {
+            file: createMockFile('fileName-2.png', 2000000, 'image/png'),
+            exists: false,
+            id: '2',
+          },
+          {
+            file: createMockFile('fileName-3.png', 3000000, 'image/png'),
+            exists: false,
+            id: '3',
+          },
+        ]}
+        label="Ordered List"
+        variant="ol"
+      />
+      <Value.Upload
+        onFileClick={() => {
+          console.log('Clicked on file')
+        }}
+        value={[
+          {
+            file: createMockFile('fileName-1.png', 1000000, 'image/png'),
+            exists: false,
+            id: '1',
+          },
+          {
+            file: createMockFile('fileName-2.png', 2000000, 'image/png'),
+            exists: false,
+            id: '2',
+            isLoading: true,
+          },
+          {
+            file: createMockFile('fileName-3.png', 3000000, 'image/png'),
+            exists: false,
+            id: '3',
+            isLoading: true,
+          },
+        ]}
+        label="Unordered List"
+        variant="ul"
+      />
+    </ComponentBox>
+  )
+}
+
 export const ListTypes = () => {
   return (
     <ComponentBox scope={{ createMockFile }} hideCode>
@@ -396,7 +493,7 @@ export const ListTypes = () => {
 
 export const OnFileClick = () => {
   return (
-    <ComponentBox hideCode scope={{ createMockFile }}>
+    <ComponentBox scope={{ createMockFile, createRequest }}>
       <Value.Upload
         label="Label text"
         value={[
@@ -411,7 +508,13 @@ export const OnFileClick = () => {
             id: '2',
           },
         ]}
-        onFileClick={({ fileItem }) => {
+        onFileClick={async ({ fileItem }) => {
+          const request = createRequest()
+          console.log(
+            'making API request to fetch the url of the file: ' +
+              fileItem.file.name,
+          )
+          await request(2000) // Simulate a request
           window.open(
             'https://eufemia.dnb.no/images/avatars/' + fileItem.file.name,
             '_blank',

diff --git a/...dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx b/...dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx
@@ -53,3 +53,8 @@ import * as Examples from './Examples'
 ### Using `onFileClick`
 
 <Examples.OnFileClick />
+
+<VisibleWhenVisualTest>
+  <Examples.LabelAndValueOnFileClick />
+  <Examples.ListVariantsOnFileClick />
+</VisibleWhenVisualTest>
diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx
@@ -29,6 +29,7 @@ import { getPreviousSibling } from '../../shared/component-helper'
 import useUpload from './useUpload'
 import { getFileTypeFromExtension } from './UploadVerify'
 import UploadFileLink from './UploadFileListLink'
+import { ProgressIndicatorAllProps } from '../progress-indicator/types'
 
 // Will be deprecated - and then default to only showing the file icon,
 // and not file icon per file extension type
@@ -90,8 +91,6 @@ const UploadFileListCell = ({
   const { file, errorMessage, isLoading } = uploadFile
   const hasWarning = errorMessage != null
 
-  const fileType = getFileTypeFromExtension(file)
-
   const imageUrl = URL.createObjectURL(file)
   const cellRef = useRef<HTMLLIElement>()
   const exists = useExistsHighlight(id, file)
@@ -122,7 +121,7 @@ const UploadFileListCell = ({
     >
       <div className="dnb-upload__file-cell__content">
         <div className="dnb-upload__file-cell__content__left">
-          {getIcon()}
+          {getFileIcon(file, { isLoading }, hasWarning)}
           {getTitle()}
         </div>
         <div>
@@ -142,34 +141,6 @@ const UploadFileListCell = ({
     </li>
   )
 
-  function getIcon() {
-    if (isLoading) {
-      return <ProgressIndicator />
-    }
-
-    if (hasWarning) return <Icon icon={ExclamationIcon} />
-
-    let iconFileType = fileType
-
-    if (!iconFileType) {
-      const mimeParts = file.type.split('/')
-      iconFileType =
-        fileExtensionImages[mimeParts[0]] ||
-        fileExtensionImages[mimeParts[1]]
-    }
-
-    if (
-      !Object.prototype.hasOwnProperty.call(
-        fileExtensionImages,
-        iconFileType
-      )
-    ) {
-      iconFileType = 'file'
-    }
-
-    return <Icon icon={fileExtensionImages[iconFileType]} />
-  }
-
   function getTitle() {
     return isLoading ? (
       <div
@@ -226,3 +197,38 @@ function useExistsHighlight(id: string, file: File) {
 
   return exists
 }
+
+export function getFileIcon(
+  file: File,
+  loading?: {
+    isLoading: UploadFile['isLoading']
+    size?: ProgressIndicatorAllProps['size']
+  },
+  hasWarning?: boolean
+) {
+  if (loading?.isLoading) {
+    return <ProgressIndicator size={loading?.size ?? 'default'} />
+  }
+
+  if (hasWarning) return <Icon icon={ExclamationIcon} />
+
+  let iconFileType = getFileTypeFromExtension(file)
+
+  if (!iconFileType) {
+    const mimeParts = file.type.split('/')
+    iconFileType =
+      fileExtensionImages[mimeParts[0]] ||
+      fileExtensionImages[mimeParts[1]]
+  }
+
+  if (
+    !Object.prototype.hasOwnProperty.call(
+      fileExtensionImages,
+      iconFileType
+    )
+  ) {
+    iconFileType = 'file'
+  }
+
+  return <Icon icon={fileExtensionImages[iconFileType]} />
+}
diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListLink.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListLink.tsx
@@ -36,6 +36,7 @@ const UploadFileButton = (props: UploadFileButtonProps) => {
   const spacingClasses = createSpacingClasses(props)
   return (
     <Button
+      size="small"
       icon={false}
       variant="tertiary"
       onClick={onClick}