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 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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user