From 92603b6a703c5b79793a0f0e19a87ec38edf5c91 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Tue, 3 Dec 2019 09:40:53 -0700 Subject: [PATCH] v7.0.0-beta.24 --- .size-snapshot.json | 14 +- CHANGELOG.md | 5 + TYPESCRIPT.md | 38 +- docs/api.md | 4 +- examples/row-selection/src/App.js | 8 +- index.d.ts | 638 -------------------- package.json | 5 +- react-table-config.d.ts | 99 --- src/plugin-hooks/tests/useRowSelect.test.js | 10 +- src/plugin-hooks/useRowSelect.js | 25 +- tsconfig.json | 10 - tslint.json | 9 - yarn.lock | 5 + 13 files changed, 49 insertions(+), 821 deletions(-) delete mode 100644 index.d.ts delete mode 100644 react-table-config.d.ts delete mode 100644 tsconfig.json delete mode 100644 tslint.json diff --git a/.size-snapshot.json b/.size-snapshot.json index 4e4c5d5..7d7f973 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,20 +1,20 @@ { "dist/index.js": { - "bundled": 96769, - "minified": 46778, - "gzipped": 12295 + "bundled": 96773, + "minified": 46756, + "gzipped": 12302 }, "dist/index.es.js": { - "bundled": 96204, - "minified": 46286, - "gzipped": 12179, + "bundled": 96208, + "minified": 46264, + "gzipped": 12186, "treeshaked": { "rollup": { "code": 78, "import_statements": 21 }, "webpack": { - "code": 11136 + "code": 11143 } } } diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e36024..4bcba8c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 7.0.0-beta.24 + +- Removed types and related files from the repo. The community will now maintain types externally on Definitely Typed +- Changed `selectedRowPaths` to use a `Set()` instead of an array for performance. + ## 7.0.0-beta.23 - The internal `useMain` hook has been renamed to `useInstance` diff --git a/TYPESCRIPT.md b/TYPESCRIPT.md index 8d228d3..7a14588 100644 --- a/TYPESCRIPT.md +++ b/TYPESCRIPT.md @@ -1,39 +1,5 @@ # Using TypeScript with React-Table -React-table is a very flexible library, because of this, the shape of data at almost every contact point is defined by the specific set of plugins that you choose to pass to `useTable`. +Types for React Table are maintained externally by the Typescript community and are located at https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table. -To get started, copy the file `react-table-config.d.ts` into your source tree (e.g. into a types folder). This expands the default types with all of the plugin extensions currently in the type definitions. - -You can stop here if you like, but while this is simple, it's a bit misleading. Out of the box, these types will suggest that you have access to values that come from plugins that you aren't using, i.e. the error checking is weakened. - -To bring the resulting types into better alignment with your plugins, you should edit your local copy of `react-table-config.d.ts` and comment out all of the interfaces that don't apply to your chosen set of plugins. - -e.g. - -if you are only using `useSortBy` and `usePagination` then you would take this: - -```tsx -extends UseExpandedOptions, - UseFiltersOptions, - UseGroupByOptions, - UsePaginationOptions, - UseRowSelectOptions, - UseSortByOptions, - UseFiltersOptions, - UseResizeColumnsOptions, - Record {} -``` - -and convert it to this: - -```tsx -export interface TableOptions - extends UsePaginationOptions, - UseSortByOptions {} -``` - -Then follow the same pattern for all of the other interfaces in the file. You'll notice that many plugins don't extend all of the top-level interfaces. - -## Caveat - -The interfaces are all global. If you have several different configurations for the table, you should create interfaces using the union of all of the plugins that you are using. +Because React Table is not written in Typescript and the types are not maintained by the core team, there are no guarantees around the types always being up to date or working perfectly. If this is an issue for you, please contribute to the community types and discuss solutions there. diff --git a/docs/api.md b/docs/api.md index 34e39d4..b26f6ea 100644 --- a/docs/api.md +++ b/docs/api.md @@ -847,9 +847,9 @@ The following values are provided to the table `instance`: The following options are supported via the main options object passed to `useTable(options)` -- `state.selectedRowPaths: Array` +- `state.selectedRowPaths: Set` - Optional - - Defaults to `[]` + - Defaults to `new Set()` - If a row's path key (eg. a row path of `[1, 3, 2]` would have a path key of `1.3.2`) is found in this array, it will have a selected state. - `initialState.selectedRowPaths` - Identical to the `state.selectedRowPaths` option above diff --git a/examples/row-selection/src/App.js b/examples/row-selection/src/App.js index 42a3746..144fcf8 100644 --- a/examples/row-selection/src/App.js +++ b/examples/row-selection/src/App.js @@ -66,7 +66,7 @@ function Table({ columns, data }) { ))} - {rows.map((row, i) => { + {rows.slice(0, 10).map((row, i) => { prepareRow(row) return ( @@ -79,11 +79,11 @@ function Table({ columns, data }) {

Selected Rows: {selectedRowPaths.length}

- 
+      {/* 
         
           {JSON.stringify(
             {
-              selectedRowPaths,
+              selectedRowPaths: [...selectedRowPaths.values()],
               'selectedFlatRows[].original': selectedFlatRows.map(
                 d => d.original
               ),
@@ -92,7 +92,7 @@ function Table({ columns, data }) {
             2
           )}
         
-      

+
*/} ) } diff --git a/index.d.ts b/index.d.ts deleted file mode 100644 index 4fa95eb..0000000 --- a/index.d.ts +++ /dev/null @@ -1,638 +0,0 @@ -// TypeScript Version: 3.5 - -import { ReactNode, ComponentType, MouseEvent } from 'react' - -/** - * The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code. - * - * @example - * export interface TableOptions - * extends - * UseExpandedOptions, - * UseFiltersOptions {} - */ -export interface TableOptions extends UseTableOptions {} - -export interface TableInstance - extends Omit, 'columns' | 'state'>, - UseTableInstanceProps {} - -export interface TableState< - D extends object = {} -> {} /* tslint:disable-line no-empty-interface */ // eslint-disable-line @typescript-eslint/no-empty-interface - -export interface Hooks extends UseTableHooks {} - -export interface Cell extends UseTableCellProps {} - -export interface Column - extends UseTableColumnOptions {} - -export interface ColumnInstance - extends Omit, 'id'>, - UseTableColumnProps {} - -export interface HeaderGroup - extends ColumnInstance, - UseTableHeaderGroupProps {} - -export interface Row extends UseTableRowProps {} - -/* #region useTable */ -export function useTable( - options: TableOptions, - ...plugins: Array> -): TableInstance - -/** - * NOTE: To use custom options, use "Interface Merging" to add the custom options - */ -export type UseTableOptions = { - columns: Array> - data: D[] -} & Partial<{ - initialState: Partial> - state: Partial> - reducer: ( - oldState: TableState, - newState: TableState, - type: string - ) => TableState - defaultColumn: Partial> - initialRowStateKey: IdType - getSubRows: (originalRow: D, relativeIndex: number) => Array - getRowID: (originalRow: D, relativeIndex: number) => IdType - debug: boolean -}> - -export interface UseTableHooks { - columnsBeforeHeaderGroups: Array< - ( - flatColumns: Array>, - instance: TableInstance - ) => Array> - > - columnsBeforeHeaderGroupsDeps: Array< - (deps: any[], instance: TableInstance) => any[] - > - useInstance: Array<(instance: TableInstance) => TableInstance> - useRows: Array< - (rows: Array>, instance: TableInstance) => Array> - > - prepareRow: Array<(row: Row, instance: TableInstance) => Row> - - // Prop Hooks - getTableProps: Array<(instance: TableInstance) => object> - getTableBodyProps: Array<(instance: TableInstance) => object> - getRowProps: Array<(row: Row, instance: TableInstance) => object> - getHeaderGroupProps: Array< - (headerGroup: HeaderGroup, instance: TableInstance) => object - > - getHeaderProps: Array< - (column: Column, instance: TableInstance) => object - > - getCellProps: Array<(cell: Cell, instance: TableInstance) => object> -} - -export interface UseTableColumnOptions - extends Accessor, - Partial<{ - columns: Array> - show: boolean | ((instance: TableInstance) => boolean) - Header: Renderer> - Cell: Renderer> - width?: number - minWidth?: number - maxWidth?: number - }> {} - -export interface UseTableInstanceProps { - columns: Array> - flatColumns: Array> - headerGroups: Array> - headers: Array> - flatHeaders: Array> - rows: Array> - getTableProps: (props?: object) => object - getTableBodyProps: (props?: object) => object - prepareRow: (row: Row) => void - rowPaths: string[] - flatRows: Array> - state: TableState - setState: SetState - totalColumnsWidth: number -} - -export interface UseTableHeaderGroupProps { - headers: Array> - getHeaderGroupProps: (props?: object) => object - totalHeaderCount: number -} - -export interface UseTableColumnProps { - id: IdType - isVisible: boolean - render: (type: 'Header' | string, props?: object) => ReactNode - getHeaderProps: (props?: object) => object - parent: ColumnInstance - depth: number - index: number -} - -export interface UseTableRowProps { - cells: Array> - values: Record, CellValue> - getRowProps: (props?: object) => object - index: number - original: D - path: Array> - subRows: Array> -} - -export interface UseTableCellProps { - column: ColumnInstance - row: Row - value: CellValue - getCellProps: (props?: object) => object - render: (type: 'Cell' | string, userProps?: object) => ReactNode -} - -export type HeaderProps = TableInstance & { - column: ColumnInstance -} - -export type CellProps = TableInstance & { - column: ColumnInstance - row: Row - cell: Cell -} - -// NOTE: At least one of (id | accessor | Header as string) required -export interface Accessor { - accessor?: - | IdType - | (( - originalRow: D, - index: number, - sub: { - subRows: D[] - depth: number - data: D[] - } - ) => CellValue) - id?: IdType -} -/* #endregion */ - -// Plugins - -/* #region useColumnOrder */ -export function useColumnOrder(hooks: Hooks): void -export namespace useColumnOrder { - const pluginName = 'useColumnOrder' -} - -export interface UseColumnOrderState { - columnOrder: Array> -} - -export interface UseColumnOrderInstanceProps { - setColumnOrder: ( - updater: (columnOrder: Array>) => Array> - ) => void -} -/* #endregion */ - -/* #region useExpanded */ -export function useExpanded(hooks: Hooks): void -export namespace useExpanded { - const pluginName = 'useExpanded' -} - -export type UseExpandedOptions = Partial<{ - manualExpandedKey: IdType - paginateExpandedRows: boolean - getResetExpandedDeps: (i: TableInstance) => Array -}> - -export interface UseExpandedHooks { - getExpandedToggleProps: Array< - (row: Row, instance: TableInstance) => object - > -} - -export interface UseExpandedState { - expanded: Array> -} - -export interface UseExpandedInstanceProps { - rows: Array> - toggleExpandedByPath: (path: Array>, isExpanded: boolean) => void - expandedDepth: number -} - -export interface UseExpandedRowProps { - isExpanded: boolean - canExpand: boolean - subRows: Array> - toggleExpanded: (isExpanded?: boolean) => void - getExpandedToggleProps: (props?: object) => object -} -/* #endregion */ - -/* #region useFilters */ -export function useFilters(hooks: Hooks): void -export namespace useFilters { - const pluginName = 'useFilters' -} - -export type UseFiltersOptions = Partial<{ - manualFilters: boolean - disableFilters: boolean - filterTypes: Filters - getResetFiltersDeps: (i: TableInstance) => Array -}> - -export interface UseFiltersState { - filters: Filters -} - -export type UseFiltersColumnOptions = Partial<{ - disableFilters: boolean - Filter: Renderer> - filter: FilterType | DefaultFilterTypes | keyof Filters -}> - -export interface UseFiltersInstanceProps { - rows: Array> - preFilteredRows: Array> - setFilter: ( - columnId: IdType, - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue - ) => void - setAllFilters: ( - updater: Filters | ((filters: Filters) => Filters) - ) => void -} - -export interface UseFiltersColumnProps { - canFilter: boolean - setFilter: ( - updater: ((filterValue: FilterValue) => FilterValue) | FilterValue - ) => void - filterValue: FilterValue - preFilteredRows: Array> - filteredRows: Array> -} - -export type FilterProps = HeaderProps -export type FilterValue = any -export type Filters = Record, FilterValue> - -export type DefaultFilterTypes = - | 'text' - | 'exactText' - | 'exactTextCase' - | 'includes' - | 'includesAll' - | 'exact' - | 'equals' - | 'between' - -export interface FilterType { - ( - rows: Array>, - columnId: IdType, - filterValue: FilterValue, - column: ColumnInstance - ): Array> - autoRemove?: (filterValue: FilterValue) => boolean -} -/* #endregion */ - -/* #region useGroupBy */ -export function useGroupBy(hooks: Hooks): void -export namespace useGroupBy { - const pluginName = 'useGroupBy' -} - -export type UseGroupByOptions = Partial<{ - manualGroupBy: boolean - disableGroupBy: boolean - aggregations: Record> - groupByFn: ( - rows: Array>, - columnId: IdType - ) => Record> - getResetGroupByDeps: (i: TableInstance) => Array -}> - -export interface UseGroupByHooks { - getGroupByToggleProps: Array< - (header: HeaderGroup, instance: TableInstance) => object - > -} - -export interface UseGroupByState { - groupBy: Array> -} - -export type UseGroupByColumnOptions = Partial<{ - aggregate: Aggregator | Array> - Aggregated: Renderer> - disableGroupBy: boolean - groupByBoundary: boolean -}> - -export interface UseGroupByInstanceProps { - rows: Array> - preGroupedRows: Array> - toggleGroupBy: (columnId: IdType, toggle: boolean) => void -} - -export interface UseGroupByColumnProps { - canGroupBy: boolean - isGrouped: boolean - groupedIndex: number - toggleGroupBy: () => void - getGroupByToggleProps: (props?: object) => object -} - -export interface UseGroupByRowProps { - isAggregated: boolean - groupByID: IdType - groupByVal: string - values: Record, AggregatedValue> - subRows: Array> - depth: number - path: Array> - index: number -} - -export interface UseGroupByCellProps { - isGrouped: boolean - isRepeatedValue: boolean - isAggregated: boolean -} - -export type DefaultAggregators = - | 'sum' - | 'average' - | 'median' - | 'uniqueCount' - | 'count' - -export type AggregatorFn = ( - columnValues: CellValue[], - rows: Array> -) => AggregatedValue -export type Aggregator = - | AggregatorFn - | DefaultAggregators - | string -export type AggregatedValue = any -/* #endregion */ - -/* #region usePagination */ -export function usePagination(hooks: Hooks): void -export namespace usePagination { - const pluginName = 'usePagination' -} - -export type UsePaginationOptions = Partial<{ - pageCount: number - manualPagination: boolean - getResetPageDeps: (i: TableInstance) => Array - paginateExpandedRows: boolean -}> - -export interface UsePaginationState { - pageSize: number - pageIndex: number -} - -export interface UsePaginationInstanceProps { - page: Array> - pageCount: number - pageOptions: number[] - canPreviousPage: boolean - canNextPage: boolean - gotoPage: (updater: ((pageIndex: number) => number) | number) => void - previousPage: () => void - nextPage: () => void - setPageSize: (pageSize: number) => void - pageIndex: number - pageSize: number -} -/* #endregion */ - -/* #region useRowSelect */ -export function useRowSelect(hooks: Hooks): void -export namespace useRowSelect { - const pluginName = 'useRowSelect' -} - -export type UseRowSelectOptions = Partial<{ - manualRowSelectedKey: IdType - getResetSelectedRowPathsDeps: (i: TableInstance) => Array -}> - -export interface UseRowSelectHooks { - getToggleRowSelectedProps: Array< - (row: Row, instance: TableInstance) => object - > - getToggleAllRowsSelectedProps: Array<(instance: TableInstance) => object> -} - -export interface UseRowSelectState { - selectedRowPaths: Array> -} - -export interface UseRowSelectInstanceProps { - toggleRowSelected: (rowPath: IdType, set?: boolean) => void - toggleRowSelectedAll: (set?: boolean) => void - getToggleAllRowsSelectedProps: (props?: object) => object - isAllRowsSelected: boolean - selectedFlatRows: Array> -} - -export interface UseRowSelectRowProps { - isSelected: boolean - toggleRowSelected: (set?: boolean) => void - getToggleRowSelectedProps: (props?: object) => object -} -/* #endregion */ - -/* #region useRowState */ -export function useRowState(hooks: Hooks): void -export namespace useRowState { - const pluginName = 'useRowState' -} - -export type UseRowStateOptions = Partial<{ - initialRowStateAccessor: (row: Row) => UseRowStateLocalState -}> - -export interface UseRowStateState { - rowState: Partial<{ - cellState: UseRowStateLocalState - rowState: UseRowStateLocalState - }> -} - -export interface UseRowStateInstanceProps { - setRowState: (rowPath: string[], updater: UseRowUpdater) => void // Purposely not exposing action - setCellState: ( - rowPath: string[], - columnId: IdType, - updater: UseRowUpdater - ) => void -} - -export interface UseRowStateRowProps { - state: UseRowStateLocalState - setState: (updater: UseRowUpdater) => void -} -export interface UseRowStateCellProps { - state: UseRowStateLocalState - setState: (updater: UseRowUpdater) => void -} - -export type UseRowUpdater = T | ((prev: T) => T) -export type UseRowStateLocalState = Record< - IdType, - T -> -/* #endregion */ - -/* #region useSortBy */ -export function useSortBy(hooks: Hooks): void -export namespace useSortBy { - const pluginName = 'useSortBy' -} - -export type UseSortByOptions = Partial<{ - manualSorting: boolean - disableSortBy: boolean - disableMultiSort: boolean - isMultiSortEvent: (e: MouseEvent) => boolean - maxMultiSortColCount: number - disableSortRemove: boolean - disabledMultiRemove: boolean - orderByFn: ( - rows: Array>, - sortFns: Array>, - directions: boolean[] - ) => Array> - sortTypes: Record> - getResetSortByDeps: (i: TableInstance) => Array -}> - -export interface UseSortByHooks { - getSortByToggleProps: Array< - (column: Column, instance: TableInstance) => object - > -} - -export interface UseSortByState { - sortBy: Array> -} - -export type UseSortByColumnOptions = Partial<{ - disableSortBy: boolean - sortDescFirst: boolean - sortInverted: boolean - sortType: SortByFn | DefaultSortTypes | string -}> - -export interface UseSortByInstanceProps { - rows: Array> - preSortedRows: Array> - toggleSortBy: ( - columnId: IdType, - descending: boolean, - isMulti: boolean - ) => void -} - -export interface UseSortByColumnProps { - canSort: boolean - toggleSortBy: (descending: boolean, multi: boolean) => void - getSortByToggleProps: (props?: object) => object - clearSorting: () => void - isSorted: boolean - sortedIndex: number - isSortedDesc: boolean | undefined -} - -export type SortByFn = ( - rowA: Row, - rowB: Row, - columnId: IdType -) => 0 | 1 | -1 - -export type DefaultSortTypes = 'alphanumeric' | 'datetime' | 'basic' - -export interface SortingRule { - id: IdType - desc?: boolean -} -/* #endregion */ - -/* #region useAbsoluteLayout */ -export function useAbsoluteLayout(hooks: Hooks): void -export namespace useAbsoluteLayout { - const pluginName = 'useAbsoluteLayout' -} -/* #endregion */ - -/* #region useBlockLayout */ -export function useBlockLayout(hooks: Hooks): void -export namespace useBlockLayout { - const pluginName = 'useBlockLayout' -} -/* #endregion */ - -/* #region useResizeColumns */ -export function useResizeColumns(hooks: Hooks): void -export namespace useResizeColumns { - const pluginName = 'useResizeColumns' -} - -export interface UseResizeColumnsOptions { - disableResizing?: boolean -} - -export interface UseResizeColumnsColumnOptions { - disableResizing?: boolean -} - -export interface UseResizeColumnsHeaderProps { - getResizerProps: (props?: object) => object - canResize: boolean - isResizing: boolean -} -/* #endregion */ - -// Additional API -export const actions: Record -export function addActions(...actions: string[]): void - -export const defaultState: Record - -// Helpers -export type StringKey = Extract -export type IdType = StringKey | string -export type CellValue = any - -export type Renderer = ComponentType | ReactNode - -export interface PluginHook { - (hooks: Hooks): void - pluginName: string -} - -export type SetState = ( - updater: (old: TableState) => TableState, - type: keyof typeof actions -) => void diff --git a/package.json b/package.json index 24b68ba..292828a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-table", - "version": "7.0.0-beta.23", + "version": "7.0.0-beta.24", "description": "A fast, lightweight, opinionated table and datagrid built on React", "license": "MIT", "homepage": "https://github.com/tannerlinsley/react-table#readme", @@ -94,7 +94,8 @@ "rollup-plugin-peer-deps-external": "^2.2.0", "rollup-plugin-size-snapshot": "^0.10.0", "rollup-plugin-terser": "^5.1.2", - "snapshot-diff": "^0.6.1" + "snapshot-diff": "^0.6.1", + "typescript": "^3.7.2" }, "config": { "commitizen": { diff --git a/react-table-config.d.ts b/react-table-config.d.ts deleted file mode 100644 index 2e12b86..0000000 --- a/react-table-config.d.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { - UseColumnOrderInstanceProps, - UseColumnOrderState, - UseExpandedInstanceProps, - UseExpandedOptions, - UseExpandedRowProps, - UseExpandedState, - UseFiltersColumnOptions, - UseFiltersColumnProps, - UseFiltersInstanceProps, - UseFiltersOptions, - UseFiltersState, - UseGroupByCellProps, - UseGroupByColumnOptions, - UseGroupByColumnProps, - UseGroupByInstanceProps, - UseGroupByOptions, - UseGroupByRowProps, - UseGroupByState, - UsePaginationInstanceProps, - UsePaginationOptions, - UsePaginationState, - UseResizeColumnsColumnOptions, - UseResizeColumnsHeaderProps, - UseResizeColumnsOptions, - UseRowSelectInstanceProps, - UseRowSelectOptions, - UseRowSelectRowProps, - UseRowSelectState, - UseRowStateCellProps, - UseRowStateInstanceProps, - UseRowStateRowProps, - UseSortByColumnOptions, - UseSortByColumnProps, - UseSortByInstanceProps, - UseSortByOptions, - UseSortByState, - UseTableCellProps, -} from 'react-table' - -declare module 'react-table' { - // take this file as-is, or comment out the sections that don't apply to your plugin configuration - - export interface TableOptions - extends UseExpandedOptions, - UseFiltersOptions, - UseGroupByOptions, - UsePaginationOptions, - UseRowSelectOptions, - UseSortByOptions, - UseFiltersOptions, - UseResizeColumnsOptions, - // note that having Record here allows you to add anything to the options, this matches the spirit of the - // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your - // feature set, this is a safe default. - Record {} - - export interface TableInstance - extends UseColumnOrderInstanceProps, - UseExpandedInstanceProps, - UseFiltersInstanceProps, - UseGroupByInstanceProps, - UsePaginationInstanceProps, - UseRowSelectInstanceProps, - UseRowStateInstanceProps, - UseSortByInstanceProps {} - - export interface TableState - extends UseColumnOrderState, - UseExpandedState, - UseFiltersState, - UseGroupByState, - UsePaginationState, - UseRowSelectState, - UseSortByState {} - - export interface Column - extends UseFiltersColumnOptions, - UseGroupByColumnOptions, - UseSortByColumnOptions, - UseResizeColumnsColumnOptions {} - - export interface ColumnInstance - extends UseFiltersColumnProps, - UseGroupByColumnProps, - UseSortByColumnProps, - UseResizeColumnsHeaderProps {} - - export interface Cell - extends UseTableCellProps, - UseGroupByCellProps, - UseRowStateCellProps {} - - export interface Row - extends UseExpandedRowProps, - UseGroupByRowProps, - UseRowSelectRowProps, - UseRowStateRowProps {} -} diff --git a/src/plugin-hooks/tests/useRowSelect.test.js b/src/plugin-hooks/tests/useRowSelect.test.js index 660cca2..037bd38 100644 --- a/src/plugin-hooks/tests/useRowSelect.test.js +++ b/src/plugin-hooks/tests/useRowSelect.test.js @@ -113,9 +113,15 @@ function Table({ columns, data }) { )} -

