Skip to content

Commit

Permalink
website: update example.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Jan 14, 2024
1 parent 5b0cd1f commit 7f389ce
Showing 1 changed file with 90 additions and 96 deletions.
186 changes: 90 additions & 96 deletions website/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useEffect, useState } from 'react';
import GithubCorner from '@uiw/react-github-corners';
import { Github } from '@uiw/react-shields';
import MarkdownPreview from '@uiw/react-markdown-preview';
Expand All @@ -10,18 +10,13 @@ import DocumentStr from '../README.md';
import hotkeys from '..';
import pkg from '../package.json';

export default class App extends Component {
constructor() {
super();
this.state = {
keyCode: [],
keyStr: [],
};
this.onKeyUpEvent = this.onKeyUpEvent.bind(this);
}
export default function AppRoot() {
const [keyCode, setKeyCode] = useState([]);
const [keyStr, setKeyStr] = useState([]);

useEffect(() => {
document.addEventListener('keyup', onKeyUpEvent);

componentDidMount() {
document.addEventListener('keyup', this.onKeyUpEvent);
function pkeys(keys, key) {
if (keys.indexOf(key) === -1) keys.push(key);
return keys;
Expand All @@ -30,118 +25,117 @@ export default class App extends Component {
if (keysStr.indexOf(key) === -1) keysStr.push(key);
return keysStr;
}

hotkeys('*', (evn) => {
evn.preventDefault();
const keys = [];
const keyStr = [];
const kStr = [];
if (hotkeys.shift) {
pkeys(keys, 16);
pkeysStr(keyStr, 'shift');
pkeysStr(kStr, 'shift');
}
if (hotkeys.ctrl) {
pkeys(keys, 17);
pkeysStr(keyStr, 'ctrl');
pkeysStr(kStr, 'ctrl');
}
if (hotkeys.alt) {
pkeys(keys, 18);
pkeysStr(keyStr, 'alt');
pkeysStr(kStr, 'alt');
}
if (hotkeys.control) {
pkeys(keys, 17);
pkeysStr(keyStr, 'control');
pkeysStr(kStr, 'control');
}
if (hotkeys.command) {
pkeys(keys, 91);
pkeysStr(keyStr, 'command');
pkeysStr(kStr, 'command');
}
keyStr.push(evn.keyCode);
kStr.push(evn.keyCode);
if (keys.indexOf(evn.keyCode) === -1) keys.push(evn.keyCode);
this.setState({ keyCode: keys, keyStr });
});
}

componentWillUnmount() {
document.removeEventListener('keyup', this.onKeyUpEvent);
}
setKeyCode(keys);
setKeyStr(kStr);
});

onKeyUpEvent() {
this.setState({ keyCode: [], keyStr: [] });
}
return () => {
document.removeEventListener('keyup', onKeyUpEvent);
};
}, []);

onKeyBoardMouseDown(item) {
if (item.keycode > -1) {
this.setState({ keyStr: [item.keycode] });
let DocumentStrSource = DocumentStr;
if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
const openVersionWebsite = (e) => {
if (e.target && e.target.value) {
window.location.href = e.target.value;
}
}
};

onKeyBoardMouseUp() {
this.setState({ keyStr: [] });
}
const onKeyUpEvent = () => {
setKeyCode([]);
setKeyStr([]);
};

openVersionWebsite(e) {
if (e.target && e.target.value) {
window.location.href = e.target.value;
const onKeyBoardMouseDown = (item) => {
if (item.keycode > -1) {
setKeyStr([item.keycode]);
}
}
};

const onKeyBoardMouseUp = () => setKeyStr([]);

render() {
const { keyStr, keyCode } = this.state;
let DocumentStrSource = DocumentStr;
if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
return (
<div>
<div className={styles.tools}>
<select className={styles.version} onChange={this.openVersionWebsite.bind(this)}>
<option value="https://jaywcjlove.github.io/hotkeys-js">
v
{pkg.version}
</option>
<option value="https://unpkg.com/[email protected]/doc/index.html">v3.4.3</option>
<option value="https://unpkg.com/[email protected]/doc/index.html">v3.4.2</option>
<option value="https://unpkg.com/[email protected]/doc/index.html">v2.0.10</option>
</select>
<dark-mode permanent />
return (
<div>
<div className={styles.tools}>
<select className={styles.version} onChange={openVersionWebsite}>
<option value="https://jaywcjlove.github.io/hotkeys-js">
v
{pkg.version}
</option>
<option value="https://unpkg.com/hotkeys-js@3.4.3/doc/index.html">v3.4.3</option>
<option value="https://unpkg.com/[email protected]/doc/index.html">v3.4.2</option>
<option value="https://unpkg.com/[email protected]/doc/index.html">v2.0.10</option>
</select>
<dark-mode permanent />
</div>
{keyStr.length > -1 && (
<div className={styles.keyCodeInfo}>
{keyStr.map((item) => <span key={`${item}`}>{item}</span>)}
</div>
{keyStr.length > -1 && (
<div className={styles.keyCodeInfo}>
{keyStr.map((item) => <span key={`${item}`}>{item}</span>)}
</div>
)}
<GithubCorner href="https://github.com/jaywcjlove/hotkeys-js" target="__blank" />
<div className={styles.header}>
<div className={styles.title}>HotKeys.js</div>
<div className={styles.github}>
<a href="https://www.npmjs.com/package/hotkeys-js">
<button type="button">On NPM</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys-js/">
<button type="button">Fork on Github</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys-js/">
<button type="button">Doc on Github</button>
</a>
<a href="https://jaywcjlove.gitee.io/hotkeys/">
<button type="button">Doc on Gitee</button>
</a>
</div>
<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>
)}
<GithubCorner href="https://github.com/jaywcjlove/hotkeys-js" target="__blank" />
<div className={styles.header}>
<div className={styles.title}>HotKeys.js</div>
<div className={styles.github}>
<a href="https://www.npmjs.com/package/hotkeys-js">
<button type="button">On NPM</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys-js/">
<button type="button">Fork on Github</button>
</a>
<a href="https://github.com/jaywcjlove/hotkeys-js/">
<button type="button">Doc on Github</button>
</a>
<a href="https://jaywcjlove.gitee.io/hotkeys/">
<button type="button">Doc on Gitee</button>
</a>
</div>
<KeyBoard
style={{ top: -40 }}
onMouseDown={this.onKeyBoardMouseDown.bind(this)}
onMouseUp={this.onKeyBoardMouseUp.bind(this)}
keyCode={keyCode}
/>
<MarkdownPreview style={{ maxWidth: 995, margin: '0 auto' }} source={DocumentStrSource} />
<Footer name="Kenny Wong" href="http://jaywcjlove.github.io" year="2015-present">
<Github user="jaywcjlove" repo="hotkeys-js">
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="forks" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="stars" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="watchers" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="followers" />
</Github>
</Footer>
<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>
</div>
);
}
<KeyBoard
style={{ top: -40 }}
onMouseDown={onKeyBoardMouseDown.bind(this)}
onMouseUp={onKeyBoardMouseUp}
keyCode={keyCode}
/>
<MarkdownPreview style={{ maxWidth: 995, margin: '0 auto' }} source={DocumentStrSource} />
<Footer name="Kenny Wong" href="http://jaywcjlove.github.io" year="2015-present">
<Github user="jaywcjlove" repo="hotkeys-js">
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="forks" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="stars" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="watchers" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="followers" />
</Github>
</Footer>
</div>
);
}

0 comments on commit 7f389ce

Please sign in to comment.