|
|
import React from 'react';
|
|
|
import classNames from 'classnames';
|
|
|
|
|
|
import styles from './KeyBoard.less';
|
|
|
|
|
|
const keyCode = [
|
|
|
{ keycode: 27, name: ["esc"] },
|
|
|
{ keycode: 112, name: ["F1"] },
|
|
|
{ keycode: 113, name: ["F2"] },
|
|
|
{ keycode: 114, name: ["F3"] },
|
|
|
{ keycode: 115, name: ["F4"] },
|
|
|
{ keycode: 116, name: ["F5"] },
|
|
|
{ keycode: 117, name: ["F6"] },
|
|
|
{ keycode: 118, name: ["F7"] },
|
|
|
{ keycode: 119, name: ["F8"] },
|
|
|
{ keycode: 120, name: ["F9"] },
|
|
|
{ keycode: 121, name: ["F10"] },
|
|
|
{ keycode: 122, name: ["F11"] },
|
|
|
{ keycode: 123, name: ["F12"] },
|
|
|
{ keycode: -1, name: ["〇"] },
|
|
|
{ keycode: 192, name: ["~", "`"] },
|
|
|
{ keycode: 49, name: ["!", "1"] },
|
|
|
{ keycode: 50, name: ["@", "2"] },
|
|
|
{ keycode: 51, name: ["#", "3"] },
|
|
|
{ keycode: 52, name: ["$", "4"] },
|
|
|
{ keycode: 53, name: ["%", "5"] },
|
|
|
{ keycode: 54, name: ["^", "6"] },
|
|
|
{ keycode: 55, name: ["&", "7"] },
|
|
|
{ keycode: 56, name: ["*", "8"] },
|
|
|
{ keycode: 57, name: ["(", "9"] },
|
|
|
{ keycode: 48, name: [")", "0"] },
|
|
|
{ keycode: 189, name: ["＿", "-"] },
|
|
|
{ keycode: 187, name: ["＋", ": "] },
|
|
|
{ keycode: 8, name: ["delete"] },
|
|
|
{ keycode: 9, name: ["tab"] },
|
|
|
{ keycode: 81, name: ["Q"] },
|
|
|
{ keycode: 87, name: ["W"] },
|
|
|
{ keycode: 69, name: ["E"] },
|
|
|
{ keycode: 82, name: ["R"] },
|
|
|
{ keycode: 84, name: ["T"] },
|
|
|
{ keycode: 89, name: ["Y"] },
|
|
|
{ keycode: 85, name: ["U"] },
|
|
|
{ keycode: 73, name: ["I"] },
|
|
|
{ keycode: 79, name: ["O"] },
|
|
|
{ keycode: 80, name: ["P"] },
|
|
|
{ keycode: 219, name: ["{", "["] },
|
|
|
{ keycode: 221, name: ["}", "]"] },
|
|
|
{ keycode: 220, name: ["|", "\\"] },
|
|
|
{ keycode: 20, name: ["", "CapsLock"] },
|
|
|
{ keycode: 65, name: ["A"] },
|
|
|
{ keycode: 83, name: ["S"] },
|
|
|
{ keycode: 68, name: ["D"] },
|
|
|
{ keycode: 70, name: ["F"] },
|
|
|
{ keycode: 71, name: ["G"] },
|
|
|
{ keycode: 72, name: ["H"] },
|
|
|
{ keycode: 74, name: ["J"] },
|
|
|
{ keycode: 75, name: ["K"] },
|
|
|
{ keycode: 76, name: ["L"] },
|
|
|
{ keycode: 186, name: [":", ";"] },
|
|
|
{ keycode: 222, name: ["\"", "'"] },
|
|
|
{ keycode: 13, name: ["enter", "return"] },
|
|
|
{ keycode: 16, name: ["⇧"] },
|
|
|
{ keycode: 90, name: ["Z"] },
|
|
|
{ keycode: 88, name: ["X"] },
|
|
|
{ keycode: 67, name: ["C"] },
|
|
|
{ keycode: 86, name: ["V"] },
|
|
|
{ keycode: 66, name: ["B"] },
|
|
|
{ keycode: 78, name: ["N"] },
|
|
|
{ keycode: 77, name: ["M"] },
|
|
|
{ keycode: 188, name: ["<", ","] },
|
|
|
{ keycode: 190, name: [">", "."] },
|
|
|
{ keycode: 191, name: ["?", "/"] },
|
|
|
{ keycode: 16, name: ["⇧"] },
|
|
|
{ keycode: -1, name: ["fn"] },
|
|
|
{ keycode: 17, name: ["control"] },
|
|
|
{ keycode: 18, name: ["alt", "option"] },
|
|
|
{ keycode: 91, name: ["command"] },
|
|
|
{ keycode: 32, name: [""] },
|
|
|
{ keycode: 93, name: ["command"] },
|
|
|
{ keycode: 18, name: ["alt", "option"] },
|
|
|
{ keycode: 37, name: ["◀"] },
|
|
|
{ keycode: 38, name: ["▲"] },
|
|
|
{ keycode: 39, name: ["▶"] },
|
|
|
{ keycode: 40, name: ["▼"] },
|
|
|
];
|
|
|
|
|
|
export default function KeyBoard({ keyCode: keyCodeNum, onMouseDown, onMouseUp }) {
|
|
|
// console.log('keyCodeNum:', keyCodeNum)
|
|
|
return (
|
|
|
<div className={styles.keyboard}>
|
|
|
<ul>
|
|
|
{keyCode.map((item, idx) => {
|
|
|
const name = item.name.map((item, _idx) => <span key={_idx}>{item}</span>);
|
|
|
return (
|
|
|
<li
|
|
|
key={idx}
|
|
|
onMouseDown={() => onMouseDown(item)}
|
|
|
onMouseUp={() => onMouseUp(item)}
|
|
|
className={classNames({ pressed: keyCodeNum.indexOf(item.keycode) > -1})}
|
|
|
data-key={item.keycode}
|
|
|
>
|
|
|
{name}
|
|
|
</li>
|
|
|
)
|
|
|
})}
|
|
|
</ul>
|
|
|
</div>
|
|
|
)
|
|
|
} |