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:
parent
dc4a38f391
commit
f91b011c5e
@ -2,6 +2,7 @@ import { Button, Space } from 'antd'
|
||||
import CheckIcon from '../../Icons/CheckIcon.jsx'
|
||||
import XMarkIcon from '../../Icons/XMarkIcon.jsx'
|
||||
import EditIcon from '../../Icons/EditIcon.jsx'
|
||||
import KeyboardShortcut from './KeyboardShortcut.jsx'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
const EditButtons = ({
|
||||
@ -15,26 +16,56 @@ const EditButtons = ({
|
||||
}) => {
|
||||
return isEditing ? (
|
||||
<Space size='small'>
|
||||
<Button
|
||||
icon={<CheckIcon />}
|
||||
type='primary'
|
||||
onClick={handleUpdate}
|
||||
loading={loading}
|
||||
disabled={loading || !formValid || disabled}
|
||||
/>
|
||||
<Button
|
||||
icon={<XMarkIcon />}
|
||||
onClick={cancelEditing}
|
||||
disabled={loading || disabled}
|
||||
/>
|
||||
<KeyboardShortcut
|
||||
shortcut='alt+s'
|
||||
hint='ALT S'
|
||||
onTrigger={() => {
|
||||
if (!disabled && !loading && formValid) {
|
||||
handleUpdate()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
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>
|
||||
) : (
|
||||
<Button
|
||||
icon={<EditIcon />}
|
||||
onClick={startEditing}
|
||||
loading={loading}
|
||||
disabled={disabled || loading}
|
||||
/>
|
||||
<KeyboardShortcut
|
||||
shortcut='alt+e'
|
||||
hint='ALT E'
|
||||
onTrigger={() => {
|
||||
if (!disabled && !loading) {
|
||||
startEditing()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<EditIcon />}
|
||||
onClick={startEditing}
|
||||
loading={loading}
|
||||
disabled={disabled || loading}
|
||||
/>
|
||||
</KeyboardShortcut>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user