Skip to content

Commit 7f389ce

Browse files
jaywcjlovejaywcjlove
committed
website: update example.
1 parent 5b0cd1f commit 7f389ce

File tree

1 file changed

+90
-96
lines changed

1 file changed

+90
-96
lines changed

‎website/App.js

Lines changed: 90 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import GithubCorner from '@uiw/react-github-corners';
33
import { Github } from '@uiw/react-shields';
44
import MarkdownPreview from '@uiw/react-markdown-preview';
@@ -10,18 +10,13 @@ import DocumentStr from '../README.md';
1010
import hotkeys from '..';
1111
import pkg from '../package.json';
1212

13-
export default class App extends Component {
14-
constructor() {
15-
super();
16-
this.state = {
17-
keyCode: [],
18-
keyStr: [],
19-
};
20-
this.onKeyUpEvent = this.onKeyUpEvent.bind(this);
21-
}
13+
export default function AppRoot() {
14+
const [keyCode, setKeyCode] = useState([]);
15+
const [keyStr, setKeyStr] = useState([]);
16+
17+
useEffect(() => {
18+
document.addEventListener('keyup', onKeyUpEvent);
2219

23-
componentDidMount() {
24-
document.addEventListener('keyup', this.onKeyUpEvent);
2520
function pkeys(keys, key) {
2621
if (keys.indexOf(key) === -1) keys.push(key);
2722
return keys;
@@ -30,118 +25,117 @@ export default class App extends Component {
3025
if (keysStr.indexOf(key) === -1) keysStr.push(key);
3126
return keysStr;
3227
}
28+
3329
hotkeys('*', (evn) => {
3430
evn.preventDefault();
3531
const keys = [];
36-
const keyStr = [];
32+
const kStr = [];
3733
if (hotkeys.shift) {
3834
pkeys(keys, 16);
39-
pkeysStr(keyStr, 'shift');
35+
pkeysStr(kStr, 'shift');
4036
}
4137
if (hotkeys.ctrl) {
4238
pkeys(keys, 17);
43-
pkeysStr(keyStr, 'ctrl');
39+
pkeysStr(kStr, 'ctrl');
4440
}
4541
if (hotkeys.alt) {
4642
pkeys(keys, 18);
47-
pkeysStr(keyStr, 'alt');
43+
pkeysStr(kStr, 'alt');
4844
}
4945
if (hotkeys.control) {
5046
pkeys(keys, 17);
51-
pkeysStr(keyStr, 'control');
47+
pkeysStr(kStr, 'control');
5248
}
5349
if (hotkeys.command) {
5450
pkeys(keys, 91);
55-
pkeysStr(keyStr, 'command');
51+
pkeysStr(kStr, 'command');
5652
}
57-
keyStr.push(evn.keyCode);
53+
kStr.push(evn.keyCode);
5854
if (keys.indexOf(evn.keyCode) === -1) keys.push(evn.keyCode);
59-
this.setState({ keyCode: keys, keyStr });
60-
});
61-
}
6255

63-
componentWillUnmount() {
64-
document.removeEventListener('keyup', this.onKeyUpEvent);
65-
}
56+
setKeyCode(keys);
57+
setKeyStr(kStr);
58+
});
6659

67-
onKeyUpEvent() {
68-
this.setState({ keyCode: [], keyStr: [] });
69-
}
60+
return () => {
61+
document.removeEventListener('keyup', onKeyUpEvent);
62+
};
63+
}, []);
7064

71-
onKeyBoardMouseDown(item) {
72-
if (item.keycode > -1) {
73-
this.setState({ keyStr: [item.keycode] });
65+
let DocumentStrSource = DocumentStr;
66+
if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
67+
const openVersionWebsite = (e) => {
68+
if (e.target && e.target.value) {
69+
window.location.href = e.target.value;
7470
}
75-
}
71+
};
7672

77-
onKeyBoardMouseUp() {
78-
this.setState({ keyStr: [] });
79-
}
73+
const onKeyUpEvent = () => {
74+
setKeyCode([]);
75+
setKeyStr([]);
76+
};
8077

81-
openVersionWebsite(e) {
82-
if (e.target && e.target.value) {
83-
window.location.href = e.target.value;
78+
const onKeyBoardMouseDown = (item) => {
79+
if (item.keycode > -1) {
80+
setKeyStr([item.keycode]);
8481
}
85-
}
82+
};
83+
84+
const onKeyBoardMouseUp = () => setKeyStr([]);
8685

87-
render() {
88-
const { keyStr, keyCode } = this.state;
89-
let DocumentStrSource = DocumentStr;
90-
if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
91-
return (
92-
<div>
93-
<div className={styles.tools}>
94-
<select className={styles.version} onChange={this.openVersionWebsite.bind(this)}>
95-
<option value="https://jaywcjlove.github.io/hotkeys-js">
96-
v
97-
{pkg.version}
98-
</option>
99-
<option value="https://unpkg.com/[email protected]/doc/index.html">v3.4.3</option>
100-
<option value="https://unpkg.com/[email protected]/doc/index.html">v3.4.2</option>
101-
<option value="https://unpkg.com/[email protected]/doc/index.html">v2.0.10</option>
102-
</select>
103-
<dark-mode permanent />
86+
return (
87+
<div>
88+
<div className={styles.tools}>
89+
<select className={styles.version} onChange={openVersionWebsite}>
90+
<option value="https://jaywcjlove.github.io/hotkeys-js">
91+
v
92+
{pkg.version}
93+
</option>
94+
<option value="https://unpkg.com/hotkeys-js@3.4.3/doc/index.html">v3.4.3</option>
95+
<option value="https://unpkg.com/[email protected]/doc/index.html">v3.4.2</option>
96+
<option value="https://unpkg.com/[email protected]/doc/index.html">v2.0.10</option>
97+
</select>
98+
<dark-mode permanent />
99+
</div>
100+
{keyStr.length > -1 && (
101+
<div className={styles.keyCodeInfo}>
102+
{keyStr.map((item) => <span key={`${item}`}>{item}</span>)}
104103
</div>
105-
{keyStr.length > -1 && (
106-
<div className={styles.keyCodeInfo}>
107-
{keyStr.map((item) => <span key={`${item}`}>{item}</span>)}
108-
</div>
109-
)}
110-
<GithubCorner href="https://github.com/jaywcjlove/hotkeys-js" target="__blank" />
111-
<div className={styles.header}>
112-
<div className={styles.title}>HotKeys.js</div>
113-
<div className={styles.github}>
114-
<a href="https://www.npmjs.com/package/hotkeys-js">
115-
<button type="button">On NPM</button>
116-
</a>
117-
<a href="https://github.com/jaywcjlove/hotkeys-js/">
118-
<button type="button">Fork on Github</button>
119-
</a>
120-
<a href="https://github.com/jaywcjlove/hotkeys-js/">
121-
<button type="button">Doc on Github</button>
122-
</a>
123-
<a href="https://jaywcjlove.gitee.io/hotkeys/">
124-
<button type="button">Doc on Gitee</button>
125-
</a>
126-
</div>
127-
<div className={styles.info}>A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.</div>
104+
)}
105+
<GithubCorner href="https://github.com/jaywcjlove/hotkeys-js" target="__blank" />
106+
<div className={styles.header}>
107+
<div className={styles.title}>HotKeys.js</div>
108+
<div className={styles.github}>
109+
<a href="https://www.npmjs.com/package/hotkeys-js">
110+
<button type="button">On NPM</button>
111+
</a>
112+
<a href="https://github.com/jaywcjlove/hotkeys-js/">
113+
<button type="button">Fork on Github</button>
114+
</a>
115+
<a href="https://github.com/jaywcjlove/hotkeys-js/">
116+
<button type="button">Doc on Github</button>
117+
</a>
118+
<a href="https://jaywcjlove.gitee.io/hotkeys/">
119+
<button type="button">Doc on Gitee</button>
120+
</a>
128121
</div>
129-
<KeyBoard
130-
style={{ top: -40 }}
131-
onMouseDown={this.onKeyBoardMouseDown.bind(this)}
132-
onMouseUp={this.onKeyBoardMouseUp.bind(this)}
133-
keyCode={keyCode}
134-
/>
135-
<MarkdownPreview style={{ maxWidth: 995, margin: '0 auto' }} source={DocumentStrSource} />
136-
<Footer name="Kenny Wong" href="http://jaywcjlove.github.io" year="2015-present">
137-
<Github user="jaywcjlove" repo="hotkeys-js">
138-
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="forks" />
139-
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="stars" />
140-
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="watchers" />
141-
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="followers" />
142-
</Github>
143-
</Footer>
122+
<div className={styles.info}>A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.</div>
144123
</div>
145-
);
146-
}
124+
<KeyBoard
125+
style={{ top: -40 }}
126+
onMouseDown={onKeyBoardMouseDown.bind(this)}
127+
onMouseUp={onKeyBoardMouseUp}
128+
keyCode={keyCode}
129+
/>
130+
<MarkdownPreview style={{ maxWidth: 995, margin: '0 auto' }} source={DocumentStrSource} />
131+
<Footer name="Kenny Wong" href="http://jaywcjlove.github.io" year="2015-present">
132+
<Github user="jaywcjlove" repo="hotkeys-js">
133+
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="forks" />
134+
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="stars" />
135+
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="watchers" />
136+
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="followers" />
137+
</Github>
138+
</Footer>
139+
</div>
140+
);
147141
}

0 commit comments

Comments
 (0)