Skip to content

Commit

Permalink
feat(keyboard-keys): Export keys and legacy keyCodes (#18896)
Browse files Browse the repository at this point in the history
* feat(keyboard-keys): Export keys and legacy keyCodes

This PR implements what was proposed in #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

* remove deep export

* update fixture
  • Loading branch information
ling1726 authored Jul 15, 2021
1 parent 966a306 commit e67f813
Show file tree
Hide file tree
Showing 9 changed files with 2,044 additions and 3 deletions.
44 changes: 43 additions & 1 deletion packages/keyboard-keys/README.md
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 { keyCodes } from '@fluentui/keyboard-keys';

const onKeyDown = (e: React.KeyboardEvent) => {
if (e.keyCode === keyCodes.Enter) {
// ...
}

if (e.key === keyCodes.a) {
// ...
}
};
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { keyCodes } from '@fluentui/keyboard-keys';

console.log(keyCodes.Enter, keyCodes.Tab, keyCodes.ArrowDown, keyCodes.ArrowLeft, keyCodes.ArrowRight);

export default {
name: 'Multiple keyCodes',
};
7 changes: 7 additions & 0 deletions packages/keyboard-keys/bundle-size/MultipleKeys.fixture.js
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',
};
7 changes: 7 additions & 0 deletions packages/keyboard-keys/bundle-size/SingleKey.fixture.js
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',
};
7 changes: 7 additions & 0 deletions packages/keyboard-keys/bundle-size/SingleKeyCode.fixture.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { keyCodes } from '@fluentui/keyboard-keys';

console.log(keyCodes.Enter);

export default {
name: 'Single keyCode',
};
Loading

0 comments on commit e67f813

Please sign in to comment.