"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RawMarkButton = exports.RawButton = exports.MarkButton = exports.Button = void 0;

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

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

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

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

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

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

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

var _react = _interopRequireDefault(require("react"));

var _debug = _interopRequireDefault(require("debug"));

var _styles = require("@material-ui/core/styles");

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var styles = function styles(theme) {
  return {
    button: {
      color: 'grey',
      display: 'inline-flex',
      padding: '2px',
      background: 'none',
      border: 'none',
      cursor: 'pointer',
      '&:hover': {
        color: 'black'
      },
      '&:focus': {
        outline: "2px solid ".concat(theme.palette.grey[700])
      }
    },
    active: {
      color: 'black'
    },
    disabled: {
      opacity: 0.7,
      cursor: 'not-allowed',
      '& :hover': {
        color: 'grey'
      }
    }
  };
};

var log = (0, _debug["default"])('pie-elements:editable-html:raw-button');

var RawButton = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(RawButton, _React$Component);

  var _super = _createSuper(RawButton);

  function RawButton(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, RawButton);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (e) {
      log('[onClick]');
      e.preventDefault();
      var onClick = _this.props.onClick;
      onClick(e);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onKeyDown", function (e) {
      if (e.key === 'Enter' || e.key === ' ') {
        log('[onKeyDown]');
        e.preventDefault();
        var onClick = _this.props.onClick;
        onClick(e);
      }
    });
    return _this;
  }

  (0, _createClass2["default"])(RawButton, [{
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props = this.props,
          active = _this$props.active,
          classes = _this$props.classes,
          children = _this$props.children,
          disabled = _this$props.disabled,
          extraStyles = _this$props.extraStyles,
          ariaLabel = _this$props.ariaLabel;
      var names = (0, _classnames["default"])(classes.button, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.active, active), (0, _defineProperty2["default"])(_classNames, classes.disabled, disabled), _classNames));
      return /*#__PURE__*/_react["default"].createElement("button", {
        style: extraStyles,
        className: names,
        onMouseDown: this.onClick,
        onKeyDown: this.onKeyDown,
        disabled: disabled,
        "aria-label": ariaLabel,
        "aria-pressed": active,
        tabIndex: 0
      }, children);
    }
  }]);
  return RawButton;
}(_react["default"].Component);

exports.RawButton = RawButton;
(0, _defineProperty2["default"])(RawButton, "propTypes", {
  onClick: _propTypes["default"].func.isRequired,
  classes: _propTypes["default"].object.isRequired,
  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
  active: _propTypes["default"].bool,
  disabled: _propTypes["default"].bool,
  extraStyles: _propTypes["default"].object
});
var Button = (0, _styles.withStyles)(styles)(RawButton);
exports.Button = Button;

var RawMarkButton = /*#__PURE__*/function (_React$Component2) {
  (0, _inherits2["default"])(RawMarkButton, _React$Component2);

  var _super2 = _createSuper(RawMarkButton);

  function RawMarkButton(props) {
    var _this2;

    (0, _classCallCheck2["default"])(this, RawMarkButton);
    _this2 = _super2.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onToggle", function (e) {
      e.preventDefault();

      _this2.props.onToggle(_this2.props.mark);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onKeyDown", function (e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();

        _this2.props.onToggle(_this2.props.mark);
      }
    });
    return _this2;
  }

  (0, _createClass2["default"])(RawMarkButton, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          classes = _this$props2.classes,
          children = _this$props2.children,
          active = _this$props2.active,
          label = _this$props2.label;
      var names = (0, _classnames["default"])(classes.button, active && classes.active);
      return /*#__PURE__*/_react["default"].createElement("button", {
        className: names,
        onMouseDown: this.onToggle,
        "aria-pressed": active,
        onKeyDown: this.onKeyDown,
        "aria-label": label,
        tabIndex: 0
      }, children);
    }
  }]);
  return RawMarkButton;
}(_react["default"].Component);

exports.RawMarkButton = RawMarkButton;
(0, _defineProperty2["default"])(RawMarkButton, "propTypes", {
  onToggle: _propTypes["default"].func.isRequired,
  mark: _propTypes["default"].string,
  label: _propTypes["default"].string.isRequired,
  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
  classes: _propTypes["default"].object.isRequired,
  active: _propTypes["default"].bool
});
var MarkButton = (0, _styles.withStyles)(styles)(RawMarkButton);
exports.MarkButton = MarkButton;
//# sourceMappingURL=toolbar-buttons.js.map