Revert 2844 (#2980)

* Revert "review comments"

This reverts commit 97f2ecd88d.

* Revert "Switch to I, remove type parameter default"

This reverts commit a3073cc99b.

* Revert "Improve Table typing and remove annotations on callbacks"

This reverts commit defb0ea0dd.
This commit is contained in:
Sebastian Malton authored and GitHub committed 2021-06-07 12:02:15 -04:00
1 parent 97f2ecd88d
commit 60a19143b4
55 files changed
+471 -479

No files matched your search

+12 -23
View File
@@ -30,18 +30,19 @@ import { TableHead, TableHeadElem, TableHeadProps } from "./table-head";
import type { TableCellElem } from "./table-cell";
import { VirtualList } from "../virtual-list";
import { createPageParam } from "../../navigation";
import type { ItemObject } from "../../item.store";
import { getSortParams, setSortParams } from "./table.storage";
import { computed, makeObservable } from "mobx";
export type TableSortBy = string;
export type TableOrderBy = "asc" | "desc" | string;
export type TableSortParams = { sortBy: TableSortBy; orderBy: TableOrderBy };
export type TableSortCallback<Item> = (data: Item) => string | number | (string | number)[];
export type TableSortCallbacks<Item> = Record<string, TableSortCallback<Item>>;
export type TableSortCallback<D = any> = (data: D) => string | number | (string | number)[];
export type TableSortCallbacks = { [columnId: string]: TableSortCallback };
export interface TableProps<Item> extends React.DOMAttributes<HTMLDivElement> {
export interface TableProps extends React.DOMAttributes<HTMLDivElement> {
tableId?: string;
items?: Item[]; // Raw items data
items?: ItemObject[]; // Raw items data
className?: string;
autoSize?: boolean; // Setup auto-sizing for all columns (flex: 1 0)
selectable?: boolean; // Highlight rows on hover
@@ -51,7 +52,7 @@ export interface TableProps<Item> extends React.DOMAttributes<HTMLDivElement> {
* Define sortable callbacks for every column in <TableHead><TableCell sortBy="someCol"><TableHead>
* @sortItem argument in the callback is an object, provided in <TableRow sortItem={someColDataItem}/>
*/
sortable?: TableSortCallbacks<Item>;
sortable?: TableSortCallbacks;
sortSyncWithUrl?: boolean; // sorting state is managed globally from url params
sortByDefault?: Partial<TableSortParams>; // default sorting params
onSort?: (params: TableSortParams) => void; // callback on sort change, default: global sync with url
@@ -60,9 +61,8 @@ export interface TableProps<Item> extends React.DOMAttributes<HTMLDivElement> {
virtual?: boolean; // Use virtual list component to render only visible rows
rowPadding?: string;
rowLineHeight?: string;
customRowHeights?: (item: Item, lineHeight: number, paddings: number) => number;
customRowHeights?: (item: object, lineHeight: number, paddings: number) => number;
getTableRow?: (uid: string) => React.ReactElement<TableRowProps>;
renderRow?: (item: Item) => React.ReactElement<TableRowProps>;
}
export const sortByUrlParam = createPageParam({
@@ -74,8 +74,8 @@ export const orderByUrlParam = createPageParam({
});
@observer
export class Table<Item> extends React.Component<TableProps<Item>> {
static defaultProps: TableProps<any> = {
export class Table extends React.Component<TableProps> {
static defaultProps: TableProps = {
scrollable: true,
autoSize: true,
rowPadding: "8px",
@@ -83,7 +83,7 @@ export class Table<Item> extends React.Component<TableProps<Item>> {
sortSyncWithUrl: true,
};
constructor(props: TableProps<Item>) {
constructor(props: TableProps) {
super(props);
makeObservable(this);
}
@@ -171,20 +171,9 @@ export class Table<Item> extends React.Component<TableProps<Item>> {
});
}
private getContent() {
const { items, renderRow, children } = this.props;
const content = React.Children.toArray(children) as (TableRowElem | TableHeadElem)[];
if (renderRow) {
content.push(...items.map(renderRow));
}
return content;
}
renderRows() {
const { sortable, noItems, virtual, customRowHeights, rowLineHeight, rowPadding, items, getTableRow, selectedItemId, className } = this.props;
const content = this.getContent();
const { sortable, noItems, children, virtual, customRowHeights, rowLineHeight, rowPadding, items, getTableRow, selectedItemId, className } = this.props;
const content = React.Children.toArray(children) as (TableRowElem | TableHeadElem)[];
let rows: React.ReactElement<TableRowProps>[] = content.filter(elem => elem.type === TableRow);
let sortedItems = rows.length ? rows.map(row => row.props.sortItem) : [...items];