@hhgtech/hhg-components
Version:
Hello Health Group common components
149 lines (142 loc) • 7.9 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 = require('./index-515469d0.js');
var index$1 = require('./index-d4ad3f79.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var useStyles = core.createStyles((theme, params) => {
const { variant } = params;
const gradientOverlay = {
content: 'none',
top: 0,
bottom: 0,
zIndex: 1,
width: core.rem(56),
};
return Object.assign({}, (variant === 'inline' && {
root: {},
tabsList: {
gap: core.rem(24),
borderBottom: 'none',
flexWrap: 'nowrap',
},
tab: {
padding: `${core.rem(8)} 0`,
color: theme.colors.gray[4],
borderColor: 'transparent',
borderBottomWidth: core.rem(2),
marginBottom: core.rem(-1),
transition: 'border 0.2s ease',
['&:hover']: {
backgroundColor: 'initial',
borderColor: 'transparent',
},
[`&[data-active='true']`]: {
color: theme.fn.primaryColor(),
borderColor: theme.fn.primaryColor(),
},
},
tabRightSection: {},
tabLabel: {},
tabIcon: {},
panel: {},
scrollArea: {
position: 'relative',
'&.prev-bg': {
'&:before': Object.assign(Object.assign({}, gradientOverlay), { content: '""', position: 'absolute', left: 0, background: 'linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)' }),
},
'&.next-bg': {
'&:after': Object.assign(Object.assign({}, gradientOverlay), { content: '""', position: 'absolute', right: 0, background: 'linear-gradient(90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%)' }),
},
},
list: {
borderBottom: `1px solid ${theme.colors.neutral[1]}`,
},
btn: {
position: 'absolute',
top: '50%',
zIndex: 2,
transform: 'translate(0, -50%)',
width: core.rem(28),
height: core.rem(28),
padding: 0,
background: 'white',
borderRadius: '50%',
cursor: 'pointer',
filter: 'drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04)) drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))',
'.mantine-Button-icon': {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
'&.disabled': {
opacity: 0,
zIndex: 0,
},
},
prevBtn: {
left: 0,
},
nextBtn: {
right: 0,
},
}));
});
const _Tabs = (_a) => {
var _b;
var { variant = 'inline', value, styles, children, dataList = [], tabProps, listProps, panelProps, TabComponentDisplay, startPadding = 40, defaultValue } = _a, rest = tslib_es6.__rest(_a, ["variant", "value", "styles", "children", "dataList", "tabProps", "listProps", "panelProps", "TabComponentDisplay", "startPadding", "defaultValue"]);
const { cx, classes } = useStyles({ variant }, { name: 'Tabs', styles });
const listRef = React.useRef(null);
const tabRef = React.useRef([]);
const [activeTab, setActiveTab] = React.useState(defaultValue || ((_b = dataList === null || dataList === void 0 ? void 0 : dataList[0]) === null || _b === void 0 ? void 0 : _b.value));
const [currentSlide, setCurrentSlide] = React.useState(0);
const [disableNext, setDisableNext] = React.useState(false);
const [disablePrevious, setDisablePrevious] = React.useState(true);
const [scrollPosition, onScrollPositionChange] = React.useState({ x: 0, y: 0 });
const viewport = React.useRef(null);
const props = Object.assign({ defaultValue, classNames: classes }, (!children
? {
value: activeTab,
onTabChange: (v) => setActiveTab(v),
}
: {
value,
}));
React.useEffect(() => {
setActiveTab(value);
}, [value]);
React.useEffect(() => {
var _a, _b, _c;
(_a = viewport.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
left: ((_c = (_b = tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) === null || _b === void 0 ? void 0 : _b[currentSlide]) === null || _c === void 0 ? void 0 : _c.offsetLeft) - startPadding,
behavior: 'smooth',
});
}, [currentSlide]);
React.useEffect(() => {
setCurrentSlide(dataList.findIndex((i) => i.value == activeTab));
}, [activeTab]);
React.useEffect(() => {
var _a, _b;
setDisablePrevious(scrollPosition.x === 0);
setDisableNext(((_a = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + scrollPosition.x ===
((_b = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _b === void 0 ? void 0 : _b.scrollWidth));
}, [scrollPosition]);
const TabTextComponent = ({ text, dataEventCategory, dataEventAction, dataEventLabel, }) => TabComponentDisplay ? (React__default["default"].createElement(TabComponentDisplay, null, text)) : (React__default["default"].createElement(index$1.Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
return (React__default["default"].createElement(core.Tabs, Object.assign({}, props, rest), children || (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(core.ScrollArea, { className: cx(classes.scrollArea, `${!disablePrevious ? 'prev-bg' : ''} ${!disableNext ? 'next-bg' : ''}`), scrollbarSize: 0, viewportRef: viewport, onScrollPositionChange: onScrollPositionChange },
React__default["default"].createElement(core.Tabs.List, Object.assign({ className: classes.list, ref: listRef }, listProps), dataList.map((i, idx) => (React__default["default"].createElement(core.Tabs.Tab, Object.assign({ ref: (e) => (tabRef.current[idx] = e), className: classes.tab, key: String(i.value), value: String(i.value) }, tabProps),
React__default["default"].createElement(TabTextComponent, Object.assign({}, i)))))),
React__default["default"].createElement(index.Button, { className: cx(classes.btn, classes.prevBtn, disablePrevious ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide - 1 > -1 ? currentSlide - 1 : 0), leftIcon: React__default["default"].createElement(other.ArrowLeft, { size: 16 }) }),
React__default["default"].createElement(index.Button, { className: cx(classes.btn, classes.nextBtn, disableNext ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide + 1 < dataList.length - 1
? currentSlide + 1
: dataList.length - 1), leftIcon: React__default["default"].createElement(other.ArrowRight, { size: 16 }) })),
dataList.map((i) => (React__default["default"].createElement(core.Tabs.Panel, Object.assign({ value: String(i.value), key: String(i.value) }, panelProps), i.content)))))));
};
const Tabs = _Tabs;
Tabs.List = core.Tabs.List;
Tabs.Tab = core.Tabs.Tab;
Tabs.Panel = core.Tabs.Panel;
exports.Tabs = Tabs;