rc-virtual-keyboard
Version:
1,008 lines (980 loc) • 20.1 kB
JavaScript
import React from 'react';
import { ReactComponent as BackgroundAudioSvg } from "./svg/background-audio.svg";
import { ReactComponent as BottomSvg } from "./svg/bottom.svg";
import { ReactComponent as DeleteSvg } from "./svg/delete.svg";
import { ReactComponent as EnterSvg } from "./svg/enter.svg";
import { ReactComponent as FloatSvg } from "./svg/float.svg";
import { ReactComponent as LeftSvg } from "./svg/left.svg";
import { ReactComponent as MoonSvg } from "./svg/moon.svg";
import { ReactComponent as RightSvg } from "./svg/right.svg";
import { ReactComponent as SunSvg } from "./svg/sun.svg";
import { ReactComponent as TopSvg } from "./svg/top.svg";
/** 数字键盘 */
export var numberType = 'number';
/** 字母键盘 */
export var letterType = 'letter';
/** 符号键盘 */
export var symbolType = 'symbol';
/** 控制键盘 */
export var controlsType = 'controls';
/** 编辑键盘 */
export var editType = 'edit';
/** 表情键盘 */
export var emjoType = 'emjo';
/** 手写键盘 */
export var writeType = 'write';
/** 设置键盘 */
export var settingType = 'setting';
/** 中文模式 */
export var ZH = 'zh';
/** 英文模式 */
export var EN = 'en';
/** 主题模式key */
export var VKB_THEME_MODE = 'VKB_THEME_MODE';
/** 位置模式key */
export var VKB_POSITION_MODE = 'VKB_POSITION_MODE';
/** 按键音效key */
export var VKB_KEYDOWN_MODE = 'VKB_KEYDOWN_MODE';
/** ---------------------------功能控制类--------------------------- */
/** 删除 */
export var Backspace = {
key: 'Backspace',
renderKey: /*#__PURE__*/React.createElement(DeleteSvg, null),
code: 'Backspace',
keyCode: 8,
keyType: controlsType,
description: '删除'
};
/** 回车 */
export var Enter = {
key: 'Enter',
renderKey: /*#__PURE__*/React.createElement(EnterSvg, null),
code: 'Enter',
keyCode: 13,
keyType: controlsType,
description: '回车/确定'
};
/** Tab */
export var Tab = {
key: 'Tab',
code: 'Tab',
keyCode: 9,
keyType: controlsType
};
/** 英文切换 */
export var Shift = {
key: 'Shift',
renderKey: '英',
code: 'Shift',
keyCode: 16,
keyType: controlsType
};
/** 切换大小写 */
export var CapsLock = {
key: 'CapsLock',
renderKey: '小',
code: 'CapsLock',
keyCode: 20,
keyType: controlsType
};
/** 清除键 */
export var Clear = {
code: 'Clear',
key: 'Clear',
keyCode: -12,
keyType: controlsType
};
/** ---------------------------光标类--------------------------- */
/** 上 */
export var ArrowUp = {
key: 'ArrowUp',
code: 'ArrowUp',
keyCode: 38,
keyType: controlsType
};
/** 左 */
export var ArrowLeft = {
key: 'ArrowLeft',
code: 'ArrowLeft',
keyCode: 37,
keyType: controlsType
};
/** 选择全部 */
export var StartSelect = {
key: '开始选择',
code: 'StartSelect',
keyCode: -1000,
keyType: controlsType
};
/** 下 */
export var ArrowDown = {
key: 'ArrowDown',
code: 'ArrowDown',
keyCode: 40,
keyType: controlsType
};
/** 右 */
export var ArrowRight = {
key: 'ArrowRight',
code: 'ArrowRight',
keyCode: 39,
keyType: controlsType
};
/** 最前 */
export var ArrowLeftFirst = {
key: 'ArrowLeftFirst',
code: 'ArrowLeftFirst',
keyCode: -1001,
keyType: controlsType
};
/** 最后 */
export var ArrowRightEnd = {
key: 'ArrowRightEnd',
code: 'ArrowRightEnd',
keyCode: -1002,
keyType: controlsType
};
/** ---------------------------编辑类--------------------------- */
/** 全选 */
export var SelectAll = {
key: '全选',
code: 'SelectAll',
keyCode: -2001,
keyType: controlsType
};
/** 复制 */
export var Copy = {
key: '复制',
code: 'Copy',
keyCode: -2003,
keyType: controlsType
};
/** 粘贴 */
export var Paste = {
key: '粘贴',
code: 'Paste',
keyCode: -2005,
keyType: controlsType
};
/** 剪切板 */
export var Clipboard = {
key: '剪贴板',
code: 'Clipboard',
keyCode: -2006,
keyType: controlsType
};
/** ---------------------------数字类--------------------------- */
/** 0 */
export var Numpad0 = {
key: '0',
code: 'Numpad0',
keyCode: 96,
keyType: numberType
};
/** 1 */
export var Numpad1 = {
key: '1',
code: 'Numpad1',
keyCode: 97,
keyType: numberType
};
/** 2 */
export var Numpad2 = {
key: '2',
code: 'Numpad2',
keyCode: 98,
keyType: numberType
};
/** 3 */
export var Numpad3 = {
key: '3',
code: 'Numpad3',
keyCode: 99,
keyType: numberType
};
/** 4 */
export var Numpad4 = {
key: '4',
code: 'Numpad4',
keyCode: 100,
keyType: numberType
};
/** 5 */
export var Numpad5 = {
key: '5',
code: 'Numpad5',
keyCode: 101,
keyType: numberType
};
/** 6 */
export var Numpad6 = {
key: '6',
code: 'Numpad6',
keyCode: 102,
keyType: numberType
};
/** 7 */
export var Numpad7 = {
key: '7',
code: 'Numpad7',
keyCode: 103,
keyType: numberType
};
/**8 */
export var Numpad8 = {
key: '8',
code: 'Numpad8',
keyCode: 104,
keyType: numberType
};
/** 9 */
export var Numpad9 = {
key: '9',
code: 'Numpad9',
keyCode: 105,
keyType: numberType
};
/** ---------------------------字母类--------------------------- */
/** q */
export var KeyQ = {
key: 'q',
code: 'KeyQ',
keyCode: 81,
keyType: letterType
};
/** w */
export var KeyW = {
key: 'w',
code: 'KeyW',
keyCode: 87,
keyType: letterType
};
/** e */
export var KeyE = {
key: 'e',
code: 'KeyE',
keyCode: 69,
keyType: letterType
};
/** r */
export var KeyR = {
key: 'r',
code: 'KeyR',
keyCode: 82,
keyType: letterType
};
/** t */
export var KeyT = {
key: 't',
code: 'KeyT',
keyCode: 84,
keyType: letterType
};
/** y */
export var KeyY = {
key: 'y',
code: 'KeyY',
keyCode: 89,
keyType: letterType
};
/** u */
export var KeyU = {
key: 'u',
code: 'KeyU',
keyCode: 85,
keyType: letterType
};
/** i */
export var KeyI = {
key: 'i',
code: 'KeyI',
keyCode: 73,
keyType: letterType
};
/** o */
export var KeyO = {
key: 'o',
code: 'KeyO',
keyCode: 79,
keyType: letterType
};
/** p */
export var KeyP = {
key: 'p',
code: 'KeyP',
keyCode: 80,
keyType: letterType
};
/** a */
export var KeyA = {
key: 'a',
code: 'KeyA',
keyCode: 65,
keyType: letterType
};
/** s */
export var KeyS = {
key: 's',
code: 'KeyS',
keyCode: 83,
keyType: letterType
};
/** d */
export var KeyD = {
key: 'd',
code: 'KeyD',
keyCode: 68,
keyType: letterType
};
/** f */
export var KeyF = {
key: 'f',
code: 'KeyF',
keyCode: 70,
keyType: letterType
};
/** g */
export var KeyG = {
key: 'g',
code: 'KeyG',
keyCode: 71,
keyType: letterType
};
/** h */
export var KeyH = {
key: 'h',
code: 'KeyH',
keyCode: 72,
keyType: letterType
};
/** j */
export var KeyJ = {
key: 'j',
code: 'KeyJ',
keyCode: 74,
keyType: letterType
};
/** k */
export var KeyK = {
key: 'k',
code: 'KeyK',
keyCode: 75,
keyType: letterType
};
/** l */
export var KeyL = {
key: 'l',
code: 'KeyL',
keyCode: 76,
keyType: letterType
};
/** z */
export var KeyZ = {
key: 'z',
code: 'KeyZ',
keyCode: 90,
keyType: letterType
};
/** x */
export var KeyX = {
key: 'x',
code: 'KeyX',
keyCode: 88,
keyType: letterType
};
/** c */
export var KeyC = {
key: 'c',
code: 'KeyC',
keyCode: 67,
keyType: letterType
};
/** v */
export var KeyV = {
key: 'v',
code: 'KeyV',
keyCode: 86,
keyType: letterType
};
/** b */
export var KeyB = {
key: 'b',
code: 'KeyB',
keyCode: 66,
keyType: letterType
};
/** n */
export var KeyN = {
key: 'n',
code: 'KeyN',
keyCode: 78,
keyType: letterType
};
/** m */
export var KeyM = {
key: 'm',
code: 'KeyM',
keyCode: 77,
keyType: letterType
};
/** ---------------------------符号类--------------------------- */
// 不区分中英文
/** 点 . */
export var NumpadDecimal = {
key: '.',
code: 'NumpadDecimal',
keyCode: 110,
keyType: symbolType
};
/** 空格 */
export var Space = {
key: ' ',
code: 'Space',
keyCode: 32,
keyType: symbolType
};
/** 反斜杠 \ */
export var Backslash = {
key: '\\',
code: 'Backslash',
keyCode: 220,
keyType: symbolType
};
/** 顿号 */
export var DunSign = {
key: '、',
code: 'DunSign',
keyCode: 2000,
keyType: symbolType
};
/** 书名号左 */
export var LeftBook = {
key: '《',
code: 'LeftBook',
keyCode: 2001,
keyType: symbolType
};
/** 书名号右 */
export var RightBook = {
key: '》',
code: 'RightBook',
keyCode: 2002,
keyType: symbolType
};
/** 中括号左 */
export var LeftMiddleParenthesis = {
key: '[',
code: 'LeftMiddleParenthesis',
keyCode: 2003,
keyType: symbolType
};
/** 中括号右 */
export var RightMiddleParenthesis = {
key: ']',
code: 'RightMiddleParenthesis',
keyCode: 2004,
keyType: symbolType
};
/** 大括号左 */
export var LeftBigParenthesis = {
key: '{',
code: 'LeftBigParenthesis',
keyCode: 2005,
keyType: symbolType
};
/** 大括号右 */
export var RightBigParenthesis = {
key: '}',
code: 'RightBigParenthesis',
keyCode: 2006,
keyType: symbolType
};
/** 句号 */
export var Period = {
key: '。',
code: 'Period',
keyCode: 2007,
keyType: symbolType
};
/** @ */
export var AT = {
key: '@',
code: 'AT',
keyCode: 2008,
keyType: symbolType
};
/** ---------------------------中文类--------------------------- */
/** 中文逗号 */
export var ZHComma = {
key: ',',
code: 'ZHComma',
keyCode: 3001,
keyType: symbolType
};
/** 中文问号 */
export var ZHQuestionMark = {
key: '?',
code: 'ZHQuestionMark',
keyCode: 3002,
keyType: symbolType
};
/** 中文冒号 */
export var ZHSemicolon = {
key: ':',
code: 'ZHSemicolon',
keyCode: 3003,
keyType: symbolType
};
/** 中文左双引号 */
export var ZHLeftDoubleQuotationMarks = {
key: '“',
code: 'ZHLeftDoubleQuotationMarks',
keyCode: 3004,
keyType: symbolType
};
/** 中文右双引号 */
export var ZHRightDoubleQuotationMarks = {
key: '”',
code: 'ZHRightDoubleQuotationMarks',
keyCode: 3005,
keyType: symbolType
};
/** 中文左括号 */
export var ZHLeftParenthesis = {
key: '(',
code: 'ZHLeftParenthesis',
keyCode: -3011,
keyType: symbolType
};
/** 中文右括号 */
export var ZHRightParenthesis = {
key: ')',
code: 'ZHRightParenthesis',
keyCode: 3006,
keyType: symbolType
};
/** 中文感叹号 */
export var ZHExclamationPoint = {
key: '!',
code: 'ZHExclamationPoint',
keyCode: 3007,
keyType: symbolType
};
/** ---------------------------英文类--------------------------- */
/** 英文逗号 */
export var ENComma = {
key: ',',
code: 'ENComma',
keyCode: 4001,
keyType: symbolType
};
/** 英文问号 */
export var ENQuestionMark = {
key: '?',
code: 'ENQuestionMark',
keyCode: 4002,
keyType: symbolType
};
/** 英文冒号 */
export var ENSemicolon = {
key: ':',
code: 'ENSemicolon',
keyCode: 4003,
keyType: symbolType
};
/** 英文左双引号 */
export var ENLeftDoubleQuotationMarks = {
key: '"',
code: 'ENLeftDoubleQuotationMarks',
keyCode: 4004,
keyType: symbolType
};
/** 英文右双引号 */
export var ENRightDoubleQuotationMarks = {
key: '"',
code: 'ENRightDoubleQuotationMarks',
keyCode: 4005,
keyType: symbolType
};
/** 英文左括号 */
export var ENLeftParenthesis = {
key: '(',
code: 'ENLeftParenthesis',
keyCode: 4006,
keyType: symbolType
};
/** 英文右括号 */
export var ENRightParenthesis = {
key: ')',
code: 'ENRightParenthesis',
keyCode: 4007,
keyType: symbolType
};
/** 英文感叹号 */
export var ENExclamationPoint = {
key: '!',
code: 'ENExclamationPoint',
keyCode: 4008,
keyType: symbolType
};
/** ---------------------------数学类--------------------------- */
/** 斜杠 /*/
export var NumpadDivide = {
key: '/',
code: 'NumpadDivide',
keyCode: 111,
keyType: symbolType
};
/** 加 + */
export var NumpadAdd = {
key: '+',
code: 'NumpadAdd',
keyCode: 107,
keyType: symbolType
};
/** 减 - */
export var NumpadSubtract = {
key: '-',
code: 'NumpadSubtract',
keyCode: 109,
keyType: symbolType
};
/** 乘 * */
export var NumpadMultiply = {
key: '*',
code: 'NumpadMultiply',
keyCode: 106,
keyType: symbolType
};
/** 大于 */
export var NumpadGreaterThan = {
key: '>',
code: 'NumpadGreaterThan',
keyCode: 190,
keyType: symbolType
};
/** 小于 */
export var NumpadLessThan = {
key: '<',
code: 'NumpadLessThan',
keyCode: 188,
keyType: symbolType
};
/** 等于 */
export var NumpadEqual = {
key: '=',
code: 'NumpadEqual',
keyCode: 187,
keyType: symbolType
};
/** 百分比 */
export var NumpadPercentage = {
key: '%',
code: 'NumpadPercentage',
keyCode: 53,
keyType: symbolType
};
/** ---------------------------网络类--------------------------- */
export var WWWDot = {
key: 'www.',
code: 'WWWDot',
keyCode: 5000,
keyType: symbolType
};
export var WapDot = {
key: 'wap.',
code: 'WapDot',
keyCode: 5001,
keyType: symbolType
};
export var BlogDot = {
key: 'blog.',
code: 'BlogDot',
keyCode: 5002,
keyType: symbolType
};
export var BBSDot = {
key: 'bbs.',
code: 'BBSDot',
keyCode: 5003,
keyType: symbolType
};
export var DotCom = {
key: '.com',
code: 'DotCom',
keyCode: 5004,
keyType: symbolType
};
export var DotCn = {
key: '.cn',
code: 'DotCn',
keyCode: 5005,
keyType: symbolType
};
export var DotNet = {
key: '.net',
code: 'DotNet',
keyCode: 5006,
keyType: symbolType
};
export var DotOrg = {
key: '.org',
code: 'DotOrg',
keyCode: 5007,
keyType: symbolType
};
export var Http = {
key: 'http://',
code: 'Http',
keyCode: 5008,
keyType: symbolType
};
export var Https = {
key: 'https://',
code: 'Https',
keyCode: 5009,
keyType: symbolType
};
export var FTP = {
key: 'ftp://',
code: 'FTP',
keyCode: 5010,
keyType: symbolType
};
export var SSH = {
key: 'ssh://',
code: 'SSH',
keyCode: 5011,
keyType: symbolType
};
export var Mail126 = {
key: '@126.com',
code: 'SSH',
keyCode: 5012,
keyType: symbolType
};
export var Mail163 = {
key: '@163.com',
code: 'Mail163',
keyCode: 5013,
keyType: symbolType
};
export var MailSina = {
key: '@sina.cn',
code: 'MailSina',
keyCode: 5014,
keyType: symbolType
};
export var MailHotMail = {
key: '@hotmail.com',
code: 'MailHotMail',
keyCode: 5015,
keyType: symbolType
};
export var MailLive = {
key: '@live.cn',
code: 'MailLive',
keyCode: 5016,
keyType: symbolType
};
export var MailGmail = {
key: '@gmail.cn',
code: 'MailGmail',
keyCode: 5017,
keyType: symbolType
};
export var MailQQ = {
key: '@qq.com',
code: 'MailQQ',
keyCode: 5018,
keyType: symbolType
};
export var MailSoHu = {
key: '@sohu.com',
code: 'MailSoHu',
keyCode: 5019,
keyType: symbolType
};
/** ---------------------------特殊类--------------------------- */
export var Multiply = {
key: '×',
code: 'Multiply',
keyCode: 7000,
keyType: symbolType
};
export var Except = {
key: '÷',
code: 'Except',
keyCode: 7001,
keyType: symbolType
};
export var Top = {
key: '↑',
code: 'Top',
keyCode: 7002,
keyType: symbolType
};
export var Bottom = {
key: '↓',
code: 'Bottom',
keyCode: 7003,
keyType: symbolType
};
export var Left = {
key: '←',
code: 'Left',
keyCode: 7004,
keyType: symbolType
};
export var Right = {
key: '→',
code: 'Right',
keyCode: 7005,
keyType: symbolType
};
export var Male = {
key: '♂',
code: 'Male',
keyCode: 7006,
keyType: symbolType
};
export var Female = {
key: '♀',
code: 'Female',
keyCode: 7007,
keyType: symbolType
};
/** ---------------------------货币类--------------------------- */
export var CNY = {
key: '¥',
code: 'CNY',
keyCode: 8000,
keyType: symbolType
};
export var Dollars = {
key: '$',
code: 'Dollars',
keyCode: 8001,
keyType: symbolType
};
/** ---------------------------主题--------------------------- */
/** 亮色 */
export var LightTheme = {
key: 'light',
renderKey: /*#__PURE__*/React.createElement(SunSvg, null),
code: 'light',
keyCode: 9001,
keyType: settingType,
description: '日间模式'
};
/** 暗色 */
export var DarkTheme = {
key: 'dark',
renderKey: /*#__PURE__*/React.createElement(MoonSvg, null),
code: 'dark',
keyCode: 9002,
keyType: settingType,
description: '夜间模式'
};
/** ---------------------------位置--------------------------- */
/** 固定下方 */
export var FixedBottomPosition = {
key: 'fixedBottom',
renderKey: /*#__PURE__*/React.createElement(BottomSvg, null),
code: 'fixedBottom',
keyCode: 10001,
keyType: settingType,
description: '固定下方'
};
/** 固定上方 */
export var FixedTopPosition = {
key: 'fixedTop',
renderKey: /*#__PURE__*/React.createElement(TopSvg, null),
code: 'fixedTop',
keyCode: 10002,
keyType: settingType,
description: '固定上方'
};
/** 固定左侧 */
export var FixedLeftPosition = {
key: 'fixedLeft',
renderKey: /*#__PURE__*/React.createElement(LeftSvg, null),
code: 'fixedLeft',
keyCode: 10003,
keyType: settingType,
description: '固定左侧'
};
/** 固定右侧 */
export var FixedRightPosition = {
key: 'fixedRight',
renderKey: /*#__PURE__*/React.createElement(RightSvg, null),
code: 'fixedRight',
keyCode: 10004,
keyType: settingType,
description: '固定右侧'
};
/** 浮动 */
export var FloatPosition = {
key: 'float',
renderKey: /*#__PURE__*/React.createElement(FloatSvg, null),
code: 'float',
keyCode: 10005,
keyType: settingType,
description: '浮动'
};
/** ---------------------------位置--------------------------- */
/** 开启 */
export var BackgroundAudio = {
key: 'backgroundAudio',
renderKey: /*#__PURE__*/React.createElement(BackgroundAudioSvg, null),
code: 'backgroundAudio',
keyCode: 11001,
keyType: settingType,
description: '开启按键音效'
};
/** 数字键 */
export var numberKeys = [Numpad1, Numpad2, Numpad3, NumpadAdd, Numpad4, Numpad5, Numpad6, NumpadSubtract, Numpad7, Numpad8, Numpad9, NumpadDecimal, Numpad0, NumpadMultiply, NumpadDivide,
// Enter,
Backspace];
/** 字母键 */
export var letterKeys = [KeyQ, KeyW, KeyE, KeyR, KeyT, KeyY, KeyU, KeyI, KeyO, KeyP, KeyA, KeyS, KeyD, KeyF, KeyG, KeyH, KeyJ, KeyK, KeyL,
// Tab,
Shift, KeyZ, KeyX, KeyC, KeyV, KeyB, KeyN, KeyM, Backspace, CapsLock, Space, Enter];
/** 光标控制键 */
export var cursorKeys = [ArrowUp, ArrowLeft, StartSelect, ArrowRight, ArrowDown, ArrowLeftFirst, ArrowRightEnd];
/** 编辑键 */
export var editKeys = [SelectAll, Backspace, Copy, Enter, Paste
// Clipboard
];
/** 符号键 */
export var symbolKeys = [{
id: 3000,
label: '中文',
value: [ZHComma, Period, ZHQuestionMark, ZHExclamationPoint, ZHSemicolon, DunSign, ZHLeftDoubleQuotationMarks, ZHRightDoubleQuotationMarks, LeftBook, RightBook, ZHLeftParenthesis, ZHRightParenthesis, LeftMiddleParenthesis, RightMiddleParenthesis, LeftBigParenthesis, RightBigParenthesis, NumpadLessThan, NumpadGreaterThan]
}, {
id: 4000,
label: '英文',
value: [ENComma, Period, ENQuestionMark, ENExclamationPoint, ENSemicolon, DunSign, ENLeftDoubleQuotationMarks, ENRightDoubleQuotationMarks, LeftBook, RightBook, ENLeftParenthesis, ENRightParenthesis, LeftMiddleParenthesis, RightMiddleParenthesis, LeftBigParenthesis, RightBigParenthesis, NumpadLessThan, NumpadGreaterThan]
}, {
id: 5000,
label: '网络',
value: [NumpadDecimal, NumpadDivide, AT, WWWDot, WapDot, BlogDot, BBSDot, DotCom, DotCn, DotNet, DotOrg, Http, Https, FTP, SSH, Mail126, Mail163, MailSina, MailHotMail, MailLive, MailGmail]
}, {
id: 6000,
label: '数学',
value: [NumpadAdd, NumpadSubtract, NumpadMultiply, NumpadDivide, NumpadGreaterThan, NumpadLessThan, NumpadEqual, NumpadPercentage]
}, {
id: 7000,
label: '特殊',
value: [Multiply, Except, Top, Bottom, Left, Right, Male, Female]
}, {
id: 8000,
label: '货币',
value: [CNY, Dollars]
}];
/** 主题键 */
export var themeKeys = [LightTheme, DarkTheme];
/** 位置键 */
export var positionKeys = [FloatPosition, FixedBottomPosition, FixedTopPosition, FixedLeftPosition, FixedRightPosition];
/** 背景音乐键 */
export var backgroundAudioKeys = [BackgroundAudio];