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 {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 (
<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 {DEFAULT_ROW_HEIGHT} from './types';
import textContent from '../../../utils/textContent';
import {notNull} from '../../../utils/typeUtils';
export type ManagedTableProps_immutable = {
/**
@@ -174,7 +175,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),
};
@@ -212,11 +213,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);
}
@@ -319,7 +323,7 @@ class ManagedTable extends React.Component<
highlightedRows.clear();
}
// $FlowFixMe 0 <= newIndex <= rows.size - 1
highlightedRows.add(rows.get(newIndex).key);
highlightedRows.add(rows.get(newIndex)!.key);
this.onRowHighlighted(highlightedRows, () => {
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<
<List
itemCount={rows.size}
itemSize={index =>
(rows.get(index) && rows.get(index).height) ||
(rows.get(index) && rows.get(index)!.height) ||
rowLineHeight ||
DEFAULT_ROW_HEIGHT
}

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

@@ -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;

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

@@ -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<Props> {
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 (
<TableBodyColumnContainer

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

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