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

package/src/features/ColumnSizing.ts

@@ -1,22 +1,23 @@
-import {
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-} from 'react'
+import { TableFeature } from '../core/instance'
 import {
   Column,
-  Getter,
   Header,
   OnChangeFn,
-  PartialGenerics,
-  PropGetterValue,
+  TableGenerics,
   TableInstance,
   Updater,
 } from '../types'
-import { functionalUpdate, makeStateUpdater, memo, propGetter } from '../utils'
+import { makeStateUpdater } from '../utils'
+import { ColumnPinningPosition } from './Pinning'
 
 //
 
-export type ColumnSizing = Record<string, number>
+export type ColumnSizingTableState = {
+  columnSizing: ColumnSizingState
+  columnSizingInfo: ColumnSizingInfoState
+}
+
+export type ColumnSizingState = Record<string, number>
 
 export type ColumnSizingInfoState = {
   startOffset: null | number
@@ -27,95 +28,83 @@ export type ColumnSizingInfoState = {
   columnSizingStart: [string, number][]
 }
 
-export type ColumnSizingTableState = {
-  columnSizing: ColumnSizing
-  columnSizingInfo: ColumnSizingInfoState
-}
-
 export type ColumnResizeMode = 'onChange' | 'onEnd'
 
 export type ColumnSizingOptions = {
   enableColumnResizing?: boolean
   columnResizeMode?: ColumnResizeMode
-  onColumnSizingChange?: OnChangeFn<ColumnSizing>
+  onColumnSizingChange?: OnChangeFn<ColumnSizingState>
   onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>
 }
 
 export type ColumnSizingDefaultOptions = {
   columnResizeMode: ColumnResizeMode
-  onColumnSizingChange: OnChangeFn<ColumnSizing>
+  onColumnSizingChange: OnChangeFn<ColumnSizingState>
   onColumnSizingInfoChange: OnChangeFn<ColumnSizingInfoState>
 }
 
-export type ColumnResizerProps = {
-  title?: string
-  onMouseDown?: (e: ReactMouseEvent) => void
-  onTouchStart?: (e: ReactTouchEvent) => void
-  draggable?: boolean
-  role?: string
-}
-
-export type ColumnSizingInstance<TGenerics extends PartialGenerics> = {
-  setColumnSizing: (updater: Updater<ColumnSizing>) => void
+export type ColumnSizingInstance<TGenerics extends TableGenerics> = {
+  setColumnSizing: (updater: Updater<ColumnSizingState>) => void
   setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void
-  resetColumnSizing: () => void
-  resetColumnSize: (columnId: string) => void
-  resetHeaderSize: (headerId: string) => void
-  resetHeaderSizeInfo: () => void
-  getColumnCanResize: (columnId: string) => boolean
-  getHeaderCanResize: (headerId: string) => boolean
-  getHeaderResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
-    headerId: string,
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
-  getColumnIsResizing: (columnId: string) => boolean
-  getHeaderIsResizing: (headerId: string) => boolean
+  resetColumnSizing: (defaultState?: boolean) => void
+  resetHeaderSizeInfo: (defaultState?: boolean) => void
+  getTotalSize: () => number
+  getLeftTotalSize: () => number
+  getCenterTotalSize: () => number
+  getRightTotalSize: () => number
 }
 
 export type ColumnSizingColumnDef = {
   enableResizing?: boolean
-  defaultCanResize?: boolean
+  size?: number
+  minSize?: number
+  maxSize?: number
 }
 
-export type ColumnSizingColumn<TGenerics extends PartialGenerics> = {
+export type ColumnSizingColumn<TGenerics extends TableGenerics> = {
+  getSize: () => number
+  getStart: (position?: ColumnPinningPosition) => number
   getCanResize: () => boolean
   getIsResizing: () => boolean
   resetSize: () => void
 }
 
-export type ColumnSizingHeader<TGenerics extends PartialGenerics> = {
-  getCanResize: () => boolean
-  getIsResizing: () => boolean
-  getResizerProps: <TGetter extends Getter<ColumnResizerProps>>(
-    userProps?: TGetter
-  ) => undefined | PropGetterValue<ColumnResizerProps, TGetter>
-  resetSize: () => void
+export type ColumnSizingHeader<TGenerics extends TableGenerics> = {
+  getSize: () => number
+  getStart: (position?: ColumnPinningPosition) => number
+  getResizeHandler: () => (event: unknown) => void
 }
 
 //
 
 export const defaultColumnSizing = {
-  width: 150,
-  minWidth: 20,
-  maxWidth: Number.MAX_SAFE_INTEGER,
+  size: 150,
+  minSize: 20,
+  maxSize: Number.MAX_SAFE_INTEGER,
 }
 
-export const ColumnSizing = {
-  getInitialState: (): ColumnSizingTableState => {
+const getDefaultColumnSizingInfoState = (): ColumnSizingInfoState => ({
+  startOffset: null,
+  startSize: null,
+  deltaOffset: null,
+  deltaPercentage: null,
+  isResizingColumn: false,
+  columnSizingStart: [],
+})
+
+export const ColumnSizing: TableFeature = {
+  getDefaultColumnDef: (): ColumnSizingColumnDef => {
+    return defaultColumnSizing
+  },
+  getInitialState: (state): ColumnSizingTableState => {
     return {
       columnSizing: {},
-      columnSizingInfo: {
-        startOffset: null,
-        startSize: null,
-        deltaOffset: null,
-        deltaPercentage: null,
-        isResizingColumn: false,
-        columnSizingStart: [],
-      },
+      columnSizingInfo: getDefaultColumnSizingInfoState(),
+      ...state,
     }
   },
 
-  getDefaultOptions: <TGenerics extends PartialGenerics>(
+  getDefaultOptions: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
   ): ColumnSizingDefaultOptions => {
     return {
@@ -125,89 +114,100 @@ export const ColumnSizing = {
     }
   },
 
-  getInstance: <TGenerics extends PartialGenerics>(
+  createColumn: <TGenerics extends TableGenerics>(
+    column: Column<TGenerics>,
     instance: TableInstance<TGenerics>
-  ): ColumnSizingInstance<TGenerics> => {
+  ): ColumnSizingColumn<TGenerics> => {
     return {
-      setColumnSizing: updater =>
-        instance.options.onColumnSizingChange?.(
-          updater,
-          functionalUpdate(updater, instance.getState().columnSizing)
-        ),
-      setColumnSizingInfo: updater =>
-        instance.options.onColumnSizingInfoChange?.(
-          updater,
-          functionalUpdate(updater, instance.getState().columnSizingInfo)
-        ),
-      resetColumnSizing: () => {
-        instance.setColumnSizing(instance.initialState.columnSizing ?? {})
-      },
-      resetHeaderSizeInfo: () => {
-        instance.setColumnSizingInfo(
-          instance.initialState.columnSizingInfo ?? {}
+      getSize: () => {
+        const columnSize = instance.getState().columnSizing[column.id]
+
+        return Math.min(
+          Math.max(
+            column.columnDef.minSize ?? defaultColumnSizing.minSize,
+            columnSize ?? column.columnDef.size ?? defaultColumnSizing.size
+          ),
+          column.columnDef.maxSize ?? defaultColumnSizing.maxSize
         )
       },
-      resetColumnSize: columnId => {
-        instance.setColumnSizing(({ [columnId]: _, ...rest }) => {
-          return rest
-        })
-      },
-      resetHeaderSize: headerId => {
-        const header = instance.getHeader(headerId)
+      getStart: position => {
+        const columns = !position
+          ? instance.getVisibleLeafColumns()
+          : position === 'left'
+          ? instance.getLeftVisibleLeafColumns()
+          : instance.getRightVisibleLeafColumns()
 
-        return instance.resetColumnSize(header.column.id)
-      },
-      getHeaderCanResize: headerId => {
-        const header = instance.getHeader(headerId)
+        const index = columns.findIndex(d => d.id === column.id)
 
-        if (!header) {
-          throw new Error()
-        }
-
-        return instance.getColumnCanResize(header.column.id)
-      },
-      getColumnCanResize: columnId => {
-        const column = instance.getColumn(columnId)
+        if (index > 0) {
+          const prevSiblingColumn = columns[index - 1]!
 
-        if (!column) {
-          throw new Error()
+          return (
+            prevSiblingColumn.getStart(position) + prevSiblingColumn.getSize()
+          )
         }
 
+        return 0
+      },
+      resetSize: () => {
+        instance.setColumnSizing(({ [column.id]: _, ...rest }) => {
+          return rest
+        })
+      },
+      getCanResize: () => {
         return (
-          column.enableResizing ??
-          instance.options.enableColumnResizing ??
-          column.defaultCanResize ??
-          true
+          (column.columnDef.enableResizing ?? true) &&
+          (instance.options.enableColumnResizing ?? true)
         )
       },
-      getColumnIsResizing: columnId => {
-        const column = instance.getColumn(columnId)
-
-        if (!column) {
-          throw new Error()
-        }
-
+      getIsResizing: () => {
         return (
-          instance.getState().columnSizingInfo.isResizingColumn === columnId
+          instance.getState().columnSizingInfo.isResizingColumn === column.id
         )
       },
-      getHeaderIsResizing: headerId => {
-        const header = instance.getHeader(headerId)
+    }
+  },
+
+  createHeader: <TGenerics extends TableGenerics>(
+    header: Header<TGenerics>,
+    instance: TableInstance<TGenerics>
+  ): ColumnSizingHeader<TGenerics> => {
+    return {
+      getSize: () => {
+        let sum = 0
 
-        if (!header) {
-          throw new Error()
+        const recurse = (header: Header<TGenerics>) => {
+          if (header.subHeaders.length) {
+            header.subHeaders.forEach(recurse)
+          } else {
+            sum += header.column.getSize() ?? 0
+          }
         }
 
-        return instance.getColumnIsResizing(header.column.id)
+        recurse(header)
+
+        return sum
       },
+      getStart: () => {
+        if (header.index > 0) {
+          const prevSiblingHeader =
+            header.headerGroup.headers[header.index - 1]!
+          return prevSiblingHeader.getStart() + prevSiblingHeader.getSize()
+        }
 
-      getHeaderResizerProps: (headerId, userProps) => {
-        const header = instance.getHeader(headerId)
+        return 0
+      },
+      getResizeHandler: () => {
         const column = instance.getColumn(header.column.id)
-
         const canResize = column.getCanResize()
 
-        const onResizeStart = (e: ReactMouseEvent | ReactTouchEvent) => {
+        return (e: unknown) => {
+          if (!canResize) {
+            return
+          }
+
+          ;(e as any).persist?.()
+
           if (isTouchStartEvent(e)) {
             // lets not respond to multiple touches (e.g. 2 or 3 fingers)
             if (e.touches && e.touches.length > 1) {
@@ -215,17 +215,17 @@ export const ColumnSizing = {
             }
           }
 
-          const header = headerId ? instance.getHeader(headerId) : undefined
-
-          const startSize = header ? header.getWidth() : column.getWidth()
+          const startSize = header.getSize()
 
           const columnSizingStart: [string, number][] = header
-            ? header.getLeafHeaders().map(d => [d.column.id, d.getWidth()])
-            : [[column.id, column.getWidth()]]
+            ? header
+                .getLeafHeaders()
+                .map(d => [d.column.id, d.column.getSize()])
+            : [[column.id, column.getSize()]]
 
           const clientX = isTouchStartEvent(e)
-            ? Math.round(e.touches[0].clientX)
-            : e.clientX
+            ? Math.round(e.touches[0]!.clientX)
+            : (e as MouseEvent).clientX
 
           const updateOffset = (
             eventType: 'move' | 'end',
@@ -235,7 +235,7 @@ export const ColumnSizing = {
               return
             }
 
-            let newColumnSizing: ColumnSizing = {}
+            let newColumnSizing: ColumnSizingState = {}
 
             instance.setColumnSizingInfo(old => {
               const deltaOffset = clientXPos - (old?.startOffset ?? 0)
@@ -244,11 +244,10 @@ export const ColumnSizing = {
                 -0.999999
               )
 
-              old.columnSizingStart.forEach(([columnId, headerWidth]) => {
+              old.columnSizingStart.forEach(([columnId, headerSize]) => {
                 newColumnSizing[columnId] =
                   Math.round(
-                    Math.max(headerWidth + headerWidth * deltaPercentage, 0) *
-                      100
+                    Math.max(headerSize + headerSize * deltaPercentage, 0) * 100
                   ) / 100
               })
 
@@ -302,7 +301,7 @@ export const ColumnSizing = {
                 e.preventDefault()
                 e.stopPropagation()
               }
-              onMove(e.touches[0].clientX)
+              onMove(e.touches[0]!.clientX)
               return false
             },
             upHandler: (e: TouchEvent) => {
@@ -312,7 +311,7 @@ export const ColumnSizing = {
                 e.preventDefault()
                 e.stopPropagation()
               }
-              onEnd(e.touches[0].clientX)
+              onEnd(e.touches[0]!.clientX)
             },
           }
 
@@ -321,16 +320,6 @@ export const ColumnSizing = {
             : false
 
           if (isTouchStartEvent(e)) {
-            document.addEventListener(
-              'touchmove',
-              touchEvents.moveHandler,
-              passiveIfSupported
-            )
-            document.addEventListener(
-              'touchend',
-              touchEvents.upHandler,
-              passiveIfSupported
-            )
           } else {
             document.addEventListener(
               'mousemove',
@@ -354,49 +343,47 @@ export const ColumnSizing = {
             isResizingColumn: column.id,
           }))
         }
-
-        const initialProps: ColumnResizerProps = canResize
-          ? {
-              title: 'Toggle Grouping',
-              draggable: false,
-              role: 'separator',
-              onMouseDown: (e: ReactMouseEvent) => {
-                e.persist()
-                onResizeStart(e)
-              },
-              onTouchStart: (e: ReactTouchEvent) => {
-                e.persist()
-                onResizeStart(e)
-              },
-            }
-          : {}
-
-        return propGetter(initialProps, userProps)
       },
     }
   },
 
-  createColumn: <TGenerics extends PartialGenerics>(
-    column: Column<TGenerics>,
-    instance: TableInstance<TGenerics>
-  ): ColumnSizingColumn<TGenerics> => {
-    return {
-      getIsResizing: () => instance.getColumnIsResizing(column.id),
-      getCanResize: () => instance.getColumnCanResize(column.id),
-      resetSize: () => instance.resetColumnSize(column.id),
-    }
-  },
-
-  createHeader: <TGenerics extends PartialGenerics>(
-    header: Header<TGenerics>,
+  createInstance: <TGenerics extends TableGenerics>(
     instance: TableInstance<TGenerics>
-  ): ColumnSizingHeader<TGenerics> => {
+  ): ColumnSizingInstance<TGenerics> => {
     return {
-      getIsResizing: () => instance.getColumnIsResizing(header.column.id),
-      getCanResize: () => instance.getColumnCanResize(header.column.id),
-      resetSize: () => instance.resetColumnSize(header.column.id),
-      getResizerProps: userProps =>
-        instance.getHeaderResizerProps(header.id, userProps),
+      setColumnSizing: updater =>
+        instance.options.onColumnSizingChange?.(updater),
+      setColumnSizingInfo: updater =>
+        instance.options.onColumnSizingInfoChange?.(updater),
+      resetColumnSizing: defaultState => {
+        instance.setColumnSizing(
+          defaultState ? {} : instance.initialState.columnSizing ?? {}
+        )
+      },
+      resetHeaderSizeInfo: defaultState => {
+        instance.setColumnSizingInfo(
+          defaultState
+            ? getDefaultColumnSizingInfoState()
+            : instance.initialState.columnSizingInfo ??
+                getDefaultColumnSizingInfoState()
+        )
+      },
+      getTotalSize: () =>
+        instance.getHeaderGroups()[0]?.headers.reduce((sum, header) => {
+          return sum + header.getSize()
+        }, 0) ?? 0,
+      getLeftTotalSize: () =>
+        instance.getLeftHeaderGroups()[0]?.headers.reduce((sum, header) => {
+          return sum + header.getSize()
+        }, 0) ?? 0,
+      getCenterTotalSize: () =>
+        instance.getCenterHeaderGroups()[0]?.headers.reduce((sum, header) => {
+          return sum + header.getSize()
+        }, 0) ?? 0,
+      getRightTotalSize: () =>
+        instance.getRightHeaderGroups()[0]?.headers.reduce((sum, header) => {
+          return sum + header.getSize()
+        }, 0) ?? 0,
     }
   },
 }
@@ -425,8 +412,6 @@ export function passiveEventSupported() {
   return passiveSupported
 }
 
-function isTouchStartEvent(
-  e: ReactTouchEvent | ReactMouseEvent
-): e is ReactTouchEvent {
-  return e.type === 'touchstart'
+function isTouchStartEvent(e: unknown): e is TouchEvent {
+  return (e as TouchEvent).type === 'touchstart'
 }