Add keyboard shortcuts to ObjectTableNavigationButtons for enhanced navigation
Some checks failed
farmcontrol/farmcontrol-ui/pipeline/head There was a failure building this commit
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:
parent
9d3de7bc01
commit
e4657cc692
@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user