@hhgtech/hhg-components
Version:
Hello Health Group common components
143 lines (139 loc) • 7.52 kB
JavaScript
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import React__default, { useRef, useState, useEffect } from 'react';
import { ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
import { createStyles, rem, Tabs as Tabs$1, ScrollArea } from '@mantine/core';
import { B as Button } from './index-2d25b0f0.js';
import { T as Text } from './index-0b67696c.js';
var useStyles = createStyles((theme, params) => {
const { variant } = params;
const gradientOverlay = {
content: 'none',
top: 0,
bottom: 0,
zIndex: 1,
width: rem(56),
};
return Object.assign({}, (variant === 'inline' && {
root: {},
tabsList: {
gap: rem(24),
borderBottom: 'none',
flexWrap: 'nowrap',
},
tab: {
padding: `${rem(8)} 0`,
color: theme.colors.gray[4],
borderColor: 'transparent',
borderBottomWidth: rem(2),
marginBottom: 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: rem(28),
height: 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 = __rest(_a, ["variant", "value", "styles", "children", "dataList", "tabProps", "listProps", "panelProps", "TabComponentDisplay", "startPadding", "defaultValue"]);
const { cx, classes } = useStyles({ variant }, { name: 'Tabs', styles });
const listRef = useRef(null);
const tabRef = useRef([]);
const [activeTab, setActiveTab] = useState(defaultValue || ((_b = dataList === null || dataList === void 0 ? void 0 : dataList[0]) === null || _b === void 0 ? void 0 : _b.value));
const [currentSlide, setCurrentSlide] = useState(0);
const [disableNext, setDisableNext] = useState(false);
const [disablePrevious, setDisablePrevious] = useState(true);
const [scrollPosition, onScrollPositionChange] = useState({ x: 0, y: 0 });
const viewport = useRef(null);
const props = Object.assign({ defaultValue, classNames: classes }, (!children
? {
value: activeTab,
onTabChange: (v) => setActiveTab(v),
}
: {
value,
}));
useEffect(() => {
setActiveTab(value);
}, [value]);
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]);
useEffect(() => {
setCurrentSlide(dataList.findIndex((i) => i.value == activeTab));
}, [activeTab]);
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.createElement(TabComponentDisplay, null, text)) : (React__default.createElement(Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
return (React__default.createElement(Tabs$1, Object.assign({}, props, rest), children || (React__default.createElement(React__default.Fragment, null,
React__default.createElement(ScrollArea, { className: cx(classes.scrollArea, `${!disablePrevious ? 'prev-bg' : ''} ${!disableNext ? 'next-bg' : ''}`), scrollbarSize: 0, viewportRef: viewport, onScrollPositionChange: onScrollPositionChange },
React__default.createElement(Tabs$1.List, Object.assign({ className: classes.list, ref: listRef }, listProps), dataList.map((i, idx) => (React__default.createElement(Tabs$1.Tab, Object.assign({ ref: (e) => (tabRef.current[idx] = e), className: classes.tab, key: String(i.value), value: String(i.value) }, tabProps),
React__default.createElement(TabTextComponent, Object.assign({}, i)))))),
React__default.createElement(Button, { className: cx(classes.btn, classes.prevBtn, disablePrevious ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide - 1 > -1 ? currentSlide - 1 : 0), leftIcon: React__default.createElement(ArrowLeft, { size: 16 }) }),
React__default.createElement(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.createElement(ArrowRight, { size: 16 }) })),
dataList.map((i) => (React__default.createElement(Tabs$1.Panel, Object.assign({ value: String(i.value), key: String(i.value) }, panelProps), i.content)))))));
};
const Tabs = _Tabs;
Tabs.List = Tabs$1.List;
Tabs.Tab = Tabs$1.Tab;
Tabs.Panel = Tabs$1.Panel;
export { Tabs as T };