From 7adc1faa8a1f5de2d31f6bf41921e3234b34947e Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Fri, 16 Dec 2022 09:17:25 -0800 Subject: [PATCH 1/2] Remove need for onMove events --- .../table/src/useTableColumnResize.ts | 13 +---- .../@react-spectrum/table/src/Resizer.tsx | 51 ++++++++++--------- .../@react-spectrum/table/src/TableView.tsx | 23 +++------ 3 files changed, 34 insertions(+), 53 deletions(-) diff --git a/packages/@react-aria/table/src/useTableColumnResize.ts b/packages/@react-aria/table/src/useTableColumnResize.ts index 5cc67a338b1..8f2c3b65850 100644 --- a/packages/@react-aria/table/src/useTableColumnResize.ts +++ b/packages/@react-aria/table/src/useTableColumnResize.ts @@ -12,7 +12,7 @@ import {ChangeEvent, Key, RefObject, useCallback, useRef} from 'react'; import {ColumnSize} from '@react-types/table'; -import {DOMAttributes, MoveEndEvent, MoveMoveEvent} from '@react-types/shared'; +import {DOMAttributes} from '@react-types/shared'; import {focusSafely} from '@react-aria/focus'; import {focusWithoutScrolling, mergeProps, useId} from '@react-aria/utils'; import {getColumnHeaderId} from './utils'; @@ -40,13 +40,6 @@ export interface AriaTableColumnResizeProps { triggerRef?: RefObject, /** If resizing is disabled. */ isDisabled?: boolean, - /** If the resizer was moved. Different from onResize because it is always called. */ - onMove?: (e: MoveMoveEvent) => void, - /** - * If the resizer was moved. Different from onResizeEnd because it is always called. - * It also carries the interaction details in the object. - * */ - onMoveEnd?: (e: MoveEndEvent) => void, /** Called when resizing starts. */ onResizeStart?: (widths: Map) => void, /** Called for every resize event that results in new column sizes. */ @@ -138,7 +131,6 @@ export function useTableColumnResize(props: AriaTableColumnResizeProps, st } deltaX *= 10; } - props.onMove?.(e); // if moving up/down only, no need to resize if (deltaX !== 0) { columnResizeWidthRef.current += deltaX; @@ -148,7 +140,6 @@ export function useTableColumnResize(props: AriaTableColumnResizeProps, st onMoveEnd(e) { let {pointerType} = e; columnResizeWidthRef.current = 0; - props.onMoveEnd?.(e); if (pointerType === 'mouse') { endResize(item); } @@ -186,8 +177,6 @@ export function useTableColumnResize(props: AriaTableColumnResizeProps, st } else { nextValue = currentWidth - 10; } - props.onMove({pointerType: 'virtual'} as MoveMoveEvent); - props.onMoveEnd({pointerType: 'virtual'} as MoveEndEvent); resize(item, nextValue); }; diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx index 7a360ad618a..ffc6fdf1dfa 100644 --- a/packages/@react-spectrum/table/src/Resizer.tsx +++ b/packages/@react-spectrum/table/src/Resizer.tsx @@ -2,10 +2,11 @@ import {classNames} from '@react-spectrum/utils'; import {ColumnSize} from '@react-types/table'; import {FocusRing} from '@react-aria/focus'; +import {getInteractionModality} from '@react-aria/interactions'; import {GridNode} from '@react-types/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {MoveMoveEvent} from '@react-types/shared'; +import {mergeProps} from '@react-aria/utils'; import React, {Key, RefObject} from 'react'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; @@ -19,8 +20,7 @@ interface ResizerProps { triggerRef: RefObject, onResizeStart: (widths: Map) => void, onResize: (widths: Map) => void, - onResizeEnd: (widths: Map) => void, - onMoveResizer: (e: MoveMoveEvent) => void + onResizeEnd: (widths: Map) => void } function Resizer(props: ResizerProps, ref: RefObject) { @@ -33,29 +33,30 @@ function Resizer(props: ResizerProps, ref: RefObject) { let stringFormatter = useLocalizedStringFormatter(intlMessages); let {direction} = useLocale(); - let {inputProps, resizerProps} = useTableColumnResize({ - ...props, - label: stringFormatter.format('columnResizer'), - isDisabled: isEmpty, - onMove: (e) => { - document.body.classList.remove(classNames(styles, 'resize-ew')); - document.body.classList.remove(classNames(styles, 'resize-e')); - document.body.classList.remove(classNames(styles, 'resize-w')); - if (layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key)) { - document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-w') : classNames(styles, 'resize-e')); - } else if (layout.getColumnMaxWidth(column.key) <= layout.getColumnWidth(column.key)) { - document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-e') : classNames(styles, 'resize-w')); - } else { - document.body.classList.add(classNames(styles, 'resize-ew')); + let {inputProps, resizerProps} = useTableColumnResize( + mergeProps(props, { + label: stringFormatter.format('columnResizer'), + isDisabled: isEmpty, + onResize: () => { + document.body.classList.remove(classNames(styles, 'resize-ew')); + document.body.classList.remove(classNames(styles, 'resize-e')); + document.body.classList.remove(classNames(styles, 'resize-w')); + if (getInteractionModality() === 'pointer') { + if (layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key)) { + document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-w') : classNames(styles, 'resize-e')); + } else if (layout.getColumnMaxWidth(column.key) <= layout.getColumnWidth(column.key)) { + document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-e') : classNames(styles, 'resize-w')); + } else { + document.body.classList.add(classNames(styles, 'resize-ew')); + } + } + }, + onResizeEnd: () => { + document.body.classList.remove(classNames(styles, 'resize-ew')); + document.body.classList.remove(classNames(styles, 'resize-e')); + document.body.classList.remove(classNames(styles, 'resize-w')); } - props.onMoveResizer(e); - }, - onMoveEnd: () => { - document.body.classList.remove(classNames(styles, 'resize-ew')); - document.body.classList.remove(classNames(styles, 'resize-e')); - document.body.classList.remove(classNames(styles, 'resize-w')); - } - }, state, layout, ref); + }), state, layout, ref); let style = { cursor: undefined, diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx index 364274c3193..b5618631ca1 100644 --- a/packages/@react-spectrum/table/src/TableView.tsx +++ b/packages/@react-spectrum/table/src/TableView.tsx @@ -23,9 +23,9 @@ import { useUnwrapDOMRef } from '@react-spectrum/utils'; import {ColumnSize, SpectrumColumnProps, SpectrumTableProps} from '@react-types/table'; -import {DOMRef, FocusableRef, MoveMoveEvent} from '@react-types/shared'; +import {DOMRef, FocusableRef} from '@react-types/shared'; import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus'; -import {getInteractionModality, useHover, usePress} from '@react-aria/interactions'; +import {getInteractionModality, useHover, useInteractionModality, usePress} from '@react-aria/interactions'; import {GridNode} from '@react-types/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -97,7 +97,6 @@ interface TableContextValue { onResizeStart: (widths: Map) => void, onResize: (widths: Map) => void, onResizeEnd: (widths: Map) => void, - onMoveResizer: (e: MoveMoveEvent) => void, headerMenuOpen: boolean, setHeaderMenuOpen: (val: boolean) => void } @@ -361,14 +360,8 @@ function TableView(props: SpectrumTableProps, ref: DOMRef { - if (e.pointerType === 'keyboard') { - lastResizeInteractionModality.current = e.pointerType; - } else { - lastResizeInteractionModality.current = undefined; - } - }; + let lastResizeInteractionModality = useInteractionModality(); + let onResizeStart = useCallback((widths) => { setIsResizing(true); propsOnResizeStart?.(widths); @@ -380,7 +373,7 @@ function TableView(props: SpectrumTableProps, ref: DOMRef + { - if (lastResizeInteractionModality.current === 'keyboard' && headerRef.current.contains(document.activeElement)) { + if (lastResizeInteractionModality === 'keyboard' && headerRef.current.contains(document.activeElement)) { document.activeElement?.scrollIntoView?.({block: 'nearest', inline: 'nearest'}); bodyRef.current.scrollLeft = headerRef.current.scrollLeft; } @@ -662,7 +655,6 @@ function ResizableTableColumnHeader(props) { setIsInResizeMode, isEmpty, onFocusedResizer, - onMoveResizer, isInResizeMode, headerMenuOpen, setHeaderMenuOpen @@ -807,8 +799,7 @@ function ResizableTableColumnHeader(props) { onResizeStart={onResizeStart} onResize={onResize} onResizeEnd={onResizeEnd} - triggerRef={useUnwrapDOMRef(triggerRef)} - onMoveResizer={onMoveResizer} /> + triggerRef={useUnwrapDOMRef(triggerRef)} />
Date: Fri, 16 Dec 2022 09:26:50 -0800 Subject: [PATCH 2/2] no need to cause a state change for modality changes --- packages/@react-spectrum/table/src/TableView.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx index b5618631ca1..635b038c66c 100644 --- a/packages/@react-spectrum/table/src/TableView.tsx +++ b/packages/@react-spectrum/table/src/TableView.tsx @@ -25,7 +25,7 @@ import { import {ColumnSize, SpectrumColumnProps, SpectrumTableProps} from '@react-types/table'; import {DOMRef, FocusableRef} from '@react-types/shared'; import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus'; -import {getInteractionModality, useHover, useInteractionModality, usePress} from '@react-aria/interactions'; +import {getInteractionModality, useHover, usePress} from '@react-aria/interactions'; import {GridNode} from '@react-types/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -360,8 +360,6 @@ function TableView(props: SpectrumTableProps, ref: DOMRef { setIsResizing(true); propsOnResizeStart?.(widths); @@ -404,7 +402,6 @@ function TableView(props: SpectrumTableProps, ref: DOMRef @@ -412,7 +409,7 @@ function TableView(props: SpectrumTableProps, ref: DOMRef { - if (lastResizeInteractionModality === 'keyboard' && headerRef.current.contains(document.activeElement)) { + if (getInteractionModality() === 'keyboard' && headerRef.current.contains(document.activeElement)) { document.activeElement?.scrollIntoView?.({block: 'nearest', inline: 'nearest'}); bodyRef.current.scrollLeft = headerRef.current.scrollLeft; } - }, [state.contentSize, headerRef, bodyRef, lastResizeInteractionModality]); + }, [state.contentSize, headerRef, bodyRef]); let headerHeight = layout.getLayoutInfo('header')?.rect.height || 0; let visibleRect = state.virtualizer.visibleRect;