custom-app
Version:
ITIMS��Ʒ�鿪��ר��React���,�Dz��ý��ּ�dhcc-app���������
122 lines (97 loc) • 4.03 kB
JavaScript
;
exports.__esModule = true;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
exports['default'] = createImmutableMention;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _draftJs = require('draft-js');
var _Suggestions2 = require('../component/Suggestions.react');
var _Suggestions3 = _interopRequireDefault(_Suggestions2);
var _mentionStore = require('../model/mentionStore');
var _mentionStore2 = _interopRequireDefault(_mentionStore);
var _exportContent = require('../utils/exportContent');
var _exportContent2 = _interopRequireDefault(_exportContent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function noop() {}
var MentionContentComponent = function MentionContentComponent(props) {
var entityKey = props.entityKey,
tag = props.tag,
callbacks = props.callbacks;
var contentState = callbacks.getEditorState().getCurrentContent();
var data = contentState.getEntity(entityKey).getData();
return _react2['default'].createElement(tag, (0, _extends3['default'])({}, props, { data: data }));
};
function mentionContentStrategy(contentBlock, callback, contentState) {
contentBlock.findEntityRanges(function (character) {
var entityKey = character.getEntity();
return entityKey && contentState.getEntity(entityKey).getType() === 'mention';
}, callback);
}
function mentionTriggerStrategy(contentBlock, callback, contentState) {
contentBlock.findEntityRanges(function (character) {
var entityKey = character.getEntity();
return entityKey && contentState.getEntity(entityKey).getType() === 'trigger';
}, callback);
}
function createImmutableMention() {
var callbacks = {
onChange: noop,
onUpArrow: noop,
onDownArrow: noop,
getEditorState: noop,
setEditorState: noop,
handleReturn: noop,
onBlur: noop
};
function _onChange(editorState) {
var selectionState = editorState.getSelection();
var currentContent = editorState.getCurrentContent();
var anchorKey = selectionState.getAnchorKey();
var currentContentBlock = currentContent.getBlockForKey(anchorKey);
if (selectionState.isCollapsed()) {
currentContent.createEntity('trigger', 'MUTABLE');
var end = selectionState.getEndOffset();
var start = end - 1;
var selectedText = currentContentBlock.getText().slice(start, end);
if (selectedText === '@') {
var updatedContent = _draftJs.Modifier.replaceText(currentContent, selectionState.merge({
anchorOffset: start,
focusOffset: end
}), '@', null, currentContent.getLastCreatedEntityKey());
return _draftJs.EditorState.push(editorState, updatedContent, 'insert-mention');
}
}
return editorState;
}
var componentProps = {
callbacks: callbacks,
mentionStore: _mentionStore2['default']
};
return {
name: 'mention',
Suggestions: function Suggestions(props) {
return _react2['default'].createElement(_Suggestions3['default'], (0, _extends3['default'])({}, props, componentProps, {
store: _mentionStore2['default']
}));
},
decorators: [{
strategy: mentionTriggerStrategy,
component: function component(props) {
return _react2['default'].createElement('span', (0, _extends3['default'])({}, props, { style: { color: 'red' } }));
}
}, {
strategy: mentionContentStrategy,
component: function component(props) {
return _react2['default'].createElement(MentionContentComponent, (0, _extends3['default'])({}, props, { callbacks: callbacks }));
}
}],
onChange: function onChange(editorState) {
var updatedEditorState = _onChange(editorState);
return callbacks.onChange ? callbacks.onChange(updatedEditorState) : updatedEditorState;
},
callbacks: callbacks,
'export': _exportContent2['default']
};
}
module.exports = exports['default'];