|
| 1 | +/* |
| 2 | + * Copyright 2020 Adobe. All rights reserved. |
| 3 | + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); |
| 4 | + * you may not use this file except in compliance with the License. You may obtain a copy |
| 5 | + * of the License at http://www.apache.org/licenses/LICENSE-2.0 |
| 6 | + * |
| 7 | + * Unless required by applicable law or agreed to in writing, software distributed under |
| 8 | + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS |
| 9 | + * OF ANY KIND, either express or implied. See the License for the specific language |
| 10 | + * governing permissions and limitations under the License. |
| 11 | + */ |
| 12 | + |
| 13 | +import {focusSafely, useFocusable} from '@react-aria/focus'; |
| 14 | +import {mergeProps} from '@react-aria/utils'; |
| 15 | +import {useKeyboard, useMove} from '@react-aria/interactions'; |
| 16 | +import {useLocale} from '@react-aria/i18n'; |
| 17 | +import {useRef} from 'react'; |
| 18 | + |
| 19 | +export function useTableColumnResize(state, item, ref): any { |
| 20 | + const stateRef = useRef(null); |
| 21 | + // keep track of what the cursor on the body is so it can be restored back to that when done resizing |
| 22 | + const cursor = useRef(null); |
| 23 | + stateRef.current = state; |
| 24 | + |
| 25 | + let {direction} = useLocale(); |
| 26 | + let {focusableProps} = useFocusable({excludeFromTabOrder: true}, ref); |
| 27 | + let {keyboardProps} = useKeyboard({ |
| 28 | + onKeyDown: (e) => { |
| 29 | + if (e.key === 'Tab') { |
| 30 | + // useKeyboard stops propagation by default. We want to continue propagation for tab so focus leaves the table |
| 31 | + e.continuePropagation(); |
| 32 | + } |
| 33 | + if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') { |
| 34 | + // switch focus back to the column header on escape |
| 35 | + const columnHeader = ref.current.previousSibling; |
| 36 | + if (columnHeader) { |
| 37 | + focusSafely(columnHeader); |
| 38 | + } |
| 39 | + } |
| 40 | + } |
| 41 | + }); |
| 42 | + |
| 43 | + const columnResizeWidthRef = useRef(null); |
| 44 | + const {moveProps} = useMove({ |
| 45 | + onMoveStart() { |
| 46 | + stateRef.current.onColumnResizeStart(); |
| 47 | + columnResizeWidthRef.current = stateRef.current.getColumnWidth(item.key); |
| 48 | + cursor.current = document.body.style.cursor; |
| 49 | + document.body.style.setProperty('cursor', 'col-resize'); |
| 50 | + }, |
| 51 | + onMove({deltaX, pointerType}) { |
| 52 | + if (direction === 'rtl') { |
| 53 | + deltaX *= -1; |
| 54 | + } |
| 55 | + // if moving up/down only, no need to resize |
| 56 | + if (deltaX !== 0) { |
| 57 | + if (pointerType === 'keyboard') { |
| 58 | + deltaX *= 10; |
| 59 | + } |
| 60 | + columnResizeWidthRef.current += deltaX; |
| 61 | + stateRef.current.onColumnResize(item, columnResizeWidthRef.current); |
| 62 | + } |
| 63 | + }, |
| 64 | + onMoveEnd() { |
| 65 | + stateRef.current.onColumnResizeEnd(); |
| 66 | + columnResizeWidthRef.current = 0; |
| 67 | + document.body.style.cursor = cursor.current; |
| 68 | + } |
| 69 | + }); |
| 70 | + |
| 71 | + return { |
| 72 | + resizerProps: { |
| 73 | + ...mergeProps(moveProps, focusableProps, keyboardProps) |
| 74 | + } |
| 75 | + }; |
| 76 | +} |
0 commit comments