component---src-pages-toolbox-browser-keyboard-tsx-3899574a4f8c8746dcb1.js.map

{"version":3,"sources":["webpack:///./src/pages/toolbox/browser-keyboard.tsx"],"names":["BrowserKeyboard","props","useState","value","setValue","records","setRecords","title","id","type","onChange","e","target","onKeyDown","stopPropagation","key","keyCode","charCode","shiftKey","altKey","ctrlKey","metaKey","slice","cellSpacing","map","record","i","length","String"],"mappings":"6MA2EeA,UA3Da,SAACC,GAAU,MACXC,mBAAS,IADE,mBAC9BC,EAD8B,KACvBC,EADuB,OAEPF,mBAAmB,IAFZ,mBAE9BG,EAF8B,KAErBC,EAFqB,KA6BrC,OACE,kBAAC,IAAD,CAAeC,MAAM,aAAaC,GAAG,yBACnC,wCACA,2BACEC,KAAK,OACLN,MAAOA,EACPO,SA/BW,SAACC,GAChBP,EAASO,EAAEC,OAAOT,QA+BdU,UA5Bc,SAACF,GACnBA,EAAEG,kBADwD,IAElDL,EAAqEE,EAArEF,KAAMM,EAA+DJ,EAA/DI,IAAKC,EAA0DL,EAA1DK,QAASC,EAAiDN,EAAjDM,SAAUC,EAAuCP,EAAvCO,SAAUC,EAA6BR,EAA7BQ,OAAQC,EAAqBT,EAArBS,QAASC,EAAYV,EAAZU,QAEjEf,EAAW,CADI,CAAEG,OAAMM,MAAKC,UAASC,WAAUC,WAAUC,SAAQC,UAASC,YAC/D,mBAAahB,IAAUiB,MAAM,EAAG,SA0BzC,2BAAOC,YAAa,GAClB,+BACE,4BACE,mCACA,mCACA,uCACA,qCACA,4CACA,oCACA,kDAGJ,+BAlCGlB,EAAQmB,KAAI,SAACC,EAAQC,GAAT,OACjB,wBAAIX,IAAKW,GACP,4BAAKrB,EAAQsB,OAASD,GACtB,4BAAKD,EAAOV,KACZ,4BAAKU,EAAOT,SACZ,4BAAKY,OAAOH,EAAOP,WACnB,4BAAKU,OAAOH,EAAON,SACnB,4BAAKS,OAAOH,EAAOL,UACnB,4BAAKQ,OAAOH,EAAOJ,mB","file":"component---src-pages-toolbox-browser-keyboard-tsx-3899574a4f8c8746dcb1.js","sourcesContent":["import React, { FC, KeyboardEvent, useState, ChangeEvent } from 'react'\nimport { ToolboxLayout } from '../../components'\nimport './tool.scss'\nimport './browser-keyboard.scss'\n\ninterface Record {\n  type: string\n  key: string\n  keyCode: number\n  charCode: number\n  shiftKey: boolean\n  altKey: boolean\n  ctrlKey: boolean\n  metaKey: boolean\n}\n\nconst BrowserKeyboard: FC = (props) => {\n  const [value, setValue] = useState('')\n  const [records, setRecords] = useState<Record[]>([])\n\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setValue(e.target.value)\n  }\n\n  const recordEvent = (e: KeyboardEvent<HTMLInputElement>) => {\n    e.stopPropagation()\n    const { type, key, keyCode, charCode, shiftKey, altKey, ctrlKey, metaKey } = e\n    const record = { type, key, keyCode, charCode, shiftKey, altKey, ctrlKey, metaKey }\n    setRecords([ record, ...records ].slice(0, 100))\n  }\n\n  const renderRecords = () => {\n    return records.map((record, i) => (\n      <tr key={i}>\n        <td>{records.length - i}</td>\n        <td>{record.key}</td>\n        <td>{record.keyCode}</td>\n        <td>{String(record.shiftKey)}</td>\n        <td>{String(record.altKey)}</td>\n        <td>{String(record.ctrlKey)}</td>\n        <td>{String(record.metaKey)}</td>\n      </tr>\n    ))\n  }\n\n  return (\n    <ToolboxLayout title='User Agent' id='tool-browser-keyboard'>\n      <h1>Keyboard</h1>\n      <input\n        type='text'\n        value={value}\n        onChange={onChange}\n        onKeyDown={recordEvent}\n      />\n      <table cellSpacing={0}>\n        <thead>\n          <tr>\n            <th>No.</th>\n            <th>key</th>\n            <th>keyCode</th>\n            <th>Shift</th>\n            <th>Option / Alt</th>\n            <th>Ctrl</th>\n            <th>Command / Window</th>\n          </tr>\n        </thead>\n        <tbody>\n          { renderRecords() }\n        </tbody>\n      </table>\n\n    </ToolboxLayout>\n  )\n}\n\nexport default BrowserKeyboard\n"],"sourceRoot":""}