Skip to content

Commit 080488a

Browse files
snowystingersnowystinger
authored
Remove need for onMove events (#3858)
* Remove need for onMove events
1 parent 9aa0c7e commit 080488a

File tree

3 files changed

+33
-55
lines changed

3 files changed

+33
-55
lines changed

‎packages/@react-aria/table/src/useTableColumnResize.ts

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import {ChangeEvent, Key, RefObject, useCallback, useRef} from 'react';
1414
import {ColumnSize} from '@react-types/table';
15-
import {DOMAttributes, MoveEndEvent, MoveMoveEvent} from '@react-types/shared';
15+
import {DOMAttributes} from '@react-types/shared';
1616
import {focusSafely} from '@react-aria/focus';
1717
import {focusWithoutScrolling, mergeProps, useId} from '@react-aria/utils';
1818
import {getColumnHeaderId} from './utils';
@@ -40,13 +40,6 @@ export interface AriaTableColumnResizeProps<T> {
4040
triggerRef?: RefObject<HTMLDivElement>,
4141
/** If resizing is disabled. */
4242
isDisabled?: boolean,
43-
/** If the resizer was moved. Different from onResize because it is always called. */
44-
onMove?: (e: MoveMoveEvent) => void,
45-
/**
46-
* If the resizer was moved. Different from onResizeEnd because it is always called.
47-
* It also carries the interaction details in the object.
48-
* */
49-
onMoveEnd?: (e: MoveEndEvent) => void,
5043
/** Called when resizing starts. */
5144
onResizeStart?: (widths: Map<Key, number | string>) => void,
5245
/** Called for every resize event that results in new column sizes. */
@@ -138,7 +131,6 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
138131
}
139132
deltaX *= 10;
140133
}
141-
props.onMove?.(e);
142134
// if moving up/down only, no need to resize
143135
if (deltaX !== 0) {
144136
columnResizeWidthRef.current += deltaX;
@@ -148,7 +140,6 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
148140
onMoveEnd(e) {
149141
let {pointerType} = e;
150142
columnResizeWidthRef.current = 0;
151-
props.onMoveEnd?.(e);
152143
if (pointerType === 'mouse') {
153144
endResize(item);
154145
}
@@ -186,8 +177,6 @@ export function useTableColumnResize<T>(props: AriaTableColumnResizeProps<T>, st
186177
} else {
187178
nextValue = currentWidth - 10;
188179
}
189-
props.onMove({pointerType: 'virtual'} as MoveMoveEvent);
190-
props.onMoveEnd({pointerType: 'virtual'} as MoveEndEvent);
191180
resize(item, nextValue);
192181
};
193182

‎packages/@react-spectrum/table/src/Resizer.tsx

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
import {classNames} from '@react-spectrum/utils';
33
import {ColumnSize} from '@react-types/table';
44
import {FocusRing} from '@react-aria/focus';
5+
import {getInteractionModality} from '@react-aria/interactions';
56
import {GridNode} from '@react-types/grid';
67
// @ts-ignore
78
import intlMessages from '../intl/*.json';
8-
import {MoveMoveEvent} from '@react-types/shared';
9+
import {mergeProps} from '@react-aria/utils';
910
import React, {Key, RefObject} from 'react';
1011
import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
1112
import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -19,8 +20,7 @@ interface ResizerProps<T> {
1920
triggerRef: RefObject<HTMLDivElement>,
2021
onResizeStart: (widths: Map<Key, ColumnSize>) => void,
2122
onResize: (widths: Map<Key, ColumnSize>) => void,
22-
onResizeEnd: (widths: Map<Key, ColumnSize>) => void,
23-
onMoveResizer: (e: MoveMoveEvent) => void
23+
onResizeEnd: (widths: Map<Key, ColumnSize>) => void
2424
}
2525

2626
function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
@@ -33,29 +33,30 @@ function Resizer<T>(props: ResizerProps<T>, ref: RefObject<HTMLInputElement>) {
3333
let stringFormatter = useLocalizedStringFormatter(intlMessages);
3434
let {direction} = useLocale();
3535

36-
let {inputProps, resizerProps} = useTableColumnResize<unknown>({
37-
...props,
38-
label: stringFormatter.format('columnResizer'),
39-
isDisabled: isEmpty,
40-
onMove: (e) => {
41-
document.body.classList.remove(classNames(styles, 'resize-ew'));
42-
document.body.classList.remove(classNames(styles, 'resize-e'));
43-
document.body.classList.remove(classNames(styles, 'resize-w'));
44-
if (layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key)) {
45-
document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-w') : classNames(styles, 'resize-e'));
46-
} else if (layout.getColumnMaxWidth(column.key) <= layout.getColumnWidth(column.key)) {
47-
document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-e') : classNames(styles, 'resize-w'));
48-
} else {
49-
document.body.classList.add(classNames(styles, 'resize-ew'));
36+
let {inputProps, resizerProps} = useTableColumnResize<unknown>(
37+
mergeProps(props, {
38+
label: stringFormatter.format('columnResizer'),
39+
isDisabled: isEmpty,
40+
onResize: () => {
41+
document.body.classList.remove(classNames(styles, 'resize-ew'));
42+
document.body.classList.remove(classNames(styles, 'resize-e'));
43+
document.body.classList.remove(classNames(styles, 'resize-w'));
44+
if (getInteractionModality() === 'pointer') {
45+
if (layout.getColumnMinWidth(column.key) >= layout.getColumnWidth(column.key)) {
46+
document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-w') : classNames(styles, 'resize-e'));
47+
} else if (layout.getColumnMaxWidth(column.key) <= layout.getColumnWidth(column.key)) {
48+
document.body.classList.add(direction === 'rtl' ? classNames(styles, 'resize-e') : classNames(styles, 'resize-w'));
49+
} else {
50+
document.body.classList.add(classNames(styles, 'resize-ew'));
51+
}
52+
}
53+
},
54+
onResizeEnd: () => {
55+
document.body.classList.remove(classNames(styles, 'resize-ew'));
56+
document.body.classList.remove(classNames(styles, 'resize-e'));
57+
document.body.classList.remove(classNames(styles, 'resize-w'));
5058
}
51-
props.onMoveResizer(e);
52-
},
53-
onMoveEnd: () => {
54-
document.body.classList.remove(classNames(styles, 'resize-ew'));
55-
document.body.classList.remove(classNames(styles, 'resize-e'));
56-
document.body.classList.remove(classNames(styles, 'resize-w'));
57-
}
58-
}, state, layout, ref);
59+
}), state, layout, ref);
5960

6061
let style = {
6162
cursor: undefined,

‎packages/@react-spectrum/table/src/TableView.tsx

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
useUnwrapDOMRef
2424
} from '@react-spectrum/utils';
2525
import {ColumnSize, SpectrumColumnProps, SpectrumTableProps} from '@react-types/table';
26-
import {DOMRef, FocusableRef, MoveMoveEvent} from '@react-types/shared';
26+
import {DOMRef, FocusableRef} from '@react-types/shared';
2727
import {FocusRing, FocusScope, useFocusRing} from '@react-aria/focus';
2828
import {getInteractionModality, useHover, usePress} from '@react-aria/interactions';
2929
import {GridNode} from '@react-types/grid';
@@ -97,7 +97,6 @@ interface TableContextValue<T> {
9797
onResizeStart: (widths: Map<Key, ColumnSize>) => void,
9898
onResize: (widths: Map<Key, ColumnSize>) => void,
9999
onResizeEnd: (widths: Map<Key, ColumnSize>) => void,
100-
onMoveResizer: (e: MoveMoveEvent) => void,
101100
headerMenuOpen: boolean,
102101
setHeaderMenuOpen: (val: boolean) => void
103102
}
@@ -361,14 +360,6 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
361360
bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
362361
};
363362

364-
let lastResizeInteractionModality = useRef(undefined);
365-
let onMoveResizer = (e) => {
366-
if (e.pointerType === 'keyboard') {
367-
lastResizeInteractionModality.current = e.pointerType;
368-
} else {
369-
lastResizeInteractionModality.current = undefined;
370-
}
371-
};
372363
let onResizeStart = useCallback((widths) => {
373364
setIsResizing(true);
374365
propsOnResizeStart?.(widths);
@@ -380,7 +371,7 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
380371
}, [propsOnResizeEnd, setIsInResizeMode, setIsResizing]);
381372

382373
return (
383-
<TableContext.Provider value={{state, layout, onResizeStart, onResize: props.onResize, onResizeEnd, headerRowHovered, isInResizeMode, setIsInResizeMode, isEmpty, onFocusedResizer, onMoveResizer, headerMenuOpen, setHeaderMenuOpen}}>
374+
<TableContext.Provider value={{state, layout, onResizeStart, onResize: props.onResize, onResizeEnd, headerRowHovered, isInResizeMode, setIsInResizeMode, isEmpty, onFocusedResizer, headerMenuOpen, setHeaderMenuOpen}}>
384375
<TableVirtualizer
385376
{...mergeProps(gridProps, focusProps)}
386377
{...styleProps}
@@ -411,15 +402,14 @@ function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<H
411402
onVisibleRectChange={onVisibleRectChange}
412403
domRef={domRef}
413404
headerRef={headerRef}
414-
lastResizeInteractionModality={lastResizeInteractionModality}
415405
bodyRef={bodyRef}
416406
isFocusVisible={isFocusVisible} />
417407
</TableContext.Provider>
418408
);
419409
}
420410

