feat(Forms): add onDone, onCancel and onEdit to Form.Section co…

…ntainers
dnbexperience · Oct 30, 2024 · 6c2c024 · 6c2c024
1 parent 8db7720
commit 6c2c024
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 8 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainer.tsx
@@ -15,12 +15,15 @@ import { Path } from '../../../types'
 
 export type Props = {
   title?: React.ReactNode
+  onDone?: () => void
+  onCancel?: () => void
 }
 
 export type AllProps = Props & SectionContainerProps & FlexContainerProps
 
 function EditContainer(props: AllProps) {
-  const { children, className, title, ...restProps } = props || {}
+  const { children, className, title, onDone, onCancel, ...restProps } =
+    props || {}
   const ariaLabel = useMemo(() => convertJsxToString(title), [title])
   const {
     containerMode,
@@ -60,7 +63,7 @@ function EditContainer(props: AllProps) {
           {title && <Lead size="basis">{title}</Lead>}
           {children}
           <Toolbar>
-            <EditToolbarTools />
+            <EditToolbarTools onDone={onDone} onCancel={onCancel} />
           </Toolbar>
         </Flex.Stack>
       </SectionContainer>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditContainerDocs.ts
@@ -11,6 +11,16 @@ export const EditContainerProperties: PropertiesTableProps = {
     type: 'string',
     status: 'optional',
   },
+  onDone: {
+    doc: 'Callback for the done button.',
+    type: 'Function',
+    status: 'optional',
+  },
+  onCancel: {
+    doc: 'Callback for the cancel button.',
+    type: 'Function',
+    status: 'optional',
+  },
   '[FlexVertical](/uilib/layout/flex/container/)': {
     doc: 'All Flex.Vertical properties.',
     type: 'Various',

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditToolbarTools.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/EditContainer/EditToolbarTools.tsx
@@ -6,7 +6,13 @@ import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBounda
 import { check, close } from '../../../../../icons'
 import useContainerDataStore from './useContainerDataStore'
 
-export default function EditToolbarTools() {
+export type Props = {
+  onDone?: () => void
+  onCancel?: () => void
+}
+
+export default function EditToolbarTools(props: Props) {
+  const { onDone, onCancel } = props
   const { restoreOriginalData } = useContainerDataStore()
 
   const { switchContainerMode, initialContainerMode } =
@@ -33,6 +39,7 @@ export default function EditToolbarTools() {
       setShowBoundaryErrors?.(false)
       restoreOriginalData()
       switchContainerMode?.('view')
+      onCancel?.()
     }
   }, [
     hasSubmitError,
@@ -42,6 +49,7 @@ export default function EditToolbarTools() {
     hasVisibleError,
     restoreOriginalData,
     switchContainerMode,
+    onCancel,
   ])
   const doneHandler = useCallback(() => {
     if (hasError) {
@@ -53,12 +61,14 @@ export default function EditToolbarTools() {
       setShowError(false)
       setShowBoundaryErrors?.(false)
       switchContainerMode?.('view')
+      onDone?.()
     }
   }, [
-    hasVisibleError,
     hasError,
     setShowBoundaryErrors,
+    hasVisibleError,
     switchContainerMode,
+    onDone,
   ])
 
   return (

diff --git a/...a/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx b/...a/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx
@@ -629,4 +629,75 @@ describe('EditContainer and ViewContainer', () => {
       document.querySelector('.dnb-form-status')
     ).not.toBeInTheDocument()
   })
+
+  it('should emit "onDone" event when done button is clicked', async () => {
+    const onDone = jest.fn()
+
+    render(
+      <Form.Section>
+        <Form.Section.EditContainer onDone={onDone}>
+          <Field.Name required path="/name" />
+        </Form.Section.EditContainer>
+
+        <Form.Section.ViewContainer>content</Form.Section.ViewContainer>
+      </Form.Section>
+    )
+
+    const [doneButton] = Array.from(document.querySelectorAll('button'))
+    await userEvent.click(doneButton)
+    expect(onDone).toHaveBeenCalledTimes(0)
+
+    await userEvent.type(document.querySelector('input'), 'foo')
+
+    await userEvent.click(doneButton)
+    expect(onDone).toHaveBeenCalledTimes(1)
+  })
+
+  it('should emit "onCancel" event when cancel button is clicked', async () => {
+    const onCancel = jest.fn()
+
+    render(
+      <Form.Section>
+        <Form.Section.EditContainer onCancel={onCancel}>
+          <Field.Name required path="/name" />
+        </Form.Section.EditContainer>
+
+        <Form.Section.ViewContainer>content</Form.Section.ViewContainer>
+      </Form.Section>
+    )
+
+    const [, cancelButton] = Array.from(
+      document.querySelectorAll('button')
+    )
+    await userEvent.click(cancelButton)
+    expect(onCancel).toHaveBeenCalledTimes(0)
+
+    await userEvent.type(document.querySelector('input'), 'foo')
+
+    await userEvent.click(cancelButton)
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should emit "onEdit" event when cancel button is clicked', async () => {
+    const onEdit = jest.fn()
+
+    render(
+      <Form.Section>
+        <Form.Section.EditContainer>
+          <Field.Name required path="/name" />
+        </Form.Section.EditContainer>
+
+        <Form.Section.ViewContainer onEdit={onEdit}>
+          content
+        </Form.Section.ViewContainer>
+      </Form.Section>
+    )
+
+    const [, , editButton] = Array.from(
+      document.querySelectorAll('button')
+    )
+
+    await userEvent.click(editButton)
+    expect(onEdit).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainer.tsx
@@ -12,12 +12,13 @@ import Toolbar from '../containers/Toolbar'
 
 export type Props = {
   title?: React.ReactNode
+  onEdit?: () => void
 }
 
 export type AllProps = Props & SectionContainerProps & FlexContainerProps
 
 function ViewContainer(props: AllProps) {
-  const { children, className, title, ...restProps } = props || {}
+  const { children, className, title, onEdit, ...restProps } = props || {}
   const ariaLabel = useMemo(() => convertJsxToString(title), [title])
 
   return (
@@ -31,7 +32,7 @@ function ViewContainer(props: AllProps) {
         {title && <Lead size="basis">{title}</Lead>}
         {children}
         <Toolbar>
-          <ViewToolbarTools />
+          <ViewToolbarTools onEdit={onEdit} />
         </Toolbar>
       </Flex.Stack>
     </SectionContainer>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewContainerDocs.ts
@@ -11,6 +11,11 @@ export const ViewContainerProperties: PropertiesTableProps = {
     type: 'string',
     status: 'optional',
   },
+  onEdit: {
+    doc: 'Callback for the edit button.',
+    type: 'Function',
+    status: 'optional',
+  },
   '[FlexVertical](/uilib/layout/flex/container/)': {
     doc: 'All Flex.Vertical properties.',
     type: 'Various',

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.tsx
@@ -4,15 +4,21 @@ import useTranslation from '../../../hooks/useTranslation'
 import SectionContainerContext from '../containers/SectionContainerContext'
 import { edit } from '../../../../../icons'
 
-export default function ViewToolbarTools() {
+export type Props = {
+  onEdit?: () => void
+}
+
+export default function ViewToolbarTools(props: Props) {
+  const { onEdit } = props
   const sectionContainerContext = useContext(SectionContainerContext)
   const { switchContainerMode } = sectionContainerContext ?? {}
 
   const translation = useTranslation().SectionViewContainer
 
   const editHandler = useCallback(() => {
     switchContainerMode?.('edit')
-  }, [switchContainerMode])
+    onEdit?.()
+  }, [onEdit, switchContainerMode])
 
   return (
     <Flex.Horizontal gap="large">