model-navigator-standalone
Version:
Standalone MDF graph model visualizer
57 lines • 1.46 kB
JavaScript
import React from 'react';
import { Tabs, Tab } from '@mui/material';
import withStyles from '@mui/styles/withStyles';
import TabLabel from './TabLabel';
const TabItems = _ref => {
let {
tabItems,
styleClasses,
handleTabChange,
currentTab,
orientation
} = _ref;
function getTabLabel(title, image, index) {
return /*#__PURE__*/React.createElement(TabLabel, {
title: title,
icon: image,
primaryColorClass: currentTab === index ? styleClasses.tabHighlightColor : styleClasses.tabPrimaryColor
});
}
const TABs = tabItems.map((tab, index) => /*#__PURE__*/React.createElement(Tab, {
index: tab.index,
label: getTabLabel(tab.label, tab.icon, tab.index),
key: index,
disableRipple: true
}));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, {
onChange: (event, value) => handleTabChange(event, value),
value: currentTab,
TabIndicatorProps: {
style: {
background: 'none'
}
},
orientation: orientation,
className: styleClasses.tabs
}, TABs));
};
const styles = () => ({
defaultStyle: {
fontFamily: 'Open Sans',
textTransform: 'none',
fontSize: '17px'
},
flexContainer: {
flexDirection: 'column'
},
indicator: {
display: 'none'
},
tabHighlightColor: {
color: '#6d9eba'
},
tabs: {
paddingLeft: '10px'
}
});
export default withStyles(styles)(TabItems);