slate-editor-icons/lib/items/inlines/link.js

icons for slate editors

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

var _css = require('antd/lib/modal/style/css');

var _modal = require('antd/lib/modal');

var _modal2 = _interopRequireDefault(_modal);

var _css2 = require('antd/lib/input/style/css');

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

var _css3 = require('antd/lib/button/style/css');

var _button = require('antd/lib/button');

var _button2 = _interopRequireDefault(_button);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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 _css4 = require('antd/lib/form/style/css');

var _form = require('antd/lib/form');

var _form2 = _interopRequireDefault(_form);

var _dec, _class, _class2, _temp; /* eslint-disable max-len */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _toolbarIcon = require('../toolbarIcon');

var _toolbarIcon2 = _interopRequireDefault(_toolbarIcon);

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

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

var links = _slatePlugins.inlines.links;
var haveInlines = _slatePlugins.utils.have.haveInlines;

var FormItem = _form2['default'].Item;

var Link = (_dec = _form2['default'].create(), _dec(_class = (_temp = _class2 = function (_Component) {
  (0, _inherits3['default'])(Link, _Component);

  function Link(props) {
    (0, _classCallCheck3['default'])(this, Link);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (Link.__proto__ || (0, _getPrototypeOf2['default'])(Link)).call(this, props));

    _this.displayName = _this.props.type || 'link';

    _this.onClick = _this.onClick.bind(_this);
    _this.handleCancel = _this.handleCancel.bind(_this);
    _this.handleOk = _this.handleOk.bind(_this);

    _this.state = {
      showModal: false,
      addLinkText: false
    };
    return _this;
  }

  (0, _createClass3['default'])(Link, [{
    key: 'onClick',
    value: function () {
      function onClick(e) {
        var _props = this.props,
            state = _props.state,
            onChange = _props.onChange;

        var haveLinks = haveInlines(state, this.displayName);
        e.preventDefault();

        if (haveLinks) {
          onChange(links(state, this.displayName));
        } else if (state.isExpanded) {
          // prompt for ask url
          this.setState({
            showModal: true,
            addLinkText: false
          });
        } else {
          // prompt for url and text
          this.setState({
            showModal: true,
            addLinkText: true
          });
        }
      }

      return onClick;
    }()
  }, {
    key: 'handleCancel',
    value: function () {
      function handleCancel() {
        this.props.form.resetFields();
        this.setState({
          showModal: false,
          addLinkText: false
        });
      }

      return handleCancel;
    }()
  }, {
    key: 'handleOk',
    value: function () {
      function handleOk(e) {
        var _this2 = this;

        e.preventDefault();
        var _props2 = this.props,
            onChange = _props2.onChange,
            state = _props2.state;

        var that = this;

        this.props.form.validateFields(function (err, values) {
          if (!err) {
            var href = values.href;
            var text = values.text;
            if (href && text) {
              onChange(links(state, _this2.displayName, { href: href, text: text }));
            } else if (href) {
              onChange(links(state, _this2.displayName, { href: href }));
            }

            that.handleCancel();
          }
        });
      }

      return handleOk;
    }()
  }, {
    key: 'render',
    value: function () {
      function render() {
        var _this3 = this;

        var getFieldDecorator = this.props.form.getFieldDecorator;
        var _props3 = this.props,
            state = _props3.state,
            icon = _props3.icon,
            rest = (0, _objectWithoutProperties3['default'])(_props3, ['state', 'icon']);
        var _state = this.state,
            addLinkText = _state.addLinkText,
            showModal = _state.showModal;

        var onClick = function () {
          function onClick(e) {
            return _this3.onClick(e);
          }

          return onClick;
        }();

        return _react2['default'].createElement(
          'div',
          { style: { display: 'inline-block' } },
          _react2['default'].createElement(_toolbarIcon2['default'], (0, _extends3['default'])({
            type: this.displayName,
            icon: icon || 'Link',
            onClick: onClick,
            isActive: haveInlines(state, this.displayName)
          }, rest)),
          _react2['default'].createElement(
            _modal2['default'],
            {
              visible: showModal,
              title: 'Add Link',
              onCancel: this.handleCancel,
              footer: [_react2['default'].createElement(
                _button2['default'],
                { key: 'back', type: 'ghost', size: 'large', onClick: this.handleCancel },
                'Cancel'
              ), _react2['default'].createElement(
                _button2['default'],
                { key: 'submit', type: 'primary', size: 'large', onClick: this.handleOk },
                'Ok'
              )]
            },
            _react2['default'].createElement(
              _form2['default'],
              { horizontal: true },
              _react2['default'].createElement(
                FormItem,
                {
                  label: 'Url',
                  hasFeedback: true
                },
                getFieldDecorator('href', {
                  rules: [{
                    type: 'url', message: 'The input is not valid url!'
                  }, {
                    required: true, message: 'Please input your url'
                  }]
                })(_react2['default'].createElement(_input2['default'], { onClick: function () {
                    function onClick(e) {
                      return e.preventDefault();
                    }

                    return onClick;
                  }() }))
              ),
              addLinkText ? _react2['default'].createElement(
                FormItem,
                {
                  label: 'Text',
                  hasFeedback: true
                },
                getFieldDecorator('text')(_react2['default'].createElement(_input2['default'], { onClick: function () {
                    function onClick(e) {
                      return e.preventDefault();
                    }

                    return onClick;
                  }() }))
              ) : null
            )
          )
        );
      }

      return render;
    }()
  }]);
  return Link;
}(_react.Component), _class2.propTypes = {
  state: _react.PropTypes.object.isRequired,
  onChange: _react.PropTypes.func.isRequired,
  icon: _react.PropTypes.string,
  type: _react.PropTypes.string,
  form: _react.PropTypes.object
}, _temp)) || _class);
exports['default'] = Link;
module.exports = exports['default'];