wix-style-react
Version:
wix-style-react
41 lines • 1.79 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import VerticalTabsItem from '../VerticalTabsItem';
import VerticalTabsContext from './VerticalTabsContext';
/** 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,
};
class VerticalTabs extends React.Component {
render() {
const { dataHook, children, size, activeTabId, onChange } = this.props;
return (React.createElement(VerticalTabsContext.Provider, { value: { size, activeTabId, onChange } },
React.createElement("div", { "data-hook": dataHook, role: "menubar" }, children)));
}
}
VerticalTabs.displayName = 'VerticalTabs';
VerticalTabs.propTypes = {
/** Text Size (tiny, small, medium) */
size: PropTypes.oneOf(['tiny', 'small', 'medium']),
/** Current selected tab id */
activeTabId: PropTypes.number,
/** Callback function called on tab selection change with the following parameters<code>(id)</code> */
onChange: PropTypes.func,
/** Child nodes of this component must be of type <code><VerticalTabs.TabsGroup></code> or <code><VerticalTabs.Footer></code>*/
children: PropTypes.arrayOf(PropTypes.node),
/** Data attribute for testing purposes */
dataHook: PropTypes.string,
};
VerticalTabs.defaultProps = {
size: 'medium',
onChange: () => { },
};
VerticalTabs.TabsGroup = TabsGroup;
VerticalTabs.TabItem = VerticalTabsItem;
VerticalTabs.Footer = Footer;
export default VerticalTabs;
//# sourceMappingURL=VerticalTabs.js.map