WIP

packages/dnb-eufemia/src/extensions/forms/Form/Handler/stories/FormHandler.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react'
-import { Field, Form } from '../../..'
-import { Button, GlobalStatus } from '../../../../../components'
+import { Field, Form, Tools } from '../../..'
+import { Button, Flex, GlobalStatus } from '../../../../../components'
 import { debounceAsync } from '../../../../../shared/helpers'
 
 export default {
@@ -386,3 +386,99 @@ function UseValidationComponent() {
 
   return null
 }
+
+export function UseData() {
+  return (
+    <Form.Handler
+      id="aid"
+      data={{
+        beneficialOwners: {
+          hasOtherBeneficialOwners: true,
+          otherBeneficialOwners: [],
+          hasOtherBeneficialOwners2: true,
+          otherBeneficialOwners2: [],
+        },
+      }}
+      // onSubmit={console.log}
+    >
+      <Form.Card>
+        {/* <UsingUpdate /> */}
+        <UsingRemove />
+
+        <Tools.Log />
+      </Form.Card>
+
+      <Form.SubmitButton />
+    </Form.Handler>
+  )
+}
+
+function UsingUpdate() {
+  // const { update, data } = Form.useData()
+  const { update, data } = Form.useData('aid')
+
+  console.log(
+    'update data value:',
+    data.beneficialOwners.hasOtherBeneficialOwners2
+  )
+  return (
+    <Form.Card>
+      <Field.Boolean
+        variant="buttons"
+        path="/beneficialOwners/hasOtherBeneficialOwners2"
+        onChange={(val) => {
+          console.log('update onChange value:', val)
+          if (!val) {
+            // setTimeout(() => {
+            update('/beneficialOwners/otherBeneficialOwners2', [])
+            // }, 1)
+          }
+        }}
+        label="Er det flere?"
+      />
+
+      <Form.Visibility
+        animate
+        pathTrue="/beneficialOwners/hasOtherBeneficialOwners2"
+      >
+        <Field.ArraySelection path="/beneficialOwners/otherBeneficialOwners2">
+          <Field.Option label="Name" value="name" />
+        </Field.ArraySelection>
+      </Form.Visibility>
+    </Form.Card>
+  )
+}
+
+function UsingRemove() {
+  // const { remove, data } = Form.useData()
+  const { remove, data } = Form.useData('aid')
+
+  console.log(
+    'remove data value:',
+    data.beneficialOwners.hasOtherBeneficialOwners
+  )
+
+  return (
+    <Form.Card>
+      <Field.Boolean
+        variant="buttons"
+        path="/beneficialOwners/hasOtherBeneficialOwners"
+        onChange={(val) => {
+          console.log('remove onChange value:', val)
+          if (!val) {
+            remove('/beneficialOwners/otherBeneficialOwners')
+          }
+        }}
+        label="Er det flere?"
+      />
+      <Form.Visibility
+        animate
+        pathTrue="/beneficialOwners/hasOtherBeneficialOwners"
+      >
+        <Field.ArraySelection path="/beneficialOwners/otherBeneficialOwners">
+          <Field.Option label="Name" value="name" />
+        </Field.ArraySelection>
+      </Form.Visibility>
+    </Form.Card>
+  )
+}