@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
133 lines • 7.04 kB
JavaScript
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import { Tabs, Tab } from './NavPillsStyles';
import { equals } from 'ramda';
const TabPanel = ({ children, active, index, ...other }) => {
const isActive = equals(active, index);
if (!isActive)
return null;
return (React.createElement(Box, { role: "tab-panel", hidden: active !== index, id: `full-width-tabpanel-${index}`, "aria-labelledby": `full-width-tab-${index}`, padding: 3, ...other }, children));
};
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.number.isRequired,
active: PropTypes.number.isRequired
};
const OrientationWrapper = ({ children, actions, orientation }) => {
return orientation == 'vertical' ? (React.createElement(Box, { role: "vertical-tab-wrapper", sx: { display: 'flex' } },
React.createElement(Box, { sx: { flexGrow: 1, display: 'flex' } }, children),
actions && (React.createElement(Box, { sx: { flexGrow: 1, borderLeft: 1, borderColor: 'divider', p: 1, maxWidth: 'fit-content' } }, actions?.map((action, index) => (React.createElement(Box, { key: index, role: "action", m: "4px" }, action))))))) : (React.createElement(React.Fragment, null, children));
};
OrientationWrapper.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
actions: PropTypes.arrayOf(PropTypes.node),
orientation: PropTypes.oneOf(['horizontal', 'vertical'])
};
const TabsWrapper = ({ children, actions, orientation, fullWidth, indicatorColor, ...other }) => {
return orientation == 'vertical' ? (React.createElement(Tabs, { role: "vertical-tabs", orientation: orientation, indicatorColor: indicatorColor, sx: { borderRight: 1, borderColor: 'divider' }, ...other }, children)) : (React.createElement(Box, { sx: { maxWidth: fullWidth ? 'unset' : 'fit-content', borderBottom: 1, borderColor: 'divider', display: 'flex' } },
React.createElement(Tabs, { role: "horizontal-tabs", orientation: orientation, indicatorColor: indicatorColor, ...other }, children),
actions &&
actions?.map((action, index) => (React.createElement(Box, { key: index, role: "action", m: "4px", mt: "auto", mb: "auto" }, action)))));
};
TabsWrapper.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
actions: PropTypes.array,
fullWidth: PropTypes.bool
};
/**
* Nav Pills component make it easy to explore and switch between different views.
* The component, organizes and allows navigation between groups of content that are related and at the same level of hierarchy.
*
* At its core, it uses [Material-UI Tabs](https://mui.com/base/react-tabs/components-api/#tabs) and [Material-UI Tab](https://mui.com/material-ui/api/tab/).
*/
const NavPills = ({ active = 0, onChange, tabs, tabProps, tabPanelProps, actions, selectedColor = 'secondary', capitalize, indicatorColor = 'secondary', variant = 'scrollable', orientation = 'horizontal', ...other }) => {
const [selfActive, setSelfActive] = useState(0);
const handleChange = useCallback((_event, newValue) => {
setSelfActive(newValue);
}, []);
return (React.createElement(OrientationWrapper, { orientation: orientation, actions: actions },
React.createElement(TabsWrapper, { value: onChange ? active : selfActive, onChange: onChange ?? handleChange, actions: actions, "aria-label": "tabs", indicatorColor: indicatorColor, variant: variant, orientation: orientation, ...other }, tabs.map(({ content: _content, ...tab }, index) => (React.createElement(Tab, { key: `simple-tab-${index}`, color: other?.color, colorGradient: other?.colorGradient, selectedColor: selectedColor, capitalize: capitalize, ...tabProps, ...tab })))),
tabs.map(({ content }, index) => (React.createElement(TabPanel, { key: `tab-panel-${index}`, index: index, active: onChange ? active : selfActive, ...tabPanelProps }, content)))));
};
NavPills.propTypes = {
/**
* @default 0
* Index of the default active pill
*/
active: PropTypes.number,
/**
* Handle tab change event manually
* Overrides the default onChange implementation
* @param {object} event The event source of the callback.
* @param {number} value We default to the index of the child (number)
*/
onChange: PropTypes.func,
/**
* The content of the component
*/
tabs: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.node,
icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
content: PropTypes.node,
props: PropTypes.object
}).isRequired).isRequired,
/**
* Custom tab properties that apply to all the Tab elements
*/
tabProps: PropTypes.object,
/**
* Custom tab panel properties that apply to all the TabPanel elements
*/
tabPanelProps: PropTypes.object,
/**
* @default 'scrollable'
* Determines additional display behavior of the tabs:
- scrollable will invoke scrolling properties and allow for horizontally scrolling (or swiping) of the tab bar.
- fullWidth will make the tabs grow to use all the available space, which should be used for small views, like on mobile.
- standard will render the default state.
*/
variant: PropTypes.oneOf(['scrollable', 'fullWidth', 'standard']),
/**
* The component orientation (layout flow direction).
*/
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
/**
* @default "primary"
* Determines the color of the indicator.
*/
indicatorColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'rose', 'white', 'dark']),
/**
* @default "primary"
* Determines the color of the selected Tab.
*/
selectedColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'rose', 'white', 'dark']),
/**
* Indicates the background color of the selected Tab and the indicator color
* Precedes 'indicatorColor' and 'selectedColor' properties
*/
color: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'rose', 'white', 'dark']),
/**
* Indicates the gradient background available for most of the colors of the selected Tab and the indicator color
*/
colorGradient: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'rose', 'dark']),
/**
* @default false
* If true, it maximize width to 100%
* Default value sets width to 'fit-content'
*/
fullWidth: PropTypes.bool,
/**
* @default false
* If true, tab text is capitalized.
*/
capitalize: PropTypes.bool,
/**
* A list of additional action components
* e.g. `[<Button />, <Button />]`
*/
actions: PropTypes.array
};
export default NavPills;
//# sourceMappingURL=NavPills.js.map