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 _defineProperty from "@babel/runtime/helpers/defineProperty";
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 _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import { action, observable, toJS } from 'mobx';
import 'react-quill/dist/quill.snow.css';
import isEqual from 'lodash/isEqual';
import noop from 'lodash/noop';
import { showValidationMessage } from '../field/utils';
import { ShowValidation } from '../form/enum';
import { FormField } from '../field/FormField';
import autobind from '../_util/autobind';
import BaseEditor from './BaseEditor';
import RichTextViewer from './RichTextViewer';
import { randomWord } from './utils';
import { 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(_objectSpread({}, defaultRichTextOptions), options);
    }
  }, {
    key: "border",
    get: function get() {
      return this.props.border;
    }
  }, {
    key: "showTooltip",
    value: function showTooltip(e) {
      if (this.showValidation === ShowValidation.tooltip) {
        var message = this.getTooltipValidationMessage();

        if (message) {
          showValidationMessage(e, message, this.context.getTooltipTheme('validation'), this.context.getTooltipPlacement('validation'), this.getContextConfig);
          return true;
        }
      }

      return false;
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(RichText.prototype), "getOmitPropsKeys", this).call(this).concat(['defaultValue', 'value', 'border']);
    }
  }, {
    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) {
      if (value && Number(value.length) === 1 && value[0].insert === '\n') {
        this.setValue(null);
      } else {
        this.setValue(value);
      }
    } // 禁用与只读表现一致
    // @autobind
    // setDisabled(disabled) {
    //   if(this.element && this.element.editor) {
    //     this.element.editor.getEditor().enable(!disabled);
    //   }
    // }

  }, {
    key: "elementReference",
    value: function elementReference(node) {
      if (node && node.editor) {
        this.element = node.editor;
      }
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var _get2, _ref;

      var prefixCls = this.prefixCls,
          border = this.border,
          focused = this.focused;

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      return (_get2 = _get(_getPrototypeOf(RichText.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, (_ref = {}, _defineProperty(_ref, "".concat(prefixCls, "-border"), border), _defineProperty(_ref, "".concat(prefixCls, "-focused"), focused), _ref)].concat(args));
    }
  }, {
    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 = this.props,
          _this$props$onBlur = _this$props.onBlur,
          onBlur = _this$props$onBlur === void 0 ? noop : _this$props$onBlur,
          defaultValue = _this$props.defaultValue;
      this.focused = false;
      onBlur(props);
      var deltaOps = this.getValue() || defaultValue || [];

      if (props.length === 0 && props.index === 0 && deltaOps.length === 0) {
        this.setValue(null);
      }
    }
  }, {
    key: "handleRichTextFocus",
    value: function handleRichTextFocus(props) {
      var _this$props$onFocus = this.props.onFocus,
          onFocus = _this$props$onFocus === void 0 ? noop : _this$props$onFocus;
      if (!this.disabled) this.focused = true;
      onFocus(props);
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var _this$props2 = this.props,
          defaultValue = _this$props2.defaultValue,
          dataSet = _this$props2.dataSet;
      this.rtOptions.readOnly = this.disabled || this.readOnly;
      var deltaOps = this.getValue() || defaultValue;
      return /*#__PURE__*/React.createElement("div", _extends({}, this.getWrapperProps(), {
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave
      }), /*#__PURE__*/React.createElement(BaseEditor, _extends({}, this.getOtherProps(), this.rtOptions, {
        saveRef: this.getOtherProps().ref,
        toolbarId: this.toolbarId,
        value: toJS(deltaOps),
        dataSet: dataSet,
        onBlur: this.handleRichTextBlur,
        onFocus: this.handleRichTextFocus
      })), this.renderFloatLabel());
    }
  }]);

  return RichText;
}(FormField);

RichText.displayName = 'RichText';
RichText.RichTextViewer = RichTextViewer;
RichText.defaultProps = _objectSpread(_objectSpread({}, FormField.defaultProps), {}, {
  suffixCls: 'rich-text',
  autoFocus: false,
  mode: 'editor',
  border: true,
  toolbar: RichTextToolbarType.normal
});

__decorate([observable], RichText.prototype, "focused", void 0);

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

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

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

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

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