antui-admin/lib/components/editor/editor.js

admin ui for antd

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _default = require('./default.config');

var _default2 = _interopRequireDefault(_default);

var _QuillMixin = require('./QuillMixin');

var _QuillMixin2 = _interopRequireDefault(_QuillMixin);

require('quill/dist/quill.snow.css');

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

var Editor = function (_Component) {
  (0, _inherits3.default)(Editor, _Component);

  function Editor(props) {
    (0, _classCallCheck3.default)(this, Editor);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Editor.__proto__ || (0, _getPrototypeOf2.default)(Editor)).call(this, props));

    _this.state = {
      generation: 0,
      value: _this.isControlled(props) ? props.value : props.defaultValue
    };
    return _this;
  }

  (0, _createClass3.default)(Editor, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps, nextState) {
      var quill = this.quill;
      if (!quill) return;

      if (this.isControlled(nextProps)) {
        if (nextProps.value !== this.getEditorContents()) {
          _QuillMixin2.default.setEditorContents(quill, nextProps.value);
        }
      }

      if ('readOnly' in nextProps) {
        if (nextProps.readOnly !== this.props.readOnly) {
          _QuillMixin2.default.setEditorReadOnly(quill, nextProps.readOnly);
        }
      }
    }
  }, {
    key: 'isControlled',
    value: function isControlled(props) {
      return 'value' in props;
    }
  }, {
    key: 'getEditorContents',
    value: function getEditorContents() {
      return this.state.value;
    }
  }, {
    key: 'getEditorSelection',
    value: function getEditorSelection() {
      return this.state.selection;
    }
  }, {
    key: 'getEditingArea',
    value: function getEditingArea() {
      return this.refs["editor"].querySelector('.' + this.props.prefixCls + '-container');
    }
  }, {
    key: 'getEditorConfig',
    value: function getEditorConfig() {
      return (0, _objectAssign2.default)({}, (0, _default2.default)(this.quill, this.refs["editor"]), this.props.quillConfig);
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.quill = _QuillMixin2.default.createEditor(this.getEditingArea(), this.getEditorConfig(), this);

      if (this.quillDelta) {
        this.quill.setContents(this.quillDelta);
        this.quill.setSelection(this.quillSelection);
        this.quill.focus();
        this.quillDelta = this.quillSelection = null;
        return;
      }
      if (this.state.value) {
        _QuillMixin2.default.setEditorContents(this.quill, this.state.value);
        return;
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      _QuillMixin2.default.unhookEditor(this.quill);
      this.quill = null;
    }
  }, {
    key: 'onEditorChangeText',
    value: function onEditorChangeText(value, delta, source, editor) {
      if (value !== this.getEditorContents()) {
        this.setState({ value: value });
        if (this.props.onChange) {
          this.props.onChange(value, delta, source, editor);
        }
      }
    }
  }, {
    key: 'onEditorChangeSelection',
    value: function onEditorChangeSelection(range, source, editor) {
      var s = this.getEditorSelection() || {};
      var r = range || {};
      if (r.length !== s.length || r.index !== s.index) {
        this.setState({ selection: range });
        if (this.props.onChangeSelection) {
          this.props.onChangeSelection(range, source, editor);
        }
      }
    }
  }, {
    key: 'focus',
    value: function focus() {
      this.quill.focus();
    }
  }, {
    key: 'blur',
    value: function blur() {
      _QuillMixin2.default.setEditorSelection(this.quill, null);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          prefixCls = _props.prefixCls,
          className = _props.className;

      var classes = (0, _classnames2.default)(prefixCls, className);

      return _react2.default.createElement(
        'div',
        { ref: 'editor', className: classes },
        _react2.default.createElement('div', { className: prefixCls + '-container' })
      );
    }
  }]);
  return Editor;
}(_react.Component);

Editor.propTypes = {
  prefixCls: _react.PropTypes.string,
  className: _react.PropTypes.string,
  value: _react.PropTypes.string,
  defaultValue: _react.PropTypes.string,
  readOnly: _react.PropTypes.bool,
  quillConfig: _react.PropTypes.object,
  onChange: _react.PropTypes.func,
  onChangeSelection: _react.PropTypes.func
};
Editor.defaultProps = {
  prefixCls: "fest-editor",
  quillConfig: {
    theme: 'snow'
  }
};
exports.default = Editor;
module.exports = exports['default'];