vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-06-28 22:30:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[react-table]: V7 upgrade to support rc-16 (#42411)

Browse Source 
* [react-table]: V7 upgrade to support rc-16

Support the changes in
https://github.com/tannerlinsley/react-table/blob/master/CHANGELOG.md

Most of this in internal, by far the biggest user facing ripple is
flatColumns -> allColumns.

* add selectSubRows option

* remove column.show - no longer supported

* add className to TableCommonProps

* fix missing import, doh

* remove afters from ensurePluginOrder, it's effectively removed

* Update Hook definitions as well as address review comments

I've made a good effort to fix the types for the hooks, they look right,
but right now I have no code that uses them so they are at best
theoretical based on how they appear to be used in the code.
This commit is contained in:
Andrew Casey
2020-03-04 10:13:43 -08:00
committed by GitHub
parent 5fff1d9bd5
commit 97709c4e43
2 changed files with 68 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
types/react-table/index.d.ts vendored
View File

@@ -6,7 +6,7 @@
// Jason Clark <https://github.com/riceboyler>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.5
// reflects react-table@7.0.0-rc.15
// reflects react-table@7.0.0-rc.16
// tslint:disable:no-empty-interface
// no-empty-interface is disabled to allow easy extension with declaration merging
@@ -15,7 +15,7 @@
// no-unnecessary-generics is disabled because many of these definitions are either used in a generic
// context or the signatures are required to match for declaration merging
import { ComponentType, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactNode, ReactText, ReactFragment } from 'react';
import { ComponentType, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactNode, ReactText, ReactFragment, CSSProperties } from 'react';
export {};
@@ -54,7 +54,8 @@ export interface HeaderGroup<D extends object = {}> extends ColumnInstance<D>, U
export interface Row<D extends object = {}> extends UseTableRowProps<D> {}
export interface TableCommonProps {
style?: React.CSSProperties;
style?: CSSProperties;
className?: string;
}
export interface TableProps extends TableCommonProps {}
@@ -77,9 +78,8 @@ export interface TableRowProps extends TableKeyedProps {}
export interface TableCellProps extends TableKeyedProps {}
export interface TableToggleCommonProps {
export interface TableToggleCommonProps extends TableCommonProps {
onChange?: () => void;
style?: { cursor: string };
checked?: boolean;
title?: string;
indeterminate?: boolean;
@@ -152,13 +152,14 @@ export interface UseTableHooks<D extends object> extends Record<string, any> {
>;
columns: Array<(columns: Array<Column<D>>, meta: Meta<D>) => Array<Column<D>>>;
columnsDeps: Array<(deps: any[], meta: Meta<D>) => any[]>;
flatColumns: Array<(flatColumns: Array<Column<D>>, meta: Meta<D>) => Array<Column<D>>>;
flatColumnsDeps: Array<(deps: any[], meta: Meta<D>) => any[]>;
headerGroups: Array<(flatColumns: Array<HeaderGroup<D>>, meta: Meta<D>) => Array<HeaderGroup<D>>>;
headerGroupDeps: Array<(deps: any[], meta: Meta<D>) => any[]>;
allColumns: Array<(allColumns: Array<Column<D>>, meta: Meta<D>) => Array<Column<D>>>;
allColumnsDeps: Array<(deps: any[], meta: Meta<D>) => any[]>;
visibleColumns: Array<(allColumns: Array<Column<D>>, meta: Meta<D>) => Array<Column<D>>>;
visibleColumnsDeps: Array<(deps: any[], meta: Meta<D>) => any[]>;
headerGroups: Array<(allColumns: Array<HeaderGroup<D>>, meta: Meta<D>) => Array<HeaderGroup<D>>>;
headerGroupsDeps: Array<(deps: any[], meta: Meta<D>) => any[]>;
useInstanceBeforeDimensions: Array<(instance: TableInstance<D>) => void>;
useInstance: Array<(instance: TableInstance<D>) => void>;
useRows: Array<(rows: Array<Row<D>>, meta: Meta<D>) => Array<Row<D>>>;
prepareRow: Array<(row: Row<D>, meta: Meta<D>) => void>;
useControlledState: Array<(state: TableState<D>, meta: Meta<D>) => TableState<D>>;
@@ -177,7 +178,6 @@ export interface UseTableColumnOptions<D extends object>
extends Accessor<D>,
Partial<{
columns: Array<Column<D>>;
show: boolean | ((instance: TableInstance<D>) => boolean);
Header: Renderer<HeaderProps<D>>;
Cell: Renderer<CellProps<D>>;
width?: number | string;
@@ -191,25 +191,28 @@ export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {}
export interface UseTableInstanceProps<D extends object> {
state: TableState<D>;
hooks: Hooks<D>;
plugins: Array<PluginHook<D>>;
dispatch: TableDispatch;
columns: Array<ColumnInstance<D>>;
flatColumns: Array<ColumnInstance<D>>;
allColumns: Array<ColumnInstance<D>>;
visibleColumns: Array<ColumnInstance<D>>;
headerGroups: Array<HeaderGroup<D>>;
footerGroups: Array<HeaderGroup<D>>;
headers: Array<ColumnInstance<D>>;
flatHeaders: Array<ColumnInstance<D>>;
rows: Array<Row<D>>;
rowsById: Record<string, Row<D>>;
getTableProps: (propGetter?: TablePropGetter<D>) => TableProps;
getTableBodyProps: (propGetter?: TableBodyPropGetter<D>) => TableBodyProps;
prepareRow: (row: Row<D>) => void;
flatRows: Array<Row<D>>;
totalColumnsWidth: number;
allColumnsHidden: boolean;
toggleHideColumn: (columnId: IdType<D>, value?: boolean) => void;
setHiddenColumns: (param: Array<IdType<D>> | UpdateHiddenColumns<D>) => void;
toggleHideAllColumns: (value?: boolean) => void;
getToggleHideAllColumnsProps: (props?: Partial<TableToggleHideAllColumnProps>) => TableToggleHideAllColumnProps;
getHooks: () => Hooks<D>;
}
export interface UseTableHeaderGroupProps<D extends object> {
@@ -335,7 +338,8 @@ export type UseExpandedOptions<D extends object> = Partial<{
}>;
export interface UseExpandedHooks<D extends object> {
getExpandedToggleProps: Array<(row: Row<D>, instance: TableInstance<D>) => object>;
getToggleRowsExpandedProps: Array<PropGetter<D, TableCommonProps>>;
getToggleAllRowsExpandedProps: Array<PropGetter<D, TableCommonProps>>;
}
export interface UseExpandedState<D extends object> {
@@ -343,17 +347,21 @@ export interface UseExpandedState<D extends object> {
}
export interface UseExpandedInstanceProps<D extends object> {
preExpandedRows: Array<Row<D>>;
expandedRows: Array<Row<D>>;
rows: Array<Row<D>>;
toggleExpanded: (id: Array<IdType<D>>, isExpanded: boolean) => void;
expandedDepth: number;
isAllRowsExpanded: boolean;
toggleRowExpanded: (id: Array<IdType<D>>, value?: boolean) => void;
toggleAllRowsExpanded: (value?: boolean) => void;
}
export interface UseExpandedRowProps<D extends object> {
isExpanded: boolean;
canExpand: boolean;
subRows: Array<Row<D>>;
toggleExpanded: (isExpanded?: boolean) => void;
getExpandedToggleProps: (props?: Partial<TableExpandedToggleProps>) => TableExpandedToggleProps;
toggleRowExpanded: (value?: boolean) => void;
getToggleRowExpandedProps: (props?: Partial<TableExpandedToggleProps>) => TableExpandedToggleProps;
}
//#endregion
@@ -385,8 +393,15 @@ export type UseFiltersColumnOptions<D extends object> = Partial<{
}>;
export interface UseFiltersInstanceProps<D extends object> {
rows: Array<Row<D>>;
preFilteredRows: Array<Row<D>>;
preFilteredFlatRows: Array<Row<D>>;
preFilteredRowsById: Record<string, Row<D>>;
filteredRows: Array<Row<D>>;
filteredFlatRows: Array<Row<D>>;
filteredRowsById: Record<string, Row<D>>;
rows: Array<Row<D>>;
flatRows: Array<Row<D>>;
rowsById: Record<string, Row<D>>;
setFilter: (columnId: IdType<D>, updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void;
setAllFilters: (updater: Filters<D> | ((filters: Filters<D>) => Filters<D>)) => void;
}
@@ -449,8 +464,15 @@ export interface UseGlobalFiltersState<D extends object> {
}
export interface UseGlobalFiltersInstanceProps<D extends object> {
rows: Array<Row<D>>;
preGlobalFilteredRows: Array<Row<D>>;
preGlobalFilteredFlatRows: Array<Row<D>>;
preGlobalFilteredRowsById: Record<string, Row<D>>;
globalFilteredRows: Array<Row<D>>;
globalFilteredFlatRows: Array<Row<D>>;
globalFilteredRowsById: Record<string, Row<D>>;
rows: Array<Row<D>>;
flatRows: Array<Row<D>>;
rowsById: Record<string, Row<D>>;
setGlobalFilter: (filterValue: FilterValue) => void;
}
@@ -475,7 +497,7 @@ export type UseGroupByOptions<D extends object> = Partial<{
}>;
export interface UseGroupByHooks<D extends object> {
getGroupByToggleProps: Array<(header: HeaderGroup<D>, instance: TableInstance<D>) => object>;
getGroupByToggleProps: Array<HeaderGroupPropGetter<D>>;
}
export interface UseGroupByState<D extends object> {
@@ -483,7 +505,7 @@ export interface UseGroupByState<D extends object> {
}
export type UseGroupByColumnOptions<D extends object> = Partial<{
aggregate: Aggregator<D> | Array<Aggregator<D>>;
aggregate: Aggregator<D>;
Aggregated: Renderer<CellProps<D>>;
disableGroupBy: boolean;
defaultCanGroupBy: boolean;
@@ -491,9 +513,20 @@ export type UseGroupByColumnOptions<D extends object> = Partial<{
}>;
export interface UseGroupByInstanceProps<D extends object> {
rows: Array<Row<D>>;
preGroupedRows: Array<Row<D>>;
toggleGroupBy: (columnId: IdType<D>, toggle: boolean) => void;
preGroupedFlatRows: Array<Row<D>>;
preGroupedRowsById: Record<string, Row<D>>;
groupedRows: Array<Row<D>>;
groupedFlatRows: Array<Row<D>>;
groupedRowsById: Record<string, Row<D>>;
onlyGroupedFlatRows: Array<Row<D>>;
onlyGroupedRowsById: Record<string, Row<D>>;
nonGroupedFlatRows: Array<Row<D>>;
nonGroupedRowsById: Record<string, Row<D>>;
rows: Array<Row<D>>;
flatRows: Array<Row<D>>;
rowsById: Record<string, Row<D>>;
toggleGroupBy: (columnId: IdType<D>, value?: boolean) => void;
}
export interface UseGroupByColumnProps<D extends object> {
@@ -517,7 +550,7 @@ export interface UseGroupByRowProps<D extends object> {
export interface UseGroupByCellProps<D extends object> {
isGrouped: boolean;
isRepeatedValue: boolean;
isPlaceholder: boolean;
isAggregated: boolean;
}
@@ -614,11 +647,12 @@ export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {}
export type UseRowSelectOptions<D extends object> = Partial<{
manualRowSelectedKey: IdType<D>;
autoResetSelectedRows: boolean;
selectSubRows: boolean;
}>;
export interface UseRowSelectHooks<D extends object> {
getToggleRowSelectedProps: Array<(row: Row<D>, instance: TableInstance<D>) => object>;
getToggleAllRowsSelectedProps: Array<(instance: TableInstance<D>) => object>;
getToggleRowSelectedProps: Array<PropGetter<D, TableToggleRowsSelectedProps>>;
getToggleAllRowsSelectedProps: Array<PropGetter<D, TableToggleAllRowsSelectedProps>>;
}
export interface UseRowSelectState<D extends object> {
@@ -627,7 +661,7 @@ export interface UseRowSelectState<D extends object> {
export interface UseRowSelectInstanceProps<D extends object> {
toggleRowSelected: (rowId: IdType<D>, set?: boolean) => void;
toggleAllRowsSelected: (set?: boolean) => void;
toggleAllRowsSelected: (value?: boolean) => void;
getToggleAllRowsSelectedProps: (
props?: Partial<TableToggleAllRowsSelectedProps>,
) => TableToggleAllRowsSelectedProps;
@@ -704,7 +738,7 @@ export type UseSortByOptions<D extends object> = Partial<{
}>;
export interface UseSortByHooks<D extends object> {
getSortByToggleProps: Array<(column: Column<D>, instance: TableInstance<D>) => object>;
getSortByToggleProps: Array<PropGetter<D, TableCommonProps>>;
}
export interface UseSortByState<D extends object> {
@@ -786,8 +820,7 @@ export function loopHooks(hooks: Hooks, ...args: any[]): void;
export function ensurePluginOrder<D extends object = {}>(
plugins: Array<PluginHook<D>>,
befores: string[],
pluginName: string,
afters: string[],
pluginName: string
): void;
export function functionalUpdate<D extends object = {}>(
@@ -803,6 +836,4 @@ export function useMountedLayoutEffect(effect: EffectCallback, deps?: Dependency
export function useAsyncDebounce<F extends (...args: any[]) => any>(defaultFn: F, defaultWait?: number): F;
export function useConsumeHookGetter<D extends object>(hooks: Hooks<D>, hookName: string): any;
export function makeRenderer(instance: TableInstance, column: ColumnInstance, meta?: any): ReactElement;

10
types/react-table/react-table-tests.tsx
View File

@@ -365,7 +365,7 @@ function Table({ columns, data, updateMyData, skipPageReset }: Table<Data>) {
usePagination,
useRowSelect,
(hooks: Hooks<Data>) => {
hooks.flatColumns.push(columns => [
hooks.allColumns.push(columns => [
{
id: 'selection',
// Make this column a groupByBoundary. This ensures that groupBy columns
@@ -430,7 +430,7 @@ function Table({ columns, data, updateMyData, skipPageReset }: Table<Data>) {
<td {...cell.getCellProps()}>
{cell.isGrouped ? (
<>
<span {...row.getExpandedToggleProps()}>
<span {...row.getToggleRowExpandedProps()}>
{row.isExpanded ? '👇' : '👉'}
</span>{' '}
{cell.render('Cell', { editable: false })} ({row.subRows.length})
@@ -439,7 +439,7 @@ function Table({ columns, data, updateMyData, skipPageReset }: Table<Data>) {
// If the cell is aggregated, use the Aggregated
// renderer for cell
cell.render('Aggregated')
) : cell.isRepeatedValue ? null : (// For cells with repeated values, render null
) : cell.isPlaceholder ? null : (// For cells with repeated values, render null
// Otherwise, just render the regular cell
cell.render('Cell', { editable: true })
)}
@@ -597,7 +597,7 @@ const Component = (props: {}) => {
// count the total rows being aggregated,
// then sum any of those counts if they are
// aggregated further
aggregate: ['sum', 'count'],
aggregate: 'count',
Aggregated: ({ cell: { value } }: CellProps<Data>) => `${value} Names`,
},
{
@@ -609,7 +609,7 @@ const Component = (props: {}) => {
// first count the UNIQUE values from the rows
// being aggregated, then sum those counts if
// they are aggregated further
aggregate: ['sum', 'uniqueCount'],
aggregate: 'uniqueCount',
Aggregated: ({ cell: { value } }: CellProps<Data>) => `${value} Unique Names`,
},
],