421411
// This is a custom Virtualizer that also has a header that syncs its scroll position with the body.
422-
function TableVirtualizer({layout, collection, lastResizeInteractionModality, focusedKey, renderView, renderWrapper, domRef, bodyRef, headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible, ...otherProps}) {
412+
function TableVirtualizer({layout, collection, focusedKey, renderView, renderWrapper, domRef, bodyRef, headerRef, onVisibleRectChange: onVisibleRectChangeProp, isFocusVisible, ...otherProps}) {
423413
let {direction} = useLocale();
424414
let loadingState = collection.body.props.loadingState;
425415
let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
@@ -466,11 +456,11 @@ function TableVirtualizer({layout, collection, lastResizeInteractionModality, fo
466456
// only that it changes in a resize, and when that happens, we want to sync the body to the
467457
// header scroll position
468458
useEffect(() => {
469-
if (lastResizeInteractionModality.current === 'keyboard' && headerRef.current.contains(document.activeElement)) {
459+
if (getInteractionModality() === 'keyboard' && headerRef.current.contains(document.activeElement)) {
470460
document.activeElement?.scrollIntoView?.({block: 'nearest', inline: 'nearest'});
471461
bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
472462
}
473-
}, [state.contentSize, headerRef, bodyRef, lastResizeInteractionModality]);
463+
}, [state.contentSize, headerRef, bodyRef]);
474464

475465
let headerHeight = layout.getLayoutInfo('header')?.rect.height || 0;
476466
let visibleRect = state.virtualizer.visibleRect;
@@ -662,7 +652,6 @@ function ResizableTableColumnHeader(props) {
662652
setIsInResizeMode,
663653
isEmpty,
664654
onFocusedResizer,
665-
onMoveResizer,
666655
isInResizeMode,
667656
headerMenuOpen,
668657
setHeaderMenuOpen
@@ -807,8 +796,7 @@ function ResizableTableColumnHeader(props) {
807796
onResizeStart={onResizeStart}
808797
onResize={onResize}
809798
onResizeEnd={onResizeEnd}
810-
triggerRef={useUnwrapDOMRef(triggerRef)}
811-
onMoveResizer={onMoveResizer} />
799+
triggerRef={useUnwrapDOMRef(triggerRef)} />
812800
<div
813801
aria-hidden
814802
className={classNames(

0 commit comments

Comments
 (0)