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

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime/helpers/esm/extends";
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";
const maximumChildren = 9;
export default function ChildrenWithAge({
  mode,
  enableAdditionalQuestions,
  toWizardStep,
  ...props
}) {
  const spacingProps = pickSpacingProps(props);
  const restProps = omitSpacingProps(props);
  return React.createElement(Form.Section, _extends({
    translations: translations,
    required: true
  }, restProps), mode === 'summary' ? React.createElement(SummaryContainer, {
    toWizardStep: toWizardStep,
    spacingProps: spacingProps,
    enableAdditionalQuestions: enableAdditionalQuestions
  }) : React.createElement(EditContainer, {
    enableAdditionalQuestions: enableAdditionalQuestions,
    spacingProps: spacingProps
  }));
}
function EditContainer({
  spacingProps,
  enableAdditionalQuestions
}) {
  const tr = Form.useTranslation();
  const {
    getValue
  } = Form.useData();
  const hasChildren = getValue('/hasChildren') === true;
  return React.createElement(Form.Card, spacingProps, React.createElement(Lead, null, tr.ChildrenWithAge.hasChildren.title), React.createElement(Field.Boolean, {
    path: "/hasChildren",
    label: tr.ChildrenWithAge.hasChildren.fieldLabel,
    variant: "buttons",
    errorMessages: {
      'Field.errorRequired': tr.ChildrenWithAge.hasChildren.required
    }
  }), React.createElement(Form.Visibility, {
    pathTrue: "/hasChildren",
    animate: true
  }, React.createElement(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
  }), React.createElement(Iterate.Array, {
    path: "/children",
    countPath: "/countChildren",
    countPathLimit: maximumChildren,
    animate: true
  }, React.createElement(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?.includes('daycare') && React.createElement(Form.Visibility, {
    pathTrue: "/hasChildren",
    animate: true
  }, React.createElement(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?.includes('daycare') && hasChildren && React.createElement(Form.Visibility, {
    pathTrue: "/usesDaycare",
    animate: true
  }, React.createElement(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?.includes('joint-responsibility') && React.createElement(Form.Visibility, {
    pathTrue: "/hasChildren",
    animate: true
  }, React.createElement(Field.Boolean, {
    path: "/hasJointResponsibility",
    label: tr.ChildrenWithAge.hasJointResponsibility.fieldLabel,
    variant: "buttons",
    errorMessages: {
      'Field.errorRequired': tr.ChildrenWithAge.hasJointResponsibility.required
    }
  })), enableAdditionalQuestions?.includes('joint-responsibility') && hasChildren && React.createElement(Form.Visibility, {
    pathTrue: "/hasJointResponsibility",
    animate: true
  }, React.createElement(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 React.createElement(Form.Card, spacingProps, React.createElement(Lead, null, tr.ChildrenWithAge.hasChildren.title), React.createElement(Value.SummaryList, null, React.createElement(Value.Boolean, {
    path: "/hasChildren",
    label: tr.ChildrenWithAge.hasChildren.fieldLabel
  }), React.createElement(Form.Visibility, {
    pathTrue: "/hasChildren"
  }, React.createElement(Value.Number, {
    path: "/countChildren",
    label: tr.ChildrenWithAge.countChildren.fieldLabel,
    suffix: tr.ChildrenWithAge.countChildren.suffix,
    maximum: maximumChildren
  }), React.createElement(Iterate.Array, {
    path: "/children"
  }, React.createElement(Value.Number, {
    itemPath: "/age",
    label: tr.ChildrenWithAge.childrenAge.fieldLabel,
    suffix: tr.ChildrenWithAge.childrenAge.suffix,
    defaultValue: "\u2013"
  })), React.createElement(Form.Visibility, {
    pathDefined: "/usesDaycare"
  }, React.createElement(Value.Boolean, {
    label: tr.ChildrenWithAge.usesDaycare.fieldLabel,
    path: "/usesDaycare"
  }), React.createElement(Form.Visibility, {
    pathTrue: "/usesDaycare"
  }, React.createElement(Value.Currency, {
    label: tr.ChildrenWithAge.dayCareExpenses.fieldLabel,
    path: "/daycareExpenses",
    decimals: 0
  }))), React.createElement(Form.Visibility, {
    pathDefined: "/hasJointResponsibility"
  }, React.createElement(Value.Boolean, {
    path: "/hasJointResponsibility",
    label: tr.ChildrenWithAge.hasJointResponsibility.fieldLabel
  }), React.createElement(Form.Visibility, {
    pathTrue: "/hasJointResponsibility"
  }, React.createElement(Value.Currency, {
    label: tr.ChildrenWithAge.jointResponsibilityExpenses.fieldLabel,
    path: "/jointResponsibilityExpenses",
    decimals: 0
  }))))), typeof toWizardStep === 'number' ? React.createElement(Wizard.EditButton, {
    toStep: toWizardStep
  }) : null);
}
ChildrenWithAge._supportsSpacingProps = true;
//# sourceMappingURL=ChildrenWithAge.js.map