slate-editor-icons/lib/helpers/videoModal.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 _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 _jsVideoUrlParser = require('js-video-url-parser');

var _jsVideoUrlParser2 = _interopRequireDefault(_jsVideoUrlParser);

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

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

var insertBlock = _slatePlugins.blocks.insertBlock;
var FormItem = _form2['default'].Item;

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

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

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

    _this.handleOk = _this.handleOk.bind(_this);
    _this.handleCancel = _this.handleCancel.bind(_this);
    return _this;
  }

  (0, _createClass3['default'])(VideoModal, [{
    key: 'checkSource',
    value: function () {
      function checkSource(rule, value, callback) {
        try {
          var videoObj = _jsVideoUrlParser2['default'].parse(value);

          if (videoObj && videoObj.provider === 'youtube' || videoObj.provider === 'dailymotion' || videoObj.provider === 'vimeo' || videoObj.provider === 'youku') {
            callback();
            return;
          }

          return callback('URL not support');
        } catch (e) {
          return callback('URL not support');
        }
      }

      return checkSource;
    }()
  }, {
    key: 'handleCancel',
    value: function () {
      function handleCancel() {
        this.props.form.resetFields();
        this.props.hideModal();
      }

      return handleCancel;
    }()
  }, {
    key: 'handleOk',
    value: function () {
      function handleOk(e) {
        e.preventDefault();
        var _props = this.props,
            onChange = _props.onChange,
            state = _props.state,
            hideModal = _props.hideModal,
            form = _props.form,
            initialValue = _props.initialValue,
            node = _props.node,
            width = _props.width,
            height = _props.height;


        form.validateFields(function (err, values) {
          if (!err) {
            var href = values.href;
            if (href) {
              var videoObj = _jsVideoUrlParser2['default'].parse(href);
              var slateObj = void 0;

              if (videoObj && videoObj.provider === 'youtube') {
                slateObj = { type: 'youtube', isVoid: true, data: { id: videoObj.id } };
              } else if (videoObj && videoObj.provider === 'dailymotion') {
                slateObj = { type: 'dailymotion', isVoid: true, data: { id: videoObj.id } };
              } else if (videoObj && videoObj.provider === 'vimeo') {
                slateObj = { type: 'vimeo', isVoid: true, data: { id: videoObj.id } };
              } else if (videoObj && videoObj.provider === 'youku') {
                slateObj = { type: 'youku', isVoid: true, data: { id: videoObj.id } };
              }

              if (width) {
                slateObj.data.width = width;
              }

              if (height) {
                slateObj.data.height = height;
              }

              if (initialValue) {
                // update link
                var newState = state.transform().insertBlock(slateObj).unsetSelection().removeNodeByKey(node.key).apply();
                onChange(newState);
              } else {
                onChange(insertBlock(state, slateObj));
              }
              form.resetFields();
            }

            hideModal();
          }
        });
      }

      return handleOk;
    }()
  }, {
    key: 'render',
    value: function () {
      function render() {
        var getFieldDecorator = this.props.form.getFieldDecorator;
        var _props2 = this.props,
            isShow = _props2.isShow,
            initialValue = _props2.initialValue;

        return _react2['default'].createElement(
          _modal2['default'],
          {
            visible: isShow,
            title: 'Add Video',
            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: 'Enter the video URL of the link (support Vimeo, Youtube, Dailymotion, Youku):',
                hasFeedback: true
              },
              getFieldDecorator('href', {
                rules: [{
                  type: 'url', message: 'The input is not valid url!'
                }, {
                  required: true, message: 'Please input your url'
                }, {
                  validator: this.checkSource
                }],
                initialValue: initialValue
              })(_react2['default'].createElement(_input2['default'], { onClick: function () {
                  function onClick(e) {
                    return e.preventDefault();
                  }

                  return onClick;
                }() }))
            )
          )
        );
      }

      return render;
    }()
  }]);
  return VideoModal;
}(_react.Component), _class2.propTypes = {
  state: _react.PropTypes.object.isRequired,
  onChange: _react.PropTypes.func.isRequired,
  hideModal: _react.PropTypes.func.isRequired,
  node: _react.PropTypes.object,
  form: _react.PropTypes.object,
  isShow: _react.PropTypes.bool,
  initialValue: _react.PropTypes.string,
  width: _react.PropTypes.number,
  height: _react.PropTypes.number
}, _temp)) || _class);
exports['default'] = VideoModal;
module.exports = exports['default'];