@hhgtech/hhg-components/build/esm/index-d74f4e6b.js

Hello Health Group common components

import { _ as __rest, a as __awaiter } from './tslib.es6-ea4dfe68.js';
import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { u as useHealthToolsCache } from './useHealthToolCache-bf165bb8.js';
import { H as HEALTH_TOOL_TYPE } from './constants-f4091ce6.js';
import { G as GenderOptionControl } from './index-f931f6b2.js';
import { I as Input } from './index-5d405c0d.js';
import '@mantine/core';
import '@mantine/dates';
import './index-5e947517.js';
import './index-90813715.js';
import './index-ebe66e27.js';
import './useMantineLocale-0c6bea99.js';
import { T as Text } from './index-9f5659e8.js';
import './index-c68a0fa7.js';
import { theme } from './miscTheme.js';
import './index.styles-770020ac.js';
import { u as useTranslations } from './index-9d21b711.js';
import '@mantine/hooks';
import './utils-cb7242c7.js';
import './other-4ccb5568.js';
import './index-c2190f6e.js';
import { H as HealthToolFormWrapper } from './index-8a080703.js';
import { domainLocales } from './constantsDomainLocales.js';
import { getBmi } from './embeddedHeathToolCards_helpers.js';

const BmiFormContext = createContext({});

const DefaultForm = (props) => {
    var _a, _b, _c, _d;
    const { t, locale } = useTranslations();
    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
        React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
                return (React__default.createElement(GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
            } }),
        React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
                        t('bmi.ageInput'),
                        ' ',
                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.ageInput.desc'))), placeholder: t('tools.inputPlaceholder', {
                        content: '25',
                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
            } }),
        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
                        t('bmi.heightInput'),
                        ' ',
                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.heightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
                        content: '170',
                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', min: 0 }));
            } }),
        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                return (React__default.createElement(Input.Number, { label: React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray600 },
                        t('bmi.weightInput'),
                        ' ',
                        React__default.createElement(Text, { size: "s4", weight: "semiBold", color: theme.colors.gray300, as: "span" }, t('bmi.weightInput.desc'))), placeholder: t('tools.inputPlaceholder', {
                        content: '60',
                    }), name: name, value: value, onChange: onChange, error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', precision: 1, min: 0 }));
            } }),
        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
};

const InlineForm = (props) => {
    var _a, _b, _c, _d;
    const { t, locale } = useTranslations();
    const { control, bmiGenerated, isTouched, linkTool, submitProps } = useContext(BmiFormContext);
    return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
        React__default.createElement(Controller, { name: "gender", control: control, rules: (_a = bmiGenerated.gender) === null || _a === void 0 ? void 0 : _a.rule, render: ({ field: { onChange }, fieldState: { error } }) => {
                return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                    React__default.createElement(GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default.createElement(React__default.Fragment, null) : '', onChange: onChange })));
            } }),
        React__default.createElement(Controller, { name: "age", control: control, rules: (_b = bmiGenerated.age) === null || _b === void 0 ? void 0 : _b.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                return (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
                    React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
                            content: '25',
                        }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
                            rightSection: {
                                width: 'auto',
                            },
                        }) })));
            } }),
        React__default.createElement(Controller, { name: "height", control: control, rules: (_c = bmiGenerated.height) === null || _c === void 0 ? void 0 : _c.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
                        React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
                                content: '170',
                            }), name: name, value: value, onChange: onChange, min: 0, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
            } }),
        React__default.createElement(Controller, { name: "weight", control: control, rules: (_d = bmiGenerated.weight) === null || _d === void 0 ? void 0 : _d.rule, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => {
                return (React__default.createElement(HealthToolFormWrapper.FormRow, null,
                    React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
                        React__default.createElement(Input.Number, { placeholder: t('tools.inputPlaceholder', {
                                content: '60',
                            }), name: name, value: value, onChange: onChange, error: isTouched && (error === null || error === void 0 ? void 0 : error.message) ? React__default.createElement(React__default.Fragment, null) : '', precision: 1, min: 0, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
                    isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default.createElement(HealthToolFormWrapper.Error, null, error.message))));
            } }),
        React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
};

const BmiForm = (_a) => {
    var { value: valueProps, onChange: onChangeProps, onSubmit: onSubmitProps, bmiGenerated, bmiUnit, formLayout = 'default', submitProps } = _a, rest = __rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps"]);
    const [isTouched, setIsTouched] = useState(false);
    const { control, handleSubmit, setValue, watch } = useForm();
    const data = watch();
    const { locale } = useTranslations();
    const { getHealthToolLink } = useHealthToolsCache(locale);
    const linkTool = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
    const onValid = (data) => __awaiter(void 0, void 0, void 0, function* () {
        const height = bmiUnit.heightConvert(data.height);
        const weight = bmiUnit.weightConvert(data.weight);
        const submitValue = {
            gender: data.gender,
            age: data.age,
            height,
            weight,
            bmi: getBmi({ height, weight }),
        };
        onInValid();
        onSubmitProps && onSubmitProps(submitValue);
    });
    const onInValid = () => {
        setIsTouched(true);
    };
    useEffect(() => {
        Object.keys(valueProps || {}).forEach((k) => {
            const key = k;
            setValue(key, valueProps === null || valueProps === void 0 ? void 0 : valueProps[key], {
                shouldTouch: false,
                shouldDirty: false,
                shouldValidate: false,
            });
        });
    }, [valueProps]);
    useEffect(() => {
        onChangeProps && onChangeProps(data);
    }, [data]);
    const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
    return (React__default.createElement(BmiFormContext.Provider, { value: {
            control,
            bmiGenerated,
            isTouched,
            linkTool,
            submitProps,
        } }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
};

export { BmiForm as B };