@hhgtech/hhg-components
Version:
Hello Health Group common components
236 lines (230 loc) • 11.6 kB
JavaScript
import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
import { useForm, isNotEmpty } from '@mantine/form';
import { u as useHealthToolsCache } from './useHealthToolCache-bf165bb8.js';
import { u as useTranslations } from './index-9d21b711.js';
import { C as CommonGAssets } from './index-ebe66e27.js';
import { H as HEALTH_TOOL_TYPE } from './constants-f4091ce6.js';
import { G as GenderOptionControl } from './index-f931f6b2.js';
import { I as Input, S as Select } from './index-5d405c0d.js';
import { D as DatePicker } from './index-afb403a9.js';
import '@mantine/core';
import './index-9f5659e8.js';
import './index-c68a0fa7.js';
import './index.styles-770020ac.js';
import '@mantine/hooks';
import './useMantineLocale-0c6bea99.js';
import './index-90813715.js';
import './utils-cb7242c7.js';
import './index-5e947517.js';
import './other-4ccb5568.js';
import './index-c2190f6e.js';
import { H as HealthToolFormWrapper } from './index-8a080703.js';
import { domainLocales } from './constantsDomainLocales.js';
const ThrFormContext = createContext({});
const DefaultForm = (_a) => {
var _b;
var props = __rest(_a, []);
const { t, locale } = useTranslations();
const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
React__default.createElement(GenderOptionControl, Object.assign({}, form.getInputProps('gender'))),
React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
withinPortal: true,
}, label: t('targetHeartRate.ageInput'), maxDate: new Date() })),
React__default.createElement(Input.Number, Object.assign({ label: t('targetHeartRate.heartRateInput'), placeholder: t('tools.inputPlaceholder', {
content: '60',
}) }, form.getInputProps('heartRate'), { min: 40, max: 200, styles: () => ({
rightSection: {
width: 'auto',
},
}) })),
isAdult && (React__default.createElement(Select, Object.assign({ label: 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.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
};
const InlineForm = (_a) => {
var _b;
var props = __rest(_a, []);
const { t, locale } = useTranslations();
const { isAdult, activeValueNote, linkTool, form, submitProps } = useContext(ThrFormContext);
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectGender'), width: 'none' },
React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, error: null }, form.getInputProps('gender')))),
form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.ageInput') },
React__default.createElement(DatePicker, Object.assign({}, form.getInputProps('age'), { placeholder: 'DD/MM/YYYY', popoverProps: {
withinPortal: true,
}, error: null, maxDate: new Date() }))),
form.errors.age && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.age))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.heartRateInput') },
React__default.createElement(Input.Number, Object.assign({ placeholder: t('tools.inputPlaceholder', {
content: '60',
}) }, form.getInputProps('heartRate'), { error: null, min: 40, max: 200, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, "bmp"), styles: () => ({
rightSection: {
width: 'auto',
},
}) }))),
form.errors.heartRate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.heartRate))),
isAdult && (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('targetHeartRate.selectActive') },
React__default.createElement(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.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", dataEventCategory: "Health Tool", dataEventAction: "THR", dataEventLabel: `https://${domainLocales[locale]}/${linkTool}` }, submitProps), t('bmi.submit'))));
};
const ThrForm = (_a) => {
var { formLayout, onSubmit, onError, submitProps } = _a, rest = __rest(_a, ["formLayout", "onSubmit", "onError", "submitProps"]);
const { t, locale } = useTranslations();
const minRange = useRef(40);
const { getHealthToolLink } = useHealthToolsCache(locale);
const form = useForm({
initialValues: {
heartRate: 60,
activeValue: 'low_intensity',
},
validate: {
gender: isNotEmpty(t('validation.error.requiredField')),
age: 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 = useMemo(() => getHealthToolLink(HEALTH_TOOL_TYPE.THR), [getHealthToolLink]);
const [isAdult, setIsAdult] = 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: CommonGAssets.getAssetPath(`/low.svg`),
imageActive: CommonGAssets.getAssetPath(`/low-active.svg`),
content: t('targetHeartRate.lowIntensity.note'),
},
{
value: 'moderate_intensity',
label: t('targetHeartRate.moderateIntensity.title'),
image: CommonGAssets.getAssetPath(`/moderate.svg`),
imageActive: CommonGAssets.getAssetPath(`/moderate-active.svg`),
content: t('targetHeartRate.moderateIntensity.note'),
},
{
value: 'aerobic_zone',
label: t('targetHeartRate.aerobicZone.title'),
image: CommonGAssets.getAssetPath(`/aerobic.svg`),
imageActive: CommonGAssets.getAssetPath(`/aerobic-active.svg`),
content: t('targetHeartRate.aerobicZone.note'),
},
{
value: 'vigorous_intensity',
label: t('targetHeartRate.vigorousIntensity.title'),
image: CommonGAssets.getAssetPath(`/vigorous.svg`),
imageActive: CommonGAssets.getAssetPath(`/vigorous-active.svg`),
content: t('targetHeartRate.vigorousIntensity.note'),
},
{
value: 'maximum_intensity',
label: t('targetHeartRate.maximumIntensity.title'),
image: CommonGAssets.getAssetPath(`/maximum.svg`),
imageActive: CommonGAssets.getAssetPath(`/maximum-active.svg`),
content: t('targetHeartRate.maximumIntensity.note'),
},
];
useEffect(() => {
const ageDate = form.getInputProps('age').value;
const gender = form.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]);
const commonProps = Object.assign(Object.assign({}, rest), { onSubmit: form.onSubmit(onSubmit, onError) });
return (React__default.createElement(ThrFormContext.Provider, { value: {
isAdult,
activeValueNote,
linkTool,
form,
submitProps,
} }, formLayout === 'inline' ? (React__default.createElement(InlineForm, Object.assign({}, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))));
};
export { ThrForm as T };