slate-editor-icons/lib/items/toolbarIcon.js

icons for slate editors

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports['default'] = undefined;

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _slatePlugins = require('slate-plugins');

var _quillIcons = require('quill-icons');

var _quillIcons2 = _interopRequireDefault(_quillIcons);

var _lodash = require('lodash');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var preventDefault = _slatePlugins.utils.defaultFunc.preventDefault;
var ToolbarIcon = (_temp = _class = function (_Component) {
  (0, _inherits3['default'])(ToolbarIcon, _Component);

  function ToolbarIcon() {
    (0, _classCallCheck3['default'])(this, ToolbarIcon);
    return (0, _possibleConstructorReturn3['default'])(this, (ToolbarIcon.__proto__ || (0, _getPrototypeOf2['default'])(ToolbarIcon)).apply(this, arguments));
  }

  (0, _createClass3['default'])(ToolbarIcon, [{
    key: 'render',
    value: function () {
      function render() {
        var _props = this.props,
            type = _props.type,
            icon = _props.icon,
            onClick = _props.onClick,
            isActive = _props.isActive,
            activeClassName = _props.activeClassName,
            activeStrokeClassName = _props.activeStrokeClassName,
            activeFillClassName = _props.activeFillClassName,
            activeEvenClassName = _props.activeEvenClassName,
            activeTransparentClassName = _props.activeTransparentClassName,
            activeStrokeMitterClassName = _props.activeStrokeMitterClassName,
            activeColorLabelClassName = _props.activeColorLabelClassName,
            activeThinClassName = _props.activeThinClassName,
            strokeClassName = _props.strokeClassName,
            fillClassName = _props.fillClassName,
            evenClassName = _props.evenClassName,
            transparentClassName = _props.transparentClassName,
            strokeMitterClassName = _props.strokeMitterClassName,
            colorLabelClassName = _props.colorLabelClassName,
            thinClassName = _props.thinClassName,
            className = _props.className,
            colorStyle = _props.colorStyle,
            state = _props.state,
            rest = (0, _objectWithoutProperties3['default'])(_props, ['type', 'icon', 'onClick', 'isActive', 'activeClassName', 'activeStrokeClassName', 'activeFillClassName', 'activeEvenClassName', 'activeTransparentClassName', 'activeStrokeMitterClassName', 'activeColorLabelClassName', 'activeThinClassName', 'strokeClassName', 'fillClassName', 'evenClassName', 'transparentClassName', 'strokeMitterClassName', 'colorLabelClassName', 'thinClassName', 'className', 'colorStyle', 'state']);

        /* eslint-disable max-len */

        var iconClassName = isActive ? activeClassName : className;
        var iconStrokeClassName = isActive ? activeStrokeClassName : strokeClassName;
        var iconStrokeMitterClassName = isActive ? activeStrokeMitterClassName : strokeMitterClassName;
        var iconFillClassName = isActive ? activeFillClassName : fillClassName;
        var iconEvenClassName = isActive ? activeEvenClassName : evenClassName;
        var iconColorLabelClassName = isActive ? activeColorLabelClassName : colorLabelClassName;
        var iconTransparentClassName = isActive ? activeTransparentClassName : transparentClassName;
        var iconThinClassName = isActive ? activeThinClassName : thinClassName;
        /* exlint-enable */

        var fontElement = _react2['default'].createElement(_quillIcons2['default'][icon], _lodash.assign.apply(undefined, (0, _toConsumableArray3['default'])(rest).concat([{
          colorStyle: colorStyle,
          className: iconClassName,
          strokeClassName: iconStrokeClassName,
          strokeMitterClassName: iconStrokeMitterClassName,
          fillClassName: iconFillClassName,
          evenClassName: iconEvenClassName,
          colorLabelClassName: iconColorLabelClassName,
          transparentClassName: iconTransparentClassName,
          thinClassName: iconThinClassName
        }])));

        return _react2['default'].createElement(
          'span',
          {
            key: type,
            onClick: onClick,
            onMouseDown: preventDefault,
            'data-active': isActive || false },
          fontElement
        );
      }

      return render;
    }()
  }]);
  return ToolbarIcon;
}(_react.Component), _class.propTypes = {
  className: _react.PropTypes.string,
  strokeClassName: _react.PropTypes.string,
  fillClassName: _react.PropTypes.string,
  evenClassName: _react.PropTypes.string,
  transparentClassName: _react.PropTypes.string,
  strokeMitterClassName: _react.PropTypes.string,
  colorLabelClassName: _react.PropTypes.string,
  thinClassName: _react.PropTypes.string,
  activeClassName: _react.PropTypes.string,
  activeStrokeClassName: _react.PropTypes.string,
  activeFillClassName: _react.PropTypes.string,
  activeEvenClassName: _react.PropTypes.string,
  activeTransparentClassName: _react.PropTypes.string,
  activeStrokeMitterClassName: _react.PropTypes.string,
  activeColorLabelClassName: _react.PropTypes.string,
  activeThinClassName: _react.PropTypes.string,
  colorStyle: _react.PropTypes.object,
  type: _react.PropTypes.string,
  icon: _react.PropTypes.string.isRequired,
  onClick: _react.PropTypes.func,
  isActive: _react.PropTypes.bool,
  state: _react.PropTypes.object
}, _temp);
exports['default'] = ToolbarIcon;
module.exports = exports['default'];