1+ import React from "react" ;
2+ import {
3+ Button ,
4+ ButtonBase ,
5+ Icon ,
6+ Tooltip ,
7+ Popover ,
8+ } from "@material-ui/core" ;
9+ import "../../css/KeyboardShortcut.css" ;
10+
11+ const general = [
12+ {
13+ shortcut : [ "Ctrl/⌘" , "S" ] ,
14+ description : "Save a scene"
15+ } ,
16+ {
17+ shortcut : [ "Ctrl/⌘" , "Shift" , "S" ] ,
18+ description : "Pop up a save tab"
19+ } ,
20+ {
21+ shortcut : [ "Ctrl/⌘" , "Enter" ] ,
22+ description : "Render a scene"
23+ } ,
24+ ] ;
25+
26+ const editor = [
27+ {
28+ shortcut : [ "Ctrl/⌘" , "/" ] ,
29+ description : "Comment current or selected line of code"
30+ } ,
31+ {
32+ shortcut : [ "Alt/Option" , "Up" ] ,
33+ description : "Move a code up"
34+ } ,
35+ {
36+ shortcut : [ "Alt/Option" , "Down" ] ,
37+ description : "Move a code down"
38+ } ,
39+ {
40+ shortcut : [ "Alt/⌘" , "D" ] ,
41+ description : "Delete a line of code"
42+ }
43+ ] ;
44+
45+ const scene = [
46+ {
47+ shortcut : [ "W" ] ,
48+ description : "Move forward"
49+ } ,
50+ {
51+ shortcut : [ "A" ] ,
52+ description : "Slide left"
53+ } ,
54+ {
55+ shortcut : [ "S" ] ,
56+ description : "Move backward"
57+ } ,
58+ {
59+ shortcut : [ "D" ] ,
60+ description : "Slide right"
61+ } ,
62+ {
63+ shortcut : [ "Space" ] ,
64+ description : "Move up"
65+ } ,
66+ {
67+ shortcut : [ "Shift" ] ,
68+ description : "Move down"
69+ } ,
70+ ] ;
71+
72+ class KeyboardShortcut extends React . Component {
73+ constructor ( props ) {
74+ super ( props ) ;
75+ this . state = {
76+ open : false ,
77+ anchorEl : null
78+ } ;
79+ }
80+
81+ shortcutHelper = ( data ) => {
82+ let shortcuts = [ ] ;
83+ data . shortcut . forEach ( ( key , i ) => {
84+ shortcuts . push ( < kbd > { key } </ kbd > ) ;
85+ if ( i < data . shortcut . length - 1 ) {
86+ shortcuts . push ( " + " ) ;
87+ }
88+ } ) ;
89+ return ( < p > { shortcuts } { data . description } </ p > ) ;
90+ } ;
91+
92+ handleClick = ( event ) => {
93+ this . setState ( {
94+ open : true ,
95+ anchorEl : event . target } ) ;
96+ } ;
97+
98+ handleClose = ( ) => {
99+ this . setState ( {
100+ open : false ,
101+ anchorEl : null } ) ;
102+ } ;
103+
104+ render ( ) {
105+ return (
106+ < div >
107+ < Tooltip title = "Keyboard Shortcut" >
108+ < Button
109+ variant = "contained"
110+ size = "small"
111+ color = "primary"
112+ onClick = { this . handleClick } >
113+ < Icon className = "material-icons" > keyboard</ Icon >
114+ </ Button >
115+ </ Tooltip >
116+ < Popover
117+ id = "simple-popover"
118+ anchorEl = { this . state . anchorEl }
119+ anchorOrigin = { {
120+ vertical :"top" ,
121+ horizontal : "left" ,
122+ } }
123+ transformOrigin = { {
124+ vertical : "bottom" ,
125+ hotizontal : "left"
126+ } }
127+ open = { this . state . open }
128+ onClose = { this . handleClose } >
129+ < div className = "keyboard-shortcut" >
130+ < ButtonBase
131+ style = { { position : "absolute" , right : 15 , top : 15 } }
132+ onClick = { this . handleClose } >
133+ < Icon className = "material-icons" > clear</ Icon >
134+ </ ButtonBase >
135+ < section className = "right" >
136+ < p className = "title" > General Command</ p >
137+ {
138+ general . map ( e => { return this . shortcutHelper ( e ) ; } )
139+ }
140+ </ section >
141+ < section className = "right" >
142+ < p className = "title" > Editor Command</ p >
143+ {
144+ editor . map ( e => { return this . shortcutHelper ( e ) ; } )
145+ }
146+ </ section >
147+ < section className = "right" >
148+ < p className = "title" > Scene Command</ p >
149+ {
150+ scene . map ( e => { return this . shortcutHelper ( e ) ; } )
151+ }
152+ </ section >
153+ </ div >
154+ < p className = "note" > ⌘: Command key for macOS user</ p >
155+ </ Popover >
156+ </ div >
157+ ) ;
158+ }
159+ }
160+
161+ export default KeyboardShortcut ;
0 commit comments