@wulperstudio/cms/node/organisms/ToggleButton/index.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ToggleButton = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _components = require("../../components");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["items", "value", "onChange", "label", "sx", "isTooltip"],
  _excluded2 = ["value", "label", "sx", "titleTooltip", "icon", "color", "selected"],
  _excluded3 = ["value", "label", "sx", "icon", "color"];
var ToggleButton = exports.ToggleButton = function ToggleButton(_ref) {
  var items = _ref.items,
    value = _ref.value,
    onChange = _ref.onChange,
    label = _ref.label,
    sx = _ref.sx,
    isTooltip = _ref.isTooltip,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var theme = (0, _material.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, Object.assign({
    exclusive: true,
    value: value,
    onChange: onChange,
    "aria-label": label,
    sx: Object.assign({
      bgcolor: '#eceff1',
      borderRadius: '1.5rem',
      border: 0,
      '& .MuiToggleButtonGroup-grouped': {
        borderTopRightRadius: '50% !important',
        borderBottomRightRadius: '50% !important',
        borderTopLeftRadius: '50% !important',
        borderBottomLeftRadius: '50% !important',
        border: 'unset'
      },
      '& .Mui-selected': {
        backgroundColor: '#fff !important'
      },
      '& .MuiToggleButtonGroup-grouped:not(:first-of-type)': {
        marginLeft: '4px',
        borderLeft: '1px solid #f4f7fd',
        border: 'unset'
      }
    }, sx)
  }, props, {
    children: isTooltip ? items.map(function (_ref2) {
      var valueButton = _ref2.value,
        labelButton = _ref2.label,
        sxButton = _ref2.sx,
        titleTooltip = _ref2.titleTooltip,
        icon = _ref2.icon,
        color = _ref2.color,
        selectedButton = _ref2.selected,
        rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, Object.assign({
        value: valueButton,
        "aria-label": labelButton,
        selected: selectedButton,
        sx: Object.assign((0, _defineProperty2["default"])({
          borderRadius: '50%',
          margin: theme.spacing(0.5)
        }, "& .".concat(_material.toggleButtonGroupClasses.grouped), (0, _defineProperty2["default"])({
          border: 0,
          borderRadius: '50%'
        }, "&.".concat(_material.toggleButtonGroupClasses.disabled), {
          border: 0
        })), sxButton)
      }, rest, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
          title: titleTooltip,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
            icon: icon,
            width: 24,
            height: 24,
            color: color || theme.palette.text.primary
          })
        })
      }), "".concat(valueButton, " - ").concat(labelButton));
    }) : items.map(function (_ref3) {
      var valueButton = _ref3.value,
        labelButton = _ref3.label,
        sxButton = _ref3.sx,
        icon = _ref3.icon,
        color = _ref3.color,
        rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, Object.assign({
        value: valueButton,
        "aria-label": labelButton,
        sx: Object.assign((0, _defineProperty2["default"])({
          borderRadius: '50%',
          margin: theme.spacing(0.5)
        }, "& .".concat(_material.toggleButtonGroupClasses.grouped), (0, _defineProperty2["default"])({
          border: 0,
          borderRadius: '50%'
        }, "&.".concat(_material.toggleButtonGroupClasses.disabled), {
          border: 0
        })), sxButton)
      }, rest, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
          icon: icon,
          width: 24,
          height: 24,
          color: color || theme.palette.text.primary
        })
      }), "".concat(valueButton, " - ").concat(labelButton));
    })
  }));
};