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..635b038c66c 100644 --- a/packages/@react-spectrum/table/src/TableView.tsx +++ b/packages/@react-spectrum/table/src/TableView.tsx @@ -23,7 +23,7 @@ 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 {GridNode} from '@react-types/grid'; @@ -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,6 @@ function TableView(props: SpectrumTableProps, ref: DOMRef { - if (e.pointerType === 'keyboard') { - lastResizeInteractionModality.current = e.pointerType; - } else { - lastResizeInteractionModality.current = undefined; - } - }; let onResizeStart = useCallback((widths) => { setIsResizing(true); propsOnResizeStart?.(widths); @@ -380,7 +371,7 @@ function TableView(props: SpectrumTableProps, ref: DOMRef + (props: SpectrumTableProps, ref: DOMRef @@ -419,7 +409,7 @@ function TableView(props: SpectrumTableProps, ref: DOMRef { - if (lastResizeInteractionModality.current === '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; @@ -662,7 +652,6 @@ function ResizableTableColumnHeader(props) { setIsInResizeMode, isEmpty, onFocusedResizer, - onMoveResizer, isInResizeMode, headerMenuOpen, setHeaderMenuOpen @@ -807,8 +796,7 @@ function ResizableTableColumnHeader(props) { onResizeStart={onResizeStart} onResize={onResize} onResizeEnd={onResizeEnd} - triggerRef={useUnwrapDOMRef(triggerRef)} - onMoveResizer={onMoveResizer} /> + triggerRef={useUnwrapDOMRef(triggerRef)} />