262 lines
8.5 KiB
JavaScript
262 lines
8.5 KiB
JavaScript
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
|
|
|
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
|
|
|
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 _propTypes = require('prop-types');
|
|
|
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
|
|
var _classnames2 = require('classnames');
|
|
|
|
var _classnames3 = _interopRequireDefault(_classnames2);
|
|
|
|
var _rcEditorCore = require('rc-editor-core');
|
|
|
|
var _draftJs = require('draft-js');
|
|
|
|
var _createMention = require('../utils/createMention');
|
|
|
|
var _createMention2 = _interopRequireDefault(_createMention);
|
|
|
|
var _exportContent = require('../utils/exportContent');
|
|
|
|
var _exportContent2 = _interopRequireDefault(_exportContent);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
var Mention = function (_React$Component) {
|
|
(0, _inherits3['default'])(Mention, _React$Component);
|
|
|
|
function Mention(props) {
|
|
(0, _classCallCheck3['default'])(this, Mention);
|
|
|
|
var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props));
|
|
|
|
_this.onEditorChange = function (editorState) {
|
|
var selection = editorState.getSelection();
|
|
_this._decorator = editorState.getDecorator();
|
|
var content = editorState.getCurrentContent();
|
|
|
|
if (_this.props.onChange) {
|
|
_this.setState({
|
|
selection: selection
|
|
}, function () {
|
|
_this.props.onChange(content, (0, _exportContent2['default'])(content));
|
|
});
|
|
} else {
|
|
_this.setState({
|
|
editorState: editorState,
|
|
selection: selection
|
|
});
|
|
}
|
|
};
|
|
|
|
_this.onFocus = function (e) {
|
|
if (_this.props.onFocus) {
|
|
_this.props.onFocus(e);
|
|
}
|
|
};
|
|
|
|
_this.onBlur = function (e) {
|
|
if (_this.props.onBlur) {
|
|
_this.props.onBlur(e);
|
|
}
|
|
};
|
|
|
|
_this.onKeyDown = function (e) {
|
|
if (_this.props.onKeyDown) {
|
|
_this.props.onKeyDown(e);
|
|
}
|
|
};
|
|
|
|
_this.reset = function () {
|
|
/*eslint-disable*/
|
|
_this._editor.Reset();
|
|
/*eslint-enable*/
|
|
};
|
|
|
|
_this.mention = (0, _createMention2['default'])({
|
|
prefix: _this.getPrefix(props),
|
|
tag: props.tag,
|
|
mode: props.mode,
|
|
mentionStyle: props.mentionStyle
|
|
});
|
|
|
|
_this.Suggestions = _this.mention.Suggestions;
|
|
_this.plugins = [_this.mention];
|
|
|
|
_this.state = {
|
|
suggestions: props.suggestions,
|
|
value: props.value && _draftJs.EditorState.createWithContent(props.value, new _draftJs.CompositeDecorator(_this.mention.decorators)),
|
|
selection: _draftJs.SelectionState.createEmpty()
|
|
};
|
|
|
|
if (typeof props.defaultValue === 'string') {
|
|
// eslint-disable-next-line
|
|
console.warn('The property `defaultValue` now allow `EditorState` only, see http://react-component.github.io/editor-mention/examples/defaultValue.html ');
|
|
}
|
|
if (props.value !== undefined) {
|
|
_this.controlledMode = true;
|
|
}
|
|
return _this;
|
|
}
|
|
|
|
Mention.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
|
var suggestions = nextProps.suggestions;
|
|
var selection = this.state.selection;
|
|
|
|
var value = nextProps.value;
|
|
if (value && selection) {
|
|
value = _draftJs.EditorState.acceptSelection(_draftJs.EditorState.createWithContent(value, this._decorator), selection);
|
|
}
|
|
this.setState({
|
|
suggestions: suggestions,
|
|
value: value
|
|
});
|
|
};
|
|
|
|
Mention.prototype.getPrefix = function getPrefix() {
|
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
|
|
|
|
return Array.isArray(props.prefix) ? props.prefix : [props.prefix];
|
|
};
|
|
|
|
Mention.prototype.render = function render() {
|
|
var _classnames,
|
|
_this2 = this;
|
|
|
|
var _props = this.props,
|
|
prefixCls = _props.prefixCls,
|
|
style = _props.style,
|
|
tag = _props.tag,
|
|
multiLines = _props.multiLines,
|
|
editorKey = _props.editorKey,
|
|
suggestionStyle = _props.suggestionStyle,
|
|
placeholder = _props.placeholder,
|
|
defaultValue = _props.defaultValue,
|
|
className = _props.className,
|
|
notFoundContent = _props.notFoundContent,
|
|
getSuggestionContainer = _props.getSuggestionContainer,
|
|
readOnly = _props.readOnly,
|
|
disabled = _props.disabled,
|
|
placement = _props.placement,
|
|
mode = _props.mode;
|
|
var suggestions = this.state.suggestions;
|
|
var Suggestions = this.Suggestions;
|
|
|
|
var editorClass = (0, _classnames3['default'])(className, (_classnames = {}, _classnames[prefixCls + '-wrapper'] = true, _classnames.readonly = readOnly, _classnames.disabled = disabled, _classnames.multilines = multiLines, _classnames));
|
|
var editorProps = this.controlledMode ? { value: this.state.value } : {};
|
|
var defaultValueState = defaultValue && _draftJs.EditorState.createWithContent(typeof defaultValue === 'string' ? _draftJs.ContentState.createFromText(defaultValue) : defaultValue, this._decorator);
|
|
return _react2['default'].createElement(
|
|
'div',
|
|
{ className: editorClass, style: style, ref: function ref(wrapper) {
|
|
return _this2._wrapper = wrapper;
|
|
} },
|
|
_react2['default'].createElement(
|
|
_rcEditorCore.EditorCore,
|
|
(0, _extends3['default'])({
|
|
ref: function ref(editor) {
|
|
return _this2._editor = editor;
|
|
},
|
|
prefixCls: prefixCls,
|
|
style: style,
|
|
multiLines: multiLines,
|
|
editorKey: editorKey,
|
|
plugins: this.plugins,
|
|
defaultValue: defaultValueState,
|
|
placeholder: placeholder,
|
|
onFocus: this.onFocus,
|
|
onBlur: this.onBlur,
|
|
onKeyDown: this.onKeyDown,
|
|
onChange: this.onEditorChange
|
|
}, editorProps, {
|
|
readOnly: readOnly || disabled
|
|
}),
|
|
_react2['default'].createElement(Suggestions, {
|
|
mode: tag ? 'immutable' : mode,
|
|
prefix: this.getPrefix(),
|
|
prefixCls: prefixCls,
|
|
style: suggestionStyle,
|
|
placement: placement,
|
|
notFoundContent: notFoundContent,
|
|
suggestions: suggestions,
|
|
getSuggestionContainer: getSuggestionContainer ? function () {
|
|
return getSuggestionContainer(_this2._wrapper);
|
|
} : null,
|
|
onSearchChange: this.props.onSearchChange,
|
|
onSelect: this.props.onSelect,
|
|
noRedup: this.props.noRedup
|
|
})
|
|
)
|
|
);
|
|
};
|
|
|
|
return Mention;
|
|
}(_react2['default'].Component);
|
|
|
|
Mention.propTypes = {
|
|
value: _propTypes2['default'].object,
|
|
suggestions: _propTypes2['default'].array,
|
|
prefix: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)]),
|
|
prefixCls: _propTypes2['default'].string,
|
|
tag: _propTypes2['default'].oneOfType([_propTypes2['default'].element, _propTypes2['default'].func]),
|
|
style: _propTypes2['default'].object,
|
|
className: _propTypes2['default'].string,
|
|
onSearchChange: _propTypes2['default'].func,
|
|
onChange: _propTypes2['default'].func,
|
|
mode: _propTypes2['default'].string,
|
|
multiLines: _propTypes2['default'].bool,
|
|
suggestionStyle: _propTypes2['default'].object,
|
|
placeholder: _propTypes2['default'].string,
|
|
defaultValue: _propTypes2['default'].object,
|
|
notFoundContent: _propTypes2['default'].any,
|
|
position: _propTypes2['default'].string,
|
|
onFocus: _propTypes2['default'].func,
|
|
onBlur: _propTypes2['default'].func,
|
|
onSelect: _propTypes2['default'].func,
|
|
onKeyDown: _propTypes2['default'].func,
|
|
getSuggestionContainer: _propTypes2['default'].func,
|
|
noRedup: _propTypes2['default'].bool,
|
|
mentionStyle: _propTypes2['default'].object,
|
|
placement: _propTypes2['default'].string,
|
|
editorKey: _propTypes2['default'].string
|
|
};
|
|
Mention.controlledMode = false;
|
|
|
|
|
|
Mention.defaultProps = {
|
|
prefixCls: 'rc-editor-mention',
|
|
prefix: '@',
|
|
mode: 'mutable',
|
|
suggestions: [],
|
|
multiLines: false,
|
|
className: '',
|
|
suggestionStyle: {},
|
|
notFoundContent: '无法找到',
|
|
position: 'absolute',
|
|
placement: 'bottom', // top, bottom
|
|
mentionStyle: {}
|
|
};
|
|
|
|
exports['default'] = Mention;
|
|
module.exports = exports['default']; |