@hhgtech/hhg-components
Version:
Hello Health Group common components
251 lines (242 loc) • 13.8 kB
JavaScript
;
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var form = require('@mantine/form');
var useHealthToolCache = require('./useHealthToolCache-cac8180d.js');
var index = require('./index-2b476eb9.js');
var index$6 = require('./index-9301f298.js');
var constants = require('./constants-817a109a.js');
var index$2 = require('./index-84429a30.js');
var index$5 = require('./index-3424862e.js');
var index$3 = require('./index-2558f624.js');
var index$4 = require('./index-d4ad3f79.js');
require('./index-515469d0.js');
require('@mantine/core');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
require('@mantine/hooks');
require('./index-4d838fd2.js');
require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
require('./index-ec32050c.js');
var context = require('./context-c8d07963.js');
var index$1 = require('./index-4aa0b39e.js');
var constantsDomainLocales = require('./constantsDomainLocales.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
const ThrFormContext = React.createContext({});
const DefaultForm = (_a) => {
var _b;
var props = tslib_es6.__rest(_a, []);
const { t, locale } = index.useTranslations();
const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
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.GenderOptionControl, Object.assign({}, form.getInputProps('gender')))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$3.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
withinPortal: true,
}, label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.ageInput')), maxDate: new Date() }))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$5.Input.Number, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.heartRateInput')), placeholder: t('tools.inputPlaceholder', {
content: '60',
}) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
rightSection: {
width: 'auto',
},
}) }))),
isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$5.Select, Object.assign({ label: React__default["default"].createElement(index$4.Text, { size: "p2", weight: "semiBold" }, t('targetHeartRate.selectActive')), defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
value: option.value,
label: option.label,
})), styles: {
item: {
whiteSpace: 'nowrap',
padding: '10px 12px',
fontSize: '14px',
},
}, withinPortal: true }, form.getInputProps('activeValue'))))),
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", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
};
const InlineForm = (_a) => {
var _b;
var props = tslib_es6.__rest(_a, []);
const { t, locale } = index.useTranslations();
const { isAdult, activeValueNote, linkTool, form, submitProps } = React.useContext(ThrFormContext);
const { classes: wrapperClasses = {} } = React.useContext(context.CardWrapperContext);
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.selectGender'), width: 'none' },
React__default["default"].createElement(index$2.GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, 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('targetHeartRate.ageInput') },
React__default["default"].createElement(index$3.DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
withinPortal: true,
}, error: null, maxDate: new Date() }))),
form.errors.age && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.age))),
React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
React__default["default"].createElement(index$5.Input.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
content: '60',
}) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default["default"].createElement(index$1.HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
rightSection: {
width: 'auto',
},
}) }))),
form.errors.heartRate && (React__default["default"].createElement(index$1.HealthToolFormWrapper.Error, null, form.errors.heartRate))),
isAdult && (React__default["default"].createElement(index$1.HealthToolFormWrapper.FormRow, null,
React__default["default"].createElement(index$1.HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
React__default["default"].createElement(index$5.Select, Object.assign({ defaultValue: (_b = activeValueNote === null || activeValueNote === void 0 ? void 0 : activeValueNote[0]) === null || _b === void 0 ? void 0 : _b.value, data: activeValueNote.map((option) => ({
value: option.value,
label: option.label,
})), styles: {
item: {
whiteSpace: 'nowrap',
padding: '10px 12px',
fontSize: '14px',
},
}, withinPortal: true }, form.getInputProps('activeValue')))))),
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", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${constantsDomainLocales.domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit')))));
};
const ThrForm = (_a) => {
var { formLayout, onSubmit, onError, submitProps } = _a, rest = tslib_es6.__rest(_a, ["formLayout", "onSubmit", "onError", "submitProps"]);
const { t, locale } = index.useTranslations();
const minRange = React.useRef(40);
const { getHealthToolLink } = useHealthToolCache.useHealthToolsCache(locale);
const form$1 = form.useForm({
initialValues: {
heartRate: 60,
activeValue: 'low_intensity',
},
validate: {
gender: form.isNotEmpty(t('validation.error.requiredField')),
age: form.isNotEmpty(t('validation.error.requiredField')),
heartRate: (value) => {
return Number(value) >= minRange.current && Number(value) <= 200
? null
: t('tools.heartRateRangeErr', {
min: minRange.current,
max: 200,
});
},
},
});
const linkTool = React.useMemo(() => getHealthToolLink(constants.HEALTH_TOOL_TYPE.THR), [getHealthToolLink]);
const [isAdult, setIsAdult] = React.useState(false);
const rangeHeartRateByAge = [
{
idAge: 0,
minAge: 0,
maxAge: 18,
rangeMale: 40,
rangeFemale: 40,
},
{
idAge: 1,
minAge: 18,
maxAge: 25,
rangeMale: 49,
rangeFemale: 54,
},
{
idAge: 2,
minAge: 25,
maxAge: 35,
rangeMale: 49,
rangeFemale: 54,
},
{
idAge: 3,
minAge: 35,
maxAge: 45,
rangeMale: 50,
rangeFemale: 54,
},
{
idAge: 4,
minAge: 45,
maxAge: 55,
rangeMale: 50,
rangeFemale: 54,
},
{
idAge: 5,
minAge: 55,
maxAge: 65,
rangeMale: 51,
rangeFemale: 54,
},
{
idAge: 6,
minAge: 65,
maxAge: 120,
rangeMale: 50,
rangeFemale: 54,
},
];
const activeValueNote = [
{
value: 'low_intensity',
label: t('targetHeartRate.lowIntensity.title'),
image: index$6.CommonGAssets.getAssetPath(`/low.svg`),
imageActive: index$6.CommonGAssets.getAssetPath(`/low-active.svg`),
content: t('targetHeartRate.lowIntensity.note'),
},
{
value: 'moderate_intensity',
label: t('targetHeartRate.moderateIntensity.title'),
image: index$6.CommonGAssets.getAssetPath(`/moderate.svg`),
imageActive: index$6.CommonGAssets.getAssetPath(`/moderate-active.svg`),
content: t('targetHeartRate.moderateIntensity.note'),
},
{
value: 'aerobic_zone',
label: t('targetHeartRate.aerobicZone.title'),
image: index$6.CommonGAssets.getAssetPath(`/aerobic.svg`),
imageActive: index$6.CommonGAssets.getAssetPath(`/aerobic-active.svg`),
content: t('targetHeartRate.aerobicZone.note'),
},
{
value: 'vigorous_intensity',
label: t('targetHeartRate.vigorousIntensity.title'),
image: index$6.CommonGAssets.getAssetPath(`/vigorous.svg`),
imageActive: index$6.CommonGAssets.getAssetPath(`/vigorous-active.svg`),
content: t('targetHeartRate.vigorousIntensity.note'),
},
{
value: 'maximum_intensity',
label: t('targetHeartRate.maximumIntensity.title'),
image: index$6.CommonGAssets.getAssetPath(`/maximum.svg`),
imageActive: index$6.CommonGAssets.getAssetPath(`/maximum-active.svg`),
content: t('targetHeartRate.maximumIntensity.note'),
},
];
React.useEffect(() => {
const ageDate = form$1.getInputProps('age').value;
const gender = form$1.getInputProps('gender').value;
if (ageDate instanceof Date) {
const age = (new Date().getTime() - ageDate.getTime()) / 1000;
if (age >= 18 * 365 * 24 * 60 * 60)
setIsAdult(true);
else
setIsAdult(false);
const rangeByAge = rangeHeartRateByAge.find((item) => age >= item.minAge * 365 * 24 * 60 * 60 &&
age < item.maxAge * 365 * 24 * 60 * 60) || rangeHeartRateByAge[0];
minRange.current =
gender === 'male' ? rangeByAge.rangeMale : rangeByAge.rangeFemale;
}
}, [form$1]);
const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form$1.onSubmit(onSubmit, onError) });
return (React__default["default"].createElement(ThrFormContext.Provider, { value: {
isAdult,
activeValueNote,
linkTool,
form: form$1,
submitProps,
} }, formLayout === 'inline' ? (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps)))));
};
exports.ThrForm = ThrForm;