@hhgtech/hhg-components
Version:
Hello Health Group common components
156 lines (147 loc) • 13.2 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var reactHookForm = require('react-hook-form');
var useHealthToolCache = require('./useHealthToolCache-09989566.js');
var constants = require('./constants-bb30dda6.js');
var index$2 = require('./index-1e1b5037.js');
var index$3 = require('./index-ae1a5588.js');
require('@mantine/core');
require('@mantine/dates');
require('./index-1ee4ebb8.js');
require('./index-ad7155cf.js');
require('./index-db44e8cb.js');
require('./useMantineLocale-e946ce4a.js');
var index$4 = require('./index-25f2e7a5.js');
require('./index-86fd931c.js');
var miscTheme = require('./miscTheme.js');
require('./index.styles-6dd86c20.js');
var index = require('./index-c2c283f8.js');
require('@mantine/hooks');
require('./utils-7ba0038a.js');
require('./other-eb0ff2f6.js');
require('./index-9012f1d1.js');
var index$1 = require('./index-e2b3d37e.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');
var embeddedHeathToolCards_helpers = require('./embeddedHeathToolCards_helpers.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
const BmiFormContext = React.createContext({});
const DefaultForm = (props) => {
var _a, _b, _c, _d;
const { t, locale } = index.useTranslations();
const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
React__default["default"].createElement(reactHookForm.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["default"].createElement(index$2.GenderOptionControl, { error: isTouched ? error === null || error === void 0 ? void 0 : error.message : '', onChange: onChange }));
} }),
React__default["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
t('bmi.ageInput'),
' ',
React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.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["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
t('bmi.heightInput'),
' ',
React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.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["default"].createElement(reactHookForm.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["default"].createElement(index$3.Input.Number, { label: React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 },
t('bmi.weightInput'),
' ',
React__default["default"].createElement(index$4.Text, { size: "s4", weight: "semiBold", color: miscTheme.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["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}`, type: "submit" }, submitProps), t('bmi.submit'))));
};
const InlineForm = (props) => {
var _a, _b, _c, _d;
const { t, locale } = index.useTranslations();
const { control, bmiGenerated, isTouched, linkTool, submitProps } = React.useContext(BmiFormContext);
return (React__default["default"].createElement(index$1.HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
React__default["default"].createElement(reactHookForm.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["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none', errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
React__default["default"].createElement(index$2.GenderOptionControl, { type: "radio", hideLabel: true, error: isTouched ? React__default["default"].createElement(React__default["default"].Fragment, null) : '', onChange: onChange })));
} }),
React__default["default"].createElement(reactHookForm.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["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.ageInput'), errorMess: isTouched && (error === null || error === void 0 ? void 0 : error.message) },
React__default["default"].createElement(index$3.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["default"].createElement(React__default["default"].Fragment, null) : '', min: 0, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('tools.yearsOld')), styles: () => ({
rightSection: {
width: 'auto',
},
}) })));
} }),
React__default["default"].createElement(reactHookForm.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.heightInput') },
React__default["default"].createElement(index$3.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["default"].createElement(React__default["default"].Fragment, null) : '', rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, error.message))));
} }),
React__default["default"].createElement(reactHookForm.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["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('bmi.weightInput') },
React__default["default"].createElement(index$3.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["default"].createElement(React__default["default"].Fragment, null) : '', precision: 1, min: 0, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) })),
isTouched && (error === null || error === void 0 ? void 0 : error.message) && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, error.message))));
} }),
React__default["default"].createElement(index$1.HealthToolFormWrapper.Submit, Object.assign({ className: "bmi-btn bmi--btn-submit", dataEventCategory: "Health Tool", dataEventAction: "BMI", dataEventLabel: `https://${constantsDomainLocales.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 = tslib_es6.__rest(_a, ["value", "onChange", "onSubmit", "bmiGenerated", "bmiUnit", "formLayout", "submitProps"]);
const [isTouched, setIsTouched] = React.useState(false);
const { control, handleSubmit, setValue, watch } = reactHookForm.useForm();
const data = watch();
const { locale } = index.useTranslations();
const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
const linkTool = React.useMemo(() => getHealthToolLink(constants.HEALTH_TOOL_TYPE.OVULATION), [getHealthToolLink]);
const onValid = (data) => tslib_es6.__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: embeddedHeathToolCards_helpers.getBmi({ height, weight }),
};
onInValid();
onSubmitProps && onSubmitProps(submitValue);
});
const onInValid = () => {
setIsTouched(true);
};
React.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]);
React.useEffect(() => {
onChangeProps && onChangeProps(data);
}, [data]);
const commonProps = Object.assign({ onSubmit: handleSubmit(onValid, onInValid) }, rest);
return (React__default["default"].createElement(BmiFormContext.Provider, { value: {
control,
bmiGenerated,
isTouched,
linkTool,
submitProps,
} }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
};
exports.BmiForm = BmiForm;