forked from microsoft/fluentui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(keyboard-keys): Export keys and legacy keyCodes
This PR implements what was proposed in microsoft#18587 and exports all named `key` values specified by w3c. Also adds legacy keycode exports as a deep import. Happy to take any suggestions to avoid this. Originallly this was the plan: ```ts export * as keyCodes from './keyCodes' ``` but unfortunately API extractor does not support this syntax microsoft/rushstack#2780
- Loading branch information
Showing
9 changed files
with
1,386 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,45 @@ | ||
# @fluentui/keyboard-keys | ||
|
||
Contains a set of keyboard constants for key and keyCode comparison in components | ||
Contains a set of keyboard constants for key and keyCode comparison in components. This package contains | ||
**named key values** from [The w3 uievents-key specification](https://www.w3.org/TR/uievents-key/). | ||
|
||
Unicode values are not included since there are a lot of locales to consider and they provide no benefit since | ||
unicode characters can be used directly in code. | ||
|
||
# Usage | ||
|
||
```ts | ||
import { Enter } from '@fluentui/keyboard-keys'; | ||
|
||
const onKeyDown = (e: React.KeyboardEvent) => { | ||
if (e.key === Enter) { | ||
// ... | ||
} | ||
|
||
// Unicode characters 'a', '1', '%'... | ||
// should be used directly in code | ||
if (e.key === 'a') { | ||
// ... | ||
} | ||
}; | ||
``` | ||
|
||
## Legacy keyCode | ||
|
||
In order to migrate easily from `@fluentui/keyboard-key` legacy `keyCode` support is available in this library but | ||
is not encouraged for reuse since this propoerty has been deprecated for a while and will be removed in future | ||
standards. | ||
|
||
```ts | ||
import { Enter, a } from '@fluentui/keyboard-keys/lib/keyCodes'; | ||
|
||
const onKeyDown = (e: React.KeyboardEvent) => { | ||
if (e.keyCode === Enter) { | ||
// ... | ||
} | ||
|
||
if (e.key === a) { | ||
// ... | ||
} | ||
}; | ||
``` |
7 changes: 7 additions & 0 deletions
7
packages/keyboard-keys/bundle-size/MultipleKeyCodes.fixture.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { Enter, Tab, ArrowDown, ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys/lib/keyCodes'; | ||
|
||
console.log(Enter, Tab, ArrowDown, ArrowLeft, ArrowRight); | ||
|
||
export default { | ||
name: 'Multiple keyCodes', | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { Enter, Tab, ArrowDown, ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys'; | ||
|
||
console.log(Enter, Tab, ArrowDown, ArrowLeft, ArrowRight); | ||
|
||
export default { | ||
name: 'Multiple keys', | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { Enter } from '@fluentui/keyboard-keys'; | ||
|
||
console.log(Enter); | ||
|
||
export default { | ||
name: 'Single key', | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { Enter } from '@fluentui/keyboard-keys/lib/keyCodes'; | ||
|
||
console.log(Enter); | ||
|
||
export default { | ||
name: 'Single keyCode', | ||
}; |
Oops, something went wrong.