From 7f389cebc479d79f971d8dad177d8b453d3ccc37 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sun, 14 Jan 2024 13:37:40 +0800 Subject: [PATCH] website: update example. --- website/App.js | 186 ++++++++++++++++++++++++------------------------- 1 file changed, 90 insertions(+), 96 deletions(-) diff --git a/website/App.js b/website/App.js index da63fd2c..05b6aca9 100644 --- a/website/App.js +++ b/website/App.js @@ -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'; @@ -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; @@ -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]*)/, ''); + 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]*)/, ''); - return ( -
-
- - + return ( +
+
+ + +
+ {keyStr.length > -1 && ( +
+ {keyStr.map((item) => {item})}
- {keyStr.length > -1 && ( -
- {keyStr.map((item) => {item})} -
- )} - -
-
HotKeys.js
- -
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.
+ )} + +
+
HotKeys.js
+ - - -
- - - - - - -
+
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.
- ); - } + + + +
+ ); }