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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabsDrawer = 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 _styled = require("./styled");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["children", "value", "index", "stickyTabs"],
  _excluded2 = ["componentProps", "expandedTabs"];
/* eslint-disable arrow-body-style */
var TabPanel = function TabPanel(props) {
  var children = props.children,
    value = props.value,
    index = props.index,
    stickyTabs = props.stickyTabs,
    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),
    style: {
      width: '100%',
      height: stickyTabs ? 'auto' : '100%',
      overflowY: 'auto'
    }
  }, other, {
    children: value === index && children
  }));
};
var TabsDrawer = exports.TabsDrawer = function TabsDrawer(_ref) {
  var _componentProps$heade, _componentProps$panel;
  var componentProps = _ref.componentProps,
    expandedTabs = _ref.expandedTabs,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
  var _React$useState = _react["default"].useState(0),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    value = _React$useState2[0],
    setValue = _React$useState2[1];
  var ex = expandedTabs && props.tabs.length === 2;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.WrapperTabsHeader, {
      backgroundColor: props.backgroundColor,
      stickyTabs: props.stickyTabs,
      padding: componentProps == null || (_componentProps$heade = componentProps.header) == null ? void 0 : _componentProps$heade.padding,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.StyledTabs, {
        value: value,
        onChange: function onChange(_, idx) {
          return setValue(idx);
        },
        children: props.tabs.map(function (_ref2, i) {
          var label = _ref2.label;
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.StyledTab, {
            className: value === i ? 'Mui-selected' : undefined,
            borderRadius: props.borderRadius,
            label: label,
            backgroundColor: props.backgroundColor,
            backGroundColorSelected: props.backGroundColorSelected,
            colorSelected: props.colorSelected,
            fontSize: props.fontSize,
            fontWeight: props.fontWeight,
            expanded: ex
          }, (0, _uuid.v4)());
        })
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.WrapperTabPanel, {
      padding: componentProps == null || (_componentProps$panel = componentProps.panel) == null ? void 0 : _componentProps$panel.padding,
      children: props.tabs.map(function (tab, i) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabPanel, {
          value: value,
          index: i,
          stickyTabs: props.stickyTabs,
          children: tab.items
        }, (0, _uuid.v4)());
      })
    })]
  });
};