diff --git a/src/ui/components/table/ManagedTable.tsx b/src/ui/components/table/ManagedTable.tsx index d2748adec..3d584b36a 100644 --- a/src/ui/components/table/ManagedTable.tsx +++ b/src/ui/components/table/ManagedTable.tsx @@ -30,6 +30,7 @@ import debounceRender from 'react-debounce-render'; import debounce from 'lodash.debounce'; import {DEFAULT_ROW_HEIGHT} from './types'; import textContent from '../../../utils/textContent'; +import {notNull} from '../../../utils/typeUtils'; export type ManagedTableProps = { /** @@ -178,7 +179,7 @@ class ManagedTable extends React.Component< ? globalTableState[this.props.tableKey] : this.props.columnSizes || {}, highlightedRows: this.props.highlightedRows || new Set(), - sortOrder: this.props.initialSortOrder || null, + sortOrder: this.props.initialSortOrder || undefined, shouldScrollToBottom: Boolean(this.props.stickyBottom), }; @@ -216,11 +217,14 @@ class ManagedTable extends React.Component< } if (this.props.highlightedRows !== nextProps.highlightedRows) { - this.setState({highlightedRows: nextProps.highlightedRows}); + this.setState({highlightedRows: nextProps.highlightedRows || new Set()}); } // if columnOrder has changed - if (nextProps.columnOrder !== this.props.columnOrder) { + if ( + nextProps.columnOrder !== this.props.columnOrder && + nextProps.columnOrder + ) { if (this.tableRef && this.tableRef.current) { this.tableRef.current.resetAfterIndex(0, true); } @@ -413,7 +417,7 @@ class ManagedTable extends React.Component< highlightedRows.add(row.key); } else if (e.shiftKey && this.props.multiHighlight) { // range select - const lastItemKey = Array.from(this.state.highlightedRows).pop(); + const lastItemKey = Array.from(this.state.highlightedRows).pop()!; highlightedRows = new Set([ ...highlightedRows, ...this.selectInRange(lastItemKey, row.key), @@ -600,12 +604,12 @@ class ManagedTable extends React.Component< 100, ); - getRow = ({index, style}) => { + getRow = ({index, style}: {index: number; style: React.CSSProperties}) => { const {onAddFilter, multiline, zebra, rows} = this.props; const {columnOrder, columnSizes, highlightedRows} = this.state; const columnKeys = columnOrder .map(k => (k.visible ? k.key : null)) - .filter(Boolean); + .filter(notNull); return ( { const {current} = this.tableRef; if (current) { @@ -409,7 +413,7 @@ class ManagedTable extends React.Component< highlightedRows.add(row.key); } else if (e.shiftKey && this.props.multiHighlight) { // range select - const lastItemKey = Array.from(this.state.highlightedRows).pop(); + const lastItemKey = Array.from(this.state.highlightedRows).pop()!; highlightedRows = new Set([ ...highlightedRows, ...this.selectInRange(lastItemKey, row.key), @@ -434,11 +438,11 @@ class ManagedTable extends React.Component< let endIndex = -1; for (let i = 0; i < this.props.rows.size; i++) { // $FlowFixMe 0 <= newIndex <= rows.size - 1 - if (this.props.rows.get(i).key === fromKey) { + if (this.props.rows.get(i)!.key === fromKey) { startIndex = i; } // $FlowFixMe 0 <= newIndex <= rows.size - 1 - if (this.props.rows.get(i).key === toKey) { + if (this.props.rows.get(i)!.key === toKey) { endIndex = i; } if (endIndex > -1 && startIndex > -1) { @@ -453,7 +457,7 @@ class ManagedTable extends React.Component< ) { try { // $FlowFixMe 0 <= newIndex <= rows.size - 1 - selected.push(this.props.rows.get(i).key); + selected.push(this.props.rows.get(i)!.key); } catch (e) {} } @@ -472,7 +476,7 @@ class ManagedTable extends React.Component< ) { current.scrollToItem(index + 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)); this.onRowHighlighted(highlightedRows); } @@ -600,16 +604,16 @@ class ManagedTable extends React.Component< 100, ); - getRow = ({index, style}) => { + getRow = ({index, style}: {index: number; style: React.CSSProperties}) => { const {onAddFilter, multiline, zebra, rows} = this.props; const {columnOrder, columnSizes, highlightedRows} = this.state; const columnKeys = columnOrder .map(k => (k.visible ? k.key : null)) - .filter(Boolean); + .filter(notNull); const row = rows.get(index); if (row == null) { - return; + return null; } return ( @@ -689,7 +693,7 @@ class ManagedTable extends React.Component< - (rows.get(index) && rows.get(index).height) || + (rows.get(index) && rows.get(index)!.height) || rowLineHeight || DEFAULT_ROW_HEIGHT } diff --git a/src/ui/components/table/TableHead.tsx b/src/ui/components/table/TableHead.tsx index 0dea68ccb..4f3e40110 100644 --- a/src/ui/components/table/TableHead.tsx +++ b/src/ui/components/table/TableHead.tsx @@ -101,10 +101,10 @@ class TableHeadColumn extends PureComponent<{ title?: string; horizontallyScrollable?: boolean; }> { - ref: HTMLElement; + ref: HTMLElement | undefined; componentDidMount() { - if (this.props.horizontallyScrollable) { + if (this.props.horizontallyScrollable && this.ref) { // measure initial width this.onResize(this.ref.offsetWidth); } @@ -135,12 +135,12 @@ class TableHeadColumn extends PureComponent<{ let normalizedWidth: number | string = newWidth; // normalise number to a percentage if we were originally passed a percentage - if (isPercentage(width)) { + if (isPercentage(width) && this.ref) { const {parentElement} = this.ref; invariant(parentElement, 'expected there to be parentElement'); - const parentWidth = parentElement.clientWidth; - const {childNodes} = parentElement; + const parentWidth = parentElement!.clientWidth; + const {childNodes} = parentElement!; const lastElem = childNodes[childNodes.length - 1]; const right = @@ -260,7 +260,9 @@ export default class TableHead extends PureComponent<{ let lastResizable = true; - const colElems = {}; + const colElems: { + [key: string]: JSX.Element; + } = {}; for (const column of columnOrder) { if (!column.visible) { continue; diff --git a/src/ui/components/table/TableRow.tsx b/src/ui/components/table/TableRow.tsx index 22c8eaab7..f3cb2c6b2 100644 --- a/src/ui/components/table/TableRow.tsx +++ b/src/ui/components/table/TableRow.tsx @@ -60,18 +60,18 @@ const TableBodyRowContainer = styled(FlexRow)( (props: TableBodyRowContainerProps) => ({ backgroundColor: backgroundColor(props), 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': { backgroundColor: props.highlighted ? `${colors.white} !important` - : 'none', + : undefined, }, height: props.multiline ? 'auto' : props.rowLineHeight, lineHeight: `${String(props.rowLineHeight || DEFAULT_ROW_HEIGHT)}px`, - fontWeight: props.fontWeight || 'inherit', + fontWeight: props.fontWeight, overflow: 'hidden', width: '100%', userSelect: 'none', @@ -114,7 +114,7 @@ type Props = { highlighted: boolean; row: TableBodyRow; index: number; - style?: React.CSSProperties | null; + style?: React.CSSProperties | undefined; onAddFilter?: TableOnAddFilter; zebra?: boolean; }; @@ -160,7 +160,7 @@ export default class TableRow extends React.PureComponent { const isFilterable = Boolean(col && col.isFilterable); const value = col && col.value ? col.value : null; - const title = col && col.title ? col.title : null; + const title = col && col.title ? col.title : ''; return ( void; copyText?: string; highlightOnHover?: boolean;