@hhgtech/hhg-components
Version:
Hello Health Group common components
143 lines (136 loc) • 11.6 kB
JavaScript
import { _ as __rest } from './tslib.es6-107c23d7.js';
import React__default, { createContext, useContext, useMemo } from 'react';
import { useMantineTheme } from '@mantine/core';
import { useForm, isNotEmpty } from '@mantine/form';
import { u as useHealthToolsCache } from './useHealthToolCache-c58ca506.js';
import { u as useTranslations } from './index-1215bc9f.js';
import { H as HEALTH_TOOL_TYPE } from './constants-19687a3a.js';
import { I as Input } from './index-2a289da8.js';
import '@mantine/dates';
import './index-e053201b.js';
import './index-6482e49b.js';
import './index-461f72c9.js';
import './index-6ae951d5.js';
import './index-a5768260.js';
import './index-92ed0334.js';
import './index.styles-05fc133d.js';
import '@mantine/hooks';
import './text-48aef61b.js';
import './utils-50ee2849.js';
import './index-7f1ed00b.js';
import { H as HealthToolFormWrapper } from './index-2cbb6421.js';
import { I as INPUT_RANGE } from './constants-a1998f96.js';
import { domainLocales } from './constantsDomainLocales.js';
const PWGFormContext = createContext({});
const DefaultForm = (_a) => {
var props = __rest(_a, []);
const { t, locale } = useTranslations();
const { linkTool, form, submitProps } = useContext(PWGFormContext);
const theme = useMantineTheme();
const isMarryBaby = theme.other.template === 'mb';
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weekInput'), min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek'))),
React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightBeforeInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
content: '50',
}) }, form.getInputProps('lastWeight'))),
React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.heightInput'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
content: '160',
}) }, form.getInputProps('height'))),
React__default.createElement(Input.Number, Object.assign({ label: t('pregnancyWeightGain.weightInput'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
content: '50',
}) }, form.getInputProps('weight'))),
React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
};
const InlineForm = (_a) => {
var props = __rest(_a, []);
const { t, locale } = useTranslations();
const { linkTool, form, submitProps } = useContext(PWGFormContext);
const theme = useMantineTheme();
const isMarryBaby = theme.other.template === 'mb';
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('pwgForm.week')) }, form.getInputProps('pregnantWeek')))),
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
content: '50',
}), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
content: '160',
}), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) }))),
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
content: '50',
}), rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin')))),
React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
};
const MbLayout = (_a) => {
var props = __rest(_a, []);
const { t, locale } = useTranslations();
const { linkTool, form, submitProps } = useContext(PWGFormContext);
const theme = useMantineTheme();
const isMarryBaby = theme.other.template === 'mb';
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weekInput'), rightSection: t('pregnancy.week') },
React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.pregnantWeek.min, max: INPUT_RANGE.pregnantWeek.max, placeholder: `${INPUT_RANGE.pregnantWeek.min} - ${INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
form.errors.pregnantWeek && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.pregnantWeek))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightBeforeInput'), rightSection: "kg" },
React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { placeholder: t('tools.inputPlaceholder', {
content: '50',
}) }))),
form.errors.lastWeight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.lastWeight))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.heightInput'), rightSection: "cm" },
React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max }, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
content: '160',
}) }))),
form.errors.height && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.height))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightInput'), rightSection: "kg" },
React__default.createElement(Input.Number, Object.assign({ min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max }, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
content: '50',
}) }))),
form.errors.weight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.weight))),
React__default.createElement(HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: "due-date-calculate-button" }, submitProps), t('dueDatePage.lastPeriod.calculate'))));
};
const PWGForm = (_a) => {
var { formLayout = 'default', submitProps, onSubmit } = _a, rest = __rest(_a, ["formLayout", "submitProps", "onSubmit"]);
const { t, locale } = useTranslations();
const theme = useMantineTheme();
const isMarryBaby = theme.other.template === 'mb';
const form = useForm({
validate: {
pregnantWeek: isNotEmpty(t('validation.error.requiredField')),
height: isNotEmpty(t('validation.error.requiredField')),
weight: (value, values) => {
return !value
? t('validation.error.requiredField')
: Number(value) >= Number(values.lastWeight)
? null
: t('pregnancyWeightGain.weightInput.error');
},
lastWeight: (value, values) => {
return !value
? t('validation.error.requiredField')
: Number(value) < Number(values.weight)
? null
: t('pregnancyWeightGain.weightInput.error');
},
},
});
const { getHealthToolLink } = useHealthToolsCache(locale);
const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.PWG), [getHealthToolLink]);
const commonProps = Object.assign({ onSubmit: form.onSubmit(onSubmit) }, rest);
return (React__default.createElement(PWGFormContext.Provider, { value: {
linkTool,
form,
submitProps,
} }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : isMarryBaby ? (React__default.createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
};
export { PWGForm as P };