jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ManagedTable

Browse Source 
Summary: fixing ts-strict errors

Reviewed By: jknoxville

Differential Revision: D17181143

fbshipit-source-id: b25cf07f3aad61e451fdb5e274faeaea62474f2d
This commit is contained in:
Daniel Büchele
2019-09-05 04:02:07 -07:00
committed by Facebook Github Bot
parent f4bb0f987f
commit 9ba36e2795
5 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/ui/components/table/ManagedTable.tsx
View File

@@ -30,6 +30,7 @@ import debounceRender from 'react-debounce-render';
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce';
import {DEFAULT_ROW_HEIGHT} from './types'; import {DEFAULT_ROW_HEIGHT} from './types';
import textContent from '../../../utils/textContent'; import textContent from '../../../utils/textContent';
import {notNull} from '../../../utils/typeUtils';
export type ManagedTableProps = { export type ManagedTableProps = {
/** /**
@@ -178,7 +179,7 @@ class ManagedTable extends React.Component<
? globalTableState[this.props.tableKey] ? globalTableState[this.props.tableKey]
: this.props.columnSizes || {}, : this.props.columnSizes || {},
highlightedRows: this.props.highlightedRows || new Set(), highlightedRows: this.props.highlightedRows || new Set(),
sortOrder: this.props.initialSortOrder || null, sortOrder: this.props.initialSortOrder || undefined,
shouldScrollToBottom: Boolean(this.props.stickyBottom), shouldScrollToBottom: Boolean(this.props.stickyBottom),
}; };
@@ -216,11 +217,14 @@ class ManagedTable extends React.Component<
} }
if (this.props.highlightedRows !== nextProps.highlightedRows) { if (this.props.highlightedRows !== nextProps.highlightedRows) {
this.setState({highlightedRows: nextProps.highlightedRows}); this.setState({highlightedRows: nextProps.highlightedRows || new Set()});
} }
// if columnOrder has changed // if columnOrder has changed
if (nextProps.columnOrder !== this.props.columnOrder) { if (
nextProps.columnOrder !== this.props.columnOrder &&
nextProps.columnOrder
) {
if (this.tableRef && this.tableRef.current) { if (this.tableRef && this.tableRef.current) {
this.tableRef.current.resetAfterIndex(0, true); this.tableRef.current.resetAfterIndex(0, true);
} }
@@ -413,7 +417,7 @@ class ManagedTable extends React.Component<
highlightedRows.add(row.key); highlightedRows.add(row.key);
} else if (e.shiftKey && this.props.multiHighlight) { } else if (e.shiftKey && this.props.multiHighlight) {
// range select // range select
const lastItemKey = Array.from(this.state.highlightedRows).pop(); const lastItemKey = Array.from(this.state.highlightedRows).pop()!;
highlightedRows = new Set([ highlightedRows = new Set([
...highlightedRows, ...highlightedRows,
...this.selectInRange(lastItemKey, row.key), ...this.selectInRange(lastItemKey, row.key),
@@ -600,12 +604,12 @@ class ManagedTable extends React.Component<
100, 100,
); );
getRow = ({index, style}) => { getRow = ({index, style}: {index: number; style: React.CSSProperties}) => {
const {onAddFilter, multiline, zebra, rows} = this.props; const {onAddFilter, multiline, zebra, rows} = this.props;
const {columnOrder, columnSizes, highlightedRows} = this.state; const {columnOrder, columnSizes, highlightedRows} = this.state;
const columnKeys = columnOrder const columnKeys = columnOrder
.map(k => (k.visible ? k.key : null)) .map(k => (k.visible ? k.key : null))
.filter(Boolean); .filter(notNull);
return ( return (
<TableRow <TableRow

30
src/ui/components/table/ManagedTable_immutable.tsx
View File

@@ -31,6 +31,7 @@ import debounceRender from 'react-debounce-render';
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce';
import {DEFAULT_ROW_HEIGHT} from './types'; import {DEFAULT_ROW_HEIGHT} from './types';
import textContent from '../../../utils/textContent'; import textContent from '../../../utils/textContent';
import {notNull} from '../../../utils/typeUtils';
export type ManagedTableProps_immutable = { export type ManagedTableProps_immutable = {
/** /**
@@ -174,7 +175,7 @@ class ManagedTable extends React.Component<
? globalTableState[this.props.tableKey] ? globalTableState[this.props.tableKey]
: this.props.columnSizes || {}, : this.props.columnSizes || {},
highlightedRows: this.props.highlightedRows || new Set(), highlightedRows: this.props.highlightedRows || new Set(),
sortOrder: this.props.initialSortOrder || null, sortOrder: this.props.initialSortOrder || undefined,
shouldScrollToBottom: Boolean(this.props.stickyBottom), shouldScrollToBottom: Boolean(this.props.stickyBottom),
}; };
@@ -212,11 +213,14 @@ class ManagedTable extends React.Component<
} }
if (this.props.highlightedRows !== nextProps.highlightedRows) { if (this.props.highlightedRows !== nextProps.highlightedRows) {
this.setState({highlightedRows: nextProps.highlightedRows}); this.setState({highlightedRows: nextProps.highlightedRows || new Set()});
} }
// if columnOrder has changed // if columnOrder has changed
if (nextProps.columnOrder !== this.props.columnOrder) { if (
nextProps.columnOrder !== this.props.columnOrder &&
nextProps.columnOrder
) {
if (this.tableRef && this.tableRef.current) { if (this.tableRef && this.tableRef.current) {
this.tableRef.current.resetAfterIndex(0, true); this.tableRef.current.resetAfterIndex(0, true);
} }
@@ -319,7 +323,7 @@ class ManagedTable extends React.Component<
highlightedRows.clear(); highlightedRows.clear();
} }
// $FlowFixMe 0 <= newIndex <= rows.size - 1 // $FlowFixMe 0 <= newIndex <= rows.size - 1
highlightedRows.add(rows.get(newIndex).key); highlightedRows.add(rows.get(newIndex)!.key);
this.onRowHighlighted(highlightedRows, () => { this.onRowHighlighted(highlightedRows, () => {
const {current} = this.tableRef; const {current} = this.tableRef;
if (current) { if (current) {
@@ -409,7 +413,7 @@ class ManagedTable extends React.Component<
highlightedRows.add(row.key); highlightedRows.add(row.key);
} else if (e.shiftKey && this.props.multiHighlight) { } else if (e.shiftKey && this.props.multiHighlight) {
// range select // range select
const lastItemKey = Array.from(this.state.highlightedRows).pop(); const lastItemKey = Array.from(this.state.highlightedRows).pop()!;
highlightedRows = new Set([ highlightedRows = new Set([
...highlightedRows, ...highlightedRows,
...this.selectInRange(lastItemKey, row.key), ...this.selectInRange(lastItemKey, row.key),
@@ -434,11 +438,11 @@ class ManagedTable extends React.Component<
let endIndex = -1; let endIndex = -1;
for (let i = 0; i < this.props.rows.size; i++) { for (let i = 0; i < this.props.rows.size; i++) {
// $FlowFixMe 0 <= newIndex <= rows.size - 1 // $FlowFixMe 0 <= newIndex <= rows.size - 1
if (this.props.rows.get(i).key === fromKey) { if (this.props.rows.get(i)!.key === fromKey) {
startIndex = i; startIndex = i;
} }
// $FlowFixMe 0 <= newIndex <= rows.size - 1 // $FlowFixMe 0 <= newIndex <= rows.size - 1
if (this.props.rows.get(i).key === toKey) { if (this.props.rows.get(i)!.key === toKey) {
endIndex = i; endIndex = i;
} }
if (endIndex > -1 && startIndex > -1) { if (endIndex > -1 && startIndex > -1) {
@@ -453,7 +457,7 @@ class ManagedTable extends React.Component<
) { ) {
try { try {
// $FlowFixMe 0 <= newIndex <= rows.size - 1 // $FlowFixMe 0 <= newIndex <= rows.size - 1
selected.push(this.props.rows.get(i).key); selected.push(this.props.rows.get(i)!.key);
} catch (e) {} } catch (e) {}
} }
@@ -472,7 +476,7 @@ class ManagedTable extends React.Component<
) { ) {
current.scrollToItem(index + 1); current.scrollToItem(index + 1);
// $FlowFixMe 0 <= newIndex <= rows.size - 1 // $FlowFixMe 0 <= newIndex <= rows.size - 1
const startKey = this.props.rows.get(dragStartIndex).key; const startKey = this.props.rows.get(dragStartIndex)!.key;
const highlightedRows = new Set(this.selectInRange(startKey, row.key)); const highlightedRows = new Set(this.selectInRange(startKey, row.key));
this.onRowHighlighted(highlightedRows); this.onRowHighlighted(highlightedRows);
} }
@@ -600,16 +604,16 @@ class ManagedTable extends React.Component<
100, 100,
); );
getRow = ({index, style}) => { getRow = ({index, style}: {index: number; style: React.CSSProperties}) => {
const {onAddFilter, multiline, zebra, rows} = this.props; const {onAddFilter, multiline, zebra, rows} = this.props;
const {columnOrder, columnSizes, highlightedRows} = this.state; const {columnOrder, columnSizes, highlightedRows} = this.state;
const columnKeys = columnOrder const columnKeys = columnOrder
.map(k => (k.visible ? k.key : null)) .map(k => (k.visible ? k.key : null))
.filter(Boolean); .filter(notNull);
const row = rows.get(index); const row = rows.get(index);
if (row == null) { if (row == null) {
return; return null;
} }
return ( return (
@@ -689,7 +693,7 @@ class ManagedTable extends React.Component<
<List <List
itemCount={rows.size} itemCount={rows.size}
itemSize={index => itemSize={index =>
(rows.get(index) && rows.get(index).height) || (rows.get(index) && rows.get(index)!.height) ||
rowLineHeight || rowLineHeight ||
DEFAULT_ROW_HEIGHT DEFAULT_ROW_HEIGHT
} }

14
src/ui/components/table/TableHead.tsx
View File

@@ -101,10 +101,10 @@ class TableHeadColumn extends PureComponent<{
title?: string; title?: string;
horizontallyScrollable?: boolean; horizontallyScrollable?: boolean;
}> { }> {
ref: HTMLElement; ref: HTMLElement | undefined;
componentDidMount() { componentDidMount() {
if (this.props.horizontallyScrollable) { if (this.props.horizontallyScrollable && this.ref) {
// measure initial width // measure initial width
this.onResize(this.ref.offsetWidth); this.onResize(this.ref.offsetWidth);
} }
@@ -135,12 +135,12 @@ class TableHeadColumn extends PureComponent<{
let normalizedWidth: number | string = newWidth; let normalizedWidth: number | string = newWidth;
// normalise number to a percentage if we were originally passed a percentage // normalise number to a percentage if we were originally passed a percentage
if (isPercentage(width)) { if (isPercentage(width) && this.ref) {
const {parentElement} = this.ref; const {parentElement} = this.ref;
invariant(parentElement, 'expected there to be parentElement'); invariant(parentElement, 'expected there to be parentElement');
const parentWidth = parentElement.clientWidth; const parentWidth = parentElement!.clientWidth;
const {childNodes} = parentElement; const {childNodes} = parentElement!;
const lastElem = childNodes[childNodes.length - 1]; const lastElem = childNodes[childNodes.length - 1];
const right = const right =
@@ -260,7 +260,9 @@ export default class TableHead extends PureComponent<{
let lastResizable = true; let lastResizable = true;
const colElems = {}; const colElems: {
[key: string]: JSX.Element;
} = {};
for (const column of columnOrder) { for (const column of columnOrder) {
if (!column.visible) { if (!column.visible) {
continue; continue;

12
src/ui/components/table/TableRow.tsx
View File

@@ -60,18 +60,18 @@ const TableBodyRowContainer = styled(FlexRow)(
(props: TableBodyRowContainerProps) => ({ (props: TableBodyRowContainerProps) => ({
backgroundColor: backgroundColor(props), backgroundColor: backgroundColor(props),
boxShadow: props.zebra ? 'none' : 'inset 0 -1px #E9EBEE', boxShadow: props.zebra ? 'none' : 'inset 0 -1px #E9EBEE',
color: props.highlighted ? colors.white : props.color || 'inherit', color: props.highlighted ? colors.white : props.color || undefined,
'& *': { '& *': {
color: props.highlighted ? `${colors.white} !important` : null, color: props.highlighted ? `${colors.white} !important` : undefined,
}, },
'& img': { '& img': {
backgroundColor: props.highlighted backgroundColor: props.highlighted
? `${colors.white} !important` ? `${colors.white} !important`
: 'none', : undefined,
}, },
height: props.multiline ? 'auto' : props.rowLineHeight, height: props.multiline ? 'auto' : props.rowLineHeight,
lineHeight: `${String(props.rowLineHeight || DEFAULT_ROW_HEIGHT)}px`, lineHeight: `${String(props.rowLineHeight || DEFAULT_ROW_HEIGHT)}px`,
fontWeight: props.fontWeight || 'inherit', fontWeight: props.fontWeight,
overflow: 'hidden', overflow: 'hidden',
width: '100%', width: '100%',
userSelect: 'none', userSelect: 'none',
@@ -114,7 +114,7 @@ type Props = {
highlighted: boolean; highlighted: boolean;
row: TableBodyRow; row: TableBodyRow;
index: number; index: number;
style?: React.CSSProperties | null; style?: React.CSSProperties | undefined;
onAddFilter?: TableOnAddFilter; onAddFilter?: TableOnAddFilter;
zebra?: boolean; zebra?: boolean;
}; };
@@ -160,7 +160,7 @@ export default class TableRow extends React.PureComponent<Props> {
const isFilterable = Boolean(col && col.isFilterable); const isFilterable = Boolean(col && col.isFilterable);
const value = col && col.value ? col.value : null; const value = col && col.value ? col.value : null;
const title = col && col.title ? col.title : null; const title = col && col.title ? col.title : '';
return ( return (
<TableBodyColumnContainer <TableBodyColumnContainer

10
src/ui/components/table/types.tsx
View File

@@ -44,13 +44,13 @@ export type TableHeaderColumn = {
export type TableBodyRow = { export type TableBodyRow = {
key: string; key: string;
height?: number | null | undefined; height?: number | undefined;
filterValue?: string | null | undefined; filterValue?: string | undefined;
backgroundColor?: string | null | undefined; backgroundColor?: string | undefined;
sortKey?: string | number; sortKey?: string | number;
style?: Object; style?: Object;
type?: string | null | undefined; type?: string | undefined;
highlightedBackgroundColor?: BackgroundColorProperty | null | undefined; highlightedBackgroundColor?: BackgroundColorProperty | undefined;
onDoubleClick?: (e: React.MouseEvent) => void; onDoubleClick?: (e: React.MouseEvent) => void;
copyText?: string; copyText?: string;
highlightOnHover?: boolean; highlightOnHover?: boolean;