From b3bc8a6be2f0cf0af5632b7731f6cf2767dd0198 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 15 Feb 2023 16:04:37 -0800 Subject: [PATCH 1/4] Remove unnecessary Proxy from TableView --- packages/@react-spectrum/table/src/TableView.tsx | 11 ++--------- packages/@react-stately/layout/src/TableLayout.ts | 3 ++- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx index 91c91d0f9f3..403ac9512de 100644 --- a/packages/@react-spectrum/table/src/TableView.tsx +++ b/packages/@react-spectrum/table/src/TableView.tsx @@ -171,7 +171,7 @@ function TableView(props: SpectrumTableProps, ref: DOMRef new TableLayout({ + let layout = useMemo(() => new TableLayout({ // If props.rowHeight is auto, then use estimated heights based on scale, otherwise use fixed heights. rowHeight: props.overflowMode === 'wrap' ? null @@ -192,14 +192,7 @@ function TableView(props: SpectrumTableProps, ref: DOMRef { - let proxy = new Proxy(tableLayout, { - get(target, prop, receiver) { - return prop === 'tableState' ? state : Reflect.get(target, prop, receiver); - } - }); - return proxy as TableLayout & {tableState: TableState}; - }, [state, tableLayout]); + layout.tableState = state; let {gridProps} = useTable({ ...props, diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts index f648a96386d..47f457b4f77 100644 --- a/packages/@react-stately/layout/src/TableLayout.ts +++ b/packages/@react-stately/layout/src/TableLayout.ts @@ -16,7 +16,7 @@ import {InvalidationContext, LayoutInfo, Point, Rect, Size} from '@react-stately import {Key} from 'react'; import {LayoutNode, ListLayout, ListLayoutOptions} from './ListLayout'; import {Node} from '@react-types/shared'; -import {TableColumnLayout} from '@react-stately/table'; +import {TableColumnLayout, TableState} from '@react-stately/table'; type TableLayoutOptions = ListLayoutOptions & { columnLayout: TableColumnLayout, @@ -38,6 +38,7 @@ export class TableLayout extends ListLayout { uncontrolledColumns: Map>; uncontrolledWidths: Map; resizingColumn: Key | null; + tableState: TableState; constructor(options: TableLayoutOptions) { super(options); From 3d1432e2b429a878c4634f692cdcf28e179380b6 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 15 Feb 2023 16:51:50 -0800 Subject: [PATCH 2/4] add comment for why it was the way it originally was --- packages/@react-spectrum/table/src/TableView.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx index 403ac9512de..922ae69d5eb 100644 --- a/packages/@react-spectrum/table/src/TableView.tsx +++ b/packages/@react-spectrum/table/src/TableView.tsx @@ -171,7 +171,7 @@ function TableView(props: SpectrumTableProps, ref: DOMRef new TableLayout({ + let tableLayout = useMemo(() => new TableLayout({ // If props.rowHeight is auto, then use estimated heights based on scale, otherwise use fixed heights. rowHeight: props.overflowMode === 'wrap' ? null @@ -192,7 +192,17 @@ function TableView(props: SpectrumTableProps, ref: DOMRef { + let proxy = new Proxy(tableLayout, { + get(target, prop, receiver) { + return prop === 'tableState' ? state : Reflect.get(target, prop, receiver); + } + }); + return proxy as TableLayout & {tableState: TableState}; + }, [state, tableLayout]); let {gridProps} = useTable({ ...props, From f2cfbf2d35e0d51861d7371eaa3a8c11c79e5f17 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 15 Feb 2023 17:46:24 -0800 Subject: [PATCH 3/4] remove unneeded type --- packages/@react-stately/layout/src/TableLayout.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts index 47f457b4f77..f648a96386d 100644 --- a/packages/@react-stately/layout/src/TableLayout.ts +++ b/packages/@react-stately/layout/src/TableLayout.ts @@ -16,7 +16,7 @@ import {InvalidationContext, LayoutInfo, Point, Rect, Size} from '@react-stately import {Key} from 'react'; import {LayoutNode, ListLayout, ListLayoutOptions} from './ListLayout'; import {Node} from '@react-types/shared'; -import {TableColumnLayout, TableState} from '@react-stately/table'; +import {TableColumnLayout} from '@react-stately/table'; type TableLayoutOptions = ListLayoutOptions & { columnLayout: TableColumnLayout, @@ -38,7 +38,6 @@ export class TableLayout extends ListLayout { uncontrolledColumns: Map>; uncontrolledWidths: Map; resizingColumn: Key | null; - tableState: TableState; constructor(options: TableLayoutOptions) { super(options); From bdef1419c71864c242bedd96252507833d9743c1 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 15 Feb 2023 17:52:42 -0800 Subject: [PATCH 4/4] fix useage in aria example --- .../table/stories/example-resizing.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/@react-aria/table/stories/example-resizing.tsx b/packages/@react-aria/table/stories/example-resizing.tsx index 3c84031676b..15318265baf 100644 --- a/packages/@react-aria/table/stories/example-resizing.tsx +++ b/packages/@react-aria/table/stories/example-resizing.tsx @@ -26,7 +26,7 @@ import { import {classNames} from '@react-spectrum/utils'; import {FocusRing, useFocusRing} from '@react-aria/focus'; import {mergeProps, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; -import React, {useCallback, useState} from 'react'; +import React, {useCallback, useMemo, useState} from 'react'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import {useCheckbox} from '@react-aria/checkbox'; import {useRef} from 'react'; @@ -69,6 +69,7 @@ export function Table(props) { state, ref ); + let layout = useMemo(() => ({...layoutState, tableState: state}), [layoutState, state]); useLayoutEffect(() => { if (bodyRef && bodyRef.current) { @@ -85,7 +86,7 @@ export function Table(props) { {[...headerRow.childNodes].map(column => column.props.isSelectionCell ? - : + : )} ))} @@ -125,16 +126,15 @@ export function TableHeaderRow({item, state, children, className}) { ); } -function Resizer({column, state, layoutState, onResizeStart, onResize, onResizeEnd}) { +function Resizer({column, layout, onResizeStart, onResize, onResizeEnd}) { let ref = useRef(null); let {resizerProps, inputProps} = useTableColumnResize({ column, label: 'Resizer', onResizeStart, onResize, - onResizeEnd, - tableState: state - } as AriaTableColumnResizeProps, layoutState, ref); + onResizeEnd + } as AriaTableColumnResizeProps, layout, ref); return ( <> @@ -163,7 +163,7 @@ function Resizer({column, state, layoutState, onResizeStart, onResize, onResizeE ); } -export function TableColumnHeader({column, state, widths, layoutState, onResizeStart, onResize, onResizeEnd}) { +export function TableColumnHeader({column, state, widths, layout, onResizeStart, onResize, onResizeEnd}) { let ref = useRef(); let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref); let {isFocusVisible, focusProps} = useFocusRing(); @@ -197,7 +197,7 @@ export function TableColumnHeader({column, state, widths, layoutState, onResizeS { column.props.allowsResizing && - + }