@hhgtech/hhg-components/build/index-9c118fb6.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var core = require('@mantine/core');
var form = require('@mantine/form');
var useHealthToolCache = require('./useHealthToolCache-cac8180d.js');
var index = require('./index-2b476eb9.js');
var constants$1 = require('./constants-817a109a.js');
var index$2 = require('./index-3424862e.js');
require('@mantine/dates');
require('./index-ec32050c.js');
require('./index-0a047edc.js');
require('./index-9301f298.js');
require('./index-4d838fd2.js');
var index$3 = require('./index-d4ad3f79.js');
require('./index-515469d0.js');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
require('@mantine/hooks');
require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var context = require('./context-c8d07963.js');
var index$1 = require('./index-4aa0b39e.js');
var constants = require('./constants-d5a97be1.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const PWGFormContext = React.createContext({});

const DefaultForm = (_a) => {
    var props = tslib_es6.__rest(_a, []);
    const { t, locale } = index.useTranslations();
    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
    const theme = core.useMantineTheme();
    const isMarryBaby = theme.other.template === 'mb';
    return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.weekInput')), min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.weightBeforeInput')), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                    content: '50',
                }) }, form.getInputProps('lastWeight')))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.heightInput')), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
                    content: '160',
                }) }, form.getInputProps('height')))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$2.Input.Number, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.weightInput')), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                    content: '50',
                }) }, form.getInputProps('weight')))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.Switching, Object.assign({ label: React__default["default"].createElement(index$3.Text, { size: "p2", weight: "semiBold" }, t('pregnancyWeightGain.havingTwins')) }, form.getInputProps('hasTwin')))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn) }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
};

const InlineForm = (_a) => {
    var props = tslib_es6.__rest(_a, []);
    const { t, locale } = index.useTranslations();
    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
    const theme = core.useMantineTheme();
    const isMarryBaby = theme.other.template === 'mb';
    return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weekInput') },
                React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}`, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('pwgForm.week')) }, form.getInputProps('pregnantWeek'))))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightBeforeInput') },
                React__default["default"].createElement(index$2.Input.Number, Object.assign({}, form.getInputProps('lastWeight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                        content: '50',
                    }), rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.heightInput') },
                React__default["default"].createElement(index$2.Input.Number, Object.assign({}, form.getInputProps('height'), { min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, placeholder: t('tools.inputPlaceholder', {
                        content: '160',
                    }), rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.weightInput') },
                React__default["default"].createElement(index$2.Input.Number, Object.assign({}, form.getInputProps('weight'), { min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, placeholder: t('tools.inputPlaceholder', {
                        content: '50',
                    }), rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('pregnancyWeightGain.havingTwins'), width: 'none' },
                React__default["default"].createElement(index$1.HealthToolFormWrapper.Switching, Object.assign({}, form.getInputProps('hasTwin'))))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.domainLocales[isMarryBaby ? 'vi-VN_MB' : locale]}/${linkTool}`, className: core.clsx('due-date-calculate-button', wrapperClasses.submitBtn) }, submitProps), t('dueDatePage.lastPeriod.calculate')))));
};

const MbLayout = (_a) => {
    var props = tslib_es6.__rest(_a, []);
    const { t, locale } = index.useTranslations();
    const { linkTool, form, submitProps } = React.useContext(PWGFormContext);
    const theme = core.useMantineTheme();
    const isMarryBaby = theme.other.template === 'mb';
    return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weekInput'), rightSection: t('pregnancy.week') },
                React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: constants.INPUT_RANGE.pregnantWeek.min, max: constants.INPUT_RANGE.pregnantWeek.max, placeholder: `${constants.INPUT_RANGE.pregnantWeek.min} - ${constants.INPUT_RANGE.pregnantWeek.max}` }, form.getInputProps('pregnantWeek')))),
            form.errors.pregnantWeek && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.pregnantWeek))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightBeforeInput'), rightSection: "kg" },
                React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max }, form.getInputProps('lastWeight'), { placeholder: t('tools.inputPlaceholder', {
                        content: '50',
                    }) }))),
            form.errors.lastWeight && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.lastWeight))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.heightInput'), rightSection: "cm" },
                React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max }, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
                        content: '160',
                    }) }))),
            form.errors.height && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.height))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('pregnancyWeightGain.weightInput'), rightSection: "kg" },
                React__default["default"].createElement(index$2.Input.Number, Object.assign({ min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max }, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
                        content: '50',
                    }) }))),
            form.errors.weight && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.weight))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.Switching, Object.assign({ label: t('pregnancyWeightGain.havingTwins') }, form.getInputProps('hasTwin'))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "Embedded Pregnancy Weight Gain", dataEventLabel: `https://${constantsDomainLocales.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 = tslib_es6.__rest(_a, ["formLayout", "submitProps", "onSubmit"]);
    const { t, locale } = index.useTranslations();
    const theme = core.useMantineTheme();
    const isMarryBaby = theme.other.template === 'mb';
    const form$1 = form.useForm({
        validate: {
            pregnantWeek: form.isNotEmpty(t('validation.error.requiredField')),
            height: form.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 } = useHealthToolCache.useHealthToolsCache(locale);
    const linkTool = React.useMemo(() => getHealthToolLink(constants$1.HEALTH_TOOL_TYPE.PWG), [getHealthToolLink]);
    const commonProps = Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, rest);
    return (React__default["default"].createElement(PWGFormContext.Provider, { value: {
            linkTool,
            form: form$1,
            submitProps,
        } }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : isMarryBaby ? (React__default["default"].createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
};

exports.PWGForm = PWGForm;