custom-app
Version:
ITIMS��Ʒ�鿪��ר��React���,�Dz��ý��ּ�dhcc-app���������
250 lines (208 loc) • 9.74 kB
JavaScript
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule DraftEditorContents-core.react
* @format
*
*/
'use strict';
var _assign = require('object-assign');
var _extends = _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; };
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) : subClass.__proto__ = superClass; }
var DraftEditorBlock = require('./DraftEditorBlock.react');
var DraftOffsetKey = require('./DraftOffsetKey');
var EditorState = require('./EditorState');
var React = require('react');
var cx = require('fbjs/lib/cx');
var joinClasses = require('fbjs/lib/joinClasses');
var nullthrows = require('fbjs/lib/nullthrows');
/**
* Provide default styling for list items. This way, lists will be styled with
* proper counters and indentation even if the caller does not specify
* their own styling at all. If more than five levels of nesting are needed,
* the necessary CSS classes can be provided via `blockStyleFn` configuration.
*/
var getListItemClasses = function getListItemClasses(type, depth, shouldResetCount, direction) {
return cx({
'public/DraftStyleDefault/unorderedListItem': type === 'unordered-list-item',
'public/DraftStyleDefault/orderedListItem': type === 'ordered-list-item',
'public/DraftStyleDefault/reset': shouldResetCount,
'public/DraftStyleDefault/depth0': depth === 0,
'public/DraftStyleDefault/depth1': depth === 1,
'public/DraftStyleDefault/depth2': depth === 2,
'public/DraftStyleDefault/depth3': depth === 3,
'public/DraftStyleDefault/depth4': depth === 4,
'public/DraftStyleDefault/listLTR': direction === 'LTR',
'public/DraftStyleDefault/listRTL': direction === 'RTL'
});
};
/**
* `DraftEditorContents` is the container component for all block components
* rendered for a `DraftEditor`. It is optimized to aggressively avoid
* re-rendering blocks whenever possible.
*
* This component is separate from `DraftEditor` because certain props
* (for instance, ARIA props) must be allowed to update without affecting
* the contents of the editor.
*/
var DraftEditorContents = function (_React$Component) {
_inherits(DraftEditorContents, _React$Component);
function DraftEditorContents() {
_classCallCheck(this, DraftEditorContents);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
DraftEditorContents.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
var prevEditorState = this.props.editorState;
var nextEditorState = nextProps.editorState;
var prevDirectionMap = prevEditorState.getDirectionMap();
var nextDirectionMap = nextEditorState.getDirectionMap();
// Text direction has changed for one or more blocks. We must re-render.
if (prevDirectionMap !== nextDirectionMap) {
return true;
}
var didHaveFocus = prevEditorState.getSelection().getHasFocus();
var nowHasFocus = nextEditorState.getSelection().getHasFocus();
if (didHaveFocus !== nowHasFocus) {
return true;
}
var nextNativeContent = nextEditorState.getNativelyRenderedContent();
var wasComposing = prevEditorState.isInCompositionMode();
var nowComposing = nextEditorState.isInCompositionMode();
// If the state is unchanged or we're currently rendering a natively
// rendered state, there's nothing new to be done.
if (prevEditorState === nextEditorState || nextNativeContent !== null && nextEditorState.getCurrentContent() === nextNativeContent || wasComposing && nowComposing) {
return false;
}
var prevContent = prevEditorState.getCurrentContent();
var nextContent = nextEditorState.getCurrentContent();
var prevDecorator = prevEditorState.getDecorator();
var nextDecorator = nextEditorState.getDecorator();
return wasComposing !== nowComposing || prevContent !== nextContent || prevDecorator !== nextDecorator || nextEditorState.mustForceSelection();
};
DraftEditorContents.prototype.render = function render() {
var _props = this.props,
blockRenderMap = _props.blockRenderMap,
blockRendererFn = _props.blockRendererFn,
blockStyleFn = _props.blockStyleFn,
customStyleMap = _props.customStyleMap,
customStyleFn = _props.customStyleFn,
editorState = _props.editorState,
editorKey = _props.editorKey,
textDirectionality = _props.textDirectionality;
var content = editorState.getCurrentContent();
var selection = editorState.getSelection();
var forceSelection = editorState.mustForceSelection();
var decorator = editorState.getDecorator();
var directionMap = nullthrows(editorState.getDirectionMap());
var blocksAsArray = content.getBlocksAsArray();
var processedBlocks = [];
var currentDepth = null;
var lastWrapperTemplate = null;
for (var ii = 0; ii < blocksAsArray.length; ii++) {
var _block = blocksAsArray[ii];
var key = _block.getKey();
var blockType = _block.getType();
var customRenderer = blockRendererFn(_block);
var CustomComponent = void 0,
customProps = void 0,
customEditable = void 0;
if (customRenderer) {
CustomComponent = customRenderer.component;
customProps = customRenderer.props;
customEditable = customRenderer.editable;
}
var direction = textDirectionality ? textDirectionality : directionMap.get(key);
var offsetKey = DraftOffsetKey.encode(key, 0, 0);
var componentProps = {
contentState: content,
block: _block,
blockProps: customProps,
blockStyleFn: blockStyleFn,
customStyleMap: customStyleMap,
customStyleFn: customStyleFn,
decorator: decorator,
direction: direction,
forceSelection: forceSelection,
key: key,
offsetKey: offsetKey,
selection: selection,
tree: editorState.getBlockTree(key)
};
var configForType = blockRenderMap.get(blockType) || blockRenderMap.get('unstyled');
var wrapperTemplate = configForType.wrapper;
var Element = configForType.element || blockRenderMap.get('unstyled').element;
var depth = _block.getDepth();
var className = '';
if (blockStyleFn) {
className = blockStyleFn(_block);
}
// List items are special snowflakes, since we handle nesting and
// counters manually.
if (Element === 'li') {
var shouldResetCount = lastWrapperTemplate !== wrapperTemplate || currentDepth === null || depth > currentDepth;
className = joinClasses(className, getListItemClasses(blockType, depth, shouldResetCount, direction));
}
var Component = CustomComponent || DraftEditorBlock;
var childProps = {
className: className,
'data-block': true,
'data-editor': editorKey,
'data-offset-key': offsetKey,
key: key
};
if (customEditable !== undefined) {
childProps = _extends({}, childProps, {
contentEditable: customEditable,
suppressContentEditableWarning: true
});
}
var child = React.createElement(Element, childProps, React.createElement(Component, componentProps));
processedBlocks.push({
block: child,
wrapperTemplate: wrapperTemplate,
key: key,
offsetKey: offsetKey
});
if (wrapperTemplate) {
currentDepth = _block.getDepth();
} else {
currentDepth = null;
}
lastWrapperTemplate = wrapperTemplate;
}
// Group contiguous runs of blocks that have the same wrapperTemplate
var outputBlocks = [];
for (var _ii = 0; _ii < processedBlocks.length;) {
var info = processedBlocks[_ii];
if (info.wrapperTemplate) {
var blocks = [];
do {
blocks.push(processedBlocks[_ii].block);
_ii++;
} while (_ii < processedBlocks.length && processedBlocks[_ii].wrapperTemplate === info.wrapperTemplate);
var wrapperElement = React.cloneElement(info.wrapperTemplate, {
key: info.key + '-wrap',
'data-offset-key': info.offsetKey
}, blocks);
outputBlocks.push(wrapperElement);
} else {
outputBlocks.push(info.block);
_ii++;
}
}
return React.createElement(
'div',
{ 'data-contents': 'true' },
outputBlocks
);
};
return DraftEditorContents;
}(React.Component);
module.exports = DraftEditorContents;