@wulperstudio/cms/node/organisms/TabsGrid/TabsGrid.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabsGrid = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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");
/* eslint-disable react/jsx-no-useless-fragment */

var StyledTabs = (0, _styles.styled)(function (props) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, Object.assign({
    variant: "scrollable",
    scrollButtons: false,
    "aria-label": "scrollable menu"
  }, props));
})(function (_ref) {
  var theme = _ref.theme;
  return {
    '& .MuiTabs-indicator': {
      display: 'flex',
      justifyContent: 'center',
      backgroundColor: theme.palette.primary.main,
      maxHeight: '5px',
      height: '5px',
      borderRadius: '10px'
    }
  };
});
var StyledTab = (0, _styles.styled)(function (props) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, Object.assign({}, props));
})(function (_ref2) {
  var theme = _ref2.theme;
  return {
    textTransform: 'none',
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: '16px',
    fontFamily: 'Poppins, cursive',
    marginRight: theme.spacing(2.5),
    color: theme.palette.text.secondary,
    borderRadius: '0px',
    backgroundColor: theme.palette.background.paper,
    padding: '0px 16px',
    '&.Mui-selected': {
      color: theme.palette.primary.main,
      fontWeight: theme.typography.fontWeightMedium
    }
  };
});
function TabPanel(props) {
  var children = props.children,
    value = props.value,
    index = props.index;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: value === index && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: value === index ? {
        height: '100%',
        overflowY: 'auto'
      } : {
        height: 0
      },
      children: children
    })
  });
}
var TabsGrid = exports.TabsGrid = function TabsGrid(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: {
        maxWidth: '100%',
        bgcolor: props.backgroundColor,
        marginTop: '0px',
        padding: '0px 10px',
        display: 'flex',
        alignItems: 'center',
        borderBottom: '1px solid #ECECFB'
      },
      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)());
    })]
  });
};