TableView Column resizing #2883
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| /* | ||
| * Copyright 2020 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
|
|
||
| import {focusSafely, useFocusable} from '@react-aria/focus'; | ||
| import {mergeProps} from '@react-aria/utils'; | ||
| import {useKeyboard, useMove} from '@react-aria/interactions'; | ||
| import {useLocale} from '@react-aria/i18n'; | ||
| import {useRef} from 'react'; | ||
|
|
||
| export function useTableColumnResize(state, item, ref): any { | ||
| const stateRef = useRef(null); | ||
| // keep track of what the cursor on the body is so it can be restored back to that when done resizing | ||
| const cursor = useRef(null); | ||
| stateRef.current = state; | ||
|
|
||
| let {direction} = useLocale(); | ||
| let {focusableProps} = useFocusable({excludeFromTabOrder: true}, ref); | ||
| let {keyboardProps} = useKeyboard({ | ||
| onKeyDown: (e) => { | ||
| if (e.key === 'Tab') { | ||
| // useKeyboard stops propagation by default. We want to continue propagation for tab so focus leaves the table | ||
| e.continuePropagation(); | ||
| } | ||
| if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') { | ||
| // switch focus back to the column header on escape | ||
| const columnHeader = ref.current.previousSibling; | ||
| if (columnHeader) { | ||
| focusSafely(columnHeader); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| const columnResizeWidthRef = useRef(null); | ||
| const {moveProps} = useMove({ | ||
| onMoveStart() { | ||
| stateRef.current.onColumnResizeStart(); | ||
| columnResizeWidthRef.current = stateRef.current.getColumnWidth(item.key); | ||
snowystinger marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| cursor.current = document.body.style.cursor; | ||
| document.body.style.setProperty('cursor', 'col-resize'); | ||
| }, | ||
| onMove({deltaX, pointerType}) { | ||
| if (direction === 'rtl') { | ||
| deltaX *= -1; | ||
| } | ||
| // if moving up/down only, no need to resize | ||
| if (deltaX !== 0) { | ||
| if (pointerType === 'keyboard') { | ||
| deltaX *= 10; | ||
| } | ||
| columnResizeWidthRef.current += deltaX; | ||
| stateRef.current.onColumnResize(item, columnResizeWidthRef.current); | ||
| } | ||
| }, | ||
| onMoveEnd() { | ||
| stateRef.current.onColumnResizeEnd(); | ||
| columnResizeWidthRef.current = 0; | ||
| document.body.style.cursor = cursor.current; | ||
| } | ||
| }); | ||
|
|
||
| return { | ||
| resizerProps: { | ||
| ...mergeProps(moveProps, focusableProps, keyboardProps) | ||
| } | ||
| }; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| /* eslint-disable jsx-a11y/role-supports-aria-props */ | ||
| import {classNames} from '@react-spectrum/utils'; | ||
| import {FocusRing} from '@react-aria/focus'; | ||
| import React from 'react'; | ||
| import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; | ||
| import {useTableColumnResize} from '@react-aria/table/src/useTableColumnResize'; | ||
| import {useTableContext} from './TableView'; | ||
|
|
||
|
|
||
| function Resizer(props, ref) { | ||
| const {item} = props; | ||
| let state = useTableContext(); | ||
| let {resizerProps} = useTableColumnResize(state, item, ref); | ||
| return ( | ||
| <FocusRing focusRingClass={classNames(styles, 'focus-ring')}> | ||
| <div | ||
| ref={ref} | ||
| {...resizerProps} | ||
| className={classNames(styles, 'spectrum-Table-columnResizer')} | ||
| role="separator" | ||
| aria-orientation="vertical" | ||
| aria-label="Resize column" | ||
| aria-labelledby={item.key} | ||
|
There was a problem hiding this comment. This won't actually point to a As an aside I noticed that the column headers also have lost their "columnheader" role in favor of the "button" role provided by MenuTrigger, note to self to double check that the rest of the attributes are still valid (it seems ok so far?) |
||
| aria-valuenow={state.getColumnWidth(item.key)} | ||
| aria-valuemin={state.getColumnMinWidth(item.key)} | ||
| aria-valuemax={state.getColumnMaxWidth(item.key)} /> | ||
| </FocusRing> | ||
| ); | ||
| } | ||
|
|
||
| const _Resizer = React.forwardRef(Resizer); | ||
| export {_Resizer as Resizer}; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perhaps a minor point:
Is adding a menu trigger to the column header when the column supports resizing an interaction pattern we'll be recommending for a non-Spectrum tables as well? If not, then I don't know if we wanna disable the press to sort interactions here, perhaps the pressProps from this hook should be overridden in the TableView instead.
Just thinking about a case where someone using our table hooks implements column resizing in a such a way that pressing the column headers should perform the sort action still and resizing via keyboard is handled in a different way (keyboard shortcut maybe? I'll need to dig to see if any other tables support resizing columns via keyboard).