yqcloud-ui
Version:
An enterprise-class UI design language and React-based implementation
247 lines (200 loc) • 8.46 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
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.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,
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;
var suggestions = this.state.suggestions;
var Suggestions = this.Suggestions;
var editorClass = (0, _classnames3['default'])(className, (_classnames = {}, (0, _defineProperty3['default'])(_classnames, prefixCls + '-wrapper', true), (0, _defineProperty3['default'])(_classnames, 'readonly', readOnly), (0, _defineProperty3['default'])(_classnames, 'disabled', disabled), (0, _defineProperty3['default'])(_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,
plugins: this.plugins,
defaultValue: defaultValueState,
placeholder: placeholder,
onFocus: this.onFocus,
onBlur: this.onBlur,
onChange: this.onEditorChange
}, editorProps, {
readOnly: readOnly || disabled
}), _react2['default'].createElement(Suggestions, {
mode: tag ? 'immutable' : 'mutable',
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'].element,
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,
getSuggestionContainer: _propTypes2['default'].func,
noRedup: _propTypes2['default'].bool,
mentionStyle: _propTypes2['default'].object,
placement: _propTypes2['default'].string
};
Mention.controlledMode = false;
Mention.defaultProps = {
prefixCls: 'rc-editor-mention',
prefix: '@',
mode: 'immutable',
suggestions: [],
multiLines: false,
className: '',
suggestionStyle: {},
notFoundContent: '无法找到',
position: 'absolute',
placement: 'bottom', // top, bottom
mentionStyle: {}
};
exports['default'] = Mention;
module.exports = exports['default'];