From 625842c303c9ad5918c1363056c4904b22d33b64 Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Fri, 10 Jul 2020 12:32:46 -0400 Subject: [PATCH 01/26] Add initial typings --- types/index.d.ts | 574 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 574 insertions(+) create mode 100644 types/index.d.ts diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 00000000..777198a1 --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1,574 @@ +declare module 'react-base-table' { + export enum SortOrder { + ASC, + DESC, + } + + export enum Alignment { + LEFT, + RIGHT, + CENTER, + } + + export type FrozenDirection = 'left' | 'right' | true | false; + + export interface IColumn { + /** + * Class name for the column cell + */ + className?: string | (() => string); + /** + * Class name for the column header + */ + headerClassName?: string | (() => string); + /** + * Title of the column header + */ + title?: string; + /** + * Key used to retreive cell value from each data object + */ + dataKey: string; + /** + * Alignment of the column cell + */ + align?: Alignment; + /** + * The width of the column, gutter width is not included + */ + width: number; + /** + * Whether the column is frozen and what's the frozen side + * Could be changed if we decide to allow Frozen.RIGHT + */ + frozen?: FrozenDirection; + /** + * Whether the column is resizable, defaults to false + */ + resizable?: boolean; + /** + * Whether the column is sortable, defaults to false + */ + sortable?: boolean; + /** + * Custom column cell renderer + * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }` + */ + cellRenderer?: + | React.ReactNode + | (({ + cellData, + columns, + column, + columnIndex, + rowData, + rowIndex, + container, + isScrolling, + }: { + cellData: string | boolean | { [key: string]: any }; + columns: Omit[]; + column: Omit; + columnIndex: number; + rowData: any; + rowIndex: number; + container?: React.ReactInstance; + isScrolling: boolean | undefined; + }) => React.ReactNode); + /** + * Custom column header renderer + * The renderer receives props `{ columns, column, columnIndex, headerIndex, container }` + */ + headerRenderer?: ({ + columns, + column, + columnIndex, + headerIndex, + container, + }: { + columns: Omit[]; + column: Omit; + columnIndex: number; + headerIndex: number; + container: React.ReactInstance; + }) => React.ReactNode; + } + + export interface IColumnProps extends IColumn { + /** + * Custom style for the column cell, including header cells + */ + style?: React.CSSProperties; + /** + * Custom cell data getter + * Handler has shape of `({ columns, column, columnIndex, rowData, rowIndex }) => node + */ + dataGetter?: ({ + columns, + column, + columIndex, + rowData, + rowIndex, + }: { + columns: IColumn[]; + column: IColumn; + columnIndex: number; + rowData: any; + rowIndex: number; + }) => React.ReactNode; + /** + * Flex grow style, defaults to 0 + */ + flexGrow?: number; + /** + * Flex shrink style, defaults to 1 for flexible table and 0 for fixed table + */ + flexShrink?: number; + /** + * Maximum width of the column, used if the column is resizable + */ + maxWidth?: number; + /** + * Minimum width of the column, used if the column is resizable + */ + minWidth?: number; + /** + * Whether the column is hidden + */ + hidden?: boolean; + } + + export interface ICellRendererProps { + cellData: string | boolean | { [key: string]: any } | { [key: string]: any }[]; + columns: Omit[]; + column: Omit; + columnIndex: number; + rowData: T; + rowIndex: number; + container: React.ReactInstance; + isScrolling: boolean | undefined; + } + + export const Column: React.FC; + + export interface AutoResizerProps { + /** + * Class name for the component + */ + className?: string; + /** + * the width of the component, will be the container's width if not set + */ + width?: number; + /** + * the height of the component, will be the container's width if not set + */ + height?: number; + /** + * A callback function to render the children component + * The handler is of the shape of `({ width, height }) => node` + */ + children: ({ width, height }: { width: number | undefined; height: number | undefined }) => React.ReactNode; + /** + * A callback function when the size of the table container changed if the width and height are not set + * The handler is of the shape of `({ width, height }) => *` + */ + onResize?: ({ width, height }: { width: number; height: number }) => React.ReactNode; + } + + export const AutoResizer: React.FC; + + export interface ISortByParams { + /** + * Sort key + */ + key: string | undefined; + /** + * Sort order + */ + order: SortOrder.ASC | SortOrder.DESC | undefined; + /** + * Column being sorted + */ + column: + | Pick + | undefined; + } + + export interface IBaseTableProps { + /** + * Prefix for table's inner className + */ + classPrefix?: string; + /** + * Class name for the table + */ + className?: string; + /** + * Custom style for the table + */ + style?: React.CSSProperties; + /** + * A collection of Column + */ + children: IColumn | IColumn[] | null; + /** + * Columns for the table + */ + columns?: IColumnProps[]; + /** + * The data for the table + */ + data: { [key: string]: any }[] | undefined; + /** + * The data to be frozen to top, `rowIndex` is negative and starts from `-1` + */ + frozenData?: { [key: string]: any }[]; + /** + * The key field of each data item + */ + rowKey?: string | number; + /** + * The width of the table + */ + width: number; + /** + * The height of the table, will be ignored if `maxHeight` is set + */ + height?: number; + /** + * The max height of the table, the table's height will auto change when data changes, + * will turns to vertical scroll if reaches the max height + */ + maxHeight?: number; + /** + * The height of each table row, will be ignored if `estimatedRowHeight` is set + */ + rowHeight?: number; + /** + * Estimated row height, the real height will be measure dynamically according to the content + */ + estimatedRowHeight?: number; + /** + * The height of the table header, set to 0 to hide the header, could be an array to render multi headers. + */ + headerHeight?: number | number[]; + /** + * The height of the table footer + */ + footerHeight?: number; + /** + * Whether the width of the columns are fixed or flexible + */ + fixed?: boolean; + /** + * Whether the table is disabled + */ + disabled?: boolean; + /** + * Custom renderer on top of the table component + */ + overlayRenderer?: React.ReactNode | (() => React.ReactNode); + /** + * Custom renderer when the length of data is 0 + */ + emptyRenderer?: React.ReactNode | (() => React.ReactNode); + /** + * Custom footer renderer, available only if `footerHeight` is larger then 0 + */ + footerRenderer?: React.ReactNode | (() => React.ReactNode); + /** + * Custom header renderer + * The renderer receives props `{ cells, columns, headerIndex }` + */ + headerRenderer?: + | React.ReactNode + | (({ + cells, + columns, + headerIndex + }: { + cells: React.ReactNode[]; + columns: Omit; + headerIndex: number; + }) => React.ReactNode); + /** + * Custom row renderer + * The renderer receives props `{ isScrolling, cells, columns, rowData, rowIndex, depth }` + */ + rowRenderer?: + | React.ReactNode + | (({ + isScrolling, + cells, + columns, + rowData, + rowIndex, + depth + }: { + isScrolling: boolean | undefined; + cells: React.ReactNode[]; + columns: Omit; + rowData: any; + rowIndex: number; + depth: number; + }) => React.ReactNode); + /** + * Class name for the table header, could be a callback to return the class name + * The callback is of the shape of `({ columns, headerIndex }) => string` + */ + headerClassName?: + | string + | (({ columns, headerIndex }: { columns: IColumn[]; headerIndex: number }) => string); + /** + * Class name for the table row, could be a callback to return the class name + * The callback is of the shape of `({ columns, rowData, rowIndex }) => string` + */ + rowClassName?: + | string + | (({ + columns, + rowData, + rowIndex + }: { + columns: IColumn[]; + rowData: any; + rowIndex: number; + }) => string | undefined); + /** + * Extra props applied to header element + * The handler is of the shape of `({ columns, headerIndex }) object` + */ + headerProps?: + | object + | (({ columns, headerIndex }: { columns: IColumn[]; headerIndex: number }) => object); + /** + * Extra props applied to header cell element + * The handler is of the shape of `({ columns, column, columnIndex, headerIndex }) => object` + */ + headerCellProps?: + | object + | (({ + columns, + column, + columnIndex, + headerIndex + }: { + columns: IColumn[]; + column: IColumn; + columnIndex: number; + headerIndex: number; + }) => object); + /** + * Extra props applied to row element + * The handler is of the shape of `({ columns, rowData, rowIndex }) => object` + */ + rowProps?: + | object + | (({ + columns, + rowData, + rowIndex + }: { + columns: IColumn[]; + rowData: any; + rowIndex: number; + }) => object); + /** + * Extra props applied to row cell element + * The handler is of the shape of `({ columns, column, columnIndex, rowData, rowIndex }) => object` + */ + cellProps?: + | object + | (({ + columns, + column, + columnIndex, + rowData, + rowIndex + }: { + columns: IColumn[]; + column: IColumn; + columnIndex: number; + rowData: any; + rowIndex: number; + }) => object); + /** + * Extra props applied to ExpandIcon component + * The handler is of the shape of `({ rowData, rowIndex, depth, expandable, expanded }) => object` + */ + expandIconProps?: + | object + | (({ + rowData, + rowIndex, + depth, + expandable, + expanded + }: { + rowData: any; + rowIndex: number; + depth: number; + expandable: boolean; + expanded: boolean; + }) => object); + /** + * The key for the expand column which render the expand icon if the data is a tree + */ + expandColumnKey?: string; + /** + * Default expanded row keys when initialize the table + */ + defaultExpandedRowKeys?: string[] | number[]; + /** + * Controlled expanded row keys + */ + expandedRowKeys?: string[] | number[]; + /** + * A callback function when expand or collapse a tree node + * The handler is of the shape of `({ expanded, rowData, rowIndex, rowKey }) => *` + */ + onRowExpand?: ({ expanded, rowData, rowIndex, rowKey }) => void; + /** + * A callback function when the expanded row keys changed + * The handler is of the shape of `(expandedRowKeys) => *` + */ + onExpandedRowsChange?: (expandedRowKeys: string[] | number[]) => void; + /** + * The sort state for the table, will be ignored if `sortState` is set + */ + sortBy?: ISortByParams; + /** + * Multiple columns sort state for the table + * + * example: + * ```js + * { + * 'column-0': SortOrder.ASC, + * 'column-1': SortOrder.DESC, + * } + * ``` + */ + sortState?: { [key: string]: SortOrder.ASC | SortOrder.DESC | undefined }; + /** + * A callback function for the header cell click event + * The handler is of the shape of `({ column, key, order }) => *` + */ + onColumnSort?: ({ column, key, order }: ISortByParams) => void; + /** + * A callback function when resizing the column width + * The handler is of the shape of `({ column, width }) => *` + */ + onColumnResize?: ({ column, width }: { column: IColumnProps; width: number }) => void; + /** + * A callback function when resizing the column width ends + * The handler is of the shape of `({ column, width }) => *` + */ + onColumnResizeEnd?: ({ column, width }: { column: IColumnProps; width: number }) => void; + /** + * Adds an additional isScrolling parameter to the row renderer. + * This parameter can be used to show a placeholder row while scrolling. + */ + useIsScrolling?: boolean; + /** + * Number of rows to render above/below the visible bounds of the list + */ + overscanRowCount?: number; + /** + * Custom scrollbar size measurement + */ + getScrollbarSize?: () => number; + /** + * A callback function when scrolling the table + * The handler is of the shape of `({ scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested }) => *` + * + * `scrollLeft` and `scrollTop` are numbers. + * + * `horizontalDirection` and `verticalDirection` are either `forward` or `backward`. + * + * `scrollUpdateWasRequested` is a boolean. This value is true if the scroll was caused by `scrollTo*`, + * and false if it was the result of a user interaction in the browser. + */ + onScroll?: ({ + scrollLeft, + scrollTop, + horizontalScrollDirection, + verticalScrollDirection, + scrollUpdateWasRequested + }: { + scrollLeft: number; + scrollTop: number; + horizontalScrollDirection: 'forward' | 'backward'; + verticalScrollDirection: 'forward' | 'backward'; + scrollUpdateWasRequested: boolean; + }) => void; + /** + * A callback function when scrolling the table within `onEndReachedThreshold` of the bottom + * The handler is of the shape of `({ distanceFromEnd }) => *` + */ + onEndReached?: ({ distanceFromEnd }: { distanceFromEnd: number }) => void; + /** + * Threshold in pixels for calling `onEndReached`. + */ + onEndReachedThreshold?: number; + /** + * A callback function with information about the slice of rows that were just rendered + * The handler is of the shape of `({ overscanStartIndex, overscanStopIndex, startIndex， stopIndex }) => *` + */ + onRowsRendered?: ({ + overscanStartIndex, + overscanStopIndex, + startIndex, + stopIndex + }: { + overscanStartIndex: number; + overscanStopIndex: number; + startIndex: number; + stopIndex: number; + }) => void; + /** + * A callback function when the scrollbar presence state changed + * The handler is of the shape of `({ size, vertical, horizontal }) => *` + */ + onScrollbarPresenceChange?: ({ + size, + vertical, + horizontal + }: { + size: number; + vertical: boolean; + horizontal: boolean; + }) => void; + /** + * A object for the row event handlers + * Each of the keys is row event name, like `onClick`, `onDoubleClick` and etc. + * Each of the handlers is of the shape of `({ rowData, rowIndex, rowKey, event }) => object` + */ + rowEventHandlers?: { + [key: React.MouseEvent | React.KeyboardEvent]: ({ + rowData, + rowIndex, + rowKey, + event + }: { + rowData: any; + rowIndex: number; + rowKey: string; + event: React.MouseEvent | React.KeyboardEvent; + }) => object; + }; + /** + * A object for the custom components, like `ExpandIcon` and `SortIndicator` + */ + components?: ITableComponents; + } + + export interface ITableComponents { + TableCell?: React.ComponentType | (() => React.JSXElement); + TableHeaderCell?: React.ComponentType | (() => React.JSXElement); + ExpandIcon?: React.ComponentType | (() => React.JSXElement); + SortIndicator?: React.ComponentType | (() => React.JSXElement); + } + + export default class BaseTable extends React.Component {} +} From 6ad68532c0c2f4c4e32811237e9d3f3cc9942673 Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Fri, 10 Jul 2020 18:37:05 -0400 Subject: [PATCH 02/26] Add types path --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 16dbe385..e1a3d670 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "a react table component to display large data set with high performance and flexibility", "main": "lib/index.js", "module": "es/index.js", + "types": "dist/index.d.ts", "files": [ "lib/", "es/", From f081a0bdb5a321e6c485e054641edfe5143d02f2 Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Fri, 10 Jul 2020 18:48:15 -0400 Subject: [PATCH 03/26] Update types --- types/index.d.ts | 72 ++++++++++++++++++++++++------------------------ 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 777198a1..56fe433d 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -12,7 +12,7 @@ declare module 'react-base-table' { export type FrozenDirection = 'left' | 'right' | true | false; - export interface IColumn { + export interface Column { /** * Class name for the column cell */ @@ -86,15 +86,15 @@ declare module 'react-base-table' { headerIndex, container, }: { - columns: Omit[]; - column: Omit; + columns: Omit[]; + column: Omit; columnIndex: number; headerIndex: number; container: React.ReactInstance; }) => React.ReactNode; } - export interface IColumnProps extends IColumn { + export interface ColumnProps extends Column { /** * Custom style for the column cell, including header cells */ @@ -106,12 +106,12 @@ declare module 'react-base-table' { dataGetter?: ({ columns, column, - columIndex, + columnIndex, rowData, rowIndex, }: { - columns: IColumn[]; - column: IColumn; + columns: Column[]; + column: Column; columnIndex: number; rowData: any; rowIndex: number; @@ -138,10 +138,10 @@ declare module 'react-base-table' { hidden?: boolean; } - export interface ICellRendererProps { + export interface CellRendererProps { cellData: string | boolean | { [key: string]: any } | { [key: string]: any }[]; - columns: Omit[]; - column: Omit; + columns: Omit[]; + column: Omit; columnIndex: number; rowData: T; rowIndex: number; @@ -149,7 +149,7 @@ declare module 'react-base-table' { isScrolling: boolean | undefined; } - export const Column: React.FC; + export const Column: React.FC; export interface AutoResizerProps { /** @@ -178,7 +178,7 @@ declare module 'react-base-table' { export const AutoResizer: React.FC; - export interface ISortByParams { + export interface SortByParams { /** * Sort key */ @@ -186,12 +186,12 @@ declare module 'react-base-table' { /** * Sort order */ - order: SortOrder.ASC | SortOrder.DESC | undefined; + order: SortOrder | undefined; /** * Column being sorted */ column: - | Pick + | Pick | undefined; } @@ -211,11 +211,11 @@ declare module 'react-base-table' { /** * A collection of Column */ - children: IColumn | IColumn[] | null; + children: Column | Column[] | null; /** * Columns for the table */ - columns?: IColumnProps[]; + columns?: ColumnProps[]; /** * The data for the table */ @@ -289,7 +289,7 @@ declare module 'react-base-table' { headerIndex }: { cells: React.ReactNode[]; - columns: Omit; + columns: Omit; headerIndex: number; }) => React.ReactNode); /** @@ -308,7 +308,7 @@ declare module 'react-base-table' { }: { isScrolling: boolean | undefined; cells: React.ReactNode[]; - columns: Omit; + columns: Omit; rowData: any; rowIndex: number; depth: number; @@ -319,7 +319,7 @@ declare module 'react-base-table' { */ headerClassName?: | string - | (({ columns, headerIndex }: { columns: IColumn[]; headerIndex: number }) => string); + | (({ columns, headerIndex }: { columns: Column[]; headerIndex: number }) => string); /** * Class name for the table row, could be a callback to return the class name * The callback is of the shape of `({ columns, rowData, rowIndex }) => string` @@ -331,7 +331,7 @@ declare module 'react-base-table' { rowData, rowIndex }: { - columns: IColumn[]; + columns: Column[]; rowData: any; rowIndex: number; }) => string | undefined); @@ -341,7 +341,7 @@ declare module 'react-base-table' { */ headerProps?: | object - | (({ columns, headerIndex }: { columns: IColumn[]; headerIndex: number }) => object); + | (({ columns, headerIndex }: { columns: Column[]; headerIndex: number }) => object); /** * Extra props applied to header cell element * The handler is of the shape of `({ columns, column, columnIndex, headerIndex }) => object` @@ -354,8 +354,8 @@ declare module 'react-base-table' { columnIndex, headerIndex }: { - columns: IColumn[]; - column: IColumn; + columns: Column[]; + column: Column; columnIndex: number; headerIndex: number; }) => object); @@ -370,7 +370,7 @@ declare module 'react-base-table' { rowData, rowIndex }: { - columns: IColumn[]; + columns: Column[]; rowData: any; rowIndex: number; }) => object); @@ -387,8 +387,8 @@ declare module 'react-base-table' { rowData, rowIndex }: { - columns: IColumn[]; - column: IColumn; + columns: Column[]; + column: Column; columnIndex: number; rowData: any; rowIndex: number; @@ -437,7 +437,7 @@ declare module 'react-base-table' { /** * The sort state for the table, will be ignored if `sortState` is set */ - sortBy?: ISortByParams; + sortBy?: SortByParams; /** * Multiple columns sort state for the table * @@ -449,22 +449,22 @@ declare module 'react-base-table' { * } * ``` */ - sortState?: { [key: string]: SortOrder.ASC | SortOrder.DESC | undefined }; + sortState?: { [key: string]: SortOrder| undefined }; /** * A callback function for the header cell click event * The handler is of the shape of `({ column, key, order }) => *` */ - onColumnSort?: ({ column, key, order }: ISortByParams) => void; + onColumnSort?: ({ column, key, order }: SortByParams) => void; /** * A callback function when resizing the column width * The handler is of the shape of `({ column, width }) => *` */ - onColumnResize?: ({ column, width }: { column: IColumnProps; width: number }) => void; + onColumnResize?: ({ column, width }: { column: ColumnProps; width: number }) => void; /** * A callback function when resizing the column width ends * The handler is of the shape of `({ column, width }) => *` */ - onColumnResizeEnd?: ({ column, width }: { column: IColumnProps; width: number }) => void; + onColumnResizeEnd?: ({ column, width }: { column: ColumnProps; width: number }) => void; /** * Adds an additional isScrolling parameter to the row renderer. * This parameter can be used to show a placeholder row while scrolling. @@ -545,7 +545,7 @@ declare module 'react-base-table' { * Each of the handlers is of the shape of `({ rowData, rowIndex, rowKey, event }) => object` */ rowEventHandlers?: { - [key: React.MouseEvent | React.KeyboardEvent]: ({ + [key: string]: ({ rowData, rowIndex, rowKey, @@ -564,10 +564,10 @@ declare module 'react-base-table' { } export interface ITableComponents { - TableCell?: React.ComponentType | (() => React.JSXElement); - TableHeaderCell?: React.ComponentType | (() => React.JSXElement); - ExpandIcon?: React.ComponentType | (() => React.JSXElement); - SortIndicator?: React.ComponentType | (() => React.JSXElement); + TableCell?: React.ComponentType | (() => React.ReactElement); + TableHeaderCell?: React.ComponentType | (() => React.ReactElement); + ExpandIcon?: React.ComponentType | (() => React.ReactElement); + SortIndicator?: React.ComponentType | (() => React.ReactElement); } export default class BaseTable extends React.Component {} From ae1c43bde4781448f9cf56b869fb012d724b306a Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Fri, 10 Jul 2020 18:49:44 -0400 Subject: [PATCH 04/26] Add more row & column types --- types/index.d.ts | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/types/index.d.ts b/types/index.d.ts index 56fe433d..c4c5b1f8 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -571,4 +571,30 @@ declare module 'react-base-table' { } export default class BaseTable extends React.Component {} + + export interface RowExpandEvent { + expanded: boolean + rowData: { + id: string + parentId?: string + } & { [key: string]: any } + rowIndex: number + rowKey: string + } + export interface ExpandIconBaseProps { + expandable: boolean + expanded: boolean + depth?: number + onExpand: (expanded: boolean) => void + } + export const unflatten: any; + export interface BaseColumnInfo { + key: string + width: number + } + + export interface FrozenColumnInfo extends BaseColumnInfo { + frozen: true + label: string + } } From f858e7ef9e89b84272b2a6a806762254b39e3e3c Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Mon, 13 Jul 2020 13:58:04 -0400 Subject: [PATCH 05/26] Fix types path --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e1a3d670..6871ad0b 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "a react table component to display large data set with high performance and flexibility", "main": "lib/index.js", "module": "es/index.js", - "types": "dist/index.d.ts", + "types": "types/index.d.ts", "files": [ "lib/", "es/", From 4ae46512d2c8732a84a1c5e3f347f086310b9d64 Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Mon, 13 Jul 2020 15:45:37 -0400 Subject: [PATCH 06/26] Add generic params --- types/index.d.ts | 93 +++++++++++++++++++++++------------------------- 1 file changed, 44 insertions(+), 49 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index c4c5b1f8..76b9a85b 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,18 +1,11 @@ declare module 'react-base-table' { - export enum SortOrder { - ASC, - DESC, - } + export type SortOrder = 'asc' | 'desc'; - export enum Alignment { - LEFT, - RIGHT, - CENTER, - } + export type Alignment = 'left' | 'right' | 'center'; export type FrozenDirection = 'left' | 'right' | true | false; - export interface Column { + export interface Column { /** * Class name for the column cell */ @@ -28,7 +21,7 @@ declare module 'react-base-table' { /** * Key used to retreive cell value from each data object */ - dataKey: string; + dataKey?: string; /** * Alignment of the column cell */ @@ -66,14 +59,14 @@ declare module 'react-base-table' { container, isScrolling, }: { - cellData: string | boolean | { [key: string]: any }; - columns: Omit[]; - column: Omit; + cellData: unknown; + columns: Omit, 'headerRenderer'>[]; + column: Omit, 'headerRenderer'>; columnIndex: number; - rowData: any; + rowData: T; rowIndex: number; container?: React.ReactInstance; - isScrolling: boolean | undefined; + isScrolling?: boolean; }) => React.ReactNode); /** * Custom column header renderer @@ -86,15 +79,15 @@ declare module 'react-base-table' { headerIndex, container, }: { - columns: Omit[]; - column: Omit; + columns: Omit, 'cellRenderer'>[]; + column: Omit, 'cellRenderer'>; columnIndex: number; headerIndex: number; container: React.ReactInstance; }) => React.ReactNode; } - export interface ColumnProps extends Column { + export interface ColumnProps extends Column { /** * Custom style for the column cell, including header cells */ @@ -110,10 +103,10 @@ declare module 'react-base-table' { rowData, rowIndex, }: { - columns: Column[]; - column: Column; + columns: Column[]; + column: Column; columnIndex: number; - rowData: any; + rowData: T; rowIndex: number; }) => React.ReactNode; /** @@ -140,8 +133,8 @@ declare module 'react-base-table' { export interface CellRendererProps { cellData: string | boolean | { [key: string]: any } | { [key: string]: any }[]; - columns: Omit[]; - column: Omit; + columns: Omit, 'headerRenderer'>[]; + column: Omit, 'headerRenderer'>; columnIndex: number; rowData: T; rowIndex: number; @@ -149,7 +142,7 @@ declare module 'react-base-table' { isScrolling: boolean | undefined; } - export const Column: React.FC; + export function Column(props: ColumnProps): React.ReactElement>; export interface AutoResizerProps { /** @@ -195,7 +188,9 @@ declare module 'react-base-table' { | undefined; } - export interface IBaseTableProps { + type RowKey = string | number; + + export interface BaseTableProps { /** * Prefix for table's inner className */ @@ -211,11 +206,11 @@ declare module 'react-base-table' { /** * A collection of Column */ - children: Column | Column[] | null; + children: React.ReactElement | React.ReactElement[] | null; /** * Columns for the table */ - columns?: ColumnProps[]; + columns?: ColumnProps[]; /** * The data for the table */ @@ -227,7 +222,7 @@ declare module 'react-base-table' { /** * The key field of each data item */ - rowKey?: string | number; + rowKey?: RowKey; /** * The width of the table */ @@ -289,7 +284,7 @@ declare module 'react-base-table' { headerIndex }: { cells: React.ReactNode[]; - columns: Omit; + columns: Omit, 'headerRenderer'>; headerIndex: number; }) => React.ReactNode); /** @@ -308,8 +303,8 @@ declare module 'react-base-table' { }: { isScrolling: boolean | undefined; cells: React.ReactNode[]; - columns: Omit; - rowData: any; + columns: Omit, 'rowRenderer'>; + rowData: T; rowIndex: number; depth: number; }) => React.ReactNode); @@ -319,7 +314,7 @@ declare module 'react-base-table' { */ headerClassName?: | string - | (({ columns, headerIndex }: { columns: Column[]; headerIndex: number }) => string); + | (({ columns, headerIndex }: { columns: Column[]; headerIndex: number }) => string); /** * Class name for the table row, could be a callback to return the class name * The callback is of the shape of `({ columns, rowData, rowIndex }) => string` @@ -331,8 +326,8 @@ declare module 'react-base-table' { rowData, rowIndex }: { - columns: Column[]; - rowData: any; + columns: Column[]; + rowData: T; rowIndex: number; }) => string | undefined); /** @@ -341,7 +336,7 @@ declare module 'react-base-table' { */ headerProps?: | object - | (({ columns, headerIndex }: { columns: Column[]; headerIndex: number }) => object); + | (({ columns, headerIndex }: { columns: Column[]; headerIndex: number }) => object); /** * Extra props applied to header cell element * The handler is of the shape of `({ columns, column, columnIndex, headerIndex }) => object` @@ -354,8 +349,8 @@ declare module 'react-base-table' { columnIndex, headerIndex }: { - columns: Column[]; - column: Column; + columns: Column[]; + column: Column; columnIndex: number; headerIndex: number; }) => object); @@ -370,8 +365,8 @@ declare module 'react-base-table' { rowData, rowIndex }: { - columns: Column[]; - rowData: any; + columns: Column[]; + rowData: T; rowIndex: number; }) => object); /** @@ -387,10 +382,10 @@ declare module 'react-base-table' { rowData, rowIndex }: { - columns: Column[]; - column: Column; + columns: Column[]; + column: Column; columnIndex: number; - rowData: any; + rowData: T; rowIndex: number; }) => object); /** @@ -406,7 +401,7 @@ declare module 'react-base-table' { expandable, expanded }: { - rowData: any; + rowData: T; rowIndex: number; depth: number; expandable: boolean; @@ -449,7 +444,7 @@ declare module 'react-base-table' { * } * ``` */ - sortState?: { [key: string]: SortOrder| undefined }; + sortState?: { [key: string]: SortOrder }; /** * A callback function for the header cell click event * The handler is of the shape of `({ column, key, order }) => *` @@ -551,9 +546,9 @@ declare module 'react-base-table' { rowKey, event }: { - rowData: any; + rowData: T; rowIndex: number; - rowKey: string; + rowKey: RowKey; event: React.MouseEvent | React.KeyboardEvent; }) => object; }; @@ -570,7 +565,7 @@ declare module 'react-base-table' { SortIndicator?: React.ComponentType | (() => React.ReactElement); } - export default class BaseTable extends React.Component {} + export default class BaseTable extends React.Component, any> {} export interface RowExpandEvent { expanded: boolean @@ -579,7 +574,7 @@ declare module 'react-base-table' { parentId?: string } & { [key: string]: any } rowIndex: number - rowKey: string + rowKey: RowKey } export interface ExpandIconBaseProps { expandable: boolean From 8f17cf0c17acb5b3501aaef60747adc2ac06b54e Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Mon, 13 Jul 2020 15:48:16 -0400 Subject: [PATCH 07/26] Add missing type param --- types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index 76b9a85b..230dd8b8 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -214,7 +214,7 @@ declare module 'react-base-table' { /** * The data for the table */ - data: { [key: string]: any }[] | undefined; + data: T[] | undefined; /** * The data to be frozen to top, `rowIndex` is negative and starts from `-1` */ From e1f4fe93ec5e4e68748d35d3a89f12a2ea86e490 Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Mon, 13 Jul 2020 16:25:44 -0400 Subject: [PATCH 08/26] Update cellRenderer props --- types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index 230dd8b8..c43f59b6 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -132,7 +132,7 @@ declare module 'react-base-table' { } export interface CellRendererProps { - cellData: string | boolean | { [key: string]: any } | { [key: string]: any }[]; + cellData: unknown; columns: Omit, 'headerRenderer'>[]; column: Omit, 'headerRenderer'>; columnIndex: number; From b4847ed49ffe70d62b01c97dcba8e8a60f60c2cc Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Mon, 13 Jul 2020 21:09:50 -0400 Subject: [PATCH 09/26] Remove omit --- types/index.d.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index c43f59b6..db6d647e 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -60,8 +60,8 @@ declare module 'react-base-table' { isScrolling, }: { cellData: unknown; - columns: Omit, 'headerRenderer'>[]; - column: Omit, 'headerRenderer'>; + columns: Column[]; + column: Column; columnIndex: number; rowData: T; rowIndex: number; @@ -79,8 +79,8 @@ declare module 'react-base-table' { headerIndex, container, }: { - columns: Omit, 'cellRenderer'>[]; - column: Omit, 'cellRenderer'>; + columns: Column[]; + column: Column; columnIndex: number; headerIndex: number; container: React.ReactInstance; @@ -133,8 +133,8 @@ declare module 'react-base-table' { export interface CellRendererProps { cellData: unknown; - columns: Omit, 'headerRenderer'>[]; - column: Omit, 'headerRenderer'>; + columns: Column[]; + column: Column; columnIndex: number; rowData: T; rowIndex: number; @@ -284,7 +284,7 @@ declare module 'react-base-table' { headerIndex }: { cells: React.ReactNode[]; - columns: Omit, 'headerRenderer'>; + columns: Column; headerIndex: number; }) => React.ReactNode); /** @@ -303,7 +303,7 @@ declare module 'react-base-table' { }: { isScrolling: boolean | undefined; cells: React.ReactNode[]; - columns: Omit, 'rowRenderer'>; + columns: Column; rowData: T; rowIndex: number; depth: number; From 5f4467eb19ea82dd23e97283e310c18700f2a9ee Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Mon, 13 Jul 2020 21:43:57 -0400 Subject: [PATCH 10/26] Add callOrReturn type --- types/index.d.ts | 216 +++++++++++++++++++---------------------------- 1 file changed, 87 insertions(+), 129 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index db6d647e..bcfe2db2 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -5,15 +5,17 @@ declare module 'react-base-table' { export type FrozenDirection = 'left' | 'right' | true | false; + type CallOrReturn = T | (P extends any[] ? ((...p: P) => T) : ((p: P) => T)); + export interface Column { /** * Class name for the column cell */ - className?: string | (() => string); + className?: CallOrReturn; /** * Class name for the column header */ - headerClassName?: string | (() => string); + headerClassName?: CallOrReturn; /** * Title of the column header */ @@ -47,27 +49,16 @@ declare module 'react-base-table' { * Custom column cell renderer * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }` */ - cellRenderer?: - | React.ReactNode - | (({ - cellData, - columns, - column, - columnIndex, - rowData, - rowIndex, - container, - isScrolling, - }: { - cellData: unknown; - columns: Column[]; - column: Column; - columnIndex: number; - rowData: T; - rowIndex: number; - container?: React.ReactInstance; - isScrolling?: boolean; - }) => React.ReactNode); + cellRenderer?: CallOrReturn[]; + column: Column; + columnIndex: number; + rowData: T; + rowIndex: number; + container?: React.ReactInstance; + isScrolling?: boolean; + }>; /** * Custom column header renderer * The renderer receives props `{ columns, column, columnIndex, headerIndex, container }` @@ -263,150 +254,96 @@ declare module 'react-base-table' { /** * Custom renderer on top of the table component */ - overlayRenderer?: React.ReactNode | (() => React.ReactNode); + overlayRenderer?: CallOrReturn; /** * Custom renderer when the length of data is 0 */ - emptyRenderer?: React.ReactNode | (() => React.ReactNode); + emptyRenderer?: CallOrReturn; /** * Custom footer renderer, available only if `footerHeight` is larger then 0 */ - footerRenderer?: React.ReactNode | (() => React.ReactNode); + footerRenderer?: CallOrReturn; /** * Custom header renderer * The renderer receives props `{ cells, columns, headerIndex }` */ - headerRenderer?: - | React.ReactNode - | (({ - cells, - columns, - headerIndex - }: { - cells: React.ReactNode[]; - columns: Column; - headerIndex: number; - }) => React.ReactNode); + headerRenderer?: CallOrReturn; + headerIndex: number; + }>; /** * Custom row renderer * The renderer receives props `{ isScrolling, cells, columns, rowData, rowIndex, depth }` */ - rowRenderer?: - | React.ReactNode - | (({ - isScrolling, - cells, - columns, - rowData, - rowIndex, - depth - }: { - isScrolling: boolean | undefined; - cells: React.ReactNode[]; - columns: Column; - rowData: T; - rowIndex: number; - depth: number; - }) => React.ReactNode); + rowRenderer?: CallOrReturn; + rowData: T; + rowIndex: number; + depth: number; + }>; /** * Class name for the table header, could be a callback to return the class name * The callback is of the shape of `({ columns, headerIndex }) => string` */ - headerClassName?: - | string - | (({ columns, headerIndex }: { columns: Column[]; headerIndex: number }) => string); + headerClassName?: CallOrReturn[]; headerIndex: number }>; /** * Class name for the table row, could be a callback to return the class name * The callback is of the shape of `({ columns, rowData, rowIndex }) => string` */ - rowClassName?: - | string - | (({ - columns, - rowData, - rowIndex - }: { - columns: Column[]; - rowData: T; - rowIndex: number; - }) => string | undefined); + rowClassName?: CallOrReturn[]; + rowData: T; + rowIndex: number; + }>; /** * Extra props applied to header element * The handler is of the shape of `({ columns, headerIndex }) object` */ - headerProps?: - | object - | (({ columns, headerIndex }: { columns: Column[]; headerIndex: number }) => object); + headerProps?: CallOrReturn[]; headerIndex: number }>; /** * Extra props applied to header cell element * The handler is of the shape of `({ columns, column, columnIndex, headerIndex }) => object` */ - headerCellProps?: - | object - | (({ - columns, - column, - columnIndex, - headerIndex - }: { - columns: Column[]; - column: Column; - columnIndex: number; - headerIndex: number; - }) => object); + headerCellProps?: CallOrReturn[]; + column: Column; + columnIndex: number; + headerIndex: number; + }>; /** * Extra props applied to row element * The handler is of the shape of `({ columns, rowData, rowIndex }) => object` */ - rowProps?: - | object - | (({ - columns, - rowData, - rowIndex - }: { - columns: Column[]; - rowData: T; - rowIndex: number; - }) => object); + rowProps?: CallOrReturn[]; + rowData: T; + rowIndex: number; + } >; /** * Extra props applied to row cell element * The handler is of the shape of `({ columns, column, columnIndex, rowData, rowIndex }) => object` */ - cellProps?: - | object - | (({ - columns, - column, - columnIndex, - rowData, - rowIndex - }: { - columns: Column[]; - column: Column; - columnIndex: number; - rowData: T; - rowIndex: number; - }) => object); + cellProps?: CallOrReturn[]; + column: Column; + columnIndex: number; + rowData: T; + rowIndex: number; + }>; /** * Extra props applied to ExpandIcon component * The handler is of the shape of `({ rowData, rowIndex, depth, expandable, expanded }) => object` */ - expandIconProps?: - | object - | (({ - rowData, - rowIndex, - depth, - expandable, - expanded - }: { - rowData: T; - rowIndex: number; - depth: number; - expandable: boolean; - expanded: boolean; - }) => object); + expandIconProps?: CallOrReturn; /** * The key for the expand column which render the expand icon if the data is a tree */ @@ -559,10 +496,31 @@ declare module 'react-base-table' { } export interface ITableComponents { - TableCell?: React.ComponentType | (() => React.ReactElement); - TableHeaderCell?: React.ComponentType | (() => React.ReactElement); - ExpandIcon?: React.ComponentType | (() => React.ReactElement); - SortIndicator?: React.ComponentType | (() => React.ReactElement); + TableCell?: CallOrReturn; + TableHeaderCell?: CallOrReturn + ExpandIcon?: CallOrReturn void, + }>; + SortIndicator?: CallOrReturn; } export default class BaseTable extends React.Component, any> {} From 69e172531939c6ab6c53371e7d459ec5b4f48448 Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Tue, 14 Jul 2020 08:51:01 -0400 Subject: [PATCH 11/26] Update types --- types/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index bcfe2db2..476dd4c7 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -205,7 +205,7 @@ declare module 'react-base-table' { /** * The data for the table */ - data: T[] | undefined; + data?: T[]; /** * The data to be frozen to top, `rowIndex` is negative and starts from `-1` */ @@ -492,10 +492,10 @@ declare module 'react-base-table' { /** * A object for the custom components, like `ExpandIcon` and `SortIndicator` */ - components?: ITableComponents; + components?: TableComponents; } - export interface ITableComponents { + export interface TableComponents { TableCell?: CallOrReturn Date: Wed, 15 Jul 2020 10:43:58 -0400 Subject: [PATCH 12/26] Remove types --- types/index.d.ts | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 476dd4c7..0da5cf06 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -524,30 +524,4 @@ declare module 'react-base-table' { } export default class BaseTable extends React.Component, any> {} - - export interface RowExpandEvent { - expanded: boolean - rowData: { - id: string - parentId?: string - } & { [key: string]: any } - rowIndex: number - rowKey: RowKey - } - export interface ExpandIconBaseProps { - expandable: boolean - expanded: boolean - depth?: number - onExpand: (expanded: boolean) => void - } - export const unflatten: any; - export interface BaseColumnInfo { - key: string - width: number - } - - export interface FrozenColumnInfo extends BaseColumnInfo { - frozen: true - label: string - } } From e141a3f28f80b3b3182f54bbb55aae685dcd2289 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Sun, 9 Aug 2020 23:34:58 +0800 Subject: [PATCH 13/26] update types from Neo --- types/index.d.ts | 489 ++++++++++++++++++++++++----------------------- 1 file changed, 249 insertions(+), 240 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 0da5cf06..e04ad9fa 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -5,101 +5,70 @@ declare module 'react-base-table' { export type FrozenDirection = 'left' | 'right' | true | false; - type CallOrReturn = T | (P extends any[] ? ((...p: P) => T) : ((p: P) => T)); + export type RowKey = string | number; - export interface Column { + export type Size = { width: number; height: number }; + + export type CallOrReturn = T | (P extends any[] ? (...p: P) => T : (p: P) => T); + + export interface ColumnShape { + key: React.Key; /** * Class name for the column cell */ - className?: CallOrReturn; + className?: CallOrReturn< + string, + { + cellData: any; + columns: ColumnShape[]; + column: ColumnShape; + columnIndex: number; + rowData: T; + rowIndex: number; + } + >; /** * Class name for the column header */ - headerClassName?: CallOrReturn; + headerClassName?: CallOrReturn< + string, + { + columns: ColumnShape[]; + column: ColumnShape; + columnIndex: number; + headerIndex: number; + } + >; + /** + * Custom style for the column cell, including the header cells + */ + style?: React.CSSProperties; /** * Title of the column header */ title?: string; /** - * Key used to retreive cell value from each data object + * Data key for the cell value, could be "a.b.c" */ dataKey?: string; + /** + * Custom cell data getter + * The handler is of the shape of `({ columns, column, columnIndex, rowData, rowIndex }) => node` + */ + dataGetter?: CallOrReturn< + React.ReactNode, + { + columns: ColumnShape[]; + column: ColumnShape; + columnIndex: number; + rowData: T; + rowIndex: number; + } + >; /** * Alignment of the column cell */ align?: Alignment; - /** - * The width of the column, gutter width is not included - */ - width: number; - /** - * Whether the column is frozen and what's the frozen side - * Could be changed if we decide to allow Frozen.RIGHT - */ - frozen?: FrozenDirection; - /** - * Whether the column is resizable, defaults to false - */ - resizable?: boolean; - /** - * Whether the column is sortable, defaults to false - */ - sortable?: boolean; - /** - * Custom column cell renderer - * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }` - */ - cellRenderer?: CallOrReturn[]; - column: Column; - columnIndex: number; - rowData: T; - rowIndex: number; - container?: React.ReactInstance; - isScrolling?: boolean; - }>; - /** - * Custom column header renderer - * The renderer receives props `{ columns, column, columnIndex, headerIndex, container }` - */ - headerRenderer?: ({ - columns, - column, - columnIndex, - headerIndex, - container, - }: { - columns: Column[]; - column: Column; - columnIndex: number; - headerIndex: number; - container: React.ReactInstance; - }) => React.ReactNode; - } - - export interface ColumnProps extends Column { - /** - * Custom style for the column cell, including header cells - */ - style?: React.CSSProperties; - /** - * Custom cell data getter - * Handler has shape of `({ columns, column, columnIndex, rowData, rowIndex }) => node - */ - dataGetter?: ({ - columns, - column, - columnIndex, - rowData, - rowIndex, - }: { - columns: Column[]; - column: Column; - columnIndex: number; - rowData: T; - rowIndex: number; - }) => React.ReactNode; /** * Flex grow style, defaults to 0 */ @@ -108,6 +77,10 @@ declare module 'react-base-table' { * Flex shrink style, defaults to 1 for flexible table and 0 for fixed table */ flexShrink?: number; + /** + * The width of the column, gutter width is not included + */ + width: number; /** * Maximum width of the column, used if the column is resizable */ @@ -117,70 +90,61 @@ declare module 'react-base-table' { */ minWidth?: number; /** - * Whether the column is hidden + * Whether the column is frozen and what's the frozen side + * Could be changed if we decide to allow Frozen.RIGHT */ - hidden?: boolean; - } - - export interface CellRendererProps { - cellData: unknown; - columns: Column[]; - column: Column; - columnIndex: number; - rowData: T; - rowIndex: number; - container: React.ReactInstance; - isScrolling: boolean | undefined; - } - - export function Column(props: ColumnProps): React.ReactElement>; - - export interface AutoResizerProps { + frozen?: FrozenDirection; /** - * Class name for the component + * Whether the column is hidden */ - className?: string; + hidden?: bool; /** - * the width of the component, will be the container's width if not set + * Whether the column is resizable, defaults to false */ - width?: number; + resizable?: boolean; /** - * the height of the component, will be the container's width if not set + * Whether the column is sortable, defaults to false */ - height?: number; + sortable?: boolean; /** - * A callback function to render the children component - * The handler is of the shape of `({ width, height }) => node` + * Custom column cell renderer + * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }` */ - children: ({ width, height }: { width: number | undefined; height: number | undefined }) => React.ReactNode; + cellRenderer?: CallOrReturn< + React.ReactNode, + { + cellData: any; + columns: ColumnShape[]; + column: ColumnShape; + columnIndex: number; + rowData: T; + rowIndex: number; + container: any; + isScrolling?: boolean; + } + >; /** - * A callback function when the size of the table container changed if the width and height are not set - * The handler is of the shape of `({ width, height }) => *` + * Custom column header renderer + * The renderer receives props `{ columns, column, columnIndex, headerIndex, container }` */ - onResize?: ({ width, height }: { width: number; height: number }) => React.ReactNode; + headerRenderer?: CallOrReturn< + React.ReactNode, + { + columns: ColumnShape[]; + column: ColumnShape; + columnIndex: number; + headerIndex: number; + container: any; + } + >; + [key: string]: any; } - export const AutoResizer: React.FC; - - export interface SortByParams { - /** - * Sort key - */ - key: string | undefined; - /** - * Sort order - */ - order: SortOrder | undefined; - /** - * Column being sorted - */ - column: - | Pick - | undefined; + export class Column extends React.Component> { + static readonly Alignment: Alignment; + static readonly FrozenDirection: FrozenDirection; } - type RowKey = string | number; - export interface BaseTableProps { /** * Prefix for table's inner className @@ -197,11 +161,11 @@ declare module 'react-base-table' { /** * A collection of Column */ - children: React.ReactElement | React.ReactElement[] | null; + children?: React.ReactElement | React.ReactElement[] | null; /** * Columns for the table */ - columns?: ColumnProps[]; + columns?: ColumnShape[]; /** * The data for the table */ @@ -209,7 +173,7 @@ declare module 'react-base-table' { /** * The data to be frozen to top, `rowIndex` is negative and starts from `-1` */ - frozenData?: { [key: string]: any }[]; + frozenData?: T[]; /** * The key field of each data item */ @@ -267,83 +231,116 @@ declare module 'react-base-table' { * Custom header renderer * The renderer receives props `{ cells, columns, headerIndex }` */ - headerRenderer?: CallOrReturn; - headerIndex: number; - }>; + headerRenderer?: CallOrReturn< + React.ReactNode, + { + cells: React.ReactNode[]; + columns: ColumnShape; + headerIndex: number; + } + >; /** * Custom row renderer * The renderer receives props `{ isScrolling, cells, columns, rowData, rowIndex, depth }` */ - rowRenderer?: CallOrReturn; - rowData: T; - rowIndex: number; - depth: number; - }>; + rowRenderer?: CallOrReturn< + React.ReactNode, + { + isScrolling?: boolean; + cells: React.ReactNode[]; + columns: ColumnShape; + rowData: T; + rowIndex: number; + depth: number; + } + >; /** * Class name for the table header, could be a callback to return the class name * The callback is of the shape of `({ columns, headerIndex }) => string` */ - headerClassName?: CallOrReturn[]; headerIndex: number }>; + headerClassName?: CallOrReturn< + string, + { + columns: ColumnShape[]; + headerIndex: number; + } + >; /** * Class name for the table row, could be a callback to return the class name * The callback is of the shape of `({ columns, rowData, rowIndex }) => string` */ - rowClassName?: CallOrReturn[]; - rowData: T; - rowIndex: number; - }>; + rowClassName?: CallOrReturn< + string, + { + columns: ColumnShape[]; + rowData: T; + rowIndex: number; + } + >; /** * Extra props applied to header element * The handler is of the shape of `({ columns, headerIndex }) object` */ - headerProps?: CallOrReturn[]; headerIndex: number }>; + headerProps?: CallOrReturn< + object, + { + columns: ColumnShape[]; + headerIndex: number; + } + >; /** * Extra props applied to header cell element * The handler is of the shape of `({ columns, column, columnIndex, headerIndex }) => object` */ - headerCellProps?: CallOrReturn[]; - column: Column; - columnIndex: number; - headerIndex: number; - }>; + headerCellProps?: CallOrReturn< + object, + { + columns: ColumnShape[]; + column: ColumnShape; + columnIndex: number; + headerIndex: number; + } + >; /** * Extra props applied to row element * The handler is of the shape of `({ columns, rowData, rowIndex }) => object` */ - rowProps?: CallOrReturn[]; - rowData: T; - rowIndex: number; - } >; + rowProps?: CallOrReturn< + object, + { + columns: ColumnShape[]; + rowData: T; + rowIndex: number; + } + >; /** * Extra props applied to row cell element * The handler is of the shape of `({ columns, column, columnIndex, rowData, rowIndex }) => object` */ - cellProps?: CallOrReturn[]; - column: Column; - columnIndex: number; - rowData: T; - rowIndex: number; - }>; + cellProps?: CallOrReturn< + object, + { + columns: ColumnShape[]; + column: ColumnShape; + columnIndex: number; + rowData: T; + rowIndex: number; + } + >; /** * Extra props applied to ExpandIcon component * The handler is of the shape of `({ rowData, rowIndex, depth, expandable, expanded }) => object` */ - expandIconProps?: CallOrReturn; + expandIconProps?: CallOrReturn< + object, + { + rowData: T; + rowIndex: number; + depth: number; + expandable: boolean; + expanded: boolean; + } + >; /** * The key for the expand column which render the expand icon if the data is a tree */ @@ -351,25 +348,28 @@ declare module 'react-base-table' { /** * Default expanded row keys when initialize the table */ - defaultExpandedRowKeys?: string[] | number[]; + defaultExpandedRowKeys?: RowKey[]; /** * Controlled expanded row keys */ - expandedRowKeys?: string[] | number[]; + expandedRowKeys?: RowKey[]; /** * A callback function when expand or collapse a tree node * The handler is of the shape of `({ expanded, rowData, rowIndex, rowKey }) => *` */ - onRowExpand?: ({ expanded, rowData, rowIndex, rowKey }) => void; + onRowExpand?: (args: { expanded: boolean; rowData: T; rowIndex: number; rowKey: RowKey }) => void; /** * A callback function when the expanded row keys changed * The handler is of the shape of `(expandedRowKeys) => *` */ - onExpandedRowsChange?: (expandedRowKeys: string[] | number[]) => void; + onExpandedRowsChange?: (expandedRowKeys: RowKey[]) => void; /** * The sort state for the table, will be ignored if `sortState` is set */ - sortBy?: SortByParams; + sortBy?: { + key: React.Key; + order: SortOrder; + }; /** * Multiple columns sort state for the table * @@ -381,22 +381,24 @@ declare module 'react-base-table' { * } * ``` */ - sortState?: { [key: string]: SortOrder }; + sortState?: { + [key: React.Key]: SortOrder; + }; /** * A callback function for the header cell click event * The handler is of the shape of `({ column, key, order }) => *` */ - onColumnSort?: ({ column, key, order }: SortByParams) => void; + onColumnSort?: (args: { column: ColumnShape; key: React.Key; order: SortOrder }) => void; /** * A callback function when resizing the column width * The handler is of the shape of `({ column, width }) => *` */ - onColumnResize?: ({ column, width }: { column: ColumnProps; width: number }) => void; + onColumnResize?: (args: { column: ColumnShape; width: number }) => void; /** * A callback function when resizing the column width ends * The handler is of the shape of `({ column, width }) => *` */ - onColumnResizeEnd?: ({ column, width }: { column: ColumnProps; width: number }) => void; + onColumnResizeEnd?: (args: { column: ColumnShape; width: number }) => void; /** * Adds an additional isScrolling parameter to the row renderer. * This parameter can be used to show a placeholder row while scrolling. @@ -421,13 +423,7 @@ declare module 'react-base-table' { * `scrollUpdateWasRequested` is a boolean. This value is true if the scroll was caused by `scrollTo*`, * and false if it was the result of a user interaction in the browser. */ - onScroll?: ({ - scrollLeft, - scrollTop, - horizontalScrollDirection, - verticalScrollDirection, - scrollUpdateWasRequested - }: { + onScroll?: (args: { scrollLeft: number; scrollTop: number; horizontalScrollDirection: 'forward' | 'backward'; @@ -438,7 +434,7 @@ declare module 'react-base-table' { * A callback function when scrolling the table within `onEndReachedThreshold` of the bottom * The handler is of the shape of `({ distanceFromEnd }) => *` */ - onEndReached?: ({ distanceFromEnd }: { distanceFromEnd: number }) => void; + onEndReached?: (args: { distanceFromEnd: number }) => void; /** * Threshold in pixels for calling `onEndReached`. */ @@ -447,12 +443,7 @@ declare module 'react-base-table' { * A callback function with information about the slice of rows that were just rendered * The handler is of the shape of `({ overscanStartIndex, overscanStopIndex, startIndex， stopIndex }) => *` */ - onRowsRendered?: ({ - overscanStartIndex, - overscanStopIndex, - startIndex, - stopIndex - }: { + onRowsRendered?: (args: { overscanStartIndex: number; overscanStopIndex: number; startIndex: number; @@ -462,66 +453,84 @@ declare module 'react-base-table' { * A callback function when the scrollbar presence state changed * The handler is of the shape of `({ size, vertical, horizontal }) => *` */ - onScrollbarPresenceChange?: ({ - size, - vertical, - horizontal - }: { - size: number; - vertical: boolean; - horizontal: boolean; - }) => void; + onScrollbarPresenceChange?: (args: { size: number; vertical: boolean; horizontal: boolean }) => void; /** * A object for the row event handlers * Each of the keys is row event name, like `onClick`, `onDoubleClick` and etc. * Each of the handlers is of the shape of `({ rowData, rowIndex, rowKey, event }) => object` */ rowEventHandlers?: { - [key: string]: ({ - rowData, - rowIndex, - rowKey, - event - }: { - rowData: T; - rowIndex: number; - rowKey: RowKey; - event: React.MouseEvent | React.KeyboardEvent; - }) => object; + [key: string]: (args: { rowData: T; rowIndex: number; rowKey: RowKey; event: React.SyntheticEvent }) => object; }; /** * A object for the custom components, like `ExpandIcon` and `SortIndicator` */ components?: TableComponents; + [key: string]: any; } export interface TableComponents { - TableCell?: CallOrReturn; - TableHeaderCell?: CallOrReturn - ExpandIcon?: CallOrReturn void, + TableHeaderCell?: React.ElementType<{ + className: string; + columns: ColumnShape[]; + column: ColumnShape; + columnIndex: number; + headerIndex: number; + container: any; }>; - SortIndicator?: CallOrReturn void; + [key: string]: any; }>; + SortIndicator?: React.ElementType<{ + sortOrder: SortOrder; + className: string; + }>; + } + + export default class BaseTable extends React.Component, any> { + static readonly Column: typeof Column; + static readonly PlaceholderKey = '__placeholder__'; } - export default class BaseTable extends React.Component, any> {} + export interface AutoResizerProps { + /** + * Class name for the component + */ + className?: string; + /** + * the width of the component, will be the container's width if not set + */ + width?: number; + /** + * the height of the component, will be the container's width if not set + */ + height?: number; + /** + * A callback function to render the children component + * The handler is of the shape of `({ width, height }) => node` + */ + children: (size: Size) => React.ReactNode; + /** + * A callback function when the size of the table container changed if the width and height are not set + * The handler is of the shape of `({ width, height }) => *` + */ + onResize?: (size: Size) => void; + } + + export const AutoResizer: React.FC; } From 971b60739abe88dd3d09f2e5736f70ea638fe7da Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Mon, 10 Aug 2020 12:02:21 +0800 Subject: [PATCH 14/26] fix typo --- types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index e04ad9fa..3e5202d5 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -97,7 +97,7 @@ declare module 'react-base-table' { /** * Whether the column is hidden */ - hidden?: bool; + hidden?: boolean; /** * Whether the column is resizable, defaults to false */ From ba2ffe4c8cc4b9cfbaebd66b8f2eea19e1864136 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Mon, 10 Aug 2020 17:53:55 +0800 Subject: [PATCH 15/26] fix column consts --- types/index.d.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 3e5202d5..40fff9b2 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -141,8 +141,17 @@ declare module 'react-base-table' { } export class Column extends React.Component> { - static readonly Alignment: Alignment; - static readonly FrozenDirection: FrozenDirection; + static readonly Alignment: { + readonly LEFT: 'left'; + readonly CENTER: 'center'; + readonly RIGHT: 'right'; + }; + static readonly FrozenDirection: { + readonly LEFT: 'left'; + readonly RIGHT: 'right'; + readonly DEFAULT: true; + readonly NONE: false; + }; } export interface BaseTableProps { From 0f04bf7697287796fbf0ba8f357f16e05367275e Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Thu, 13 Aug 2020 20:12:50 -0400 Subject: [PATCH 16/26] Add some util types --- types/index.d.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/types/index.d.ts b/types/index.d.ts index 40fff9b2..6ff70309 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -542,4 +542,10 @@ declare module 'react-base-table' { } export const AutoResizer: React.FC; + + export type getScrollbarSize = (recalculate?: boolean) => number; + export type isObjectEqual = (objA: object, objB: object) => boolean; + export type hasChildren = (data: { children: any[] | undefined }) => boolean; + export type getValue = (obj: object, path: string, defaultValue: any) => any; + export type normalizeColumns = (elements: React.ReactElement) => React.ReactElement[]; } From 26aaafc33585368b3bf638194cc7c9821afa6c48 Mon Sep 17 00:00:00 2001 From: Jameson Hill Date: Thu, 13 Aug 2020 20:16:13 -0400 Subject: [PATCH 17/26] Fix normalizeColumns arg type --- types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index 6ff70309..a53eece4 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -547,5 +547,5 @@ declare module 'react-base-table' { export type isObjectEqual = (objA: object, objB: object) => boolean; export type hasChildren = (data: { children: any[] | undefined }) => boolean; export type getValue = (obj: object, path: string, defaultValue: any) => any; - export type normalizeColumns = (elements: React.ReactElement) => React.ReactElement[]; + export type normalizeColumns = (elements: React.ReactElement[]) => React.ReactElement[]; } From 04f4a10d599cb57159352d2e11abb94b74ce8940 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Fri, 14 Aug 2020 11:44:52 +0800 Subject: [PATCH 18/26] add types for utils from Neo --- types/index.d.ts | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index a53eece4..0ad6db25 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -170,7 +170,7 @@ declare module 'react-base-table' { /** * A collection of Column */ - children?: React.ReactElement | React.ReactElement[] | null; + children?: React.ReactNode; /** * Columns for the table */ @@ -543,9 +543,26 @@ declare module 'react-base-table' { export const AutoResizer: React.FC; - export type getScrollbarSize = (recalculate?: boolean) => number; - export type isObjectEqual = (objA: object, objB: object) => boolean; - export type hasChildren = (data: { children: any[] | undefined }) => boolean; - export type getValue = (obj: object, path: string, defaultValue: any) => any; - export type normalizeColumns = (elements: React.ReactElement[]) => React.ReactElement[]; + export function renderElement(renderer: React.ReactElement | function, props?: object): React.ReactNode; + + export function normalizeColumns(elements: React.ReactNode[]): ColumnShape[]; + + export function isObjectEqual(objA: any, objB: any, ignoreFunction?: boolean): boolean; + + export function callOrReturn(funcOrValue: CallOrReturn, ...args: P): T; + + export function hasChildren(data: object): boolean; + + export function unflatten(array: T[], rootId?: any, dataKey?: string, parentKey?: string): T[]; + + export function flattenOnKeys( + tree: T[], + keys?: RowKey[], + depthMap?: { [key: RowKey]: number }, + dataKey?: string + ): T[]; + + export function getValue(object: any, path?: string, defaultValue?: any): any; + + export function getScrollbarSize(recalculate?: boolean): number; } From 726adc726eb2dea7974c3c62f7c12f4ee31b8754 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Fri, 14 Aug 2020 12:53:32 +0800 Subject: [PATCH 19/26] update --- types/index.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/types/index.d.ts b/types/index.d.ts index 0ad6db25..abb1e3cc 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -471,6 +471,10 @@ declare module 'react-base-table' { rowEventHandlers?: { [key: string]: (args: { rowData: T; rowIndex: number; rowKey: RowKey; event: React.SyntheticEvent }) => object; }; + /** + * whether to ignore function properties while comparing column definition + */ + ignoreFunctionInColumnCompare?: boolean; /** * A object for the custom components, like `ExpandIcon` and `SortIndicator` */ From 76af13dcc71c0f6b9797cf04082f12f261a9a057 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Fri, 14 Aug 2020 13:16:06 +0800 Subject: [PATCH 20/26] fix unflattern return type --- types/index.d.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index abb1e3cc..c166d939 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -557,7 +557,12 @@ declare module 'react-base-table' { export function hasChildren(data: object): boolean; - export function unflatten(array: T[], rootId?: any, dataKey?: string, parentKey?: string): T[]; + export function unflatten( + array: T[], + rootId?: any, + dataKey?: string, + parentKey?: string + ): (T & { children?: T[] })[]; export function flattenOnKeys( tree: T[], From 1b0d5f6956b202c2a815cca0b0030387bc9393cb Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Fri, 14 Aug 2020 14:47:59 +0800 Subject: [PATCH 21/26] add types for methods --- src/BaseTable.js | 5 ++- types/index.d.ts | 99 ++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 91 insertions(+), 13 deletions(-) diff --git a/src/BaseTable.js b/src/BaseTable.js index 27a2a43f..2b528bcf 100644 --- a/src/BaseTable.js +++ b/src/BaseTable.js @@ -208,6 +208,9 @@ class BaseTable extends React.PureComponent { /** * Reset cached offsets for positioning after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided) + * + * @param {number} rowIndex + * @param {boolean} shouldForceUpdate */ resetAfterRowIndex(rowIndex = 0, shouldForceUpdate = true) { if (!this.props.estimatedRowHeight) return; @@ -279,7 +282,7 @@ class BaseTable extends React.PureComponent { * - `center` - Center align the row within the table. * - `end` - Align the row to the bottom side of the table. * - `start` - Align the row to the top side of the table. - + * * @param {number} rowIndex * @param {string} align */ diff --git a/types/index.d.ts b/types/index.d.ts index c166d939..f471d4b1 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -119,7 +119,7 @@ declare module 'react-base-table' { columnIndex: number; rowData: T; rowIndex: number; - container: any; + container: BaseTable; isScrolling?: boolean; } >; @@ -134,7 +134,7 @@ declare module 'react-base-table' { column: ColumnShape; columnIndex: number; headerIndex: number; - container: any; + container: BaseTable; } >; [key: string]: any; @@ -402,12 +402,12 @@ declare module 'react-base-table' { * A callback function when resizing the column width * The handler is of the shape of `({ column, width }) => *` */ - onColumnResize?: (args: { column: ColumnShape; width: number }) => void; + onColumnResize?: (args: { column: ColumnShape; width: number }) => void; /** * A callback function when resizing the column width ends * The handler is of the shape of `({ column, width }) => *` */ - onColumnResizeEnd?: (args: { column: ColumnShape; width: number }) => void; + onColumnResizeEnd?: (args: { column: ColumnShape; width: number }) => void; /** * Adds an additional isScrolling parameter to the row renderer. * This parameter can be used to show a placeholder row while scrolling. @@ -482,25 +482,25 @@ declare module 'react-base-table' { [key: string]: any; } - export interface TableComponents { + export interface TableComponents { TableCell?: React.ElementType<{ className: string; isScrolling?: boolean; cellData: any; - columns: ColumnShape[]; - column: ColumnShape; + columns: ColumnShape[]; + column: ColumnShape; columnIndex: number; - rowData: any; + rowData: T; rowIndex: number; - container: any; + container: BaseTable; }>; TableHeaderCell?: React.ElementType<{ className: string; - columns: ColumnShape[]; - column: ColumnShape; + columns: ColumnShape[]; + column: ColumnShape; columnIndex: number; headerIndex: number; - container: any; + container: BaseTable; }>; ExpandIcon?: React.ElementType<{ depth: number; @@ -518,6 +518,81 @@ declare module 'react-base-table' { export default class BaseTable extends React.Component, any> { static readonly Column: typeof Column; static readonly PlaceholderKey = '__placeholder__'; + + /** + * Get the DOM node of the table + */ + getDOMNode(): HTMLDivElement | null; + /** + * Get the column manager + */ + getColumnManager(): any; + /** + * Get internal `expandedRowKeys` state + */ + getExpandedRowKeys(): RowKey[]; + /** + * Get the expanded state, fallback to normal state if not expandable. + */ + getExpandedState(): { + expandedData: T[]; + expandedRowKeys: RowKey[]; + expandedDepthMap: { [key: RowKey]: number }; + }; + /** + * Get the total height of all rows, including expanded rows. + */ + getTotalRowsHeight(): number; + /** + * Get the total width of all columns. + */ + getTotalColumnsWidth(): number; + /** + * Forcefully re-render the inner Grid component. + * + * Calling `forceUpdate` on `Table` may not re-render the inner Grid since it uses `shallowCompare` as a performance optimization. + * Use this method if you want to manually trigger a re-render. + * This may be appropriate if the underlying row data has changed but the row sizes themselves have not. + */ + forceUpdateTable(): void; + /** + * Reset cached offsets for positioning after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided) + */ + resetAfterRowIndex(rowIndex?: number, shouldForceUpdate?: boolean): void; + /** + * Reset row height cache, useful if `data` changed entirely, should be used only in dynamic mode(estimatedRowHeight is provided) + */ + resetRowHeightCache(): void; + /** + * Scroll to the specified offset. + * Useful for animating position changes. + */ + scrollToPosition(offset: { scrollLeft: number; scrollTop: number }): void; + /** + * Scroll to the specified offset vertically. + */ + scrollToTop(scrollTop: number): void; + /** + * Scroll to the specified offset horizontally. + */ + scrollToLeft(scrollLeft: number): void; + /** + * Scroll to the specified row. + * By default, the table will scroll as little as possible to ensure the row is visible. + * You can control the alignment of the row though by specifying an align property. Acceptable values are: + * + * - `auto` (default) - Scroll as little as possible to ensure the row is visible. + * - `smart` - Same as `auto` if it is less than one viewport away, or it's the same as`center`. + * - `center` - Center align the row within the table. + * - `end` - Align the row to the bottom side of the table. + * - `start` - Align the row to the top side of the table. + */ + scrollToRow(rowIndex?: number, align?: 'auto' | 'smart' | 'center' | 'end' | 'start'): void; + /** + * Set `expandedRowKeys` manually. + * This method is available only if `expandedRowKeys` is uncontrolled. + */ + setExpandedRowKeys(expandedRowKeys: RowKey[]): void; } export interface AutoResizerProps { From a080f553cfa6ec63092b798e58ed0565cc18cb38 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Fri, 14 Aug 2020 22:36:40 +0800 Subject: [PATCH 22/26] update --- types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index f471d4b1..615bc068 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -626,7 +626,7 @@ declare module 'react-base-table' { export function normalizeColumns(elements: React.ReactNode[]): ColumnShape[]; - export function isObjectEqual(objA: any, objB: any, ignoreFunction?: boolean): boolean; + export function isObjectEqual(objA: object, objB: object, ignoreFunction?: boolean): boolean; export function callOrReturn(funcOrValue: CallOrReturn, ...args: P): T; From 397bf302c4cd1fd98fa0cdd2dc75883dc8e5a420 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Sun, 16 Aug 2020 16:09:57 +0800 Subject: [PATCH 23/26] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e39a0e7d..cf01d4ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - feat: add `ignoreFunctionInColumnCompare` to solve closure problem in renderers - chore: skip unnecessary cloneElement in `renderElement` +- feat: add type declarations ## v1.10.9 (2020-08-13) From 5b81efae454760866011249f122eda25d8633253 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Sun, 16 Aug 2020 18:33:13 +0800 Subject: [PATCH 24/26] fix --- package.json | 1 + types/index.d.ts | 7 +++++-- yarn.lock | 18 ++++++++++++++++++ 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e42477af..913e0c23 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@babel/plugin-transform-runtime": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", + "@types/react": "^16.9.46", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^9.0.0", "babel-jest": "^23.4.2", diff --git a/types/index.d.ts b/types/index.d.ts index 615bc068..681bbfe6 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -622,13 +622,16 @@ declare module 'react-base-table' { export const AutoResizer: React.FC; - export function renderElement(renderer: React.ReactElement | function, props?: object): React.ReactNode; + export function renderElement( + renderer: React.ReactElement | ((props: Partial) => React.ReactNode), + props?: T + ): React.ReactNode; export function normalizeColumns(elements: React.ReactNode[]): ColumnShape[]; export function isObjectEqual(objA: object, objB: object, ignoreFunction?: boolean): boolean; - export function callOrReturn(funcOrValue: CallOrReturn, ...args: P): T; + export function callOrReturn(funcOrValue: CallOrReturn, ...args: P): T; export function hasChildren(data: object): boolean; diff --git a/yarn.lock b/yarn.lock index a4641d88..8eb9d85a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1601,6 +1601,19 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-12.7.2.tgz#c4e63af5e8823ce9cc3f0b34f7b998c2171f0c44" integrity sha512-dyYO+f6ihZEtNPDcWNR1fkoTDf3zAK3lAABDze3mz6POyIercH0lEUawUFXlG8xaQZmm1yEBON/4TsYv/laDYg== +"@types/prop-types@*": + version "15.7.3" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" + integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== + +"@types/react@^16.9.46": + version "16.9.46" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.46.tgz#f0326cd7adceda74148baa9bff6e918632f5069e" + integrity sha512-dbHzO3aAq1lB3jRQuNpuZ/mnu+CdD3H0WVaaBQA8LTT3S33xhVBUj232T8M3tAhSWJs/D/UqORYUlJNl/8VQZg== + dependencies: + "@types/prop-types" "*" + csstype "^3.0.2" + "@zkochan/cmd-shim@^3.1.0": version "3.1.0" resolved "https://registry.yarnpkg.com/@zkochan/cmd-shim/-/cmd-shim-3.1.0.tgz#2ab8ed81f5bb5452a85f25758eb9b8681982fd2e" @@ -2798,6 +2811,11 @@ cssstyle@^1.0.0: dependencies: cssom "0.3.x" +csstype@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.2.tgz#ee5ff8f208c8cd613b389f7b222c9801ca62b3f7" + integrity sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw== + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" From 631d1bc79f5a5d9adda773d1f0627af041fb92e3 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Sun, 16 Aug 2020 18:51:22 +0800 Subject: [PATCH 25/26] fix --- types/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 681bbfe6..8893818c 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -391,7 +391,7 @@ declare module 'react-base-table' { * ``` */ sortState?: { - [key: React.Key]: SortOrder; + [key in React.Key]: SortOrder; }; /** * A callback function for the header cell click event @@ -537,7 +537,7 @@ declare module 'react-base-table' { getExpandedState(): { expandedData: T[]; expandedRowKeys: RowKey[]; - expandedDepthMap: { [key: RowKey]: number }; + expandedDepthMap: { [key in RowKey]: number }; }; /** * Get the total height of all rows, including expanded rows. @@ -645,7 +645,7 @@ declare module 'react-base-table' { export function flattenOnKeys( tree: T[], keys?: RowKey[], - depthMap?: { [key: RowKey]: number }, + depthMap?: { [key in RowKey]: number }, dataKey?: string ): T[]; From 5a5adde22294bd67531236e5613a75b31ddf3ce8 Mon Sep 17 00:00:00 2001 From: Neo Nie Date: Mon, 17 Aug 2020 09:53:57 +0800 Subject: [PATCH 26/26] update --- types/index.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index 8893818c..c6fe3fde 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -91,7 +91,6 @@ declare module 'react-base-table' { minWidth?: number; /** * Whether the column is frozen and what's the frozen side - * Could be changed if we decide to allow Frozen.RIGHT */ frozen?: FrozenDirection; /**