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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "prefixIcon", "selected", "dataHook", "focusableOnFocus", "focusableOnBlur", "disabled", "className"];
import React from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from "wix-ui-core/dist/es/src/hocs/Focusable/FocusableHOC";
import { FontUpgradeContext } from '../../FontUpgrade/context';
import { st, classes } from './ToggleButton.st.css';
import Text from '../../Text';

var addPrefix = function addPrefix(icon) {
  return icon && /*#__PURE__*/React.cloneElement(icon, {
    width: '24',
    height: '24',
    className: 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 = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement(FontUpgradeContext.Consumer, null, function (_ref2) {
    var isMadefor = _ref2.active;
    return /*#__PURE__*/React.createElement("button", _extends({}, rest, {
      className: st(classes.root, {
        selected: selected
      }, className),
      "data-hook": dataHook,
      "data-selected": selected,
      disabled: disabled,
      onFocus: focusableOnFocus,
      onBlur: focusableOnBlur,
      type: "button"
    }), addPrefix(prefixIcon), /*#__PURE__*/React.createElement(Text, {
      ellipsis: true,
      size: "medium",
      weight: isMadefor ? 'thin' : 'normal',
      skin: disabled ? 'disabled' : 'standard'
    }, children));
  });
};

ToggleButton.propTypes = {
  children: PropTypes.node,
  prefixIcon: PropTypes.node,
  value: PropTypes.string,
  selected: PropTypes.bool,
  disabled: PropTypes.bool
};
ToggleButton.displayName = 'SegmentedToggle.Button';
export default withFocusable(ToggleButton);