@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
142 lines (141 loc) • 6.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ToggleTabs = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var React = _interopRequireWildcard(require("react"));
var _framerMotion = require("framer-motion");
var _material = require("@mui/material");
var _components = require("../../components");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["tabs", "activeTab", "sx", "isTooltip", "sxActiveTab"],
_excluded2 = ["id", "label", "sx", "onClick", "title"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var ToggleTabs = exports.ToggleTabs = function ToggleTabs(_ref) {
var tabs = _ref.tabs,
activeTab = _ref.activeTab,
sx = _ref.sx,
isTooltip = _ref.isTooltip,
sxActiveTab = _ref.sxActiveTab,
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var theme = (0, _material.useTheme)();
var _React$useState = React.useState(activeTab),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
controlActiveTab = _React$useState2[0],
setControlActiveTab = _React$useState2[1];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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 = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
return isTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
title: title,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.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__*/(0, _jsxRuntime.jsx)(_framerMotion.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__*/(0, _jsxRuntime.jsx)(_material.Box, {
zIndex: 10,
sx: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
children: label
})]
}))
}, id) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.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__*/(0, _jsxRuntime.jsx)(_framerMotion.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__*/(0, _jsxRuntime.jsx)(_material.Box, {
zIndex: 10,
className: "container-toggle-tab",
children: label
})]
}), id);
})
}));
};