@dnb/eufemia/extensions/forms/blocks/ChildrenWithAge/ChildrenWithAge.js

DNB Eufemia Design System UI Library

import React from 'react';
import { Field, Form, Iterate, Value, Wizard } from "../../index.js";
import { Lead } from "../../../../elements/index.js";
import { translations } from "./ChildrenWithAgeTranslations.js";
import { omitSpacingProps, pickSpacingProps } from "../../../../components/flex/utils.js";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const maximumChildren = 9;
export default function ChildrenWithAge({
  mode,
  enableAdditionalQuestions,
  toWizardStep,
  ...props
}) {
  const spacingProps = pickSpacingProps(props);
  const restProps = omitSpacingProps(props);
  return _jsx(Form.Section, {
    translations: translations,
    required: true,
    ...restProps,
    children: mode === 'summary' ? _jsx(SummaryContainer, {
      toWizardStep: toWizardStep,
      spacingProps: spacingProps,
      enableAdditionalQuestions: enableAdditionalQuestions
    }) : _jsx(EditContainer, {
      enableAdditionalQuestions: enableAdditionalQuestions,
      spacingProps: spacingProps
    })
  });
}
function EditContainer({
  spacingProps,
  enableAdditionalQuestions
}) {
  const tr = Form.useTranslation();
  const {
    getValue
  } = Form.useData();
  const hasChildren = getValue('/hasChildren') === true;
  return _jsxs(Form.Card, {
    ...spacingProps,
    children: [_jsx(Lead, {
      children: tr.ChildrenWithAge.hasChildren.title
    }), _jsx(Field.Boolean, {
      path: "/hasChildren",
      label: tr.ChildrenWithAge.hasChildren.fieldLabel,
      variant: "buttons",
      errorMessages: {
        'Field.errorRequired': tr.ChildrenWithAge.hasChildren.required
      }
    }), _jsxs(Form.Visibility, {
      pathTrue: "/hasChildren",
      animate: true,
      children: [_jsx(Field.Number, {
        path: "/countChildren",
        label: tr.ChildrenWithAge.countChildren.fieldLabel,
        errorMessages: {
          'NumberField.errorMinimum': tr.ChildrenWithAge.countChildren.required,
          'Field.errorRequired': tr.ChildrenWithAge.countChildren.required
        },
        defaultValue: 1,
        width: "small",
        showStepControls: true,
        minimum: 1,
        maximum: maximumChildren,
        decimalLimit: 0,
        allowNegative: false
      }), _jsx(Iterate.Array, {
        path: "/children",
        countPath: "/countChildren",
        countPathLimit: maximumChildren,
        animate: true,
        children: _jsx(Field.Number, {
          itemPath: "/age",
          label: tr.ChildrenWithAge.childrenAge.fieldLabel,
          errorMessages: {
            'Field.errorRequired': tr.ChildrenWithAge.childrenAge.required
          },
          width: "small",
          minimum: 0,
          maximum: 17,
          decimalLimit: 0,
          allowNegative: false
        })
      })]
    }), (enableAdditionalQuestions === null || enableAdditionalQuestions === void 0 ? void 0 : enableAdditionalQuestions.includes('daycare')) && _jsx(Form.Visibility, {
      pathTrue: "/hasChildren",
      animate: true,
      children: _jsx(Field.Boolean, {
        path: "/usesDaycare",
        label: tr.ChildrenWithAge.usesDaycare.fieldLabel,
        variant: "buttons",
        errorMessages: {
          'Field.errorRequired': tr.ChildrenWithAge.usesDaycare.required
        },
        help: {
          title: tr.ChildrenWithAge.usesDaycare.fieldLabel,
          content: tr.renderMessage(tr.ChildrenWithAge.usesDaycare.helpText)
        }
      })
    }), (enableAdditionalQuestions === null || enableAdditionalQuestions === void 0 ? void 0 : enableAdditionalQuestions.includes('daycare')) && hasChildren && _jsx(Form.Visibility, {
      pathTrue: "/usesDaycare",
      animate: true,
      children: _jsx(Field.Currency, {
        path: "/daycareExpenses",
        label: tr.ChildrenWithAge.dayCareExpenses.fieldLabel,
        errorMessages: {
          'Field.errorRequired': tr.ChildrenWithAge.dayCareExpenses.required
        },
        minimum: 1,
        maximum: 1000000,
        decimalLimit: 0,
        allowNegative: false
      })
    }), (enableAdditionalQuestions === null || enableAdditionalQuestions === void 0 ? void 0 : enableAdditionalQuestions.includes('joint-responsibility')) && _jsx(Form.Visibility, {
      pathTrue: "/hasChildren",
      animate: true,
      children: _jsx(Field.Boolean, {
        path: "/hasJointResponsibility",
        label: tr.ChildrenWithAge.hasJointResponsibility.fieldLabel,
        variant: "buttons",
        errorMessages: {
          'Field.errorRequired': tr.ChildrenWithAge.hasJointResponsibility.required
        }
      })
    }), (enableAdditionalQuestions === null || enableAdditionalQuestions === void 0 ? void 0 : enableAdditionalQuestions.includes('joint-responsibility')) && hasChildren && _jsx(Form.Visibility, {
      pathTrue: "/hasJointResponsibility",
      animate: true,
      children: _jsx(Field.Currency, {
        path: "/jointResponsibilityExpenses",
        label: tr.ChildrenWithAge.jointResponsibilityExpenses.fieldLabel,
        errorMessages: {
          'Field.errorRequired': tr.ChildrenWithAge.jointResponsibilityExpenses.required
        },
        minimum: 1,
        maximum: 1000000,
        decimalLimit: 0,
        allowNegative: false
      })
    })]
  });
}
function SummaryContainer({
  spacingProps,
  toWizardStep
}) {
  const tr = Form.useTranslation();
  return _jsxs(Form.Card, {
    ...spacingProps,
    children: [_jsx(Lead, {
      children: tr.ChildrenWithAge.hasChildren.title
    }), _jsxs(Value.SummaryList, {
      children: [_jsx(Value.Boolean, {
        path: "/hasChildren",
        label: tr.ChildrenWithAge.hasChildren.fieldLabel
      }), _jsxs(Form.Visibility, {
        pathTrue: "/hasChildren",
        children: [_jsx(Value.Number, {
          path: "/countChildren",
          label: tr.ChildrenWithAge.countChildren.fieldLabel,
          suffix: tr.ChildrenWithAge.countChildren.suffix,
          maximum: maximumChildren
        }), _jsx(Iterate.Array, {
          path: "/children",
          children: _jsx(Value.Number, {
            itemPath: "/age",
            label: tr.ChildrenWithAge.childrenAge.fieldLabel,
            suffix: tr.ChildrenWithAge.childrenAge.suffix,
            defaultValue: "\u2013"
          })
        }), _jsxs(Form.Visibility, {
          pathDefined: "/usesDaycare",
          children: [_jsx(Value.Boolean, {
            label: tr.ChildrenWithAge.usesDaycare.fieldLabel,
            path: "/usesDaycare"
          }), _jsx(Form.Visibility, {
            pathTrue: "/usesDaycare",
            children: _jsx(Value.Currency, {
              label: tr.ChildrenWithAge.dayCareExpenses.fieldLabel,
              path: "/daycareExpenses",
              decimals: 0
            })
          })]
        }), _jsxs(Form.Visibility, {
          pathDefined: "/hasJointResponsibility",
          children: [_jsx(Value.Boolean, {
            path: "/hasJointResponsibility",
            label: tr.ChildrenWithAge.hasJointResponsibility.fieldLabel
          }), _jsx(Form.Visibility, {
            pathTrue: "/hasJointResponsibility",
            children: _jsx(Value.Currency, {
              label: tr.ChildrenWithAge.jointResponsibilityExpenses.fieldLabel,
              path: "/jointResponsibilityExpenses",
              decimals: 0
            })
          })]
        })]
      })]
    }), typeof toWizardStep === 'number' ? _jsx(Wizard.EditButton, {
      toStep: toWizardStep
    }) : null]
  });
}
withComponentMarkers(ChildrenWithAge, {
  _supportsSpacingProps: true
});
//# sourceMappingURL=ChildrenWithAge.js.map