@wix/design-system
Version:
@wix/design-system
39 lines • 2.02 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import VerticalTabsItem from '../VerticalTabsItem';
import VerticalTabsContext from './VerticalTabsContext';
import { SIZE, SKIN } from './VerticalTabs.constants';
import VerticalTabsIconItem from '../VerticalTabsIconItem';
import { useTabNavigation } from '../common/useTabNavigation';
/** Vertical tabs navigation panel. */
const Footer = ({ children }) => (React.createElement(VerticalTabsItem, { type: "action" }, children));
const TabsGroup = ({ title = '', children }) => (React.createElement(React.Fragment, null,
React.createElement(VerticalTabsItem, { type: "title" }, title),
children));
TabsGroup.propTypes = {
title: PropTypes.string,
};
const VerticalTabs = ({ dataHook, children, size = SIZE.MEDIUM, skin = SKIN.LIGHT, activeTabId, onChange, }) => {
const tabNavigationRef = useTabNavigation({ orientation: 'vertical' });
return (React.createElement(VerticalTabsContext.Provider
// @ts-expect-error - didn't manage to make context work with components generics
, {
// @ts-expect-error - didn't manage to make context work with components generics
value: { size, skin, activeTabId, onChange } },
React.createElement("div", { "data-hook": dataHook, "aria-orientation": "vertical", role: "tablist", "data-active-tab-id": activeTabId, ref: tabNavigationRef }, children)));
};
VerticalTabs.TabsGroup = TabsGroup;
VerticalTabs.TabItem = VerticalTabsItem;
VerticalTabs.IconItem = VerticalTabsIconItem;
VerticalTabs.Footer = Footer;
VerticalTabs.displayName = 'VerticalTabs';
VerticalTabs.propTypes = {
skin: PropTypes.oneOf([SKIN.LIGHT, SKIN.NEUTRAL, SKIN.STANDARD]),
size: PropTypes.oneOf([SIZE.TINY, SIZE.SMALL, SIZE.MEDIUM]),
activeTabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onChange: PropTypes.func,
children: PropTypes.arrayOf(PropTypes.node),
dataHook: PropTypes.string,
};
export default VerticalTabs;
//# sourceMappingURL=VerticalTabs.js.map