@wulperstudio/cms/organisms/ToggleTabs/index.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["tabs", "activeTab", "sx", "isTooltip", "sxActiveTab"],
  _excluded2 = ["id", "label", "sx", "onClick", "title"];
import * as React from 'react';
import { motion } from 'framer-motion';
import { Box, Button, Paper, useTheme } from '@mui/material';
import { Tooltip } from '../../components';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var ToggleTabs = function ToggleTabs(_ref) {
  var tabs = _ref.tabs,
    activeTab = _ref.activeTab,
    sx = _ref.sx,
    isTooltip = _ref.isTooltip,
    sxActiveTab = _ref.sxActiveTab,
    rest = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  var _React$useState = React.useState(activeTab),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    controlActiveTab = _React$useState2[0],
    setControlActiveTab = _React$useState2[1];
  return /*#__PURE__*/_jsx(Paper, Object.assign({
    elevation: 0,
    sx: Object.assign({
      display: 'flex',
      borderRadius: '9999px',
      padding: '0.35rem',
      gap: 1
    }, sx)
  }, rest, {
    children: tabs.map(function (_ref2) {
      var id = _ref2.id,
        label = _ref2.label,
        sxTab = _ref2.sx,
        onClick = _ref2.onClick,
        title = _ref2.title,
        tab = _objectWithoutProperties(_ref2, _excluded2);
      return isTooltip ? /*#__PURE__*/_jsx(Tooltip, {
        title: title,
        children: /*#__PURE__*/_jsxs(Button, Object.assign({
          disableTouchRipple: true,
          disableFocusRipple: true,
          disableRipple: true,
          disableElevation: true,
          sx: Object.assign({
            position: 'relative',
            paddingX: 2,
            paddingY: 0.5,
            color: controlActiveTab === id ? 'text.primary' : 'text.secondary',
            transition: 'color 0.3s',
            '&:hover': {
              color: 'text.primary',
              backgroundColor: 'unset'
            }
          }, sxTab),
          onClick: function onClick() {
            setControlActiveTab(id);
          }
        }, tab, {
          children: [controlActiveTab === id && /*#__PURE__*/_jsx(motion.div, {
            layoutId: "active-pill",
            className: "active-pill",
            style: Object.assign({
              position: 'absolute',
              inset: 0,
              backgroundColor: theme.palette.background["default"],
              borderRadius: '9999px',
              boxShadow: 'rgba(113, 116, 152, 0.1) 0px 18px 31px, rgba(113, 116, 152, 0.067) 0px 8px 16.2244px, rgba(113, 116, 152, 0.05) 0px 8px 8.46625px'
            }, sxActiveTab),
            transition: {
              type: 'spring',
              duration: 0.6
            },
            onLayoutAnimationComplete: function onLayoutAnimationComplete() {
              onClick == null || onClick();
            }
          }), /*#__PURE__*/_jsx(Box, {
            zIndex: 10,
            sx: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            },
            children: label
          })]
        }))
      }, id) : /*#__PURE__*/_jsxs(Button, Object.assign({
        disableTouchRipple: true,
        disableFocusRipple: true,
        disableRipple: true,
        disableElevation: true,
        sx: Object.assign({
          position: 'relative',
          paddingX: 2,
          paddingY: 0.5,
          color: controlActiveTab === id ? 'text.primary' : 'text.secondary',
          transition: 'color 0.3s',
          '&:hover': {
            color: 'text.primary',
            backgroundColor: 'unset'
          }
        }, sxTab),
        onClick: function onClick() {
          setControlActiveTab(id);
        }
      }, tab, {
        children: [controlActiveTab === id && /*#__PURE__*/_jsx(motion.div, {
          layoutId: "active-pill",
          className: "active-pill",
          style: Object.assign({
            position: 'absolute',
            inset: 0,
            backgroundColor: theme.palette.background["default"],
            borderRadius: '9999px',
            boxShadow: 'rgba(113, 116, 152, 0.1) 0px 18px 31px, rgba(113, 116, 152, 0.067) 0px 8px 16.2244px, rgba(113, 116, 152, 0.05) 0px 8px 8.46625px'
          }, sxActiveTab),
          transition: {
            type: 'spring',
            duration: 0.8
          },
          onLayoutAnimationComplete: function onLayoutAnimationComplete() {
            onClick == null || onClick();
          }
        }), /*#__PURE__*/_jsx(Box, {
          zIndex: 10,
          className: "container-toggle-tab",
          children: label
        })]
      }), id);
    })
  }));
};