@hhgtech/hhg-components
Version:
Hello Health Group common components
301 lines (291 loc) • 20.3 kB
JavaScript
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import React__default, { createContext, useContext } from 'react';
import { createStyles, rem, useMantineTheme, clsx } from '@mantine/core';
import { useForm, isNotEmpty } from '@mantine/form';
import { I as Input } from './index-bd44bcb2.js';
import { D as DatePicker } from './index-0861b084.js';
import { T as Text } from './index-0b67696c.js';
import './index-2d25b0f0.js';
import { theme } from './miscTheme.js';
import './index-17c85f76.js';
import './index.styles-3adef5f6.js';
import { u as useTranslations } from './index-09d9e570.js';
import '@mantine/hooks';
import './index-3f09210d.js';
import './utils-538169b3.js';
import './index-04505e35.js';
import { C as CardWrapperContext } from './context-41a96757.js';
import { I as INPUT_RANGE } from './constants-34703dc5.js';
import { H as HealthToolFormWrapper } from './index-c6190f14.js';
import { G as GenderOptionControl } from './index-a002ff96.js';
import { L as LOCALE } from './Locale-dc1237b9.js';
import { CalendarMB } from '@hhgtech/icons/other';
const BabyGrowthFormContext = createContext({});
const DefaultForm = (props) => {
const { t, locale } = useTranslations();
const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
const commonDateProps = {
placeholder: 'DD/MM/YYYY',
popoverProps: {
withinPortal: true,
},
};
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.Control, null,
React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
male: 'boy',
female: 'girl',
} }, form.getInputProps('gender'), { error: null }))),
form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.birthday')) },
React__default.createElement(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.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" },
t('babyGrowth.height'),
React__default.createElement(Text, { size: "p2", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.cm')})`)) }, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
form.setFieldValue('height', v);
form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
} }))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" },
t('babyGrowth.weight'),
React__default.createElement(Text, { size: "p2", weight: "semiBold", color: theme.colors.gray300, as: "span" }, ` (${t('babyGrowth.kg')})`)) }, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
form.setFieldValue('weight', v);
form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
} }))),
locale !== LOCALE.Vietnam && (React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(Input.Number, Object.assign({ label: React__default.createElement(Text, { size: "p2", weight: "semiBold" },
t('babyGrowth.head'),
React__default.createElement(Text, { size: "p2", weight: "semiBold", color: 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.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(Input.Wrapper, { label: React__default.createElement(Text, { size: "p2", weight: "semiBold" }, t('babyGrowth.input.measurementDate')) },
React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), error: null }))),
form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
React__default.createElement(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 = createStyles((theme) => {
return {
root: {
display: 'flex',
flexDirection: 'column',
gap: 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 = __rest(_a, ["styles", "classNames"]);
const { t, locale } = useTranslations();
const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
const { classes: wrapperClasses = {} } = useContext(CardWrapperContext);
const theme = useMantineTheme();
const { classes } = useStyles(undefined, {
name: 'BabyGrowthForm__InlineForm',
styles,
classNames,
});
const commonDateProps = {
placeholder: 'DD/MM/YYYY',
popoverProps: {
withinPortal: true,
},
};
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "inline" }, props),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('tools.selectBabyGender') },
React__default.createElement(GenderOptionControl, Object.assign({ type: "radio", hideLabel: true, isBaby: true, genderValue: {
male: 'boy',
female: 'girl',
} }, 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('babyGrowth.input.birthday') },
React__default.createElement(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.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: "BMI", styles: {
control: {
'&:first-child': {
width: 'auto',
},
},
} },
React__default.createElement(Text, { size: "p3" },
React__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.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('babyGrowth.height'), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
form.setFieldValue('height', v);
form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
}, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })),
React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('babyGrowth.weight'), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
form.setFieldValue('weight', v);
form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
}, rightSection: React__default.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.kg')) }))),
(theme.other.template === 'mb' || locale !== LOCALE.Vietnam) && (React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.head') },
React__default.createElement(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.createElement(HealthToolFormWrapper.Unit, null, t('babyGrowth.cm')) })))),
form.errors.checkMesureVal && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal))),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.BorderInlineControl, { label: t('babyGrowth.input.measurementDate') },
React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { maxDate: new Date() }, form.getInputProps('measurementDate'), { error: null }))),
form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate))),
React__default.createElement(HealthToolFormWrapper.FormRow, { className: wrapperClasses.submitWrapper },
React__default.createElement(HealthToolFormWrapper.Submit, Object.assign({ type: "submit", "data-event-category": "Health Tool", "data-event-action": "Baby Growth", "data-event-label": currentUrl, className: clsx(classes.submitBtn, wrapperClasses.submitBtn) }, submitProps), t('babyGrowth.input.submit')))));
};
const MbLayout = (_a) => {
var props = __rest(_a, []);
const { t } = useTranslations();
const { form, currentUrl, submitProps } = useContext(BabyGrowthFormContext);
const commonDateProps = {
placeholder: 'DD/MM/YYYY',
popoverProps: {
withinPortal: true,
},
};
return (React__default.createElement(HealthToolFormWrapper, Object.assign({ formLayout: "default" }, props),
React__default.createElement(HealthToolFormWrapper.FormRow, null,
React__default.createElement(HealthToolFormWrapper.Control, null,
React__default.createElement(GenderOptionControl, Object.assign({ isBaby: true, genderValue: {
male: 'boy',
female: 'girl',
} }, form.getInputProps('gender'), { error: null }))),
form.errors.gender && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.gender))),
React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.birthday'), rightSection: React__default.createElement(CalendarMB, null) },
React__default.createElement(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.createElement(HealthToolFormWrapper.Error, null, form.errors.birthday)),
React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.height'), rightSection: t('babyGrowth.cm') },
React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('height'), { placeholder: t('tools.inputPlaceholder', {
content: '160',
}), min: INPUT_RANGE.height.min, max: INPUT_RANGE.height.max, onChange: (v) => {
form.setFieldValue('height', v);
form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
} }))),
form.errors.height && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.height)),
React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.weight'), rightSection: t('babyGrowth.kg') },
React__default.createElement(Input.Number, Object.assign({}, form.getInputProps('weight'), { placeholder: t('tools.inputPlaceholder', {
content: '50',
}), min: INPUT_RANGE.weight.min, max: INPUT_RANGE.weight.max, onChange: (v) => {
form.setFieldValue('weight', v);
form.setFieldValue('checkMesureVal', !form.values.checkMesureVal);
} }))),
form.errors.weight && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.weight)),
React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.head'), rightSection: t('babyGrowth.cm') },
React__default.createElement(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.createElement(HealthToolFormWrapper.Error, null, form.errors.checkMesureVal)),
React__default.createElement(HealthToolFormWrapper.BorderBoxControl, { label: t('babyGrowth.input.measurementDate'), rightSection: React__default.createElement(CalendarMB, null) },
React__default.createElement(Input.Wrapper, null,
React__default.createElement(DatePicker, Object.assign({}, commonDateProps, { defaultValue: new Date() }, form.getInputProps('measurementDate'), { maxDate: new Date(), rightSection: null, error: null })))),
form.errors.measurementDate && (React__default.createElement(HealthToolFormWrapper.Error, null, form.errors.measurementDate)),
React__default.createElement(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 = __rest(_a, ["onSubmit", "formLayout", "submitProps", "currentUrl"]);
const { t } = useTranslations();
const theme = useMantineTheme();
const form = useForm({
initialValues: {
measurementDate: new Date(),
},
validate: {
gender: isNotEmpty(t('validation.error.requiredField')),
birthday: 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.onSubmit((v) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(Object.assign(Object.assign({}, v), { bmi: bmiCalculate(Number(form.getInputProps('height').value), Number(form.getInputProps('weight').value)).toString() }))) }, rest);
return (React__default.createElement(BabyGrowthFormContext.Provider, { value: {
submitProps,
currentUrl,
form,
} }, formLayout === 'default' ? (theme.other.template === 'mb' ? (React__default.createElement(MbLayout, Object.assign({ formLayout: formLayout }, commonProps))) : (React__default.createElement(DefaultForm, Object.assign({}, commonProps)))) : (React__default.createElement(InlineForm, Object.assign({}, commonProps)))));
};
export { BabyGrowthForm as B };