From c2db08169a0bb77aecd4a5257ecd2588ddc959e1 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Mon, 13 Feb 2023 12:30:48 -0800 Subject: [PATCH 1/2] Update column resizing stately function property names --- .../table/src/useTableColumnResize.ts | 10 ++++---- .../@react-spectrum/table/src/TableView.tsx | 2 +- .../@react-stately/layout/src/TableLayout.ts | 6 ++--- .../table/src/useTableColumnResizeState.ts | 24 +++++++++---------- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/@react-aria/table/src/useTableColumnResize.ts b/packages/@react-aria/table/src/useTableColumnResize.ts index bea767ed1a7..1fc135619d1 100644 --- a/packages/@react-aria/table/src/useTableColumnResize.ts +++ b/packages/@react-aria/table/src/useTableColumnResize.ts @@ -77,25 +77,25 @@ export function useTableColumnResize(props: AriaTableColumnResizeProps, st let startResize = useCallback((item) => { if (!isResizing.current) { - lastSize.current = state.onColumnResize(item.key, state.getColumnWidth(item.key)); - state.onColumnResizeStart(item.key); + lastSize.current = state.computeResizedColumns(item.key, state.getColumnWidth(item.key)); + state.startResize(item.key); onResizeStart?.(lastSize.current); } isResizing.current = true; }, [isResizing, onResizeStart, state]); let resize = useCallback((item, newWidth) => { - let sizes = state.onColumnResize(item.key, newWidth); + let sizes = state.computeResizedColumns(item.key, newWidth); onResize?.(sizes); lastSize.current = sizes; }, [onResize, state]); let endResize = useCallback((item) => { if (lastSize.current == null) { - lastSize.current = state.onColumnResize(item.key, state.getColumnWidth(item.key)); + lastSize.current = state.computeResizedColumns(item.key, state.getColumnWidth(item.key)); } if (isResizing.current) { - state.onColumnResizeEnd(); + state.endResize(); onResizeEnd?.(lastSize.current); } isResizing.current = false; diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx index d4883b5b6e5..91c91d0f9f3 100644 --- a/packages/@react-spectrum/table/src/TableView.tsx +++ b/packages/@react-spectrum/table/src/TableView.tsx @@ -732,7 +732,7 @@ function ResizableTableColumnHeader(props) { state.sort(column.key, 'descending'); break; case 'resize': - layout.onColumnResizeStart(column.key); + layout.startResize(column.key); setIsInResizeMode(true); break; } diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts index d1b4b219943..a4db9044bb9 100644 --- a/packages/@react-stately/layout/src/TableLayout.ts +++ b/packages/@react-stately/layout/src/TableLayout.ts @@ -90,12 +90,12 @@ export class TableLayout extends ListLayout { } // outside, where this is called, should call props.onColumnResizeStart... - onColumnResizeStart(key: Key): void { + startResize(key: Key): void { this.resizingColumn = key; } // only way to call props.onColumnResize with the new size outside of Layout is to send the result back - onColumnResize(key: Key, width: number): Map { + computeResizedColumns(key: Key, width: number): Map { let newControlled = new Map(Array.from(this.controlledColumns).map(([key, entry]) => [key, entry.props.width])); let newSizes = this.columnLayout.resizeColumnWidth(this.virtualizer.visibleRect.width, this.collection, newControlled, this.uncontrolledWidths, key, width); @@ -110,7 +110,7 @@ export class TableLayout extends ListLayout { return newSizes; } - onColumnResizeEnd(): void { + endResize(): void { this.resizingColumn = null; } diff --git a/packages/@react-stately/table/src/useTableColumnResizeState.ts b/packages/@react-stately/table/src/useTableColumnResizeState.ts index 2aabf4d411f..047a9a2dc95 100644 --- a/packages/@react-stately/table/src/useTableColumnResizeState.ts +++ b/packages/@react-stately/table/src/useTableColumnResizeState.ts @@ -32,11 +32,11 @@ export interface TableColumnResizeState { * Called to update the state that a resize event has occurred. * Returns the new widths for all columns based on the resized column. */ - onColumnResize: (key: Key, width: number) => Map, + computeResizedColumns: (key: Key, width: number) => Map, /** Callback for when onColumnResize has started. */ - onColumnResizeStart: (key: Key) => void, + startResize: (key: Key) => void, /** Callback for when onColumnResize has ended. */ - onColumnResizeEnd: () => void, + endResize: () => void, /** Gets the current width for the specified column. */ getColumnWidth: (key: Key) => number, /** Gets the current minWidth for the specified column. */ @@ -87,11 +87,11 @@ export function useTableColumnResizeState(props: TableColumnResizeStateProps< columnLayout.recombineColumns(state.collection.columns, uncontrolledWidths, uncontrolledColumns, controlledColumns) , [state.collection.columns, uncontrolledWidths, uncontrolledColumns, controlledColumns, columnLayout]); - let onColumnResizeStart = useCallback((key: Key) => { + let startResize = useCallback((key: Key) => { setResizingColumn(key); }, [setResizingColumn]); - let onColumnResize = useCallback((key: Key, width: number): Map => { + let computeResizedColumns = useCallback((key: Key, width: number): Map => { let newControlled = new Map(Array.from(controlledColumns).map(([key, entry]) => [key, entry.props.width])); let newSizes = columnLayout.resizeColumnWidth(tableWidth, state.collection, newControlled, uncontrolledWidths, key, width); @@ -101,7 +101,7 @@ export function useTableColumnResizeState(props: TableColumnResizeStateProps< return newSizes; }, [controlledColumns, uncontrolledColumns, setUncontrolledWidths, tableWidth, columnLayout, state.collection, uncontrolledWidths]); - let onColumnResizeEnd = useCallback(() => { + let endResize = useCallback(() => { setResizingColumn(null); }, [setResizingColumn]); @@ -111,9 +111,9 @@ export function useTableColumnResizeState(props: TableColumnResizeStateProps< return useMemo(() => ({ resizingColumn, - onColumnResize, - onColumnResizeStart, - onColumnResizeEnd, + computeResizedColumns, + startResize, + endResize, getColumnWidth: (key: Key) => columnLayout.getColumnWidth(key), getColumnMinWidth: (key: Key) => @@ -125,9 +125,9 @@ export function useTableColumnResizeState(props: TableColumnResizeStateProps< }), [ columnLayout, resizingColumn, - onColumnResize, - onColumnResizeStart, - onColumnResizeEnd, + computeResizedColumns, + startResize, + endResize, columnWidths, state ]); From a7a844b07f8d51b9129f45956f0e0f7f0aff0997 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Tue, 14 Feb 2023 16:07:08 -0800 Subject: [PATCH 2/2] change name function to be more accurate --- packages/@react-aria/table/src/useTableColumnResize.ts | 6 +++--- packages/@react-stately/layout/src/TableLayout.ts | 2 +- .../@react-stately/table/src/useTableColumnResizeState.ts | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/@react-aria/table/src/useTableColumnResize.ts b/packages/@react-aria/table/src/useTableColumnResize.ts index 1fc135619d1..4d5f9c3afb4 100644 --- a/packages/@react-aria/table/src/useTableColumnResize.ts +++ b/packages/@react-aria/table/src/useTableColumnResize.ts @@ -77,7 +77,7 @@ export function useTableColumnResize(props: AriaTableColumnResizeProps, st let startResize = useCallback((item) => { if (!isResizing.current) { - lastSize.current = state.computeResizedColumns(item.key, state.getColumnWidth(item.key)); + lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key)); state.startResize(item.key); onResizeStart?.(lastSize.current); } @@ -85,14 +85,14 @@ export function useTableColumnResize(props: AriaTableColumnResizeProps, st }, [isResizing, onResizeStart, state]); let resize = useCallback((item, newWidth) => { - let sizes = state.computeResizedColumns(item.key, newWidth); + let sizes = state.updateResizedColumns(item.key, newWidth); onResize?.(sizes); lastSize.current = sizes; }, [onResize, state]); let endResize = useCallback((item) => { if (lastSize.current == null) { - lastSize.current = state.computeResizedColumns(item.key, state.getColumnWidth(item.key)); + lastSize.current = state.updateResizedColumns(item.key, state.getColumnWidth(item.key)); } if (isResizing.current) { state.endResize(); diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts index a4db9044bb9..f648a96386d 100644 --- a/packages/@react-stately/layout/src/TableLayout.ts +++ b/packages/@react-stately/layout/src/TableLayout.ts @@ -95,7 +95,7 @@ export class TableLayout extends ListLayout { } // only way to call props.onColumnResize with the new size outside of Layout is to send the result back - computeResizedColumns(key: Key, width: number): Map { + updateResizedColumns(key: Key, width: number): Map { let newControlled = new Map(Array.from(this.controlledColumns).map(([key, entry]) => [key, entry.props.width])); let newSizes = this.columnLayout.resizeColumnWidth(this.virtualizer.visibleRect.width, this.collection, newControlled, this.uncontrolledWidths, key, width); diff --git a/packages/@react-stately/table/src/useTableColumnResizeState.ts b/packages/@react-stately/table/src/useTableColumnResizeState.ts index 047a9a2dc95..0cebae17b82 100644 --- a/packages/@react-stately/table/src/useTableColumnResizeState.ts +++ b/packages/@react-stately/table/src/useTableColumnResizeState.ts @@ -32,7 +32,7 @@ export interface TableColumnResizeState { * Called to update the state that a resize event has occurred. * Returns the new widths for all columns based on the resized column. */ - computeResizedColumns: (key: Key, width: number) => Map, + updateResizedColumns: (key: Key, width: number) => Map, /** Callback for when onColumnResize has started. */ startResize: (key: Key) => void, /** Callback for when onColumnResize has ended. */ @@ -91,7 +91,7 @@ export function useTableColumnResizeState(props: TableColumnResizeStateProps< setResizingColumn(key); }, [setResizingColumn]); - let computeResizedColumns = useCallback((key: Key, width: number): Map => { + let updateResizedColumns = useCallback((key: Key, width: number): Map => { let newControlled = new Map(Array.from(controlledColumns).map(([key, entry]) => [key, entry.props.width])); let newSizes = columnLayout.resizeColumnWidth(tableWidth, state.collection, newControlled, uncontrolledWidths, key, width); @@ -111,7 +111,7 @@ export function useTableColumnResizeState(props: TableColumnResizeStateProps< return useMemo(() => ({ resizingColumn, - computeResizedColumns, + updateResizedColumns, startResize, endResize, getColumnWidth: (key: Key) => @@ -125,7 +125,7 @@ export function useTableColumnResizeState(props: TableColumnResizeStateProps< }), [ columnLayout, resizingColumn, - computeResizedColumns, + updateResizedColumns, startResize, endResize, columnWidths,