@hhgtech/hhg-components
Version:
Hello Health Group common components
196 lines (191 loc) • 8.96 kB
JavaScript
import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default, { forwardRef } from 'react';
import { createStyles, useMantineTheme, Button as Button$1 } from '@mantine/core';
const ANIMATION_DURATION = '100ms';
var useStyles = createStyles((_theme, _params) => {
var _a, _b, _c, _d, _e, _f;
const { other } = _theme;
const { template } = other;
const { size, variant, skipHover, isError, isSuccess, color, children, theme: themeProp, } = _params;
const isMb = template === 'mb' || themeProp === 'marryBaby';
const finalColor = color || (themeProp && isMb ? 'mb' : _theme.primaryColor);
const isHexColor = finalColor.startsWith('#');
const hexColor50 = isHexColor
? _theme.fn.lighten(color, 0.9)
: ((_b = (_a = _theme.colors) === null || _a === void 0 ? void 0 : _a[finalColor]) === null || _b === void 0 ? void 0 : _b[0]) || '';
const hexColor = isHexColor
? finalColor
: (_d = (_c = _theme.colors) === null || _c === void 0 ? void 0 : _c[finalColor]) === null || _d === void 0 ? void 0 : _d[_theme.fn.primaryShade()];
const hoverHexColor = isHexColor
? _theme.fn.darken(color, 0.05)
: (_f = (_e = _theme.colors) === null || _e === void 0 ? void 0 : _e[finalColor]) === null || _f === void 0 ? void 0 : _f[_theme.fn.primaryShade() + 1];
return {
root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${ANIMATION_DURATION} ease-in-out`, '&:focus': {
outline: 'none',
} }, (!children && {
paddingLeft: '10px',
paddingRight: '10px',
'.mantine-Button-icon': {
margin: 0,
},
})), (() => {
switch (size) {
case 'xl':
return {
height: 56,
fontWeight: 600,
fontSize: isMb ? '14px' : '16px',
lineHeight: '24px',
};
case 'lg':
return {
height: 48,
fontWeight: 600,
fontSize: isMb ? '14px' : '16px',
lineHeight: '24px',
};
case 'md':
return {
height: 40,
fontWeight: 600,
fontSize: '14px',
lineHeight: '22px',
};
case 'sm':
return {
height: 32,
fontWeight: 600,
fontSize: isMb ? '12px' : '14px',
lineHeight: '22px',
paddingLeft: '16px',
paddingRight: '16px',
};
case 'xs':
return {
height: 24,
fontWeight: 600,
fontSize: '12px',
lineHeight: '18px',
paddingLeft: '8px',
paddingRight: '8px',
};
}
})()), (() => {
switch (variant) {
case 'primary': {
return Object.assign({ color: _theme.white, backgroundColor: hexColor }, (!skipHover && {
'&:hover': {
backgroundColor: hoverHexColor,
},
}));
}
case 'secondary':
return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (!skipHover && {
'&:hover': {
backgroundColor: hexColor50,
border: `1px solid ${hexColor}`,
},
}));
case 'white':
return {
color: hexColor,
backgroundColor: 'transparent',
border: `1px solid transparent`,
'&:hover': {
backgroundColor: 'transparent',
borderColor: `transparent`,
},
};
case 'tertiary':
return {
color: _theme.colors.gray[8],
backgroundColor: _theme.white,
border: `1px solid ${_theme.colors.neutral[2]}`,
'&:hover': Object.assign({}, (!skipHover
? {
backgroundColor: _theme.colors.neutral[0],
border: `1px solid ${_theme.colors.neutral[0]}`,
}
: {
backgroundColor: _theme.white,
border: `1px solid ${_theme.colors.neutral[2]}`,
})),
};
case 'light': {
return {
color: hexColor,
backgroundColor: hexColor50,
border: `1px solid transparent`,
'&:hover': Object.assign({}, (!skipHover
? {
backgroundColor: _theme.white,
border: `1px solid ${hexColor50}`,
}
: {
backgroundColor: hexColor50,
border: `1px solid transparent`,
})),
};
}
case 'ghost':
return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid transparent` }, (!skipHover && {
'&:hover': {
backgroundColor: hexColor50,
border: `1px solid transparent`,
},
}));
}
})()), { '&[data-disabled]': {
backgroundColor: _theme.colors.gray[1],
color: _theme.colors.gray[4],
} }), (isError
? Object.assign({ color: _theme.colors.red[6], backgroundColor: _theme.white, border: `1px solid ${_theme.colors.red[6]}` }, (!skipHover && {
'&:hover': {
backgroundColor: _theme.colors.red[0],
border: `1px solid ${_theme.colors.red[6]}`,
},
})) : {})), (isSuccess
? Object.assign({ color: _theme.colors.green[8], backgroundColor: _theme.colors.green[0] }, (!skipHover && {
'&:hover': {
backgroundColor: _theme.colors.green[0],
},
})) : {})),
};
});
const MAPPED_VARIANT = {
primary: 'filled',
secondary: 'outline',
tertiary: 'default',
light: 'light',
ghost: 'subtle',
error: 'outline',
white: 'white',
success: 'subtle',
};
function filterObject(obj) {
const ret = {};
Object.keys(obj)
.filter((key) => obj[key] !== undefined)
.forEach((key) => (ret[key] = obj[key]));
return ret;
}
const Button = forwardRef((props, ref) => {
var _a, _b;
const theme = useMantineTheme();
const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp } = _c, rest = __rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme"]);
const isError = variant === 'error';
const { classes, cx } = useStyles({
variant,
size,
color,
skipHover,
isError,
isSuccess: variant === 'success',
children,
theme: themeProp,
});
return (React__default.createElement(Button$1, Object.assign({ className: cx(className, variant), classNames: {
root: classes.root,
}, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, ref: ref, loaderProps: rest.disabled ? { color: 'currentColor' } : undefined }, rest), children));
});
export { ANIMATION_DURATION as A, Button as B };