Selected Rows: {selectedRowPaths.length}

+

Selected Rows: {selectedRowPaths.size}

-        {JSON.stringify({ selectedRowPaths }, null, 2)}
+        
+          {JSON.stringify(
+            { selectedRowPaths: [...selectedRowPaths.values()] },
+            null,
+            2
+          )}
+
) diff --git a/src/plugin-hooks/useRowSelect.js b/src/plugin-hooks/useRowSelect.js index d05c18c..90999db 100644 --- a/src/plugin-hooks/useRowSelect.js +++ b/src/plugin-hooks/useRowSelect.js @@ -19,7 +19,7 @@ actions.toggleRowSelected = 'toggleRowSelected' reducerHandlers[pluginName] = (state, action) => { if (action.type === actions.init) { return { - selectedRowPaths: [], + selectedRowPaths: new Set(), ...state, } } @@ -27,7 +27,7 @@ reducerHandlers[pluginName] = (state, action) => { if (action.type === actions.resetSelectedRows) { return { ...state, - selectedRowPaths: [], + selectedRowPaths: new Set(), } } @@ -44,7 +44,7 @@ reducerHandlers[pluginName] = (state, action) => { return { ...state, - selectedRowPaths: selectAll ? flatRowPaths : [], + selectedRowPaths: selectAll ? new Set(flatRowPaths) : new Set(), } } @@ -63,20 +63,21 @@ reducerHandlers[pluginName] = (state, action) => { // Join the paths of deep rows // to make a key, then manage all of the keys // in a flat object - const exists = state.selectedRowPaths.includes(key) + const exists = state.selectedRowPaths.has(key) const shouldExist = typeof set !== 'undefined' ? selected : !exists - let newSelectedRows = new Set(state.selectedRowPaths) + + let newSelectedRowPaths = new Set(state.selectedRowPaths) if (!exists && shouldExist) { flatRowPaths.forEach(rowPath => { if (rowPath === key || rowPath.startsWith(childRowPrefixKey)) { - newSelectedRows.add(rowPath) + newSelectedRowPaths.add(rowPath) } }) } else if (exists && !shouldExist) { flatRowPaths.forEach(rowPath => { if (rowPath === key || rowPath.startsWith(childRowPrefixKey)) { - newSelectedRows.delete(rowPath) + newSelectedRowPaths.delete(rowPath) } }) } else { @@ -105,11 +106,11 @@ reducerHandlers[pluginName] = (state, action) => { // If the row is a subRow update // its parent row to reflect changes - if (path.length > 1) updateParentRow(newSelectedRows, path) + if (path.length > 1) updateParentRow(newSelectedRowPaths, path) return { ...state, - selectedRowPaths: [...newSelectedRows.values()], + selectedRowPaths: newSelectedRowPaths, } } } @@ -167,10 +168,10 @@ function useInstance(instance) { const flatRowPaths = flatRows.map(d => d.path.join('.')) - let isAllRowsSelected = !!flatRowPaths.length && !!selectedRowPaths.length + let isAllRowsSelected = !!flatRowPaths.length && !!selectedRowPaths.size if (isAllRowsSelected) { - if (flatRowPaths.some(d => !selectedRowPaths.includes(d))) { + if (flatRowPaths.some(d => !selectedRowPaths.has(d))) { isAllRowsSelected = false } } @@ -270,5 +271,5 @@ function getRowIsSelected(row, selectedRowPaths) { ) } - return selectedRowPaths.includes(row.path.join('.')) + return selectedRowPaths.has(row.path.join('.')) } diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index 164b17b..0000000 --- a/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "compilerOptions": { - "module": "commonjs", - "lib": ["es6"], - "strict": true, - "noEmit": true, - "forceConsistentCasingInFileNames": true - }, - "files": ["index.d.ts"] -} diff --git a/tslint.json b/tslint.json deleted file mode 100644 index c0be260..0000000 --- a/tslint.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "dtslint/dtslint.json", - "rules": { - "no-empty-interface": false, - "no-unnecessary-generics": false, - "semicolon": false, - "whitespace": false - } -} diff --git a/yarn.lock b/yarn.lock index f8c0dc5..ba6cb10 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8840,6 +8840,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript@^3.7.2: + version "3.7.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb" + integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ== + typescript@next: version "3.7.0-dev.20191009" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.0-dev.20191009.tgz#852e49dca797bb35acf930583ef65e7b3b23fc01"