UNPKG

rc-virtual-keyboard

Version:
1,008 lines (980 loc) 20.1 kB
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];