@tanstack/table-core 8.0.0-alpha.9 → 8.0.0-beta.0

package/src/features/Expanding.ts

@@ -1,15 +1,13 @@
-import { MouseEvent, TouchEvent } from 'react'
 import { RowModel } from '..'
+import { TableFeature } from '../core/instance'
 import {
-  Getter,
   OnChangeFn,
-  PartialGenerics,
-  PropGetterValue,
+  TableGenerics,
   TableInstance,
   Row,
   Updater,
 } from '../types'
-import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
+import { makeStateUpdater } from '../utils'
 
 export type ExpandedStateList = Record<string, boolean>
 export type ExpandedState = true | Record<string, boolean>
@@ -21,82 +19,69 @@ export type ExpandedRow = {
   toggleExpanded: (expanded?: boolean) => void
   getIsExpanded: () => boolean
   getCanExpand: () => boolean
-  getToggleExpandedProps: <TGetter extends Getter<ToggleExpandedProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleExpandedProps, TGetter>
+  getToggleExpandedHandler: () => () => void
 }
 
-export type ExpandedOptions<TGenerics extends PartialGenerics> = {
+export type ExpandedOptions<TGenerics extends TableGenerics> = {
+  manualExpanding?: boolean
   onExpandedChange?: OnChangeFn<ExpandedState>
   autoResetExpanded?: boolean
-  enableExpanded?: boolean
-  expandRowsFn?: (
-    instance: TableInstance<TGenerics>,
-    rowModel: RowModel<TGenerics>
-  ) => RowModel<TGenerics>
-  expandSubRows?: boolean
-  defaultCanExpand?: boolean
+  enableExpanding?: boolean
+  getExpandedRowModel?: (
+    instance: TableInstance<TGenerics>
+  ) => () => RowModel<TGenerics>
   getIsRowExpanded?: (row: Row<TGenerics>) => boolean
   getRowCanExpand?: (row: Row<TGenerics>) => boolean
   paginateExpandedRows?: boolean
 }
 
-export type ToggleExpandedProps = {
-  title?: string
-  onClick?: (event: MouseEvent | TouchEvent) => void
-}
-
-export type ExpandedInstance<TGenerics extends PartialGenerics> = {
-  _notifyExpandedReset: () => void
+export type ExpandedInstance<TGenerics extends TableGenerics> = {
+  _autoResetExpanded: () => void
   setExpanded: (updater: Updater<ExpandedState>) => void
-  toggleRowExpanded: (rowId: string, expanded?: boolean) => void
   toggleAllRowsExpanded: (expanded?: boolean) => void
-  resetExpanded: () => void
-  getRowCanExpand: (rowId: string) => boolean
-  getIsRowExpanded: (rowId: string) => boolean
-  getToggleExpandedProps: <TGetter extends Getter<ToggleExpandedProps>>(
-    rowId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleExpandedProps, TGetter>
-  getToggleAllRowsExpandedProps: <TGetter extends Getter<ToggleExpandedProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ToggleExpandedProps, TGetter>
+  resetExpanded: (defaultState?: boolean) => void
+  getCanSomeRowsExpand: () => boolean
+  getToggleAllRowsExpandedHandler: () => (event: unknown) => void
+  getIsSomeRowsExpanded: () => boolean
   getIsAllRowsExpanded: () => boolean
   getExpandedDepth: () => number
   getExpandedRowModel: () => RowModel<TGenerics>
+  _getExpandedRowModel?: () => RowModel<TGenerics>
   getPreExpandedRowModel: () => RowModel<TGenerics>
 }
 
 //
 
-export const Expanding = {
-  getInitialState: (): ExpandedTableState => {
+export const Expanding: TableFeature = {
+  getInitialState: (state): ExpandedTableState => {
     return {
       expanded: {},
+      ...state,
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ExpandedOptions<TGenerics> => {
     return {
       onExpandedChange: makeStateUpdater('expanded', instance),
       autoResetExpanded: true,
-      getIsRowExpanded: row => !!(row?.original as { expanded?: any }).expanded,
-      expandSubRows: true,
       paginateExpandedRows: true,
     }
   },
 
-  getInstance: <TGenerics extends PartialGenerics>(
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ExpandedInstance<TGenerics> => {
     let registered = false
+    let queued = false
 
     return {
-      _notifyExpandedReset: () => {
+      _autoResetExpanded: () => {
         if (!registered) {
-          registered = true
+          instance._queue(() => {
+            registered = true
+          })
           return
         }
 
@@ -108,47 +93,15 @@ export const Expanding = {
           instance.options.autoResetAll === true ||
           instance.options.autoResetExpanded
         ) {
-          instance.resetExpanded()
+          if (queued) return
+          queued = true
+          instance._queue(() => {
+            instance.resetExpanded()
+            queued = false
+          })
         }
       },
-      setExpanded: updater =>
-        instance.options.onExpandedChange?.(
-          updater,
-          functionalUpdate(updater, instance.getState().expanded)
-        ),
-      toggleRowExpanded: (rowId, expanded) => {
-        if (!rowId) return
-
-        instance.setExpanded(old => {
-          const exists = old === true ? true : !!old?.[rowId]
-
-          let oldExpanded: ExpandedStateList = {}
-
-          if (old === true) {
-            Object.keys(instance.getRowModel().rowsById).forEach(rowId => {
-              oldExpanded[rowId] = true
-            })
-          } else {
-            oldExpanded = old
-          }
-
-          expanded = expanded ?? !exists
-
-          if (!exists && expanded) {
-            return {
-              ...oldExpanded,
-              [rowId]: true,
-            }
-          }
-
-          if (exists && !expanded) {
-            const { [rowId]: _, ...rest } = oldExpanded
-            return rest
-          }
-
-          return old
-        })
-      },
+      setExpanded: updater => instance.options.onExpandedChange?.(updater),
       toggleAllRowsExpanded: expanded => {
         if (expanded ?? !instance.getIsAllRowsExpanded()) {
           instance.setExpanded(true)
@@ -156,93 +109,38 @@ export const Expanding = {
           instance.setExpanded({})
         }
       },
-      resetExpanded: () => {
-        instance.setExpanded(instance.initialState?.expanded ?? {})
-      },
-      getIsRowExpanded: rowId => {
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(
-              `[ReactTable] getIsRowExpanded: no row found with id ${rowId}`
-            )
-          }
-          throw new Error()
-        }
-
-        const expanded = instance.getState().expanded
-
-        return !!(
-          instance.options.getIsRowExpanded?.(row) ??
-          (expanded || expanded?.[rowId])
+      resetExpanded: defaultState => {
+        instance.setExpanded(
+          defaultState ? {} : instance.initialState?.expanded ?? {}
         )
       },
-      getRowCanExpand: rowId => {
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(
-              `[ReactTable] getRowCanExpand: no row found with id ${rowId}`
-            )
-          }
-          throw new Error()
-        }
-
-        return (
-          instance.options.getRowCanExpand?.(row) ??
-          instance.options.enableExpanded ??
-          instance.options.defaultCanExpand ??
-          !!row.subRows?.length
-        )
+      getCanSomeRowsExpand: () => {
+        return instance.getRowModel().flatRows.some(row => row.getCanExpand())
       },
-      getToggleExpandedProps: (rowId, userProps) => {
-        const row = instance.getRow(rowId)
-
-        if (!row) {
-          return
-        }
-
-        const canExpand = instance.getRowCanExpand(rowId)
-
-        const initialProps: ToggleExpandedProps = {
-          title: canExpand ? 'Toggle Expanded' : undefined,
-          onClick: canExpand
-            ? (e: MouseEvent | TouchEvent) => {
-                e.persist()
-                instance.toggleRowExpanded(rowId)
-              }
-            : undefined,
+      getToggleAllRowsExpandedHandler: () => {
+        return (e: unknown) => {
+          ;(e as any).persist?.()
+          instance.toggleAllRowsExpanded()
         }
-
-        return propGetter(initialProps, userProps)
       },
-      getToggleAllRowsExpandedProps: userProps => {
-        const initialProps: ToggleExpandedProps = {
-          title: 'Toggle All Expanded',
-          onClick: (e: MouseEvent | TouchEvent) => {
-            e.persist()
-            instance.toggleAllRowsExpanded()
-          },
-        }
-
-        return propGetter(initialProps, userProps)
+      getIsSomeRowsExpanded: () => {
+        const expanded = instance.getState().expanded
+        return expanded === true || Object.values(expanded).some(Boolean)
       },
       getIsAllRowsExpanded: () => {
         const expanded = instance.getState().expanded
 
         // If expanded is true, save some cycles and return true
-        if (expanded === true) {
-          return true
+        if (typeof expanded === 'boolean') {
+          return expanded === true
+        }
+
+        if (!Object.keys(expanded).length) {
+          return false
         }
 
         // If any row is not expanded, return false
-        if (
-          Object.keys(instance.getRowModel().rowsById).some(
-            id => !instance.getIsRowExpanded(id)
-          )
-        ) {
+        if (instance.getRowModel().flatRows.some(row => row.getIsExpanded())) {
           return false
         }
 
@@ -264,56 +162,86 @@ export const Expanding = {
 
         return maxDepth
       },
-      getExpandedRowModel: memo(
-        () => [
-          instance.getState().expanded,
-          instance.getGroupedRowModel(),
-          instance.options.expandRowsFn,
-          instance.options.paginateExpandedRows,
-        ],
-        (expanded, rowModel, expandRowsFn, paginateExpandedRows) => {
-          if (
-            !expandRowsFn ||
-            // Do not expand if rows are not included in pagination
-            !paginateExpandedRows ||
-            !Object.keys(expanded ?? {}).length
-          ) {
-            return rowModel
-          }
+      getPreExpandedRowModel: () => instance.getGroupedRowModel(),
+      getExpandedRowModel: () => {
+        if (
+          !instance._getExpandedRowModel &&
+          instance.options.getExpandedRowModel
+        ) {
+          instance._getExpandedRowModel =
+            instance.options.getExpandedRowModel(instance)
+        }
 
-          return expandRowsFn(instance, rowModel)
-        },
-        {
-          key: 'getExpandedRowModel',
-          debug: () => instance.options.debugAll ?? instance.options.debugTable,
-          onChange: () => {
-            instance._notifyPageIndexReset()
-          },
+        if (
+          instance.options.manualExpanding ||
+          !instance._getExpandedRowModel
+        ) {
+          return instance.getPreExpandedRowModel()
         }
-      ),
 
-      getPreExpandedRowModel: () => instance.getGroupedRowModel(),
+        return instance._getExpandedRowModel()
+      },
     }
   },
 
-  createRow: <TGenerics extends PartialGenerics>(
+  createRow: <TGenerics extends TableGenerics>(
     row: Row<TGenerics>,
     instance: TableInstance<TGenerics>
   ): ExpandedRow => {
     return {
-      toggleExpanded: expanded =>
-        void instance.toggleRowExpanded(row.id, expanded),
-      getIsExpanded: () => instance.getIsRowExpanded(row.id),
-      getCanExpand: () => row.subRows && !!row.subRows.length,
-      getToggleExpandedProps: userProps => {
-        const initialProps: ToggleExpandedProps = {
-          title: 'Toggle Row Expanded',
-          onClick: (e: MouseEvent | TouchEvent) => {
-            e.stopPropagation()
-            instance.toggleRowExpanded(row.id)
-          },
+      toggleExpanded: expanded => {
+        instance.setExpanded(old => {
+          const exists = old === true ? true : !!old?.[row.id]
+
+          let oldExpanded: ExpandedStateList = {}
+
+          if (old === true) {
+            Object.keys(instance.getRowModel().rowsById).forEach(rowId => {
+              oldExpanded[rowId] = true
+            })
+          } else {
+            oldExpanded = old
+          }
+
+          expanded = expanded ?? !exists
+
+          if (!exists && expanded) {
+            return {
+              ...oldExpanded,
+              [row.id]: true,
+            }
+          }
+
+          if (exists && !expanded) {
+            const { [row.id]: _, ...rest } = oldExpanded
+            return rest
+          }
+
+          return old
+        })
+      },
+      getIsExpanded: () => {
+        const expanded = instance.getState().expanded
+
+        return !!(
+          instance.options.getIsRowExpanded?.(row) ??
+          (expanded === true || expanded?.[row.id])
+        )
+      },
+      getCanExpand: () => {
+        return (
+          (instance.options.getRowCanExpand?.(row) ?? true) &&
+          (instance.options.enableExpanding ?? true) &&
+          !!row.subRows?.length
+        )
+      },
+      getToggleExpandedHandler: () => {
+        const canExpand = row.getCanExpand()
+
+        return () => {
+          if (!canExpand) return
+          row.toggleExpanded()
         }
-        return propGetter(initialProps, userProps)
       },
     }
   },