@hhgtech/hhg-components/build/index-957505d0.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 index$3 = require('./index-3424862e.js');
var index$5 = require('./index-2558f624.js');
var index$4 = require('./index-d4ad3f79.js');
require('./index-515469d0.js');
var miscTheme = require('./miscTheme.js');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
var index = require('./index-2b476eb9.js');
require('@mantine/hooks');
require('./index-4d838fd2.js');
require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
var context = require('./context-c8d07963.js');
var constants = require('./constants-d5a97be1.js');
var index$1 = require('./index-4aa0b39e.js');
var index$2 = require('./index-84429a30.js');
var Locale = require('./Locale-eb0da538.js');
var other = require('@hhgtech/icons/other');

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

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

const BabyGrowthFormContext = React.createContext({});

const DefaultForm = (props) => {
    const { t, locale } = index.useTranslations();
    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
    const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
    const commonDateProps = {
        placeholder: 'DD/MM/YYYY',
        popoverProps: {
            withinPortal: true,
        },
    };
    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$1.HealthToolFormWrapper.Control, null,
                React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
                        male: 'boy',
                        female: 'girl',
                    } }, form.getInputProps('gender'), { error: null }))),
            form.errors.gender && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.gender))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$3.Input.Wrapper, { label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.birthday')) },
                React__default["default"].createElement(index$5.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
                        v && form.validateField('measurementDate');
                        form.getInputProps('birthday').onChange(v);
                    } }))),
            form.errors.birthday && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.birthday))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" },
                    t('babyGrowth.height'),
                    React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.cm')})`)) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, onChange: (v) => {
                    form.setFieldValue('height', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" },
                    t('babyGrowth.weight'),
                    React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.kg')})`)) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, onChange: (v) => {
                    form.setFieldValue('weight', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        locale !== Locale.LOCALE.Vietnam && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$3.Input.Number, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" },
                    t('babyGrowth.head'),
                    React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold", color: miscTheme.theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.cm')})`)) }, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
                    form.setFieldValue('head', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } })))),
        form.errors.checkMesureVal && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$3.Input.Wrapper, { label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.measurementDate')) },
                React__default["default"].createElement(index$5.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
            form.errors.measurementDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: wrapperClasses.submitBtn, type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit')))));
};

var useStyles = core.createStyles((theme) => {
    return {
        root: {
            display: 'flex',
            flexDirection: 'column',
            gap: core.rem(8),
        },
        bmiVal: {
            display: 'inline-block',
        },
        unitText: {
            color: theme.colors.gray[6],
        },
        submitBtn: {},
    };
});

/**
 * Using {@link Intl.NumberFormat} to covert a number to string base on its locale
 * @param {number} num - Number to convert
 * @param {number} maximumFractionDigits - Number of decimal digits
 * @returns {string} - String based number
 */
const localizeNumberFormat = (num, maximumFractionDigits = 2) => {
    return Intl.NumberFormat(undefined, {
        maximumFractionDigits,
    }).format(num);
};

/**
 * Calculate BMI
 * Using {@link localizeNumberFormat} to convert number based on locale
 * @param {number} height - Height in number
 * @param {number} weight - Weight in number
 * @returns {number} - BMI with 2 decimal digits
 */
const bmiCalculate = (height = 0, weight = 0) => {
    try {
        if (height && weight) {
            const bmi = Number(weight) / Math.pow(Number(height) / 100, 2);
            if (isNaN(bmi))
                return 0;
            return Number(localizeNumberFormat(bmi));
        }
        else {
            return 0;
        }
    }
    catch (error) { }
    return 0;
};

const InlineForm = (_a) => {
    var { styles, classNames } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames"]);
    const { t, locale } = index.useTranslations();
    const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
    const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
    const theme = core.useMantineTheme();
    const { classes } = useStyles(undefined, {
        name: 'BabyGrowthForm__InlineForm',
        styles,
        classNames,
    });
    const commonDateProps = {
        placeholder: 'DD/MM/YYYY',
        popoverProps: {
            withinPortal: true,
        },
    };
    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('tools.selectBabyGender') },
                React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, isBaby: true, genderValue: {
                        male: 'boy',
                        female: 'girl',
                    } }, form.getInputProps('gender')))),
            form.errors.gender && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.gender))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.birthday') },
                React__default["default"].createElement(index$5.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, onChange: (v) => {
                        v && form.validateField('measurementDate');
                        form.getInputProps('birthday').onChange(v);
                    } }))),
            form.errors.birthday && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.birthday))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
                    control: {
                        '&:first-child': {
                            width: 'auto',
                        },
                    },
                } },
                React__default["default"].createElement(index$4.Text, { size: "p3" },
                    React__default["default"].createElement("span", { className: classes.bmiVal }, form.getInputProps('height').value &&
                        form.getInputProps('weight').value &&
                        bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value))),
                    "(",
                    t('babyGrowth.kg.m2'),
                    ")"),
                React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, onChange: (v) => {
                        form.setFieldValue('height', v);
                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                    }, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
                React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, onChange: (v) => {
                        form.setFieldValue('weight', v);
                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                    }, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
            (theme.other.template === 'mb' || locale !== Locale.LOCALE.Vietnam) && (React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.head') },
                React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('babyGrowth.head'), onChange: (v) => {
                        form.setFieldValue('head', v);
                        form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                    }, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))),
            form.errors.checkMesureVal && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.checkMesureVal))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
            React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
                React__default["default"].createElement(index$5.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
            form.errors.measurementDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
            React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: core.clsx(classes.submitBtn, wrapperClasses.submitBtn) }, submitProps), t('babyGrowth.input.submit')))));
};

