UNPKG

@hhgtech/hhg-components

Version:
98 lines (91 loc) 7.35 kB
import { _ as __rest } from './tslib.es6-00ab44b2.js'; import React__default, { createContext, useContext } from 'react'; import { clsx, useMantineTheme } from '@mantine/core'; import { useForm, isNotEmpty } from '@mantine/form'; import './index-bd44bcb2.js'; import { D as DatePicker } from './index-0861b084.js'; import { T as Text } from './index-0b67696c.js'; import './index-2d25b0f0.js'; import './index-17c85f76.js'; import './index.styles-3adef5f6.js'; import { u as useTranslations } from './index-09d9e570.js'; import '@mantine/hooks'; import './index-3f09210d.js'; import './utils-538169b3.js'; import './index-04505e35.js'; import { C as CardWrapperContext } from './context-41a96757.js'; import { H as HealthToolFormWrapper } from './index-c6190f14.js'; import { G as GenderOptionControl } from './index-a002ff96.js'; import { CalendarMB } from '@hhgtech/icons/other'; const BabyVaccineFormContext = createContext({}); const DefaultLayout = (_a) => { var props = __rest(_a, []); const { t } = useTranslations(); const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext); const { classes: wrapperClasses = {} } = useContext(CardWrapperContext); return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props), React__default.createElement(HealthToolFormWrapper.FormRow, null, React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender')))), React__default.createElement(HealthToolFormWrapper.FormRow, null, React__default.createElement(DatePicker, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.birthday')), placeholder: 'DD/MM/YYYY', popoverProps: { withinPortal: true, }, maxDate: new Date() }, form.getInputProps('age')))), React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper }, React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))))); }; const InlineLayout = (_a) => { var props = __rest(_a, []); const { t } = useTranslations(); const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext); const { classes: wrapperClasses = {} } = useContext(CardWrapperContext); return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props), React__default.createElement(HealthToolFormWrapper.FormRow, null, React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender'), width: 'none' }, React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, hideLabel: true, type: "radio" }, form.getInputProps('gender')))), form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))), React__default.createElement(HealthToolFormWrapper.FormRow, null, React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') }, React__default.createElement(DatePicker, Object.assign({ placeholder: 'DD/MM/YYYY', popoverProps: { withinPortal: true, }, maxDate: new Date() }, form.getInputProps('age'), { error: null }))), form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.age))), React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper }, React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: clsx('due-date-calculate-button', wrapperClasses.submitBtn), dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate'))))); }; const MbLayout = (_a) => { var props = __rest(_a, []); const { t } = useTranslations(); const { currentUrl, submitProps, form } = useContext(BabyVaccineFormContext); return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props), React__default.createElement(HealthToolFormWrapper.Control, null, React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true }, form.getInputProps('gender'), { error: null }))), form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender)), React__default.createElement(HealthToolFormWrapper.FormRow, null, React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default.createElement(CalendarMB, null) }, React__default.createElement(DatePicker, Object.assign({ placeholder: 'DD/MM/YYYY', popoverProps: { withinPortal: true, }, maxDate: new Date(), rightSection: null }, form.getInputProps('age'), { error: null }))), form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.age))), React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", className: "due-date-calculate-button", dataEventCategory: "Health Tool", dataEventAction: "Vaccination Tool", dataEventLabel: currentUrl }, submitProps), t('dueDatePage.lastPeriod.calculate')))); }; var OvulationCalculatorType; (function (OvulationCalculatorType) { OvulationCalculatorType[OvulationCalculatorType["trackPeriod"] = 0] = "trackPeriod"; OvulationCalculatorType[OvulationCalculatorType["conceive"] = 1] = "conceive"; OvulationCalculatorType[OvulationCalculatorType["avoidPregnancy"] = 2] = "avoidPregnancy"; })(OvulationCalculatorType || (OvulationCalculatorType = {})); const BabyVaccineForm = (_a) => { var { formLayout = 'default', submitProps, currentUrl, onSubmit } = _a, props = __rest(_a, ["formLayout", "submitProps", "currentUrl", "onSubmit"]); const { t } = useTranslations(); const theme = useMantineTheme(); const isMarryBaby = theme.other.template === 'mb'; const form = useForm({ validate: { gender: isNotEmpty(t('validation.error.requiredField')), age: isNotEmpty(t('validation.error.requiredField')), }, }); const commonProps = Object.assign({ onSubmit: form.onSubmit(onSubmit) }, props); return (React__default.createElement(BabyVaccineFormContext.Provider, { value: { submitProps, currentUrl, form } }, formLayout === 'inline' ? (React__default.createElement(InlineLayout, Object.assign({}, commonProps))) : isMarryBaby ? (React__default.createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultLayout, Object.assign({}, commonProps))))); }; export { BabyVaccineForm as B };