uxcore-mention
Version:
Mention anywhere with this component
263 lines (226 loc) • 8.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _baseEditor = require('./baseEditor');
var _baseEditor2 = _interopRequireDefault(_baseEditor);
var _util = require('../utils/util');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
/**
* @i18n {zh-CN} input中使用mention
* @i18n {en-US} mention in input
*/
var InputEditor = function (_BaseEditor) {
_inherits(InputEditor, _BaseEditor);
InputEditor.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.value !== prevState.prveValue) {
return {
value: nextProps.value,
prveValue: nextProps.value
};
}
return null;
};
function InputEditor(props) {
_classCallCheck(this, InputEditor);
var _this = _possibleConstructorReturn(this, _BaseEditor.call(this, props));
_this.state = {
value: props.value || props.defaultValue,
prevValue: props.value || props.defaultValue
};
_this.handleChange = _this.handleChange.bind(_this);
return _this;
}
InputEditor.prototype.componentDidMount = function componentDidMount() {
this.selectionPosition = {
start: 0,
end: 0
};
};
InputEditor.prototype.handleDefaultKeyup = function handleDefaultKeyup() {
var editor = this.editor;
var delimiter = this.props.delimiter;
var offset = (0, _util.getCaretOffset)(editor);
var value = this.state.value;
value = value.replace(/(\r\n)|\n|\r/g, '\n');
var originStr = value.slice(0, offset.end);
var str = (0, _util.parseStrByDelimiter)(originStr, delimiter);
this.props.matcher(str);
this.selectionPosition = {
start: offset.start - str.length - 1,
end: offset.end
};
if (str !== false) {
var position = (0, _util.getCaretPosition)(editor);
this.props.setCursorPos({
x: position.left,
y: position.top
});
}
};
InputEditor.prototype.insert = function insert(mentionContent) {
this.insertContentAtCaret(mentionContent);
};
InputEditor.prototype.insertContentAtCaret = function insertContentAtCaret(text) {
var _this2 = this;
var editor = this.editor;
if (document.selection) {
editor.focus();
if (editor.createTextRange) {
var range = editor.createTextRange();
range.collapse(true);
range.moveStart('character', this.selectionPosition.start);
range.moveEnd('character', this.selectionPosition.end - this.selectionPosition.start);
range.text = text;
} else if (editor.setSelectionRange) {
editor.setSelectionRange(this.selectionPosition.start, this.selectionPosition.end);
}
} else {
var scrollTop = editor.scrollTop;
var value = this.state.value;
// editor.value = editor.value.substring(0, this.selectionPosition.start) +
// text +
// editor.value.substring(this.selectionPosition.end, editor.value.length);
value = value.substring(0, this.selectionPosition.start) + text + value.substring(this.selectionPosition.end, editor.value.length);
this.setState({
value: value
}, function () {
editor.focus();
editor.scrollTop = scrollTop;
});
}
setTimeout(function () {
var changeEvt = (0, _util.createEvent)(editor, 'change');
_this2.props.onChange(changeEvt, _this2.state.value);
}, 0);
};
InputEditor.prototype.handleChange = function handleChange(e) {
this.setState({
value: e.target.value
});
this.props.onChange(e, e.target.value);
};
InputEditor.prototype.render = function render() {
var _this3 = this;
var value = this.state.value;
var _props = this.props,
readOnly = _props.readOnly,
placeholder = _props.placeholder,
maxLength = _props.maxLength;
var style = {
width: this.props.width,
height: this.props.height
};
return _react2["default"].createElement(
'div',
{ className: this.props.prefixCls },
_react2["default"].createElement('input', _extends({}, Number(maxLength) > 0 ? { maxLength: maxLength } : {}, {
className: this.props.prefixCls + '-editor kuma-input',
ref: function ref(el) {
return _this3.editor = el;
},
style: style,
readOnly: readOnly,
placeholder: placeholder,
onChange: this.handleChange,
onKeyDown: this.onKeydown.bind(this),
onKeyUp: this.onKeyup.bind(this),
onFocus: this.onFocus.bind(this),
value: value
}))
);
};
return InputEditor;
}(_baseEditor2["default"]);
InputEditor.displayName = 'InputEditor';
InputEditor.propTypes = {
/**
* @i18n {zh-CN} class前缀
* @i18n {en-US} class prefix
*/
prefixCls: _propTypes2["default"].string,
/**
* @i18n {zh-CN} 编辑区域宽度
* @i18n {en-US} editor's width
*/
width: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
/**
* @i18n {zh-CN} 编辑区域高度
* @i18n {en-US} editor's height
*/
height: _propTypes2["default"].number,
/**
* @i18n {zh-CN} placeholder
* @i18n {en-US} placeholder
*/
placeholder: _propTypes2["default"].string,
/**
* @i18n {zh-CN} 自定义插入的mention内容
* @i18n {en-US} customize the insert content with this function | function
*/
mentionFormatter: _propTypes2["default"].func,
/**
* @i18n {zh-CN} 发生变化后的触发
* @i18n {en-US} trigger when editor content change
*/
// onChange: React.PropTypes.func,
/**
* @i18n {zh-CN} 添加mention后触发
* @i18n {en-US} Callback invoked when a mention has been added
*/
onAdd: _propTypes2["default"].func,
/**
* @i18n {zh-CN} 默认内容
* @i18n {en-US} default value
*/
defaultValue: _propTypes2["default"].string,
/**
* @i18n {zh-CN} 内容
* @i18n {en-US} value
*/
value: _propTypes2["default"].string,
/**
* @i18n {zh-CN} 只读
* @i18n {en-US} read only
*/
readOnly: _propTypes2["default"].bool,
/**
* @i18n {zh-CN} 触发字符
* @i18n {en-US} Defines the char sequence upon which to trigger querying the data source
*/
delimiter: _propTypes2["default"].string,
/**
* @i18n {zh-CN} 最大长度
* @i18n {en-US} max length of content
*/
maxLength: _propTypes2["default"].number
};
InputEditor.defaultProps = {
prefixCls: '',
width: 200,
height: 30,
placeholder: '',
mentionFormatter: function mentionFormatter(data) {
return ' @' + data.text + ' ';
},
// onChange: () => {},
onAdd: function onAdd() {},
defaultValue: '',
readOnly: false,
delimiter: '@',
value: '',
maxLength: -1
};
(0, _reactLifecyclesCompat.polyfill)(InputEditor);
exports["default"] = InputEditor;
module.exports = exports['default'];