Add keyboard shortcuts to ObjectTableNavigationButtons for enhanced navigation
Some checks failed
farmcontrol/farmcontrol-ui/pipeline/head There was a failure building this commit

- Integrated KeyboardShortcut component to allow navigation using 'ALT + LEFT' and 'ALT + RIGHT' key combinations.
- Updated button handlers to trigger navigation actions based on keyboard shortcuts, improving user experience and accessibility.
- Ensured that navigation is only triggered when the buttons are not disabled and the relevant neighbors exist.
This commit is contained in:
Tom Butcher 2026-08-01 14:00:45 +01:00
parent 9d3de7bc01
commit e4657cc692

View File

@ -7,6 +7,7 @@ import PropTypes from 'prop-types'
import { ApiServerContext } from '../context/ApiServerContext' import { ApiServerContext } from '../context/ApiServerContext'
import { AuthContext } from '../context/AuthContext' import { AuthContext } from '../context/AuthContext'
import { useTableStatePersistence } from '../context/TableStateContext' import { useTableStatePersistence } from '../context/TableStateContext'
import KeyboardShortcut from './KeyboardShortcut.jsx'
const ObjectTableNavigationButtons = ({ const ObjectTableNavigationButtons = ({
disabled, disabled,
@ -95,16 +96,36 @@ const ObjectTableNavigationButtons = ({
<Divider type='vertical' style={{ margin: '0 4px', height: '18px' }} /> <Divider type='vertical' style={{ margin: '0 4px', height: '18px' }} />
)} )}
<Space size='small'> <Space size='small'>
<KeyboardShortcut
shortcut='alt+arrowleft'
hint='ALT LEFT'
onTrigger={useCallback(() => {
if (!disabled && !loading && neighbors.previous?._id) {
handlePrevious()
}
}, [disabled, loading, neighbors.previous?._id])}
>
<Button <Button
icon={<ArrowLeftIcon />} icon={<ArrowLeftIcon />}
onClick={handlePrevious} onClick={handlePrevious}
disabled={disabled || loading || !neighbors.previous?._id} disabled={disabled || loading || !neighbors.previous?._id}
/> />
</KeyboardShortcut>
<KeyboardShortcut
shortcut='alt+arrowright'
hint='ALT RIGHT'
onTrigger={useCallback(() => {
if (!disabled && !loading && neighbors.next?._id) {
handleNext()
}
}, [disabled, loading, neighbors.next?._id])}
>
<Button <Button
icon={<ArrowRightIcon />} icon={<ArrowRightIcon />}
onClick={handleNext} onClick={handleNext}
disabled={disabled || loading || !neighbors.next?._id} disabled={disabled || loading || !neighbors.next?._id}
/> />
</KeyboardShortcut>
</Space> </Space>
</Flex> </Flex>
) )