@wix/design-system/dist/cjs/SegmentedToggle/ToggleButton/ToggleButton.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ToggleButtonSt = require("./ToggleButton.st.css.js");
var _useFocusRing = require("../../providers/useFocusRing/useFocusRing");
var _Text = _interopRequireDefault(require("../../Text"));
var _excluded = ["children", "prefixIcon", "selected", "size", "dataHook", "focusableOnFocus", "focusableOnBlur", "disabled", "className", "role", "aria-checked"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SegmentedToggle/ToggleButton/ToggleButton.js";
var addPrefix = (icon, size) => {
  var dimension = size === 'small' ? '18' : '24';
  return icon && /*#__PURE__*/_react.default.cloneElement(icon, {
    width: dimension,
    height: dimension,
    className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.prefix, {
      size
    })
  });
};
var ToggleButton = _ref => {
  var {
      children,
      prefixIcon,
      selected,
      size,
      dataHook,
      focusableOnFocus,
      focusableOnBlur,
      disabled,
      className,
      role,
      'aria-checked': ariaChecked
    } = _ref,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var {
    focusProps
  } = (0, _useFocusRing.useFocusRing)();
  return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({}, rest, {
    role: role,
    className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.root, {
      selected,
      size,
      disabled
    }, className),
    "data-hook": dataHook,
    "data-selected": selected,
    "aria-checked": ariaChecked,
    disabled: disabled,
    type: "button"
  }, focusProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36,
      columnNumber: 5
    }
  }), addPrefix(prefixIcon, size), /*#__PURE__*/_react.default.createElement(_Text.default, {
    className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.label),
    ellipsis: true,
    size: size,
    weight: "thin",
    disabled: disabled,
    skin: disabled ? 'disabled' : 'standard',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48,
      columnNumber: 7
    }
  }, children));
};
ToggleButton.propTypes = {
  children: _propTypes.default.node,
  prefixIcon: _propTypes.default.node,
  value: _propTypes.default.string,
  selected: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  size: _propTypes.default.oneOf(['small', 'medium']),
  dataHook: _propTypes.default.string,
  'aria-checked': _propTypes.default.bool
};
ToggleButton.displayName = 'SegmentedToggle.Button';
var _default = exports.default = ToggleButton;
//# sourceMappingURL=ToggleButton.js.map