\r\n {keyData.map((keyRow, idx) => (\r\n
\r\n ))}\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nfunction setNewInputValue(referenceElement: HTMLInputElement, newValue: string): void {\r\n referenceElement.value = newValue;\r\n const changeEvent = new Event(\"change\");\r\n referenceElement.dispatchEvent(changeEvent);\r\n}\r\n\r\nfunction createKeyData(referenceElement: HTMLInputElement, intl: IntlShape): KeyboardKeyInfo[][] {\r\n function createRegularKeyInfo(keyValue: string, keyValueShift: string): KeyboardKeyInfo {\r\n return {\r\n display: keyValue,\r\n shiftDisplay: keyValueShift,\r\n type: \"normal\",\r\n onClick: (isShift: boolean) =>\r\n setNewInputValue(\r\n referenceElement,\r\n referenceElement.value + (isShift ? keyValueShift : keyValue)\r\n ),\r\n };\r\n }\r\n\r\n const backspaceKey: KeyboardKeyInfo = {\r\n display: \"⌫\",\r\n shiftDisplay: \"⌫\",\r\n type: \"backspace\",\r\n onClick: () => {\r\n if (referenceElement.value.length > 0) {\r\n setNewInputValue(\r\n referenceElement,\r\n referenceElement.value.substr(0, referenceElement.value.length - 1)\r\n );\r\n }\r\n },\r\n };\r\n\r\n const shiftKeyName = intl.formatMessage({ id: \"keyboard.keyname.shift\" });\r\n const shiftKey: KeyboardKeyInfo = {\r\n display: shiftKeyName,\r\n shiftDisplay: shiftKeyName,\r\n type: \"shift\",\r\n onClick: null, // Shift click is handled separately due to state\r\n };\r\n\r\n const spaceKeyName = intl.formatMessage({ id: \"keyboard.keyname.space\" });\r\n const spaceKey: KeyboardKeyInfo = {\r\n display: spaceKeyName,\r\n shiftDisplay: spaceKeyName,\r\n type: \"space\",\r\n onClick: () => setNewInputValue(referenceElement, referenceElement.value + \" \"),\r\n };\r\n\r\n return [\r\n [\r\n createRegularKeyInfo(\"`\", \"~\"),\r\n createRegularKeyInfo(\"1\", \"!\"),\r\n createRegularKeyInfo(\"2\", \"@\"),\r\n createRegularKeyInfo(\"3\", \"#\"),\r\n createRegularKeyInfo(\"4\", \"$\"),\r\n createRegularKeyInfo(\"5\", \"%\"),\r\n createRegularKeyInfo(\"6\", \"^\"),\r\n createRegularKeyInfo(\"7\", \"&\"),\r\n createRegularKeyInfo(\"8\", \"*\"),\r\n createRegularKeyInfo(\"9\", \"(\"),\r\n createRegularKeyInfo(\"0\", \")\"),\r\n createRegularKeyInfo(\"-\", \"_\"),\r\n createRegularKeyInfo(\"=\", \"+\"),\r\n backspaceKey,\r\n ],\r\n [\r\n createRegularKeyInfo(\"q\", \"Q\"),\r\n createRegularKeyInfo(\"w\", \"W\"),\r\n createRegularKeyInfo(\"e\", \"E\"),\r\n createRegularKeyInfo(\"r\", \"R\"),\r\n createRegularKeyInfo(\"t\", \"T\"),\r\n createRegularKeyInfo(\"y\", \"Y\"),\r\n createRegularKeyInfo(\"u\", \"U\"),\r\n createRegularKeyInfo(\"i\", \"I\"),\r\n createRegularKeyInfo(\"o\", \"O\"),\r\n createRegularKeyInfo(\"p\", \"P\"),\r\n createRegularKeyInfo(\"[\", \"{\"),\r\n createRegularKeyInfo(\"]\", \"}\"),\r\n createRegularKeyInfo(\"\\\\\", \"|\"),\r\n ],\r\n [\r\n createRegularKeyInfo(\"a\", \"A\"),\r\n createRegularKeyInfo(\"s\", \"S\"),\r\n createRegularKeyInfo(\"d\", \"D\"),\r\n createRegularKeyInfo(\"f\", \"F\"),\r\n createRegularKeyInfo(\"g\", \"G\"),\r\n createRegularKeyInfo(\"h\", \"H\"),\r\n createRegularKeyInfo(\"j\", \"J\"),\r\n createRegularKeyInfo(\"k\", \"K\"),\r\n createRegularKeyInfo(\"l\", \"L\"),\r\n createRegularKeyInfo(\";\", \":\"),\r\n createRegularKeyInfo(\"'\", '\"'),\r\n ],\r\n [\r\n shiftKey,\r\n createRegularKeyInfo(\"z\", \"Z\"),\r\n createRegularKeyInfo(\"x\", \"X\"),\r\n createRegularKeyInfo(\"c\", \"C\"),\r\n createRegularKeyInfo(\"v\", \"V\"),\r\n createRegularKeyInfo(\"b\", \"B\"),\r\n createRegularKeyInfo(\"n\", \"N\"),\r\n createRegularKeyInfo(\"m\", \"M\"),\r\n createRegularKeyInfo(\",\", \"<\"),\r\n createRegularKeyInfo(\".\", \">\"),\r\n createRegularKeyInfo(\"/\", \"?\"),\r\n shiftKey,\r\n ],\r\n [spaceKey],\r\n ];\r\n}\r\n","import React, { FunctionComponent } from \"react\";\r\nimport classnames from \"classnames\";\r\n\r\nimport { KeyboardKeyInfo } from \"../models/KeyboardKeyInfo\";\r\n\r\nimport \"./KeyboardKey.scss\";\r\n\r\ninterface KeyboardKeyProps {\r\n data: KeyboardKeyInfo;\r\n isShift: boolean;\r\n onShiftClick: () => void;\r\n}\r\n\r\nexport const KeyboardKey: FunctionComponent