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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabsCmp = 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");
var _span;
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, {
    TabIndicatorProps: {
      children: _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "MuiTabs-indicatorSpan"
      }))
    }
  }));
}, {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'colorIndicator';
  }
})(function (props) {
  return {
    '& .MuiTabs-indicator': {
      display: 'flex',
      justifyContent: 'flex-start',
      backgroundColor: 'transparent',
      maxHeight: '5px',
      height: '5px',
      borderRadius: '10px'
    },
    '& .MuiTabs-indicatorSpan': {
      // maxWidth: 40,
      maxHeight: '5px',
      height: '5px',
      width: '100%',
      borderRadius: '10px',
      backgroundColor: props.colorIndicator
    }
  };
});
var StyledTab = (0, _styles.styled)(function (props) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, Object.assign({}, props));
})(function (_ref) {
  var theme = _ref.theme,
    colorSelected = _ref.colorSelected;
  return {
    textTransform: 'none',
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: '18px',
    fontFamily: 'Poppins, cursive',
    marginRight: theme.spacing(1),
    textAlign: 'left',
    color: '#000',
    // paddingLeft: 0,
    '&.Mui-selected': {
      color: colorSelected,
      fontWeight: theme.typography.fontWeightMedium
    }
  };
});
var TabsCmp = exports.TabsCmp = function TabsCmp(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.jsx)(_material.Box, {
    sx: {
      maxWidth: '100%'
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTabs, {
      value: value,
      onChange: handleChange,
      colorIndicator: props.colorIndicator,
      children: props.arrTabs.map(function (arr) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTab, {
          label: arr,
          colorSelected: props.colorSelected
        }, (0, _uuid.v4)());
      })
    })
  });
};