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

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "value", "index", "stickyTabs"],
  _excluded2 = ["componentProps", "expandedTabs"];
/* eslint-disable arrow-body-style */
import React from 'react';
import { v4 } from 'uuid';
import { WrapperTabPanel, StyledTab, StyledTabs, WrapperTabsHeader } from './styled';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var TabPanel = function TabPanel(props) {
  var children = props.children,
    value = props.value,
    index = props.index,
    stickyTabs = props.stickyTabs,
    other = _objectWithoutProperties(props, _excluded);
  return /*#__PURE__*/_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
  }));
};
export var TabsDrawer = function TabsDrawer(_ref) {
  var _componentProps$heade, _componentProps$panel;
  var componentProps = _ref.componentProps,
    expandedTabs = _ref.expandedTabs,
    props = _objectWithoutProperties(_ref, _excluded2);
  var _React$useState = React.useState(0),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    value = _React$useState2[0],
    setValue = _React$useState2[1];
  var ex = expandedTabs && props.tabs.length === 2;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(WrapperTabsHeader, {
      backgroundColor: props.backgroundColor,
      stickyTabs: props.stickyTabs,
      padding: componentProps == null || (_componentProps$heade = componentProps.header) == null ? void 0 : _componentProps$heade.padding,
      children: /*#__PURE__*/_jsx(StyledTabs, {
        value: value,
        onChange: function onChange(_, idx) {
          return setValue(idx);
        },
        children: props.tabs.map(function (_ref2, i) {
          var label = _ref2.label;
          return /*#__PURE__*/_jsx(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
          }, v4());
        })
      })
    }), /*#__PURE__*/_jsx(WrapperTabPanel, {
      padding: componentProps == null || (_componentProps$panel = componentProps.panel) == null ? void 0 : _componentProps$panel.padding,
      children: props.tabs.map(function (tab, i) {
        return /*#__PURE__*/_jsx(TabPanel, {
          value: value,
          index: i,
          stickyTabs: props.stickyTabs,
          children: tab.items
        }, v4());
      })
    })]
  });
};