|
|
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: 91, 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 }) {
|
|
|
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>
|
|
|
);
|
|
|
}
|