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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabsFlex = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _styled = require("./styled");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["children", "value", "index"],
  _excluded2 = ["indicator", "disableGrow", "tabsProps", "defaultValue", "containerProps", "containerPanel", "tabPanelProps"],
  _excluded3 = ["sx"],
  _excluded4 = ["id", "label", "onClick", "disabled"];
function TabPanel(props) {
  var children = props.children,
    value = props.value,
    index = props.index,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
    role: "tabpanel",
    hidden: value !== index,
    id: "simple-tabpanel-".concat(index),
    "aria-labelledby": "simple-tab-".concat(index),
    sx: {
      width: '100%',
      maxWidth: '100%'
    }
  }, other, {
    children: value === index && children
  }));
}
var TabsFlex = exports.TabsFlex = function TabsFlex(_ref) {
  var indicator = _ref.indicator,
    disableGrow = _ref.disableGrow,
    tabsProps = _ref.tabsProps,
    defaultValue = _ref.defaultValue,
    containerProps = _ref.containerProps,
    containerPanel = _ref.containerPanel,
    tabPanelProps = _ref.tabPanelProps,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
  var theme = (0, _material.useTheme)();
  var _React$useState = _react["default"].useState(0),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    value = _React$useState2[0],
    setValue = _React$useState2[1];
  var _ref2 = containerProps || {},
    sx = _ref2.sx,
    rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
  _react["default"].useEffect(function () {
    if (defaultValue !== undefined) {
      setValue(defaultValue);
    }
  }, [defaultValue]);
  var handleChange = function handleChange(event, newValue) {
    setValue(newValue);
  };
  var length = !disableGrow && props.tabs.length === 2;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({
      sx: Object.assign({
        m: '0px 0px 20px 0px',
        borderBottom: props.dividerBottom ? "1px solid ".concat(theme.palette.background.paper) : 'none'
      }, props.noPanels && {
        mb: '0px'
      }, sx)
    }, rest, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.StyledTabs, Object.assign({
        indicator: !!indicator,
        fullWidth: length,
        value: value,
        onChange: handleChange,
        variant: "scrollable",
        scrollButtons: false
      }, tabsProps, {
        children: props.tabs.map(function (_ref3) {
          var id = _ref3.id,
            label = _ref3.label,
            onClick = _ref3.onClick,
            disabled = _ref3.disabled,
            tabProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded4);
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.StyledTab, Object.assign({
            onClick: onClick,
            color: props.color,
            border: props.border,
            disabled: disabled,
            borderRadius: props.borderRadius,
            backgroundColor: props.backgroundColor,
            backgroundColorSelected: props.backgroundColorSelected,
            colorSelected: props.colorSelected,
            fullWidth: length,
            label: label
          }, tabProps), id);
        })
      }))
    })), !props.noPanels && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, Object.assign({}, containerPanel, {
      children: props.tabs.map(function (tab, i) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabPanel
        // eslint-disable-next-line react/no-array-index-key
        , Object.assign({
          value: value,
          index: i
        }, tabPanelProps, {
          children: tab.items
        }), "panel_".concat(tab == null ? void 0 : tab.id, " - ").concat(i));
      })
    }))]
  });
};