@hhgtech/hhg-components
Version:
Hello Health Group common components
157 lines (153 loc) • 6.9 kB
JavaScript
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import React__default, { useState, useRef, useMemo, useEffect } from 'react';
import { BabyBoyMB, BabyGirlMB } from '@hhgtech/icons/other';
import { createStyles, rem, Box, Flex } from '@mantine/core';
import { R as Radio } from './index-bd44bcb2.js';
import '@mantine/dates';
import './index-8c40504a.js';
import './index-fe4471f4.js';
import { C as CommonGAssets } from './index-7adf994c.js';
import './index-3f09210d.js';
import { T as Text } from './index-0b67696c.js';
import './index-2d25b0f0.js';
import './index-17c85f76.js';
import './index.styles-3adef5f6.js';
import { u as useTranslations } from './index-09d9e570.js';
import '@mantine/hooks';
import './utils-538169b3.js';
import './index-04505e35.js';
const sizeMap = {
lg: {
height: 48,
},
md: {
height: 40,
},
sm: {
height: 32,
},
xs: {
height: 32,
},
};
var useStyles = createStyles((theme, { type, gap, size }) => {
const isMarryBaby = theme.other.template === 'mb';
const base = sizeMap[size] || {};
const height = base.height;
return {
root: {},
wrapper: Object.assign({ gap: rem(gap || 8) }, (type === 'radio' && {
justifyContent: 'flex-end',
gap: rem(gap || 24),
})),
groupErr: {
fontSize: rem(14),
},
itemRoot: Object.assign({}, (type === 'button'
? {
flexGrow: 1,
width: '50%',
'&[data-checked="true"]': {
'.mantine-Radio-label': {
borderColor: theme.fn.primaryColor(),
},
},
}
: type === 'radio'
? { padding: `${rem(10)} 0`, margin: 0 }
: {})),
itemLabelWrapper: {
padding: 0,
width: '100%',
},
itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
? {
position: 'relative',
padding: `${rem(2)} ${rem(16)}`,
border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
backgroundColor: '#fff',
borderRadius: rem(isMarryBaby ? 16 : 4),
cursor: 'pointer',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height,
'&[data-disabled="true"]': {
background: theme.colors.gray[1],
color: `${theme.colors.gray[4]} !important`,
img: {
opacity: 0.5,
},
},
img: {
height: rem(size === 'lg' ? 26 : 22),
},
}
: type === 'radio'
? { fontSize: rem(14) }
: {})),
itemInner: Object.assign(Object.assign({}, (type === 'button' && {
display: 'none',
})), (type === 'radio' && {
alignSelf: 'center',
})),
itemBody: Object.assign({}, (type === 'radio' && {
alignItems: 'center',
})),
};
});
const GenderOptionControl = (_a) => {
var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
male: 'male',
female: 'female',
}, type = 'button', hideLabel, labelTextProps, labelText, gap, size = 'md', LabelWrapper } = _a, radioProps = __rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel", "labelTextProps", "labelText", "gap", "size", "LabelWrapper"]);
const { t } = useTranslations();
const { classes, cx, theme } = useStyles({ type, gap, size }, {
name: 'GenderOptionControl',
styles,
});
const isMarryBaby = theme.other.template === 'mb';
const [availableValue, setAvailableValue] = useState();
const ref = useRef(null);
const labelProps = !LabelWrapper
? Object.assign({ as: 'label', size: 'p2', weight: 'semiBold', variant: 'primary' }, labelTextProps) : {};
const LabelComponent = LabelWrapper || Text;
const genderOptions = useMemo(() => [
{
value: genderValue.male,
label: isBaby ? t('gender.boy') : t('gender.male'),
icon: isBaby ? (isMarryBaby ? (React__default.createElement(BabyBoyMB, null)) : (CommonGAssets.getAssetPath('health-tools/boy-icon.svg'))) : (CommonGAssets.getAssetPath('health-tools/male-icon.svg')),
},
{
value: genderValue.female,
label: isBaby ? t('gender.girl') : t('gender.female'),
icon: isBaby ? (isMarryBaby ? (React__default.createElement(BabyGirlMB, null)) : (CommonGAssets.getAssetPath('health-tools/girl-icon.svg'))) : (CommonGAssets.getAssetPath('health-tools/female-icon.svg')),
},
], []);
useEffect(() => {
setAvailableValue(availableValueInit);
}, [availableValueInit]);
return (React__default.createElement(Box, { ref: ref, className: classes.root },
React__default.createElement(Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default.createElement(LabelComponent, Object.assign({ id: "gender-option-control-label" }, labelProps), label ||
(isBaby
? t('tools.selectBabyGender')
: t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {
error: classes.groupErr,
} }, (type === 'radio' && {
error: null,
})),
React__default.createElement(Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default.createElement(Radio, Object.assign({ className: "gender-item", size: "sm", classNames: {
root: classes.itemRoot,
labelWrapper: classes.itemLabelWrapper,
label: classes.itemLabel,
inner: classes.itemInner,
body: classes.itemBody,
}, key: i.value, value: i.value }, (availableValue &&
i.value !== availableValue && {
disabled: true,
}), { label: React__default.createElement(Flex, { gap: rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
type === 'button' &&
(typeof i.icon === 'string' ? (React__default.createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" })) : (i.icon)),
React__default.createElement(Text, Object.assign({ size: "p3" }, labelText), i.label)) }))))))));
};
export { GenderOptionControl as G };