@hhgtech/hhg-components
Version:
Hello Health Group common components
163 lines (156 loc) • 7.26 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var other = require('@hhgtech/icons/other');
var core = require('@mantine/core');
var index$2 = require('./index-3424862e.js');
require('@mantine/dates');
require('./index-ec32050c.js');
require('./index-0a047edc.js');
var index$1 = require('./index-9301f298.js');
require('./index-4d838fd2.js');
var index$3 = require('./index-d4ad3f79.js');
require('./index-515469d0.js');
require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
var index = require('./index-2b476eb9.js');
require('@mantine/hooks');
require('./utils-5e3a8440.js');
require('./index-a985d53b.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
const sizeMap = {
lg: {
height: 48,
},
md: {
height: 40,
},
sm: {
height: 32,
},
xs: {
height: 32,
},
};
var useStyles = core.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: core.rem(gap || 8) }, (type === 'radio' && {
justifyContent: 'flex-end',
gap: core.rem(gap || 24),
})),
groupErr: {
fontSize: core.rem(14),
},
itemRoot: Object.assign({}, (type === 'button'
? {
flexGrow: 1,
width: '50%',
'&[data-checked="true"]': {
'.mantine-Radio-label': {
borderColor: theme.fn.primaryColor(),
},
},
}
: type === 'radio'
? { padding: `${core.rem(10)} 0`, margin: 0 }
: {})),
itemLabelWrapper: {
padding: 0,
width: '100%',
},
itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
? {
position: 'relative',
padding: `${core.rem(2)} ${core.rem(16)}`,
border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
backgroundColor: '#fff',
borderRadius: core.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: core.rem(size === 'lg' ? 26 : 22),
},
}
: type === 'radio'
? { fontSize: core.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 = tslib_es6.__rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel", "labelTextProps", "labelText", "gap", "size", "LabelWrapper"]);
const { t } = index.useTranslations();
const { classes, cx, theme } = useStyles({ type, gap, size }, {
name: 'GenderOptionControl',
styles,
});
const isMarryBaby = theme.other.template === 'mb';
const [availableValue, setAvailableValue] = React.useState();
const ref = React.useRef(null);
const labelProps = !LabelWrapper
? Object.assign({ as: 'label', size: 'p2', weight: 'semiBold', variant: 'primary' }, labelTextProps) : {};
const LabelComponent = LabelWrapper || index$3.Text;
const genderOptions = React.useMemo(() => [
{
value: genderValue.male,
label: isBaby ? t('gender.boy') : t('gender.male'),
icon: isBaby ? (isMarryBaby ? (React__default["default"].createElement(other.BabyBoyMB, null)) : (index$1.CommonGAssets.getAssetPath('health-tools/boy-icon.svg'))) : (index$1.CommonGAssets.getAssetPath('health-tools/male-icon.svg')),
},
{
value: genderValue.female,
label: isBaby ? t('gender.girl') : t('gender.female'),
icon: isBaby ? (isMarryBaby ? (React__default["default"].createElement(other.BabyGirlMB, null)) : (index$1.CommonGAssets.getAssetPath('health-tools/girl-icon.svg'))) : (index$1.CommonGAssets.getAssetPath('health-tools/female-icon.svg')),
},
], []);
React.useEffect(() => {
setAvailableValue(availableValueInit);
}, [availableValueInit]);
return (React__default["default"].createElement(core.Box, { ref: ref, className: classes.root },
React__default["default"].createElement(index$2.Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default["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["default"].createElement(core.Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default["default"].createElement(index$2.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["default"].createElement(core.Flex, { gap: core.rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
type === 'button' &&
(typeof i.icon === 'string' ? (React__default["default"].createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" })) : (i.icon)),
React__default["default"].createElement(index$3.Text, Object.assign({ size: "p3" }, labelText), i.label)) }))))))));
};
exports.GenderOptionControl = GenderOptionControl;