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

Wulper Studio Library Components CMS

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["items", "value", "onChange", "label", "sx", "isTooltip"],
  _excluded2 = ["value", "label", "sx", "titleTooltip", "icon", "color", "selected"],
  _excluded3 = ["value", "label", "sx", "icon", "color"];
import React from 'react';
import { Icon } from '@iconify/react';
import { ToggleButtonGroup, ToggleButton as MuiToggleButton, useTheme, toggleButtonGroupClasses } from '@mui/material';
import { Tooltip } from '../../components';
import { jsx as _jsx } from "react/jsx-runtime";
export var ToggleButton = function ToggleButton(_ref) {
  var items = _ref.items,
    value = _ref.value,
    onChange = _ref.onChange,
    label = _ref.label,
    sx = _ref.sx,
    isTooltip = _ref.isTooltip,
    props = _objectWithoutProperties(_ref, _excluded);
  var theme = useTheme();
  return /*#__PURE__*/_jsx(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 = _objectWithoutProperties(_ref2, _excluded2);
      return /*#__PURE__*/_jsx(MuiToggleButton, Object.assign({
        value: valueButton,
        "aria-label": labelButton,
        selected: selectedButton,
        sx: Object.assign(_defineProperty({
          borderRadius: '50%',
          margin: theme.spacing(0.5)
        }, "& .".concat(toggleButtonGroupClasses.grouped), _defineProperty({
          border: 0,
          borderRadius: '50%'
        }, "&.".concat(toggleButtonGroupClasses.disabled), {
          border: 0
        })), sxButton)
      }, rest, {
        children: /*#__PURE__*/_jsx(Tooltip, {
          title: titleTooltip,
          children: /*#__PURE__*/_jsx(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 = _objectWithoutProperties(_ref3, _excluded3);
      return /*#__PURE__*/_jsx(MuiToggleButton, Object.assign({
        value: valueButton,
        "aria-label": labelButton,
        sx: Object.assign(_defineProperty({
          borderRadius: '50%',
          margin: theme.spacing(0.5)
        }, "& .".concat(toggleButtonGroupClasses.grouped), _defineProperty({
          border: 0,
          borderRadius: '50%'
        }, "&.".concat(toggleButtonGroupClasses.disabled), {
          border: 0
        })), sxButton)
      }, rest, {
        children: /*#__PURE__*/_jsx(Icon, {
          icon: icon,
          width: 24,
          height: 24,
          color: color || theme.palette.text.primary
        })
      }), "".concat(valueButton, " - ").concat(labelButton));
    })
  }));
};