@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
110 lines (109 loc) • 3.59 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TabsDrawerScroll = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _uuid = require("uuid");
var _styles = require("@mui/material/styles");
var _material = require("@mui/material");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["children", "value", "index"];
var StyledTabs = (0, _styles.styled)(function (props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, Object.assign({
variant: "scrollable",
scrollButtons: false,
"aria-label": "scrollable menu",
id: "tabsFixed"
}, props));
})({
'& .MuiTabs-indicator': {
display: 'flex',
justifyContent: 'center',
backgroundColor: 'transparent',
maxHeight: '5px',
height: '5px',
borderRadius: '10px'
}
});
var StyledTab = (0, _styles.styled)(function (props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, Object.assign({}, props));
})(function (_ref) {
var theme = _ref.theme;
return {
textTransform: 'none',
fontWeight: theme.typography.fontWeightRegular,
fontSize: '14px',
fontFamily: 'Poppins, cursive',
marginRight: theme.spacing(2.5),
color: '#223263',
border: '1px solid ##2236CB',
borderRadius: '15px',
backgroundColor: '#F7F8FD',
padding: '0px 16px',
minHeight: '44px',
'&.Mui-selected': {
backgroundColor: ' #2236CB',
color: '#fff',
fontWeight: theme.typography.fontWeightMedium
}
};
});
function TabPanel(props) {
var children = props.children,
value = props.value,
index = props.index,
other = (0, _objectWithoutProperties2["default"])(props, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", Object.assign({
role: "tabpanel",
hidden: value !== index,
id: "simple-tabpanel-".concat(index),
"aria-labelledby": "simple-tab-".concat(index)
}, other, {
children: value === index && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
padding: '0px 10px'
},
children: children
})
}));
}
var TabsDrawerScroll = exports.TabsDrawerScroll = function TabsDrawerScroll(props) {
var _React$useState = _react["default"].useState(0),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
value = _React$useState2[0],
setValue = _React$useState2[1];
var handleChange = function handleChange(event, newValue) {
setValue(newValue);
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
backgroundColor: '#fff',
maxWidth: '100%',
position: 'sticky',
top: 0,
zIndex: 99
},
ref: props.boxRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTabs, {
value: value,
onChange: handleChange,
children: props.tabs.map(function (tab) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTab, {
label: tab.label
}, (0, _uuid.v4)());
})
})
}), props.tabs.map(function (tab, i) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabPanel, {
value: value,
index: i,
children: tab.items
}, (0, _uuid.v4)());
})]
});
};