@hhgtech/hhg-components
Version:
Hello Health Group common components
403 lines (385 loc) • 16.3 kB
JavaScript
import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default, { createContext, useContext } from 'react';
import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
import { T as Text } from './index-9f5659e8.js';
import { B as Button } from './index-c68a0fa7.js';
import { u as useTranslations } from './index-9d21b711.js';
import flattenChildren from 'react-keyed-flatten-children';
import { theme } from './miscTheme.js';
var useStyles$8 = createStyles(() => {
return {
root: {
justifyContent: 'flex-start',
},
group: {
display: 'flex',
alignItems: 'stretch',
gap: rem(8),
},
item: {
flex: '1 1 0px',
},
icon: {
flexShrink: 0,
},
};
});
const ChipGroup = (_a) => {
var { data = [], label, isMobile, layout = 'horizonal', classNames, styles } = _a, props = __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.createElement(Box, null,
React__default.createElement(Input.Wrapper, { label: label },
React__default.createElement(Chip.Group, Object.assign({}, props),
React__default.createElement(Box, { className: classes.group }, data.map((i, idx) => (React__default.createElement(Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
iconWrapper: {
display: 'none',
},
label: {
width: '100%',
borderRadius: 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.createElement(Box, { sx: Object.assign(Object.assign(Object.assign({ width: '100%', display: 'flex', gap: 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.isValidElement(i.icon)
? React__default.cloneElement(i.icon, {
size: iconSize,
isMarryBaby,
className: classes.icon,
})
: null,
React__default.createElement(Text, { size: 'p4', styles: {
root: Object.assign(Object.assign({}, (isMarryBaby && {
textAlign: 'center',
})), { whiteSpace: 'normal', [theme.fn.smallerThan('sm')]: {
fontSize: rem(12),
lineHeight: rem(18),
textAlign: 'center',
} }),
} }, i.label))))))))));
};
const FormLayoutContext = createContext({});
const useStyles$7 = createStyles(() => {
return {
root: {
display: 'flex',
flexDirection: 'column',
gap: rem(8),
},
};
});
const FormRow = (_a) => {
var { styles, classNames, className, children } = _a, props = __rest(_a, ["styles", "classNames", "className", "children"]);
const { classes, cx } = useStyles$7(undefined, {
name: 'HealthToolFormWrapper__FormRow',
styles,
classNames,
});
return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, props), children));
};
var useStyles$6 = createStyles((theme, { formLayout }) => {
return {
root: {
display: 'flex',
flexDirection: 'column',
gap: rem(formLayout === 'inline' ? 8 : 16),
'.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
color: '#8C8C8C',
},
},
control: {
width: rem(180),
flexShrink: 1,
'&.error': {
'button, input': {
borderColor: theme.colors.red[7],
},
},
},
};
});
const useStyles$5 = createStyles((theme, { formLayout }) => {
const isMarryBaby = theme.other.template === 'mb';
return {
root: Object.assign(Object.assign({ minWidth: rem(180) }, (formLayout === 'inline' && {
alignSelf: 'flex-end',
marginTop: rem(16),
})), (formLayout === 'default' && Object.assign({}, (isMarryBaby && {
alignSelf: 'center',
})))),
};
});
const SubmitBtn = (_a) => {
var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
const { formLayout } = useContext(FormLayoutContext);
const { classes, cx } = useStyles$5({ formLayout }, {
name: 'HealthToolFormWrapper__SubmitBtn',
styles,
classNames,
});
return (React__default.createElement(Button, Object.assign({ className: cx('submit-btn', className, classes.root) }, props, { variant: "primary", size: "md" })));
};
const Switching = (_a) => {
var { label } = _a, props = __rest(_a, ["label"]);
const { t } = useTranslations();
const theme = useMantineTheme();
const isMarryBaby = theme.other.template === 'mb';
return (React__default.createElement(Flex, { gap: rem(4), sx: () => ({
justifyContent: 'space-between',
alignItems: 'center',
}) },
label && (React__default.createElement(Text, { size: isMarryBaby ? 'p4' : 's4', color: "gray.6" }, label)),
React__default.createElement(Switch, Object.assign({ labelPosition: "left", onLabel: t('switchBtn.yes'), offLabel: t('switchBtn.no') }, props, { styles: (theme) => ({
trackLabel: {
fontSize: 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 = createStyles((theme) => {
return {
root: {
color: theme.colors.gray[6],
whiteSpace: 'nowrap',
paddingRight: rem(16),
},
};
});
const Unit = (_a) => {
var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
const { classes, cx } = useStyles$4(undefined, {
name: 'HealthToolFormWrapper__UnitText',
styles,
classNames,
});
return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
};
var useStyles$3 = createStyles(() => {
return {
root: {
display: 'flex',
gap: rem(8),
border: '1px solid #EAEAEC',
borderRadius: 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 = __rest(_a, ["label", "rightSection", "children", "styles", "className", "classNames"]);
const { classes, cx } = useStyles$3(undefined, {
name: 'HealthToolFormWrapper__BorderBoxControl',
styles,
classNames,
});
return (React__default.createElement(Box, Object.assign({ className: cx(classes.root, className) }, props),
React__default.createElement(Box, { className: classes.info },
label && (React__default.createElement(Text, { size: "n1", as: "label", className: classes.label }, label)),
React__default.createElement(Box, { className: classes.content }, React__default.isValidElement(children)
? React__default.cloneElement(children, Object.assign(Object.assign({}, children.props), { size: 'sm', error: null }))
: null)),
rightSection && (React__default.createElement(Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default.createElement(Text, { size: "p4" }, rightSection)) : React__default.isValidElement(rightSection) ? (React__default.cloneElement(rightSection, {
size: 24,
})) : null))));
};
var useStyles$2 = createStyles((theme, { width, direction }) => {
const isMarryBaby = theme.other.template === 'mb';
return {
root: {
display: 'flex',
flexDirection: 'column',
gap: rem(8),
},
row: {
display: 'flex',
flexDirection: direction,
alignItems: 'stretch',
justifyContent: 'space-between',
gap: rem(16),
minHeight: rem(40),
},
labelWrapper: Object.assign({ flex: '1 1 0px', display: 'flex', alignItems: 'center' }, (direction === 'row' && {
borderBottom: `1px solid ${theme.colors.neutral[1]}`,
})),
label: {
fontSize: rem(14),
color: theme.colors.gray[6],
},
content: {
display: 'flex',
alignItems: 'center',
gap: rem(8),
input: {
backgroundColor: '#fff',
},
},
control: {
width: typeof width === 'number' ? rem(width) : width,
flexShrink: 1,
input: Object.assign({}, (isMarryBaby && {
borderRadius: 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.createElement(Box, { className: classes.root },
React__default.createElement(Box, { className: classes.row },
React__default.createElement(Box, { className: classes.labelWrapper }, label && (React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
React__default.createElement(Box, { className: classes.content }, flattenChildren(children).map((i, idx) => (React__default.createElement(Box, { key: idx, className: classes.control }, i))))),
errorMess && (React__default.createElement(Text, { size: "p4", className: classes.error }, errorMess))));
};
const useStyles$1 = createStyles(() => {
return {
root: {
color: 'red',
textAlign: 'right',
width: 'auto',
},
};
});
const Error = (_a) => {
var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
const { classes, cx } = useStyles$1(undefined, {
name: 'HealthToolFormWrapper__UnitText',
styles,
classNames,
});
return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
};
var useStyles = createStyles((theme$1) => {
const isMarryBaby = theme$1.other.template === 'mb';
return {
root: {
label: Object.assign({}, (isMarryBaby && {
color: theme.mbColors.midGray,
fontSize: rem(12),
fontWeight: 'normal',
})),
},
};
});
const Control = (_a) => {
var { className, styles, classNames } = _a, rest = __rest(_a, ["className", "styles", "classNames"]);
const { classes, cx } = useStyles(undefined, {
name: 'HealthToolFormWrapper__Control',
styles,
classNames,
});
return React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest));
};
const _HealthToolFormWrapper = (_a) => {
var { children, formLayout: formLayoutProp, styles, classNames, className, component = 'form' } = _a, rest = __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.createElement(FormLayoutContext.Provider, { value: {
formLayout,
} },
React__default.createElement(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;
export { HealthToolFormWrapper as H };