feat: try input for forms

phodal · Jul 11, 2022 · 9a1d319 · 9a1d319
1 parent 32023ad
commit 9a1d319
Showing 1 changed file with 28 additions and 7 deletions.
diff --git a/quake_webapp/quake-board/src/components/concept/ConceptNodeWidget.tsx b/quake_webapp/quake-board/src/components/concept/ConceptNodeWidget.tsx
@@ -9,38 +9,59 @@ export interface ConceptNodeWidgetProps {
 }
 
 export interface ConceptNodeWidgetState {
+  name: string,
+  toggle: boolean
 }
 
 export class ConceptNodeWidget extends React.Component<ConceptNodeWidgetProps,
   ConceptNodeWidgetState> {
   constructor(props: ConceptNodeWidgetProps) {
     super(props);
     this.state = {
-      name: "ConceptNodeWidget"
+      toggle: false,
+      name: ""
     };
   }
 
+  setName(name: string) {
+    // Changing state
+    this.setState({ name })
+  }
+
+  setToggle(toggle: boolean) {
+    this.setState({ toggle })
+  }
+
   render() {
     return (
       <StyledConceptNodeWidget>
         <PortWidget
           engine={ this.props.engine }
           port={ this.props.node.getPort("in") as any }
         >
-          <StyledCirclePort />
+          <StyledCirclePort/>
         </PortWidget>
 
-        <StyledNodeColor
-          style={ { backgroundColor: this.props.node.color } }
-        >
-          <p>ConceptNodeWidget</p>
+        <StyledNodeColor style={ { backgroundColor: this.props.node.color } }>
+          <input type="text" value={ this.state.name }
+                 onChange={ (event) => {
+                   this.setName(event.target.value)
+                 } }
+                 onKeyDown={ (event) => {
+                   if (event.key === 'Enter' || event.key === 'Escape') {
+                     this.setToggle(true)
+                     event.preventDefault()
+                     event.stopPropagation()
+                   }
+                 } }
+          />
         </StyledNodeColor>
 
         <PortWidget
           engine={ this.props.engine }
           port={ this.props.node.getPort("out") as any }
         >
-          <StyledCirclePort />
+          <StyledCirclePort/>
         </PortWidget>
       </StyledConceptNodeWidget>
     );