wix-style-react/dist/src/SegmentedToggle/ToggleButton/ToggleButton.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: 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 _FocusableHOC = require("wix-ui-core/dist/src/hocs/Focusable/FocusableHOC");

var _context = require("../../FontUpgrade/context");

var _ToggleButtonSt = require("./ToggleButton.st.css");

var _Text = _interopRequireDefault(require("../../Text"));

var _excluded = ["children", "prefixIcon", "selected", "dataHook", "focusableOnFocus", "focusableOnBlur", "disabled", "className"];

var addPrefix = function addPrefix(icon) {
  return icon && /*#__PURE__*/_react["default"].cloneElement(icon, {
    width: '24',
    height: '24',
    className: _ToggleButtonSt.classes.prefix
  });
};

var ToggleButton = function ToggleButton(_ref) {
  var children = _ref.children,
      prefixIcon = _ref.prefixIcon,
      selected = _ref.selected,
      dataHook = _ref.dataHook,
      focusableOnFocus = _ref.focusableOnFocus,
      focusableOnBlur = _ref.focusableOnBlur,
      disabled = _ref.disabled,
      className = _ref.className,
      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref2) {
    var isMadefor = _ref2.active;
    return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, rest, {
      className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.root, {
        selected: selected
      }, className),
      "data-hook": dataHook,
      "data-selected": selected,
      disabled: disabled,
      onFocus: focusableOnFocus,
      onBlur: focusableOnBlur,
      type: "button"
    }), addPrefix(prefixIcon), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
      ellipsis: true,
      size: "medium",
      weight: isMadefor ? 'thin' : 'normal',
      skin: disabled ? 'disabled' : 'standard'
    }, children));
  });
};

ToggleButton.propTypes = {
  children: _propTypes["default"].node,
  prefixIcon: _propTypes["default"].node,
  value: _propTypes["default"].string,
  selected: _propTypes["default"].bool,
  disabled: _propTypes["default"].bool
};
ToggleButton.displayName = 'SegmentedToggle.Button';

var _default = (0, _FocusableHOC.withFocusable)(ToggleButton);

exports["default"] = _default;