const MbLayout = (_a) => {
    var props = tslib_es6.__rest(_a, []);
    const { t } = index.useTranslations();
    const { form, currentUrl, submitProps } = React.useContext(BabyGrowthFormContext);
    const commonDateProps = {
        placeholder: 'DD/MM/YYYY',
        popoverProps: {
            withinPortal: true,
        },
    };
    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$1.HealthToolFormWrapper.Control, null,
                React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
                        male: 'boy',
                        female: 'girl',
                    } }, form.getInputProps('gender'), { error: null }))),
            form.errors.gender && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.gender))),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
            React__default["default"].createElement(index$5.DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('birthday'), { error: null, rightSection: null, onChange: (v) => {
                    v && form.validateField('measurementDate');
                    form.getInputProps('birthday').onChange(v);
                } }))),
        form.errors.birthday && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.birthday)),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.height'), rightSection: t('babyGrowth.cm') },
            React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
                    content: '160',
                }), min: constants.INPUT_RANGE.height.min, max: constants.INPUT_RANGE.height.max, onChange: (v) => {
                    form.setFieldValue('height', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        form.errors.height && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.height)),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.weight'), rightSection: t('babyGrowth.kg') },
            React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
                    content: '50',
                }), min: constants.INPUT_RANGE.weight.min, max: constants.INPUT_RANGE.weight.max, onChange: (v) => {
                    form.setFieldValue('weight', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        form.errors.weight && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.weight)),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.head'), rightSection: t('babyGrowth.cm') },
            React__default["default"].createElement(index$3.Input.Number, Object.assign({}, form.getInputProps('head'), { placeholder: t('tools.inputPlaceholder', {
                    content: '50',
                }), onChange: (v) => {
                    form.setFieldValue('head', v);
                    form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
                } }))),
        form.errors.checkMesureVal && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.measurementDate'), rightSection: React__default["default"].createElement(other.CalendarMB, null) },
            React__default["default"].createElement(index$3.Input.Wrapper, null,
                React__default["default"].createElement(index$5.DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), rightSection: null, error: null })))),
        form.errors.measurementDate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.measurementDate)),
        React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl }, submitProps), t('babyGrowth.input.submit'))));
};

const BabyGrowthForm = (_a) => {
    var { onSubmit, formLayout = 'default', submitProps, currentUrl } = _a, rest = tslib_es6.__rest(_a, ["onSubmit", "formLayout", "submitProps", "currentUrl"]);
    const { t } = index.useTranslations();
    const theme = core.useMantineTheme();
    const form$1 = form.useForm({
        initialValues: {
            measurementDate: new Date(),
        },
        validate: {
            gender: form.isNotEmpty(t('validation.error.requiredField')),
            birthday: form.isNotEmpty(t('validation.error.requiredField')),
            measurementDate: (value, values) => {
                return values.birthday
                    ? values.birthday instanceof Date &&
                        value instanceof Date &&
                        values.birthday.getTime() <= value.getTime()
                        ? null
                        : t('babyGrowth.error.measurementDateLowerThanBirthday', {
                            name: '',
                        })
                    : null;
            },
            checkMesureVal: (_value, values) => {
                return (values.head === undefined &&
                    values.height === undefined &&
                    values.weight === undefined) ||
                    values.head ||
                    values.height ||
                    values.weight
                    ? null
                    : t('babyGrowth.error.atLeastOneOf');
            },
        },
        validateInputOnChange: ['checkMesureVal'],
    });
    const commonProps = Object.assign({ onSubmit: form$1.onSubmit((v) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(Object.assign(Object.assign({}, v), { bmi: bmiCalculate(Number(form$1.getInputProps('height').value), Number(form$1.getInputProps('weight').value)).toString() }))) }, rest);
    return (React__default["default"].createElement(BabyGrowthFormContext.Provider, { value: {
            submitProps,
            currentUrl,
            form: form$1,
        } }, formLayout === 'default' ? (theme.other.template === 'mb' ? (React__default["default"].createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))) : (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps)))));
};

exports.BabyGrowthForm = BabyGrowthForm;