Add keyboard shortcuts to EditButtons for improved editing experience

- Integrated KeyboardShortcut component to the EditButtons, allowing users to trigger update and cancel actions using 'ALT + S' and 'ALT + C' respectively during editing.
- Added a shortcut for starting editing with 'ALT + E' when not in editing mode, enhancing user interaction and accessibility.
- Updated button states to ensure actions are only available when not loading or disabled, improving overall workflow efficiency.
This commit is contained in:
Tom Butcher 2026-08-01 14:18:00 +01:00
parent dc4a38f391
commit f91b011c5e

View File

@ -2,6 +2,7 @@ import { Button, Space } from 'antd'
import CheckIcon from '../../Icons/CheckIcon.jsx' import CheckIcon from '../../Icons/CheckIcon.jsx'
import XMarkIcon from '../../Icons/XMarkIcon.jsx' import XMarkIcon from '../../Icons/XMarkIcon.jsx'
import EditIcon from '../../Icons/EditIcon.jsx' import EditIcon from '../../Icons/EditIcon.jsx'
import KeyboardShortcut from './KeyboardShortcut.jsx'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
const EditButtons = ({ const EditButtons = ({
@ -15,26 +16,56 @@ const EditButtons = ({
}) => { }) => {
return isEditing ? ( return isEditing ? (
<Space size='small'> <Space size='small'>
<Button <KeyboardShortcut
icon={<CheckIcon />} shortcut='alt+s'
type='primary' hint='ALT S'
onClick={handleUpdate} onTrigger={() => {
loading={loading} if (!disabled && !loading && formValid) {
disabled={loading || !formValid || disabled} handleUpdate()
/> }
<Button }}
icon={<XMarkIcon />} >
onClick={cancelEditing} <Button
disabled={loading || disabled} icon={<CheckIcon />}
/> type='primary'
onClick={handleUpdate}
loading={loading}
disabled={loading || !formValid || disabled}
/>
</KeyboardShortcut>
<KeyboardShortcut
shortcut='alt+c'
hint='ALT C'
onTrigger={() => {
if (!disabled && !loading) {
cancelEditing()
}
}}
>
<Button
icon={<XMarkIcon />}
onClick={cancelEditing}
disabled={loading || disabled}
/>
</KeyboardShortcut>
</Space> </Space>
) : ( ) : (
<Button <KeyboardShortcut
icon={<EditIcon />} shortcut='alt+e'
onClick={startEditing} hint='ALT E'
loading={loading} onTrigger={() => {
disabled={disabled || loading} if (!disabled && !loading) {
/> startEditing()
}
}}
>
<Button
icon={<EditIcon />}
onClick={startEditing}
loading={loading}
disabled={disabled || loading}
/>
</KeyboardShortcut>
) )
} }