@hhgtech/hhg-components/build/index-1e1b5037.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var other = require('@hhgtech/icons/other');
var core = require('@mantine/core');
var index$2 = require('./index-ae1a5588.js');
require('@mantine/dates');
require('./index-1ee4ebb8.js');
require('./index-ad7155cf.js');
var index$1 = require('./index-db44e8cb.js');
require('./useMantineLocale-e946ce4a.js');
var index$3 = require('./index-25f2e7a5.js');
require('./index-86fd931c.js');
require('./index.styles-6dd86c20.js');
var index = require('./index-c2c283f8.js');
require('@mantine/hooks');
require('./utils-7ba0038a.js');
require('./other-eb0ff2f6.js');
require('./index-9012f1d1.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var useStyles = core.createStyles((theme, { type }) => {
    const isMarryBaby = theme.other.template === 'mb';
    return {
        root: {},
        wrapper: Object.assign({ gap: core.rem(8) }, (type === 'radio' && {
            justifyContent: 'flex-end',
            gap: core.rem(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(6)} ${core.rem(16)}`,
                border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
                borderRadius: core.rem(isMarryBaby ? 16 : 4),
                cursor: 'pointer',
                '&[data-disabled="true"]': {
                    background: theme.colors.gray[1],
                    color: `${theme.colors.gray[4]} !important`,
                    img: {
                        opacity: 0.5,
                    },
                },
                img: {
                    height: core.rem(26),
                },
            }
            : 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 } = _a, radioProps = tslib_es6.__rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
    const { t } = index.useTranslations();
    const { classes, cx, theme } = useStyles({ type }, {
        name: 'GenderOptionControl',
        styles,
    });
    const isMarryBaby = theme.other.template === 'mb';
    const [availableValue, setAvailableValue] = React.useState();
    const ref = React.useRef(null);
    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(index$3.Text, { as: "label", size: "s4", weight: "semiBold" }, 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, { size: "p3" }, i.label)) }))))))));
};

exports.GenderOptionControl = GenderOptionControl;