@wulperstudio/cms/organisms/TabsFlex/TabsFlex.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"],
  _excluded2 = ["indicator", "disableGrow", "tabsProps", "defaultValue", "containerProps", "containerPanel", "tabPanelProps"],
  _excluded3 = ["sx"],
  _excluded4 = ["id", "label", "onClick", "disabled"];
import React from 'react';
import { Box, useTheme } from '@mui/material';
import { StyledTab, StyledTabs } from './styled';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function TabPanel(props) {
  var children = props.children,
    value = props.value,
    index = props.index,
    other = _objectWithoutProperties(props, _excluded);
  return /*#__PURE__*/_jsx(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
  }));
}
export var 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 = _objectWithoutProperties(_ref, _excluded2);
  var theme = useTheme();
  var _React$useState = React.useState(0),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    value = _React$useState2[0],
    setValue = _React$useState2[1];
  var _ref2 = containerProps || {},
    sx = _ref2.sx,
    rest = _objectWithoutProperties(_ref2, _excluded3);
  React.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__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(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__*/_jsx(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 = _objectWithoutProperties(_ref3, _excluded4);
          return /*#__PURE__*/_jsx(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__*/_jsx(Box, Object.assign({}, containerPanel, {
      children: props.tabs.map(function (tab, i) {
        return /*#__PURE__*/_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));
      })
    }))]
  });
};