choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
244 lines (199 loc) • 8.69 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _get3 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _mobxReact = require("mobx-react");
var _mobx = require("mobx");
require("react-quill/dist/quill.snow.css");
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _utils = require("../field/utils");
var _enum = require("../form/enum");
var _FormField2 = require("../field/FormField");
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _BaseEditor = _interopRequireDefault(require("./BaseEditor"));
var _RichTextViewer = _interopRequireDefault(require("./RichTextViewer"));
var _utils2 = require("./utils");
var _enum2 = require("./enum");
var defaultRichTextOptions = {
theme: 'snow'
};
var RichText = /*#__PURE__*/function (_FormField) {
(0, _inherits2["default"])(RichText, _FormField);
var _super = (0, _createSuper2["default"])(RichText);
function RichText() {
var _this;
(0, _classCallCheck2["default"])(this, RichText);
_this = _super.apply(this, arguments);
_this.toolbarId = (0, _utils2.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"])((0, _objectSpread2["default"])({}, defaultRichTextOptions), options);
}
}, {
key: "border",
get: function get() {
return this.props.border;
}
}, {
key: "showTooltip",
value: function showTooltip(e) {
if (this.showValidation === _enum.ShowValidation.tooltip) {
var message = this.getTooltipValidationMessage();
if (message) {
(0, _utils.showValidationMessage)(e, message, this.context.getTooltipTheme('validation'), this.context.getTooltipPlacement('validation'), this.getContextConfig);
return true;
}
}
return false;
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return (0, _get3["default"])((0, _getPrototypeOf2["default"])(RichText.prototype), "getOmitPropsKeys", this).call(this).concat(['defaultValue', 'value', 'border']);
}
}, {
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = (0, _get3["default"])((0, _getPrototypeOf2["default"])(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 = (0, _get3["default"])((0, _getPrototypeOf2["default"])(RichText.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, (_ref = {}, (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-border"), border), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-focused"), focused), _ref)].concat(args));
}
}, {
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, _get3["default"])((0, _getPrototypeOf2["default"])(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["default"] : _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["default"] : _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["default"].createElement("div", (0, _extends2["default"])({}, this.getWrapperProps(), {
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
}), /*#__PURE__*/_react["default"].createElement(_BaseEditor["default"], (0, _extends2["default"])({}, this.getOtherProps(), this.rtOptions, {
saveRef: this.getOtherProps().ref,
toolbarId: this.toolbarId,
value: (0, _mobx.toJS)(deltaOps),
dataSet: dataSet,
onBlur: this.handleRichTextBlur,
onFocus: this.handleRichTextFocus
})), this.renderFloatLabel());
}
}]);
return RichText;
}(_FormField2.FormField);
RichText.displayName = 'RichText';
RichText.RichTextViewer = _RichTextViewer["default"];
RichText.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _FormField2.FormField.defaultProps), {}, {
suffixCls: 'rich-text',
autoFocus: false,
mode: 'editor',
border: true,
toolbar: _enum2.RichTextToolbarType.normal
});
(0, _tslib.__decorate)([_mobx.observable], RichText.prototype, "focused", void 0);
(0, _tslib.__decorate)([_autobind["default"]], RichText.prototype, "handleChange", null);
(0, _tslib.__decorate)([_autobind["default"]], RichText.prototype, "elementReference", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], RichText.prototype, "handleRichTextBlur", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], RichText.prototype, "handleRichTextFocus", null);
RichText = (0, _tslib.__decorate)([_mobxReact.observer], RichText);
var _default = RichText;
exports["default"] = _default;
//# sourceMappingURL=RichText.js.map