height: this.props.height,
};
var className = cx({
'fixedDataTableRowLayout/main': true,
'public/fixedDataTableRow/main': true,
'public/fixedDataTableRow/highlighted': (this.props.index % 2 === 1),
'public/fixedDataTableRow/odd': (this.props.index % 2 === 1),
'public/fixedDataTableRow/even': (this.props.index % 2 === 0),
});
var isHeaderOrFooterRow = this.props.index === -1;
if (!this.props.data && !isHeaderOrFooterRow) {
return (
<div
className={joinClasses(className, this.props.className)}
style={style}
/>
);
}
var fixedColumnsWidth = this._getColumnsWidth(this.props.fixedColumns);
var fixedColumns =
<FixedDataTableCellGroup
key="fixed_cells"
height={this.props.height}
left={0}
width={fixedColumnsWidth}
zIndex={2}
columns={this.props.fixedColumns}
data={this.props.data}
index={rowIndex}
width={props.width}
height={currentRowHeight}
scrollLeft={Math.round(props.scrollLeft)}
offsetTop={Math.round(rowOffsetTop)}
fixedColumns={props.fixedColumns}
scrollableColumns={props.scrollableColumns}
onClick={props.onRowClick}
onDoubleClick={props.onRowDoubleClick}
onMouseDown={props.onRowMouseDown}
onMouseEnter={props.onRowMouseEnter}
onMouseLeave={props.onRowMouseLeave}
className={joinClasses(
rowClassNameGetter(rowIndex),
cx('public/fixedDataTable/bodyRow'),
cx({
'fixedDataTableLayout/hasBottomBorder': hasBottomBorder,
'public/fixedDataTable/hasBottomBorder': hasBottomBorder,
})
)}
/>;
}
var firstRowPosition = props.rowPositionGetter(props.firstRowIndex);
var style = {
position: 'absolute',
pointerEvents: props.isScrolling ? 'none' : 'auto',
};
translateDOMPositionXY(
style,
render(): React.Node {
const {
/* $FlowFixMe(>=0.53.0 site=www,mobile) This comment suppresses an error
* when upgrading Flow's support for React. Common errors found when
* upgrading Flow's React support are documented at
* https://fburl.com/eq7bs81w */
blockRenderMap,
blockRendererFn,
/* $FlowFixMe(>=0.53.0 site=www,mobile) This comment suppresses an error
* when upgrading Flow's support for React. Common errors found when
* upgrading Flow's React support are documented at
* https://fburl.com/eq7bs81w */
customStyleMap,
/* $FlowFixMe(>=0.53.0 site=www,mobile) This comment suppresses an error
* when upgrading Flow's support for React. Common errors found when
* upgrading Flow's React support are documented at
* https://fburl.com/eq7bs81w */
customStyleFn,
editorState,
} = this.props;
const content = editorState.getCurrentContent();
const selection = editorState.getSelection();
const forceSelection = editorState.mustForceSelection();
const decorator = editorState.getDecorator();
const directionMap = nullthrows(editorState.getDirectionMap());
const blocksAsArray = content.getBlocksAsArray();
const processedBlocks = [];
let currentDepth = null;
let lastWrapperTemplate = null;
for (let ii = 0; ii < blocksAsArray.length; ii++) {
const block = blocksAsArray[ii];
const key = block.getKey();
const blockType = block.getType();
const customRenderer = blockRendererFn(block);
let CustomComponent, customProps, customEditable;
if (customRenderer) {
CustomComponent = customRenderer.component;
customProps = customRenderer.props;
customEditable = customRenderer.editable;
}
const {textDirectionality} = this.props;
const direction = textDirectionality
? textDirectionality
: directionMap.get(key);
const offsetKey = DraftOffsetKey.encode(key, 0, 0);
const componentProps = {
contentState: content,
block,
blockProps: customProps,
customStyleMap,
customStyleFn,
decorator,
direction,
forceSelection,
key,
offsetKey,
selection,
tree: editorState.getBlockTree(key),
};
const configForType = blockRenderMap.get(blockType);
const wrapperTemplate = configForType.wrapper;
const Element = (
configForType.element ||
blockRenderMap.get('unstyled').element
);
const depth = block.getDepth();
let className = this.props.blockStyleFn(block);
// List items are special snowflakes, since we handle nesting and
// counters manually.
if (Element === 'li') {
const shouldResetCount = (
lastWrapperTemplate !== wrapperTemplate ||
currentDepth === null ||
depth > currentDepth
);
className = joinClasses(
className,
getListItemClasses(blockType, depth, shouldResetCount, direction),
);
}
const Component = CustomComponent || DraftEditorBlock;
let childProps = {
className,
'data-block': true,
/* $FlowFixMe(>=0.53.0 site=www,mobile) This comment suppresses an
* error when upgrading Flow's support for React. Common errors found
* when upgrading Flow's React support are documented at
* https://fburl.com/eq7bs81w */
'data-editor': this.props.editorKey,
'data-offset-key': offsetKey,
key,
};
if (customEditable !== undefined) {
childProps = {
...childProps,
contentEditable: customEditable,
suppressContentEditableWarning: true,
};
}
const child = React.createElement(
Element,
childProps,
/* $FlowFixMe(>=0.53.0 site=www,mobile) This comment suppresses an
* error when upgrading Flow's support for React. Common errors found
* when upgrading Flow's React support are documented at
* https://fburl.com/eq7bs81w */
<Component {...componentProps} />,
);
processedBlocks.push({
block: child,
wrapperTemplate,
key,
offsetKey,
});
if (wrapperTemplate) {
currentDepth = block.getDepth();
} else {
currentDepth = null;
}
lastWrapperTemplate = wrapperTemplate;
}
// Group contiguous runs of blocks that have the same wrapperTemplate
const outputBlocks = [];
for (let ii = 0; ii < processedBlocks.length; ) {
const info = processedBlocks[ii];
if (info.wrapperTemplate) {
const blocks = [];
do {
blocks.push(processedBlocks[ii].block);
ii++;
} while (
ii < processedBlocks.length &&
processedBlocks[ii].wrapperTemplate === info.wrapperTemplate
);
const 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 <div data-contents="true">{outputBlocks}</div>;
}
this.props.onScrollY(this.state);
};
},
render() /*object*/ {
var state = this.state;
var props = this.props;
var groupHeader;
if (state.useGroupHeader) {
groupHeader = (
<FixedDataTableRow
key="group_header"
isScrolling={this._isScrolling}
className={joinClasses(
cx('fixedDataTableLayout/header'),
cx('public/fixedDataTable/header'),
)}
width={state.width}
height={state.groupHeaderHeight}
index={0}
zIndex={1}
offsetTop={0}
scrollLeft={state.scrollX}
fixedColumns={state.groupHeaderFixedColumns}
scrollableColumns={state.groupHeaderScrollableColumns}
onColumnResize={this._onColumnResize}
/>
);
}
var maxScrollY = this.state.maxScrollY;
} else {
style.right = props.left;
}
if (this.state.isReorderingThisColumn) {
style.transform = `translateX(${this.state.displacement}px) translateZ(0)`;
style.zIndex = 1;
}
var className = joinClasses(
cx({
'fixedDataTableCellLayout/main': true,
'fixedDataTableCellLayout/lastChild': props.lastChild,
'fixedDataTableCellLayout/alignRight': props.align === 'right',
'fixedDataTableCellLayout/alignCenter': props.align === 'center',
'public/fixedDataTableCell/alignRight': props.align === 'right',
'public/fixedDataTableCell/highlighted': props.highlighted,
'public/fixedDataTableCell/main': true,
'public/fixedDataTableCell/hasReorderHandle': !!props.onColumnReorder,
'public/fixedDataTableCell/reordering': this.state.isReorderingThisColumn,
}),
props.className,
);
var columnResizerComponent;
if (props.onColumnResize) {
var columnResizerStyle = {
height
};
function suppress(event) {
event.preventDefault();
event.stopPropagation();
if (props.groupHeaderRenderer) {
content = props.groupHeaderRenderer(
props.label,
props.dataKey, // index in children
props.groupHeaderData,
props.groupHeaderLabels,
props.width,
) || content;
}
var contentClass = cx('public/fixedDataTableCell/cellContent');
if (React.isValidElement(content) && usingRenderer) {
content = React.cloneElement(content, {
className: joinClasses(content.props.className, contentClass)
});
} else {
return (
<CellDefault
{...props}>
{content}
</CellDefault>
);
}
var innerStyle = {
height: props.height,
width: props.width,
...props.style,
};
render(): React.Element {
const {blockRendererFn, customStyleMap, editorState} = this.props;
const content = editorState.getCurrentContent();
const selection = editorState.getSelection();
const forceSelection = editorState.mustForceSelection();
const decorator = editorState.getDecorator();
const directionMap = nullthrows(editorState.getDirectionMap());
const blocksAsArray = content.getBlocksAsArray();
const blocks = [];
let currentWrapperElement = null;
let currentWrapperTemplate = null;
let currentDepth = null;
let currentWrappedBlocks;
let block, key, blockType, child, wrapperTemplate;
for (let ii = 0; ii < blocksAsArray.length; ii++) {
block = blocksAsArray[ii];
key = block.getKey();
blockType = block.getType();
const customRenderer = blockRendererFn(block);
let CustomComponent, customProps;
if (customRenderer) {
CustomComponent = customRenderer.component;
customProps = customRenderer.props;
}
const direction = directionMap.get(key);
const offsetKey = DraftOffsetKey.encode(key, 0, 0);
const componentProps = {
block,
blockProps: customProps,
customStyleMap,
decorator,
direction,
forceSelection,
key,
offsetKey,
selection,
tree: editorState.getBlockTree(key),
};
wrapperTemplate = getWrapperTemplateForBlockType(blockType);
const useNewWrapper = wrapperTemplate !== currentWrapperTemplate;
if (CustomComponent) {
child = <CustomComponent {...componentProps} />;
} else {
const Element = getElementForBlockType(blockType);
const depth = block.getDepth();
let className = this.props.blockStyleFn(block);
// List items are special snowflakes, since we handle nesting and
// counters manually.
if (Element === 'li') {
const shouldResetCount = (
useNewWrapper ||
currentDepth === null ||
depth > currentDepth
);
className = joinClasses(
className,
getListItemClasses(blockType, depth, shouldResetCount, direction)
);
}
// $FlowFixMe: Support DOM elements in React.createElement
child = React.createElement(
Element,
{
className,
'data-block': true,
'data-editor': this.props.editorKey,
'data-offset-key': offsetKey,
key,
},
<DraftEditorBlock {...componentProps} />,
);
}
if (wrapperTemplate) {
if (useNewWrapper) {
currentWrappedBlocks = [];
currentWrapperElement = React.cloneElement(
wrapperTemplate,
{
key: key + '-wrap',
'data-offset-key': offsetKey,
},
currentWrappedBlocks
);
currentWrapperTemplate = wrapperTemplate;
blocks.push(currentWrapperElement);
}
currentDepth = block.getDepth();
nullthrows(currentWrappedBlocks).push(child);
} else {
currentWrappedBlocks = null;
currentWrapperElement = null;
currentWrapperTemplate = null;
currentDepth = null;
blocks.push(child);
}
}
return <div data-contents="true">{blocks}</div>;
}
height,
width,
};
if (DIR_SIGN === 1) {
style.left = props.left;
} else {
style.right = props.left;
}
var className = joinClasses(
cx({
'fixedDataTableCellLayout/main': true,
'fixedDataTableCellLayout/lastChild': props.lastChild,
'fixedDataTableCellLayout/alignRight': props.align === 'right',
'fixedDataTableCellLayout/alignCenter': props.align === 'center',
'public/fixedDataTableCell/alignRight': props.align === 'right',
'public/fixedDataTableCell/highlighted': props.highlighted,
'public/fixedDataTableCell/main': true,
}),
props.className,
);
var columnResizerComponent;
if (props.onColumnResize) {
var columnResizerStyle = {
height
};
columnResizerComponent = (
<div
className={cx('fixedDataTableCellLayout/columnResizerContainer')}
style={columnResizerStyle}
it('should join two classes together', function() {
const aaa = 'aaa';
const bbb = 'bbb';
expect(joinClasses(aaa, bbb)).toEqual('aaa bbb');
});
it('should return a single className', function() {
expect(joinClasses('aaa')).toEqual('aaa');
});
render() {
var {height, width, style, className, children, columnKey, ...rest} = this.props;
var innerStyle = {
height,
width,
...style,
};
return (
<div
{...rest}
className={joinClasses(
cx('fixedDataTableCellLayout/wrap1'),
cx('public/fixedDataTableCell/wrap1'),
className,
)}
style={innerStyle}>
<div
className={joinClasses(
cx('fixedDataTableCellLayout/wrap2'),
cx('public/fixedDataTableCell/wrap2'),
)}>
<div
className={joinClasses(
cx('fixedDataTableCellLayout/wrap3'),
cx('public/fixedDataTableCell/wrap3'),
)}>
<div className={cx('public/fixedDataTableCell/cellContent')}>
{children}