3f1ab6be47
Summary: Where was a bug, where a range selection using the shift key wasn't working, when the start of the selection was outside the viewport. The problem was caused by `selectInRange` firing twice, the second time with wrong arguments. In this diff, we are not firing the `onMouseEnterRow` handler, when the shift key is pressed. Reviewed By: jknoxville Differential Revision: D15897880 fbshipit-source-id: 95402dcbe9f8ce691be16cfd103918b09ff9e75c
712 lines
19 KiB
JavaScript
712 lines
19 KiB
JavaScript
/**
|
|
* Copyright 2018-present Facebook.
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
* @format
|
|
*/
|
|
|
|
import type {
|
|
TableColumnOrder,
|
|
TableColumnSizes,
|
|
TableColumns,
|
|
TableHighlightedRows,
|
|
TableRowSortOrder,
|
|
TableRows,
|
|
TableBodyRow,
|
|
TableOnAddFilter,
|
|
} from './types.js';
|
|
|
|
import type {MenuTemplate} from '../ContextMenu.js';
|
|
|
|
import React from 'react';
|
|
import styled from '../../styled/index.js';
|
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
import {VariableSizeList as List} from 'react-window';
|
|
import {clipboard} from 'electron';
|
|
import TableHead from './TableHead.js';
|
|
import TableRow from './TableRow.js';
|
|
import ContextMenu from '../ContextMenu.js';
|
|
import FlexColumn from '../FlexColumn.js';
|
|
import createPaste from '../../../fb-stubs/createPaste.js';
|
|
import debounceRender from 'react-debounce-render';
|
|
import debounce from 'lodash.debounce';
|
|
import {DEFAULT_ROW_HEIGHT} from './types';
|
|
|
|
export type ManagedTableProps = {|
|
|
/**
|
|
* Column definitions.
|
|
*/
|
|
columns: TableColumns,
|
|
/**
|
|
* Row definitions.
|
|
*/
|
|
rows: TableRows,
|
|
/*
|
|
* Globally unique key for persisting data between uses of a table such as column sizes.
|
|
*/
|
|
tableKey?: string,
|
|
/**
|
|
* Whether the table has a border.
|
|
*/
|
|
floating?: boolean,
|
|
/**
|
|
* Whether a row can span over multiple lines. Otherwise lines cannot wrap and
|
|
* are truncated.
|
|
*/
|
|
multiline?: boolean,
|
|
/**
|
|
* Whether the body is scrollable. When this is set to `true` then the table
|
|
* is not scrollable.
|
|
*/
|
|
autoHeight?: boolean,
|
|
/**
|
|
* Order of columns.
|
|
*/
|
|
columnOrder?: TableColumnOrder,
|
|
/**
|
|
* Initial size of the columns.
|
|
*/
|
|
columnSizes?: TableColumnSizes,
|
|
/**
|
|
* Value to filter rows on. Alternative to the `filter` prop.
|
|
*/
|
|
filterValue?: string,
|
|
/**
|
|
* Callback to filter rows.
|
|
*/
|
|
filter?: (row: TableBodyRow) => boolean,
|
|
/**
|
|
* Callback when the highlighted rows change.
|
|
*/
|
|
onRowHighlighted?: (keys: TableHighlightedRows) => void,
|
|
/**
|
|
* Whether rows can be highlighted or not.
|
|
*/
|
|
highlightableRows?: boolean,
|
|
/**
|
|
* Whether multiple rows can be highlighted or not.
|
|
*/
|
|
multiHighlight?: boolean,
|
|
/**
|
|
* Height of each row.
|
|
*/
|
|
rowLineHeight?: number,
|
|
/**
|
|
* This makes it so the scroll position sticks to the bottom of the window.
|
|
* Useful for streaming data like requests, logs etc.
|
|
*/
|
|
stickyBottom?: boolean,
|
|
/**
|
|
* Used by SearchableTable to add filters for rows.
|
|
*/
|
|
onAddFilter?: TableOnAddFilter,
|
|
/**
|
|
* Enable or disable zebra striping.
|
|
*/
|
|
zebra?: boolean,
|
|
/**
|
|
* Whether to hide the column names at the top of the table.
|
|
*/
|
|
hideHeader?: boolean,
|
|
/**
|
|
* Rows that are highlighted initially.
|
|
*/
|
|
highlightedRows?: Set<string>,
|
|
/**
|
|
* Allows to create context menu items for rows.
|
|
*/
|
|
buildContextMenuItems?: () => MenuTemplate,
|
|
initialSortOrder?: ?TableRowSortOrder,
|
|
/**
|
|
* Callback when sorting changes.
|
|
*/
|
|
onSort?: (order: TableRowSortOrder) => void,
|
|
/**
|
|
* Initial sort order of the table.
|
|
*/
|
|
initialSortOrder?: ?TableRowSortOrder,
|
|
/**
|
|
* Table scroll horizontally, if needed
|
|
*/
|
|
horizontallyScrollable?: boolean,
|
|
|};
|
|
|
|
type ManagedTableState = {|
|
|
highlightedRows: Set<string>,
|
|
sortOrder: ?TableRowSortOrder,
|
|
columnOrder: TableColumnOrder,
|
|
columnSizes: TableColumnSizes,
|
|
shouldScrollToBottom: boolean,
|
|
|};
|
|
|
|
const Container = styled(FlexColumn)(props => ({
|
|
overflow: props.canOverflow ? 'scroll' : 'visible',
|
|
flexGrow: 1,
|
|
}));
|
|
|
|
const globalTableState: {[string]: TableColumnSizes} = {};
|
|
|
|
function getTextContentOfRow(rowId: string) {
|
|
return Array.from(
|
|
document.querySelectorAll(`[data-key='${rowId}'] > *`) || [],
|
|
).map(node => node.textContent);
|
|
}
|
|
|
|
class ManagedTable extends React.Component<
|
|
ManagedTableProps,
|
|
ManagedTableState,
|
|
> {
|
|
static defaultProps = {
|
|
highlightableRows: true,
|
|
multiHighlight: false,
|
|
autoHeight: false,
|
|
};
|
|
|
|
getTableKey = (): string => {
|
|
return (
|
|
'TABLE_COLUMNS_' +
|
|
Object.keys(this.props.columns)
|
|
.join('_')
|
|
.toUpperCase()
|
|
);
|
|
};
|
|
|
|
state: ManagedTableState = {
|
|
columnOrder:
|
|
JSON.parse(window.localStorage.getItem(this.getTableKey()) || 'null') ||
|
|
this.props.columnOrder ||
|
|
Object.keys(this.props.columns).map(key => ({key, visible: true})),
|
|
columnSizes:
|
|
this.props.tableKey && globalTableState[this.props.tableKey]
|
|
? globalTableState[this.props.tableKey]
|
|
: this.props.columnSizes || {},
|
|
highlightedRows: this.props.highlightedRows || new Set(),
|
|
sortOrder: this.props.initialSortOrder || null,
|
|
shouldScrollToBottom: Boolean(this.props.stickyBottom),
|
|
};
|
|
|
|
tableRef = React.createRef<List>();
|
|
|
|
scrollRef: {
|
|
current: null | HTMLDivElement,
|
|
} = React.createRef();
|
|
|
|
dragStartIndex: ?number = null;
|
|
|
|
// We want to call scrollToHighlightedRows on componentDidMount. However, at
|
|
// this time, tableRef is still null, because AutoSizer needs one render to
|
|
// measure the size of the table. This is why we are using this flag to
|
|
// trigger actions on the first update instead.
|
|
firstUpdate = true;
|
|
|
|
componentDidMount() {
|
|
document.addEventListener('keydown', this.onKeyDown);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
document.removeEventListener('keydown', this.onKeyDown);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps: ManagedTableProps) {
|
|
// if columnSizes has changed
|
|
if (nextProps.columnSizes !== this.props.columnSizes) {
|
|
this.setState({
|
|
columnSizes: {
|
|
...(this.state.columnSizes || {}),
|
|
...nextProps.columnSizes,
|
|
},
|
|
});
|
|
}
|
|
|
|
if (this.props.highlightedRows !== nextProps.highlightedRows) {
|
|
this.setState({highlightedRows: nextProps.highlightedRows});
|
|
}
|
|
|
|
// if columnOrder has changed
|
|
if (nextProps.columnOrder !== this.props.columnOrder) {
|
|
if (this.tableRef && this.tableRef.current) {
|
|
this.tableRef.current.resetAfterIndex(0);
|
|
}
|
|
this.setState({
|
|
columnOrder: nextProps.columnOrder,
|
|
});
|
|
}
|
|
|
|
if (
|
|
this.props.rows.length > nextProps.rows.length &&
|
|
this.tableRef &&
|
|
this.tableRef.current
|
|
) {
|
|
// rows were filtered, we need to recalculate heights
|
|
this.tableRef.current.resetAfterIndex(0);
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(
|
|
prevProps: ManagedTableProps,
|
|
prevState: ManagedTableState,
|
|
) {
|
|
if (
|
|
this.props.rows.length !== prevProps.rows.length &&
|
|
this.state.shouldScrollToBottom &&
|
|
this.state.highlightedRows.size < 2
|
|
) {
|
|
this.scrollToBottom();
|
|
} else if (
|
|
prevState.highlightedRows !== this.state.highlightedRows ||
|
|
this.firstUpdate
|
|
) {
|
|
this.scrollToHighlightedRows();
|
|
}
|
|
if (
|
|
this.props.stickyBottom &&
|
|
!this.state.shouldScrollToBottom &&
|
|
this.scrollRef &&
|
|
this.scrollRef.current &&
|
|
this.scrollRef.current.parentElement &&
|
|
this.scrollRef.current.parentElement instanceof HTMLElement &&
|
|
this.scrollRef.current.offsetHeight <=
|
|
this.scrollRef.current.parentElement.offsetHeight
|
|
) {
|
|
this.setState({shouldScrollToBottom: true});
|
|
}
|
|
this.firstUpdate = false;
|
|
}
|
|
|
|
scrollToHighlightedRows = () => {
|
|
const {current} = this.tableRef;
|
|
const {highlightedRows} = this.state;
|
|
if (current && highlightedRows && highlightedRows.size > 0) {
|
|
const highlightedRow = Array.from(highlightedRows)[0];
|
|
const index = this.props.rows.findIndex(
|
|
({key}) => key === highlightedRow,
|
|
);
|
|
if (index >= 0) {
|
|
current.scrollToItem(index);
|
|
}
|
|
}
|
|
};
|
|
|
|
onCopy = (withHeader: boolean) => {
|
|
clipboard.writeText(
|
|
[
|
|
...(withHeader ? [this.getHeaderText()] : []),
|
|
this.getSelectedText(),
|
|
].join('\n'),
|
|
);
|
|
};
|
|
|
|
onKeyDown = (e: KeyboardEvent) => {
|
|
const {highlightedRows} = this.state;
|
|
if (highlightedRows.size === 0) {
|
|
return;
|
|
}
|
|
if (
|
|
((e.metaKey && process.platform === 'darwin') ||
|
|
(e.ctrlKey && process.platform !== 'darwin')) &&
|
|
e.keyCode === 67
|
|
) {
|
|
this.onCopy(false);
|
|
} else if (
|
|
(e.keyCode === 38 || e.keyCode === 40) &&
|
|
this.props.highlightableRows
|
|
) {
|
|
// arrow navigation
|
|
const {rows} = this.props;
|
|
const {highlightedRows} = this.state;
|
|
const lastItemKey = Array.from(this.state.highlightedRows).pop();
|
|
const lastItemIndex = this.props.rows.findIndex(
|
|
row => row.key === lastItemKey,
|
|
);
|
|
const newIndex = Math.min(
|
|
rows.length - 1,
|
|
Math.max(0, e.keyCode === 38 ? lastItemIndex - 1 : lastItemIndex + 1),
|
|
);
|
|
if (!e.shiftKey) {
|
|
highlightedRows.clear();
|
|
}
|
|
highlightedRows.add(rows[newIndex].key);
|
|
this.onRowHighlighted(highlightedRows, () => {
|
|
const {current} = this.tableRef;
|
|
if (current) {
|
|
current.scrollToItem(newIndex);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
onRowHighlighted = (highlightedRows: Set<string>, cb?: Function) => {
|
|
if (!this.props.highlightableRows) {
|
|
return;
|
|
}
|
|
this.setState({highlightedRows}, cb);
|
|
const {onRowHighlighted} = this.props;
|
|
if (onRowHighlighted) {
|
|
onRowHighlighted(Array.from(highlightedRows));
|
|
}
|
|
};
|
|
|
|
onSort = (sortOrder: TableRowSortOrder) => {
|
|
this.setState({sortOrder});
|
|
this.props.onSort && this.props.onSort(sortOrder);
|
|
};
|
|
|
|
onColumnOrder = (columnOrder: TableColumnOrder) => {
|
|
this.setState({columnOrder});
|
|
// persist column order
|
|
window.localStorage.setItem(
|
|
this.getTableKey(),
|
|
JSON.stringify(columnOrder),
|
|
);
|
|
};
|
|
|
|
onColumnResize = (id: string, width: number | string) => {
|
|
this.setState(({columnSizes}) => ({
|
|
columnSizes: {
|
|
...columnSizes,
|
|
[id]: width,
|
|
},
|
|
}));
|
|
if (!this.props.tableKey) {
|
|
return;
|
|
}
|
|
if (!globalTableState[this.props.tableKey]) {
|
|
globalTableState[this.props.tableKey] = {};
|
|
}
|
|
globalTableState[this.props.tableKey][id] = width;
|
|
};
|
|
|
|
scrollToBottom() {
|
|
const {current: tableRef} = this.tableRef;
|
|
|
|
if (tableRef && this.props.rows.length > 1) {
|
|
tableRef.scrollToItem(this.props.rows.length - 1);
|
|
}
|
|
}
|
|
|
|
onHighlight = (
|
|
e: SyntheticMouseEvent<>,
|
|
row: TableBodyRow,
|
|
index: number,
|
|
) => {
|
|
if (e.shiftKey) {
|
|
// prevents text selection
|
|
e.preventDefault();
|
|
}
|
|
|
|
let {highlightedRows} = this.state;
|
|
|
|
const contextClick =
|
|
e.button !== 0 ||
|
|
(process.platform === 'darwin' && e.button === 0 && e.ctrlKey);
|
|
|
|
if (contextClick) {
|
|
if (!highlightedRows.has(row.key)) {
|
|
highlightedRows.clear();
|
|
highlightedRows.add(row.key);
|
|
}
|
|
return;
|
|
}
|
|
|
|
this.dragStartIndex = index;
|
|
document.addEventListener('mouseup', this.onStopDragSelecting);
|
|
|
|
if (
|
|
((process.platform === 'darwin' && e.metaKey) ||
|
|
(process.platform !== 'darwin' && e.ctrlKey)) &&
|
|
this.props.multiHighlight
|
|
) {
|
|
highlightedRows.add(row.key);
|
|
} else if (e.shiftKey && this.props.multiHighlight) {
|
|
// range select
|
|
const lastItemKey = Array.from(this.state.highlightedRows).pop();
|
|
highlightedRows = new Set([
|
|
...highlightedRows,
|
|
...this.selectInRange(lastItemKey, row.key),
|
|
]);
|
|
} else {
|
|
// single select
|
|
this.state.highlightedRows.clear();
|
|
this.state.highlightedRows.add(row.key);
|
|
}
|
|
|
|
this.onRowHighlighted(highlightedRows);
|
|
};
|
|
|
|
onStopDragSelecting = () => {
|
|
this.dragStartIndex = null;
|
|
document.removeEventListener('mouseup', this.onStopDragSelecting);
|
|
};
|
|
|
|
selectInRange = (fromKey: string, toKey: string): Array<string> => {
|
|
const selected = [];
|
|
let startIndex = -1;
|
|
let endIndex = -1;
|
|
for (let i = 0; i < this.props.rows.length; i++) {
|
|
if (this.props.rows[i].key === fromKey) {
|
|
startIndex = i;
|
|
}
|
|
if (this.props.rows[i].key === toKey) {
|
|
endIndex = i;
|
|
}
|
|
if (endIndex > -1 && startIndex > -1) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
for (
|
|
let i = Math.min(startIndex, endIndex);
|
|
i <= Math.max(startIndex, endIndex);
|
|
i++
|
|
) {
|
|
try {
|
|
selected.push(this.props.rows[i].key);
|
|
} catch (e) {}
|
|
}
|
|
|
|
return selected;
|
|
};
|
|
|
|
onMouseEnterRow = (
|
|
e: SyntheticMouseEvent<>,
|
|
row: TableBodyRow,
|
|
index: number,
|
|
) => {
|
|
const {dragStartIndex} = this;
|
|
const {current} = this.tableRef;
|
|
if (
|
|
dragStartIndex &&
|
|
current &&
|
|
this.props.multiHighlight &&
|
|
this.props.highlightableRows &&
|
|
!e.shiftKey // When shift key is pressed, it's a range select not a drag select
|
|
) {
|
|
current.scrollToItem(index + 1);
|
|
const startKey = this.props.rows[dragStartIndex].key;
|
|
const highlightedRows = new Set(this.selectInRange(startKey, row.key));
|
|
this.onRowHighlighted(highlightedRows);
|
|
}
|
|
};
|
|
|
|
onCopyCell = (rowId: string, index: number) => {
|
|
const cellText = getTextContentOfRow(rowId)[index];
|
|
clipboard.writeText(cellText);
|
|
};
|
|
|
|
buildContextMenuItems: () => Array<MenuItemConstructorOptions> = () => {
|
|
const {highlightedRows} = this.state;
|
|
if (highlightedRows.size === 0) {
|
|
return [];
|
|
}
|
|
|
|
const copyCellSubMenu =
|
|
highlightedRows.size === 1
|
|
? [
|
|
{
|
|
label: 'Copy cell',
|
|
submenu: this.state.columnOrder
|
|
.filter(c => c.visible)
|
|
.map(c => c.key)
|
|
.map((column, index) => ({
|
|
label: this.props.columns[column].value,
|
|
click: () => {
|
|
const rowId = this.state.highlightedRows.values().next()
|
|
.value;
|
|
rowId && this.onCopyCell(rowId, index);
|
|
},
|
|
})),
|
|
},
|
|
]
|
|
: [];
|
|
|
|
return [
|
|
...copyCellSubMenu,
|
|
{
|
|
label:
|
|
highlightedRows.size > 1
|
|
? `Copy ${highlightedRows.size} rows`
|
|
: 'Copy row',
|
|
submenu: [
|
|
{label: 'With columns header', click: () => this.onCopy(true)},
|
|
{
|
|
label: 'Without columns header',
|
|
click: () => {
|
|
this.onCopy(false);
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Create Paste',
|
|
click: () =>
|
|
createPaste(
|
|
[this.getHeaderText(), this.getSelectedText()].join('\n'),
|
|
),
|
|
},
|
|
];
|
|
};
|
|
|
|
getHeaderText = (): string => {
|
|
return this.state.columnOrder
|
|
.filter(c => c.visible)
|
|
.map(c => c.key)
|
|
.map(key => this.props.columns[key].value)
|
|
.join('\t');
|
|
};
|
|
|
|
getSelectedText = (): string => {
|
|
const {highlightedRows} = this.state;
|
|
|
|
if (highlightedRows.size === 0) {
|
|
return '';
|
|
}
|
|
return this.props.rows
|
|
.filter(row => highlightedRows.has(row.key))
|
|
.map(
|
|
(row: TableBodyRow) =>
|
|
row.copyText || getTextContentOfRow(row.key).join('\t'),
|
|
)
|
|
.join('\n');
|
|
};
|
|
|
|
onScroll = debounce(
|
|
({
|
|
scrollDirection,
|
|
scrollOffset,
|
|
}: {
|
|
scrollDirection: 'forward' | 'backward',
|
|
scrollOffset: number,
|
|
scrollUpdateWasRequested: boolean,
|
|
}) => {
|
|
const {current} = this.scrollRef;
|
|
const parent = current ? current.parentElement : null;
|
|
if (
|
|
this.props.stickyBottom &&
|
|
current &&
|
|
parent instanceof HTMLElement &&
|
|
scrollDirection === 'forward' &&
|
|
!this.state.shouldScrollToBottom &&
|
|
current.offsetHeight - parent.offsetHeight === scrollOffset
|
|
) {
|
|
this.setState({shouldScrollToBottom: true});
|
|
} else if (
|
|
this.props.stickyBottom &&
|
|
scrollDirection === 'backward' &&
|
|
this.state.shouldScrollToBottom
|
|
) {
|
|
this.setState({shouldScrollToBottom: false});
|
|
}
|
|
},
|
|
100,
|
|
);
|
|
|
|
getRow = ({index, style}) => {
|
|
const {
|
|
onAddFilter,
|
|
multiline,
|
|
zebra,
|
|
rows,
|
|
horizontallyScrollable,
|
|
} = this.props;
|
|
const {columnOrder, columnSizes, highlightedRows} = this.state;
|
|
const columnKeys = columnOrder
|
|
.map(k => (k.visible ? k.key : null))
|
|
.filter(Boolean);
|
|
|
|
return (
|
|
<TableRow
|
|
key={rows[index].key}
|
|
columnSizes={columnSizes}
|
|
columnKeys={columnKeys}
|
|
onMouseDown={e => this.onHighlight(e, rows[index], index)}
|
|
onMouseEnter={e => this.onMouseEnterRow(e, rows[index], index)}
|
|
multiline={multiline}
|
|
rowLineHeight={24}
|
|
highlighted={highlightedRows.has(rows[index].key)}
|
|
row={rows[index]}
|
|
index={index}
|
|
style={style}
|
|
onAddFilter={onAddFilter}
|
|
zebra={zebra}
|
|
horizontallyScrollable={horizontallyScrollable}
|
|
/>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
columns,
|
|
rows,
|
|
rowLineHeight,
|
|
hideHeader,
|
|
horizontallyScrollable,
|
|
} = this.props;
|
|
const {columnOrder, columnSizes} = this.state;
|
|
|
|
let computedWidth = 0;
|
|
if (horizontallyScrollable) {
|
|
for (const col in columnSizes) {
|
|
const width = columnSizes[col];
|
|
if (isNaN(width)) {
|
|
// non-numeric columns with, can't caluclate
|
|
computedWidth = 0;
|
|
break;
|
|
} else {
|
|
computedWidth += parseInt(width, 10);
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Container canOverflow={horizontallyScrollable}>
|
|
{hideHeader !== true && (
|
|
<TableHead
|
|
columnOrder={columnOrder}
|
|
onColumnOrder={this.onColumnOrder}
|
|
columns={columns}
|
|
onColumnResize={this.onColumnResize}
|
|
sortOrder={this.state.sortOrder}
|
|
columnSizes={columnSizes}
|
|
onSort={this.onSort}
|
|
horizontallyScrollable={horizontallyScrollable}
|
|
/>
|
|
)}
|
|
<Container>
|
|
{this.props.autoHeight ? (
|
|
this.props.rows.map((_, index) => this.getRow({index, style: {}}))
|
|
) : (
|
|
<AutoSizer>
|
|
{({width, height}) => (
|
|
<ContextMenu
|
|
buildItems={
|
|
this.props.buildContextMenuItems ||
|
|
this.buildContextMenuItems
|
|
}>
|
|
<List
|
|
itemCount={rows.length}
|
|
itemSize={index =>
|
|
(rows[index] && rows[index].height) ||
|
|
rowLineHeight ||
|
|
DEFAULT_ROW_HEIGHT
|
|
}
|
|
ref={this.tableRef}
|
|
width={Math.max(width, computedWidth)}
|
|
estimatedItemSize={rowLineHeight || DEFAULT_ROW_HEIGHT}
|
|
overscanCount={5}
|
|
innerRef={this.scrollRef}
|
|
onScroll={this.onScroll}
|
|
height={height}>
|
|
{this.getRow}
|
|
</List>
|
|
</ContextMenu>
|
|
)}
|
|
</AutoSizer>
|
|
)}
|
|
</Container>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default debounceRender(ManagedTable, 150, {maxWait: 250});
|