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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tslib = require("tslib");

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

require("react-quill/dist/quill.snow.css");

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _field = _interopRequireDefault(require("../field"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));

var _RichTextViewer = _interopRequireDefault(require("./RichTextViewer"));

var _utils = require("./utils");

var _enum = require("./enum");

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 = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var defaultRichTextOptions = {
  theme: 'snow'
};

var RichText =
/*#__PURE__*/
function (_ObserverFormField) {
  (0, _inherits2["default"])(RichText, _ObserverFormField);

  var _super = _createSuper(RichText);

  function RichText() {
    var _this;

    (0, _classCallCheck2["default"])(this, RichText);
    _this = _super.apply(this, arguments);
    _this.toolbarId = (0, _utils.randomWord)(false, 32, 64);
    _this.rtOptions = _this.getRichTextOptions();
    return _this;
  }

  (0, _createClass2["default"])(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 (0, _objectSpread2["default"])({}, defaultRichTextOptions, {}, options);
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      return (0, _omit["default"])((0, _get2["default"])((0, _getPrototypeOf2["default"])(RichText.prototype), "getOtherProps", this).call(this), ['defaultValue', 'value', 'disabled']);
    }
  }, {
    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 (!(0, _isEqual["default"])(options, this.props.options)) {
        this.rtOptions = this.getRichTextOptions(options);
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(RichText.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var _this$props = this.props,
          defaultValue = _this$props.defaultValue,
          dataSet = _this$props.dataSet;
      this.rtOptions.readOnly = this.isDisabled() ? true : this.isReadOnly();
      var deltaOps = this.getValue() || defaultValue;
      return _react["default"].createElement("div", (0, _extends2["default"])({}, this.getWrapperProps()), _react["default"].createElement(_BaseEditor["default"], (0, _extends2["default"])({}, this.getOtherProps(), this.rtOptions, {
        toolbarId: this.toolbarId,
        value: (0, _mobx.toJS)(deltaOps),
        dataSet: dataSet
      })), this.renderFloatLabel());
    }
  }]);
  return RichText;
}(_field["default"]);

RichText.displayName = 'RichText';
RichText.RichTextViewer = _RichTextViewer["default"];
RichText.propTypes = (0, _objectSpread2["default"])({
  options: _propTypes["default"].object,
  mode: _propTypes["default"].oneOf([_enum.RichTextMode.editor, _enum.RichTextMode.preview]),
  toolbar: _propTypes["default"].oneOfType([_propTypes["default"].oneOf([_enum.RichTextToolbarType.none, _enum.RichTextToolbarType.normal]), _propTypes["default"].func])
}, _field["default"].propTypes);
RichText.defaultProps = (0, _objectSpread2["default"])({}, _field["default"].defaultProps, {
  suffixCls: 'rich-text',
  autoFocus: false,
  mode: 'editor',
  toolbar: _enum.RichTextToolbarType.normal
});
(0, _tslib.__decorate)([_autobind["default"]], RichText.prototype, "handleChange", null);
RichText = (0, _tslib.__decorate)([_mobxReact.observer], RichText);
var _default = RichText;
exports["default"] = _default;
//# sourceMappingURL=RichText.js.map