@hhgtech/hhg-components
Version:
Hello Health Group common components
410 lines (389 loc) • 17.3 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var core = require('@mantine/core');
var index = require('./index-25f2e7a5.js');
var index$1 = require('./index-86fd931c.js');
var index$2 = require('./index-c2c283f8.js');
var flattenChildren = require('react-keyed-flatten-children');
var miscTheme = require('./miscTheme.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
var useStyles$8 = core.createStyles(() => {
return {
root: {
justifyContent: 'flex-start',
},
group: {
display: 'flex',
alignItems: 'stretch',
gap: core.rem(8),
},
item: {
flex: '1 1 0px',
},
icon: {
flexShrink: 0,
},
};
});
const ChipGroup = (_a) => {
var { data = [], label, isMobile, layout = 'horizonal', classNames, styles } = _a, props = tslib_es6.__rest(_a, ["data", "label", "isMobile", "layout", "classNames", "styles"]);
const { classes, theme } = useStyles$8(undefined, {
name: 'ChipGroup',
classNames,
styles,
});
const isMarryBaby = theme.other.template === 'mb';
const iconSize = isMobile
? 48
: isMarryBaby
? 32
: layout === 'vertical'
? 32
: 18;
return (React__default["default"].createElement(core.Box, null,
React__default["default"].createElement(core.Input.Wrapper, { label: label },
React__default["default"].createElement(core.Chip.Group, Object.assign({}, props),
React__default["default"].createElement(core.Box, { className: classes.group }, data.map((i, idx) => (React__default["default"].createElement(core.Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
iconWrapper: {
display: 'none',
},
label: {
width: '100%',
borderRadius: core.rem(isMarryBaby ? 12 : 8),
padding: 0,
border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.neutral[2]}`,
height: '100%',
'&[data-checked]': {
padding: 0,
backgroundColor: isMarryBaby
? '#FFE9F1'
: theme.colors.blue[0],
border: `1px solid ${isMarryBaby ? '#F5B4CB' : theme.colors.blue[1]}`,
},
[theme.fn.smallerThan('sm')]: {
alignItems: 'flex-start',
},
},
} },
React__default["default"].createElement(core.Box, { sx: Object.assign(Object.assign(Object.assign({ width: '100%', display: 'flex', gap: core.rem(isMarryBaby ? 2 : 8), padding: '8px 16px 8px 12px', justifyContent: 'center', alignItems: 'center' }, (isMarryBaby && {
flexDirection: 'column',
})), (layout === 'vertical' && {
flexDirection: 'column',
padding: '16px 8px 8px',
})), { [theme.fn.smallerThan('sm')]: {
flexDirection: 'column',
padding: '16px 8px 8px',
} }) },
React__default["default"].isValidElement(i.icon)
? React__default["default"].cloneElement(i.icon, {
size: iconSize,
isMarryBaby,
className: classes.icon,
})
: null,
React__default["default"].createElement(index.Text, { size: 'p4', styles: {
root: Object.assign(Object.assign({}, (isMarryBaby && {
textAlign: 'center',
})), { whiteSpace: 'normal', [theme.fn.smallerThan('sm')]: {
fontSize: core.rem(12),
lineHeight: core.rem(18),
textAlign: 'center',
} }),
} }, i.label))))))))));
};
const FormLayoutContext = React.createContext({});
const useStyles$7 = core.createStyles(() => {
return {
root: {
display: 'flex',
flexDirection: 'column',
gap: core.rem(8),
},
};
});
const FormRow = (_a) => {
var { styles, classNames, className, children } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className", "children"]);
const { classes, cx } = useStyles$7(undefined, {
name: 'HealthToolFormWrapper__FormRow',
styles,
classNames,
});
return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, props), children));
};
var useStyles$6 = core.createStyles((theme, { formLayout }) => {
return {
root: {
display: 'flex',
flexDirection: 'column',
gap: core.rem(formLayout === 'inline' ? 8 : 16),
'.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
color: '#8C8C8C',
},
},
control: {
width: core.rem(180),
flexShrink: 1,
'&.error': {
'button, input': {
borderColor: theme.colors.red[7],
},
},
},
};
});
const useStyles$5 = core.createStyles((theme, { formLayout }) => {
const isMarryBaby = theme.other.template === 'mb';
return {
root: Object.assign(Object.assign({ minWidth: core.rem(180) }, (formLayout === 'inline' && {
alignSelf: 'flex-end',
marginTop: core.rem(16),
})), (formLayout === 'default' && Object.assign({}, (isMarryBaby && {
alignSelf: 'center',
})))),
};
});
const SubmitBtn = (_a) => {
var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
const { formLayout } = React.useContext(FormLayoutContext);
const { classes, cx } = useStyles$5({ formLayout }, {
name: 'HealthToolFormWrapper__SubmitBtn',
styles,
classNames,
});
return (React__default["default"].createElement(index$1.Button, Object.assign({ className: cx('submit-btn', className, classes.root) }, props, { variant: "primary", size: "md" })));
};
const Switching = (_a) => {
var { label } = _a, props = tslib_es6.__rest(_a, ["label"]);
const { t } = index$2.useTranslations();
const theme = core.useMantineTheme();
const isMarryBaby = theme.other.template === 'mb';
return (React__default["default"].createElement(core.Flex, { gap: core.rem(4), sx: () => ({
justifyContent: 'space-between',
alignItems: 'center',
}) },
label && (React__default["default"].createElement(index.Text, { size: isMarryBaby ? 'p4' : 's4', color: "gray.6" }, label)),
React__default["default"].createElement(core.Switch, Object.assign({ labelPosition: "left", onLabel: t('switchBtn.yes'), offLabel: t('switchBtn.no') }, props, { styles: (theme) => ({
trackLabel: {
fontSize: core.rem(12),
},
track: {
cursor: 'pointer',
},
body: {
[theme.fn.largerThan('sm')]: {
flexDirection: 'column',
alignItems: 'flex-start',
},
[theme.fn.smallerThan('sm')]: {
justifyContent: 'space-between',
},
},
labelWrapper: {
[theme.fn.smallerThan('sm')]: {
display: 'flex',
justifyContent: 'center',
},
},
}) }))));
};
const useStyles$4 = core.createStyles((theme) => {
return {
root: {
color: theme.colors.gray[6],
whiteSpace: 'nowrap',
paddingRight: core.rem(16),
},
};
});
const Unit = (_a) => {
var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
const { classes, cx } = useStyles$4(undefined, {
name: 'HealthToolFormWrapper__UnitText',
styles,
classNames,
});
return React__default["default"].createElement(index.Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
};
var useStyles$3 = core.createStyles(() => {
return {
root: {
display: 'flex',
gap: core.rem(8),
border: '1px solid #EAEAEC',
borderRadius: core.rem(16),
padding: '10px 16px 12px 16px',
flex: '1 1 0px',
'.mantine-Input-input': {
border: 0,
paddingLeft: 0,
height: '22px',
borderRadius: 0,
'&:focus': {
outline: 0,
boxShadow: 'none',
},
},
},
info: {
display: 'flex',
flexDirection: 'column',
gap: 0,
flex: '1 1 0px',
},
label: {
color: '#7C7C8F',
fontWeight: 'normal',
},
content: {},
rightSection: {
display: 'flex',
alignItems: 'center',
textTransform: 'lowercase',
color: '#3E3F58',
},
};
});
const BorderBoxControl = (_a) => {
var { label, rightSection, children, styles, className, classNames } = _a, props = tslib_es6.__rest(_a, ["label", "rightSection", "children", "styles", "className", "classNames"]);
const { classes, cx } = useStyles$3(undefined, {
name: 'HealthToolFormWrapper__BorderBoxControl',
styles,
classNames,
});
return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(classes.root, className) }, props),
React__default["default"].createElement(core.Box, { className: classes.info },
label && (React__default["default"].createElement(index.Text, { size: "n1", as: "label", className: classes.label }, label)),
React__default["default"].createElement(core.Box, { className: classes.content }, React__default["default"].isValidElement(children)
? React__default["default"].cloneElement(children, Object.assign(Object.assign({}, children.props), { size: 'sm', error: null }))
: null)),
rightSection && (React__default["default"].createElement(core.Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default["default"].createElement(index.Text, { size: "p4" }, rightSection)) : React__default["default"].isValidElement(rightSection) ? (React__default["default"].cloneElement(rightSection, {
size: 24,
})) : null))));
};
var useStyles$2 = core.createStyles((theme, { width, direction }) => {
const isMarryBaby = theme.other.template === 'mb';
return {
root: {
display: 'flex',
flexDirection: 'column',
gap: core.rem(8),
},
row: {
display: 'flex',
flexDirection: direction,
alignItems: 'stretch',
justifyContent: 'space-between',
gap: core.rem(16),
minHeight: core.rem(40),
},
labelWrapper: Object.assign({ flex: '1 1 0px', display: 'flex', alignItems: 'center' }, (direction === 'row' && {
borderBottom: `1px solid ${theme.colors.neutral[1]}`,
})),
label: {
fontSize: core.rem(14),
color: theme.colors.gray[6],
},
content: {
display: 'flex',
alignItems: 'center',
gap: core.rem(8),
input: {
backgroundColor: '#fff',
},
},
control: {
width: typeof width === 'number' ? core.rem(width) : width,
flexShrink: 1,
input: Object.assign({}, (isMarryBaby && {
borderRadius: core.rem(12),
})),
'&.error': {
'button, input': {
borderColor: theme.colors.red[7],
},
},
},
error: {
color: 'red',
textAlign: 'right',
},
};
});
const BorderInlineControl = ({ label, children, styles, classNames, direction = 'row', width = 180, errorMess, }) => {
const { classes } = useStyles$2({ width, direction }, {
name: 'HealthToolFormWrapper__BorderInlineControl',
styles,
classNames,
});
return (React__default["default"].createElement(core.Box, { className: classes.root },
React__default["default"].createElement(core.Box, { className: classes.row },
React__default["default"].createElement(core.Box, { className: classes.labelWrapper }, label && (React__default["default"].createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
React__default["default"].createElement(core.Box, { className: classes.content }, flattenChildren__default["default"](children).map((i, idx) => (React__default["default"].createElement(core.Box, { key: idx, className: classes.control }, i))))),
errorMess && (React__default["default"].createElement(index.Text, { size: "p4", className: classes.error }, errorMess))));
};
const useStyles$1 = core.createStyles(() => {
return {
root: {
color: 'red',
textAlign: 'right',
width: 'auto',
},
};
});
const Error = (_a) => {
var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
const { classes, cx } = useStyles$1(undefined, {
name: 'HealthToolFormWrapper__UnitText',
styles,
classNames,
});
return React__default["default"].createElement(index.Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
};
var useStyles = core.createStyles((theme) => {
const isMarryBaby = theme.other.template === 'mb';
return {
root: {
label: Object.assign({}, (isMarryBaby && {
color: miscTheme.theme.mbColors.midGray,
fontSize: core.rem(12),
fontWeight: 'normal',
})),
},
};
});
const Control = (_a) => {
var { className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["className", "styles", "classNames"]);
const { classes, cx } = useStyles(undefined, {
name: 'HealthToolFormWrapper__Control',
styles,
classNames,
});
return React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest));
};
const _HealthToolFormWrapper = (_a) => {
var { children, formLayout: formLayoutProp, styles, classNames, className, component = 'form' } = _a, rest = tslib_es6.__rest(_a, ["children", "formLayout", "styles", "classNames", "className", "component"]);
const formLayout = formLayoutProp || 'default';
const { classes, cx } = useStyles$6({ formLayout }, {
name: 'HealthToolFormWrapper',
styles,
classNames,
});
return (React__default["default"].createElement(FormLayoutContext.Provider, { value: {
formLayout,
} },
React__default["default"].createElement(core.Box, Object.assign({ component: component, className: cx(className, classes.root) }, rest), children)));
};
const HealthToolFormWrapper = _HealthToolFormWrapper;
HealthToolFormWrapper.Control = Control;
HealthToolFormWrapper.BorderInlineControl = BorderInlineControl;
HealthToolFormWrapper.BorderBoxControl = BorderBoxControl;
HealthToolFormWrapper.Error = Error;
HealthToolFormWrapper.FormRow = FormRow;
HealthToolFormWrapper.Submit = SubmitBtn;
HealthToolFormWrapper.Unit = Unit;
HealthToolFormWrapper.Switching = Switching;
HealthToolFormWrapper.ChipGroup = ChipGroup;
exports.HealthToolFormWrapper = HealthToolFormWrapper;