feat(Value.Upload): add onFileClick event (#4367)

This only adds the "sync" onFileClick event. Not support for async yet. Not really sure how the loading state of a Value.Upload with async onFileClick would look 🤔 Can be demoed here: https://eufemia-git-feat-upload-value-on-file-click-eufemia.vercel.app/uilib/extensions/forms/Value/Upload/demos/#using-onfileclick --------- Co-authored-by: Tobias Høegh <[email protected]>
dnbexperience · Dec 9, 2024 · 56e9caf · 56e9caf
1 parent 3a6eb63
commit 56e9caf
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 25 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload.mdx
@@ -10,6 +10,8 @@ tabs:
     key: '/demos'
   - title: Properties
     key: '/properties'
+  - title: Events
+    key: '/events'
 breadcrumb:
   - text: Forms
     href: /uilib/extensions/forms/

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
@@ -393,3 +393,31 @@ export const ListTypes = () => {
     </ComponentBox>
   )
 }
+
+export const OnFileClick = () => {
+  return (
+    <ComponentBox hideCode scope={{ createMockFile }}>
+      <Value.Upload
+        label="Label text"
+        value={[
+          {
+            file: createMockFile('35217511.jpg', 1000000, 'image/png'),
+            exists: false,
+            id: '1',
+          },
+          {
+            file: createMockFile('1501870.jpg', 2000000, 'image/png'),
+            exists: false,
+            id: '2',
+          },
+        ]}
+        onFileClick={({ fileItem }) => {
+          window.open(
+            'https://eufemia.dnb.no/images/avatars/' + fileItem.file.name,
+            '_blank',
+          )
+        }}
+      />
+    </ComponentBox>
+  )
+}
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
@@ -49,3 +49,7 @@ import * as Examples from './Examples'
 ### Field.Upload path
 
 <Examples.FieldUploadSelectionPath />
+
+### Using `onFileClick`
+
+<Examples.OnFileClick />
diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/events.mdx b/...nb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/events.mdx
@@ -0,0 +1,10 @@
+---
+showTabs: true
+---
+
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { UploadValueEvents } from '@dnb/eufemia/src/extensions/forms/Value/Upload/UploadDocs'
+
+## Events
+
+<PropertiesTable props={UploadValueEvents} />
diff --git a/...esign-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx b/...esign-system-portal/src/docs/uilib/extensions/forms/Value/Upload/properties.mdx
@@ -2,15 +2,15 @@
 showTabs: true
 ---
 
