choerodon-ui/pro/es/rich-text/RichText.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import 'react-quill/dist/quill.snow.css';
import isEqual from 'lodash/isEqual';
import noop from 'lodash/noop';
import { FormField } from '../field/FormField';
import autobind from '../_util/autobind';
import BaseEditor from './BaseEditor';
import RichTextViewer from './RichTextViewer';
import { randomWord } from './utils';
import { RichTextMode, RichTextToolbarType } from './enum';
var defaultRichTextOptions = {
  theme: 'snow'
};

var RichText =
/*#__PURE__*/
function (_FormField) {
  _inherits(RichText, _FormField);

  var _super = _createSuper(RichText);

  function RichText() {
    var _this;

    _classCallCheck(this, RichText);

    _this = _super.apply(this, arguments);
    _this.toolbarId = randomWord(false, 32, 64);
    _this.rtOptions = _this.getRichTextOptions();
    return _this;
  }

  _createClass(RichText, [{
    key: "getRichTextOptions",
    value: function getRichTextOptions() {
      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.options;

      if (options) {
        if (options.modules && options.modules.imageDropAndPaste !== false) {
          options.modules.imageDropAndPaste = true;
        }
      } else {
        options = {
          modules: {
            toolbar: {
              container: "#".concat(this.toolbarId)
            },
            imageDropAndPaste: true
          }
        };
      }

      return _objectSpread({}, defaultRichTextOptions, {}, options);
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(RichText.prototype), "getOmitPropsKeys", this).call(this).concat(['defaultValue', 'value']);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = _get(_getPrototypeOf(RichText.prototype), "getOtherProps", this).call(this);

      delete otherProps.disabled;
      return otherProps;
    }
  }, {
    key: "handleChange",
    value: function handleChange(value) {
      this.setValue(value);
    } // 禁用与只读表现一致
    // @autobind
    // setDisabled(disabled) {
    //   if(this.element && this.element.editor) {
    //     this.element.editor.getEditor().enable(!disabled);
    //   }
    // }

  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      var options = nextProps.options;

      if (!isEqual(options, this.props.options)) {
        this.rtOptions = this.getRichTextOptions(options);
      }

      _get(_getPrototypeOf(RichText.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);
    }
  }, {
    key: "handleRichTextBlur",
    value: function handleRichTextBlur(props) {
      var _this$props$onBlur = this.props.onBlur,
          onBlur = _this$props$onBlur === void 0 ? noop : _this$props$onBlur;
      onBlur(props);
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var _this$props = this.props,
          defaultValue = _this$props.defaultValue,
          dataSet = _this$props.dataSet;
      this.rtOptions.readOnly = this.disabled || this.readOnly;
      var deltaOps = this.getValue() || defaultValue;
      return React.createElement("div", _extends({}, this.getWrapperProps()), React.createElement(BaseEditor, _extends({}, this.getOtherProps(), this.rtOptions, {
        toolbarId: this.toolbarId,
        value: toJS(deltaOps),
        dataSet: dataSet,
        onBlur: this.handleRichTextBlur
      })), this.renderFloatLabel());
    }
  }]);

  return RichText;
}(FormField);

RichText.displayName = 'RichText';
RichText.RichTextViewer = RichTextViewer;
RichText.propTypes = _objectSpread({
  options: PropTypes.object,
  mode: PropTypes.oneOf([RichTextMode.editor, RichTextMode.preview]),
  toolbar: PropTypes.oneOfType([PropTypes.oneOf([RichTextToolbarType.none, RichTextToolbarType.normal]), PropTypes.func])
}, FormField.propTypes);
RichText.defaultProps = _objectSpread({}, FormField.defaultProps, {
  suffixCls: 'rich-text',
  autoFocus: false,
  mode: 'editor',
  toolbar: RichTextToolbarType.normal
});

__decorate([autobind], RichText.prototype, "handleChange", null);

__decorate([autobind], RichText.prototype, "handleRichTextBlur", null);

RichText = __decorate([observer], RichText);
export default RichText;
//# sourceMappingURL=RichText.js.map