chore(Block.ChildrenWithAge): improves the animation (#4148)

dnbexperience · Oct 18, 2024 · 47bd8d3 · 47bd8d3
1 parent c5567b5
commit 47bd8d3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 29 deletions.
diff --git a/...-design-system-portal/src/docs/uilib/extensions/forms/blocks/ChildrenWithAge/Examples.tsx b/...-design-system-portal/src/docs/uilib/extensions/forms/blocks/ChildrenWithAge/Examples.tsx
@@ -21,15 +21,8 @@ export const ChildrenWithAge = (props) => {
     >
       <WithToolbar>
         <Flex.Stack>
-          <Blocks.ChildrenWithAge
-            enableAdditionalQuestions={['joint-responsibility', 'daycare']}
-            {...props}
-          />
-          <Blocks.ChildrenWithAge
-            mode="summary"
-            enableAdditionalQuestions={['joint-responsibility', 'daycare']}
-            {...props}
-          />
+          <Blocks.ChildrenWithAge {...props} />
+          <Blocks.ChildrenWithAge mode="summary" {...props} />
         </Flex.Stack>
       </WithToolbar>
     </Form.Handler>

diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/ChildrenWithAge.tsx b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/ChildrenWithAge.tsx
@@ -53,6 +53,9 @@ function EditContainer({
 }) {
   const tr = Form.useTranslation<Translation>()
 
+  const { getValue } = Form.useData()
+  const hasChildren = getValue('/hasChildren') === true
+
   return (
     <Card stack {...spacingProps}>
       <Lead>{tr.ChildrenWithAge.hasChildren.title}</Lead>
@@ -103,8 +106,10 @@ function EditContainer({
             allowNegative={false}
           />
         </Iterate.Array>
+      </Form.Visibility>
 
-        {enableAdditionalQuestions?.includes('daycare') && (
+      {enableAdditionalQuestions?.includes('daycare') && (
+        <Form.Visibility pathTrue="/hasChildren" animate>
           <Field.Boolean
             path="/usesDaycare"
             label={tr.ChildrenWithAge.usesDaycare.fieldLabel}
@@ -119,24 +124,26 @@ function EditContainer({
               ),
             }}
           />
-        )}
+        </Form.Visibility>
+      )}
 
-        {enableAdditionalQuestions?.includes('daycare') && (
-          <Form.Visibility pathTrue="/usesDaycare" animate>
-            <Field.Currency
-              path="/daycareExpenses"
-              label={tr.ChildrenWithAge.dayCareExpenses.fieldLabel}
-              errorMessages={{
-                required: tr.ChildrenWithAge.dayCareExpenses.required,
-              }}
-              minimum={1}
-              decimalLimit={0}
-              allowNegative={false}
-            />
-          </Form.Visibility>
-        )}
+      {enableAdditionalQuestions?.includes('daycare') && hasChildren && (
+        <Form.Visibility pathTrue="/usesDaycare" animate>
+          <Field.Currency
+            path="/daycareExpenses"
+            label={tr.ChildrenWithAge.dayCareExpenses.fieldLabel}
+            errorMessages={{
+              required: tr.ChildrenWithAge.dayCareExpenses.required,
+            }}
+            minimum={1}
+            decimalLimit={0}
+            allowNegative={false}
+          />
+        </Form.Visibility>
+      )}
 
-        {enableAdditionalQuestions?.includes('joint-responsibility') && (
+      {enableAdditionalQuestions?.includes('joint-responsibility') && (
+        <Form.Visibility pathTrue="/hasChildren" animate>
           <Field.Boolean
             path="/hasJointResponsibility"
             label={tr.ChildrenWithAge.hasJointResponsibility.fieldLabel}
@@ -145,8 +152,11 @@ function EditContainer({
               required: tr.ChildrenWithAge.hasJointResponsibility.required,
             }}
           />
-        )}
-        {enableAdditionalQuestions?.includes('joint-responsibility') && (
+        </Form.Visibility>
+      )}
+
+      {enableAdditionalQuestions?.includes('joint-responsibility') &&
+        hasChildren && (
           <Form.Visibility pathTrue="/hasJointResponsibility" animate>
             <Field.Currency
               path="/jointResponsibilityExpenses"
@@ -163,7 +173,6 @@ function EditContainer({
             />
           </Form.Visibility>
         )}
-      </Form.Visibility>
     </Card>
   )
 }