@hhgtech/hhg-components/build/index-240c1215.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var core = require('@mantine/core');
var form = require('@mantine/form');
var useHealthToolCache = require('./useHealthToolCache-09989566.js');
var index = require('./index-c2c283f8.js');
var constants$1 = require('./constants-bb30dda6.js');
var index$2 = require('./index-ae1a5588.js');
require('@mantine/dates');
require('./index-1ee4ebb8.js');
require('./index-ad7155cf.js');
require('./index-db44e8cb.js');
require('./useMantineLocale-e946ce4a.js');
require('./index-25f2e7a5.js');
require('./index-86fd931c.js');
require('./index.styles-6dd86c20.js');
require('@mantine/hooks');
require('./utils-7ba0038a.js');
require('./other-eb0ff2f6.js');
require('./index-9012f1d1.js');
var index$1 = require('./index-e2b3d37e.js');
var constants = require('./constants-ccbebd73.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 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$2.Input.Number, Object.assign({ label: 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$2.Input.Number, Object.assign({ label: 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$2.Input.Number, Object.assign({ label: 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$2.Input.Number, Object.assign({ label: 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.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 InlineForm = (_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.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.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.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.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.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.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 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;