-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
KeyboardShortcuts: Convert to TypeScript #47429
Changes from all commits
114b42b
7ad6024
4bc668b
b408367
d11ea89
d071ca4
0d1d220
07fc8d5
096bf8f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { useRef, Children } from '@wordpress/element'; | ||
import { useKeyboardShortcut } from '@wordpress/compose'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import type { KeyboardShortcutProps, KeyboardShortcutsProps } from './types'; | ||
|
||
function KeyboardShortcut( { | ||
target, | ||
callback, | ||
shortcut, | ||
bindGlobal, | ||
eventName, | ||
}: KeyboardShortcutProps ) { | ||
useKeyboardShortcut( shortcut, callback, { | ||
bindGlobal, | ||
target, | ||
eventName, | ||
} ); | ||
|
||
return null; | ||
} | ||
|
||
/** | ||
* `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element. | ||
* | ||
* When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document. | ||
* | ||
* It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings. | ||
* | ||
* ```jsx | ||
* import { KeyboardShortcuts } from '@wordpress/components'; | ||
* import { useState } from '@wordpress/element'; | ||
* | ||
* const MyKeyboardShortcuts = () => { | ||
* const [ isAllSelected, setIsAllSelected ] = useState( false ); | ||
* const selectAll = () => { | ||
* setIsAllSelected( true ); | ||
* }; | ||
* | ||
* return ( | ||
* <div> | ||
* <KeyboardShortcuts | ||
* shortcuts={ { | ||
* 'mod+a': selectAll, | ||
* } } | ||
* /> | ||
* [cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' } | ||
* </div> | ||
* ); | ||
* }; | ||
* ``` | ||
*/ | ||
function KeyboardShortcuts( { | ||
children, | ||
shortcuts, | ||
bindGlobal, | ||
eventName, | ||
}: KeyboardShortcutsProps ) { | ||
const target = useRef( null ); | ||
|
||
const element = Object.entries( shortcuts ?? {} ).map( | ||
( [ shortcut, callback ] ) => ( | ||
<KeyboardShortcut | ||
key={ shortcut } | ||
shortcut={ shortcut } | ||
callback={ callback } | ||
bindGlobal={ bindGlobal } | ||
eventName={ eventName } | ||
target={ target } | ||
/> | ||
) | ||
); | ||
|
||
// Render as non-visual if there are no children pressed. Keyboard | ||
// events will be bound to the document instead. | ||
if ( ! Children.count( children ) ) { | ||
return <>{ element }</>; | ||
} | ||
Comment on lines
+81
to
+83
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Runtime change. Without it, - return element;
+ return <>{ element }</>; |
||
|
||
return ( | ||
<div ref={ target }> | ||
{ element } | ||
{ children } | ||
</div> | ||
); | ||
} | ||
|
||
export default KeyboardShortcuts; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import type { ComponentMeta, ComponentStory } from '@storybook/react'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import KeyboardShortcuts from '..'; | ||
|
||
const meta: ComponentMeta< typeof KeyboardShortcuts > = { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thank you for adding Storybook examples! |
||
component: KeyboardShortcuts, | ||
title: 'Components/KeyboardShortcuts', | ||
parameters: { | ||
controls: { expanded: true }, | ||
docs: { source: { state: 'open' } }, | ||
}, | ||
}; | ||
export default meta; | ||
|
||
const Template: ComponentStory< typeof KeyboardShortcuts > = ( props ) => ( | ||
<KeyboardShortcuts { ...props } /> | ||
); | ||
|
||
export const Default = Template.bind( {} ); | ||
Default.args = { | ||
shortcuts: { | ||
// eslint-disable-next-line no-alert | ||
a: () => window.alert( 'You hit "a"!' ), | ||
// eslint-disable-next-line no-alert | ||
b: () => window.alert( 'You hit "b"!' ), | ||
}, | ||
children: ( | ||
<div> | ||
<p>{ `Hit the "a" or "b" key in this textarea:` }</p> | ||
<textarea /> | ||
</div> | ||
), | ||
}; | ||
Default.parameters = { | ||
docs: { | ||
source: { | ||
code: ` | ||
<KeyboardShortcuts | ||
shortcuts={{ | ||
a: () => window.alert('You hit "a"!'), | ||
b: () => window.alert('You hit "b"!'), | ||
}} | ||
> | ||
<div> | ||
<p> | ||
Hit the "a" or "b" key in this textarea: | ||
</p> | ||
<textarea /> | ||
</div> | ||
</KeyboardShortcuts> | ||
`, | ||
}, | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import type { useKeyboardShortcut } from '@wordpress/compose'; | ||
|
||
// TODO: We wouldn't have to do this if this type was exported from `@wordpress/compose`. | ||
type WPKeyboardShortcutConfig = NonNullable< | ||
Parameters< typeof useKeyboardShortcut >[ 2 ] | ||
>; | ||
Comment on lines
+7
to
+9
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. A bit weird, but the I've tried to balance readability and DRYness in this types file. Hope it doesn't look too random 😅 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, this looks like a good compromise. The only improvement that comes to mind is to add a little inline comment, basically explaining that the reason why we're doing this, is because that type is not exported. As a small follow-up PR, we may even consider exporting that type from |
||
|
||
export type KeyboardShortcutProps = { | ||
shortcut: string | string[]; | ||
/** | ||
* @see {@link https://craig.is/killing/mice Mousetrap documentation} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice! |
||
*/ | ||
callback: ( event: Mousetrap.ExtendedKeyboardEvent, combo: string ) => void; | ||
} & Pick< WPKeyboardShortcutConfig, 'bindGlobal' | 'eventName' | 'target' >; | ||
|
||
export type KeyboardShortcutsProps = { | ||
/** | ||
* Elements to render, upon whom key events are to be monitored. | ||
*/ | ||
children?: React.ReactNode; | ||
/** | ||
* An object of shortcut bindings, where each key is a keyboard combination, | ||
* the value of which is the callback to be invoked when the key combination is pressed. | ||
* | ||
* The value of each shortcut should be a consistent function reference, not an anonymous function. | ||
* Otherwise, the callback will not be correctly unbound when the component unmounts. | ||
* | ||
* The `KeyboardShortcuts` component will not update to reflect a changed `shortcuts` prop. | ||
* If you need to change shortcuts, mount a separate `KeyboardShortcuts` element, | ||
* which can be achieved by assigning a unique `key` prop. | ||
* | ||
* @see {@link https://craig.is/killing/mice Mousetrap documentation} | ||
*/ | ||
shortcuts: Record< string, KeyboardShortcutProps[ 'callback' ] >; | ||
ciampo marked this conversation as resolved.
Show resolved
Hide resolved
|
||
/** | ||
* By default, a callback will not be invoked if the key combination occurs in an editable field. | ||
* Pass `bindGlobal` as `true` if the key events should be observed globally, including within editable fields. | ||
* | ||
* Tip: If you need some but not all keyboard events to be observed globally, | ||
* simply render two distinct `KeyboardShortcuts` elements, one with and one without the `bindGlobal` prop. | ||
*/ | ||
bindGlobal?: KeyboardShortcutProps[ 'bindGlobal' ]; | ||
/** | ||
* By default, a callback is invoked in response to the `keydown` event. | ||
* To override this, pass `eventName` with the name of a specific keyboard event. | ||
*/ | ||
eventName?: KeyboardShortcutProps[ 'eventName' ]; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Runtime change. Should be safe.