-import { UploadProperties } from '@dnb/eufemia/src/extensions/forms/Value/Upload/UploadDocs'
+import { UploadValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/Upload/UploadDocs'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
 
 ## Properties
 
 ### Value-specific properties
 
-<PropertiesTable props={UploadProperties} />
+<PropertiesTable props={UploadValueProperties} />
 
 ### General properties
 

diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx
@@ -191,10 +191,7 @@ const UploadFileListCell = ({
         {onClick ? (
           <Button
             variant="tertiary"
-            className={classnames(
-              'dnb-anchor--no-launch-icon',
-              'dnb-upload__file-cell__title'
-            )}
+            className={classnames('dnb-upload__file-cell__title')}
             onClick={onClick}
           >
             {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
@@ -40,6 +40,7 @@ export type Props = Omit<
     | 'onFileDelete'
     | 'onFileClick'
     | 'skeleton'
+    | 'download'
   > & {
     fileHandler?: (
       newFiles: UploadValue

diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx
@@ -3,25 +3,23 @@ import classnames from 'classnames'
 import { useValueProps } from '../../hooks'
 import { ValueProps } from '../../types'
 import ValueBlock from '../../ValueBlock'
-import { Anchor } from '../../../../components'
+import { Anchor, Button } from '../../../../components'
 import Icon from '../../../../components/Icon'
 import ListFormat, {
   ListFormatProps,
 } from '../../../../components/list-format'
-import type {
-  UploadFile,
-  UploadProps,
-} from '../../../../components/upload/types'
+import type { UploadFile } from '../../../../components/upload/types'
 import { fileExtensionImages } from '../../../../components/upload/UploadFileListCell'
 import {
   BYTES_IN_A_MEGA_BYTE,
   getFileTypeFromExtension,
 } from '../../../../components/upload/UploadVerify'
+import { Props as FieldUploadProps } from '../../Field/Upload/Upload'
 import { format } from '../../../../components/number-format/NumberUtils'
 
 export type Props = ValueProps<Array<UploadFile>> &
   Omit<ListFormatProps, 'value'> &
-  Pick<UploadProps, 'download'> & {
+  Pick<FieldUploadProps, 'download' | 'onFileClick'> & {
     displaySize?: boolean
   }
 
@@ -35,6 +33,7 @@ function Upload(props: Props) {
     listType,
     download = false,
     displaySize = false,
+    onFileClick,
     ...rest
   } = useValueProps(props)
 
@@ -45,21 +44,40 @@ function Upload(props: Props) {
         if (!file) {
           return
         }
+        const onFileClickHandler = () => {
+          if (typeof onFileClick === 'function') {
+            onFileClick({ fileItem: uploadFile })
+          }
+        }
+
         const imageUrl = URL.createObjectURL(file)
         return (
           <span key={index}>
             {getIcon(file)}
-            <Anchor
-              target="_blank"
-              href={imageUrl}
-              download={download ? file.name : null}
-              rel="noopener noreferrer"
-              className="dnb-anchor--no-launch-icon"
-              left="x-small"
-            >
-              {file.name}
-              {displaySize && getSize(file.size)}
-            </Anchor>
+            {onFileClick ? (
+              <Button
+                size="small"
+                variant="tertiary"
+                className={classnames('dnb-upload__file-cell__title')}
+                onClick={onFileClickHandler}
+                left="x-small"
+              >
+                {file.name}
+                {displaySize && getSize(file.size)}
+              </Button>
+            ) : (
+              <Anchor
+                target="_blank"
+                href={imageUrl}
+                download={download ? file.name : null}
+                rel="noopener noreferrer"
+                className="dnb-anchor--no-launch-icon"
+                left="x-small"
+              >
+                {file.name}
+                {displaySize && getSize(file.size)}
+              </Anchor>
+            )}
           </span>
         )
       }) || undefined

diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/UploadDocs.ts
@@ -2,7 +2,9 @@ import { PropertiesTableProps } from '../../../../shared/types'
 
 import { ListFormatProperties } from '../../../../components/list-format/ListFormatDocs'
 
-export const UploadProperties: PropertiesTableProps = {
+import { UploadFieldEvents } from '../../Field/Upload/UploadDocs'
+
+export const UploadValueProperties: PropertiesTableProps = {
   download: {
     doc: 'Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window. Defaults to `false`.',
     type: 'boolean',
@@ -15,3 +17,7 @@ export const UploadProperties: PropertiesTableProps = {
   },
   ...ListFormatProperties,
 }
+
+export const UploadValueEvents: PropertiesTableProps = {
+  onFileClick: UploadFieldEvents.onFileClick,
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { screen, render } from '@testing-library/react'
+import { screen, render, fireEvent } from '@testing-library/react'
 import { Value, Form } from '../../..'
 import { createMockFile } from '../../../../../components/upload/__tests__/testHelpers'
 
@@ -339,6 +339,30 @@ describe('Value.Upload', () => {
       expect(screen.queryByText(fileName)).toBeInTheDocument()
     })
 
+    it('executes onFileClick event when button is clicked', () => {
+      const fileName = 'file.png'
+      const onFileClick = jest.fn()
+
+      render(
+        <Value.Upload
+          onFileClick={onFileClick}
+          value={[
+            {
+              file: createMockFile(fileName, 100, 'image/png'),
+              exists: false,
+              id: '1',
+            },
+          ]}
+        />
+      )
+
+      const buttonElement = document.querySelector('.dnb-button')
+
+      fireEvent.click(buttonElement)
+
+      expect(onFileClick).toHaveBeenCalledTimes(1)
+    })
+
     it('renders the anchor href', () => {
       const fileName = 'file.png'
       const mockUrl = 'mock-url'