manage input value changes

Author: bennyschmidt

components/Input/index.js

@@ -123,8 +123,8 @@ class Input extends Rect {
 
     switch (key) {
       case 'return':
-        if (this.state.search && this.onNavigate) {
-          this.onNavigate(this.state.search);
+        if (this.state.input[component.id] && this.onNavigate) {
+          this.onNavigate(this.state.input[component.id]);
 
           return;
         }
@@ -140,21 +140,21 @@ class Input extends Rect {
         break;
 
       case 'space':
-        this.state.search += ' ';
+        this.state.input[component.id] += ' ';
 
         break;
 
       case 'tab':
-        this.state.search += '  ';
+        this.state.input[component.id] += '  ';
 
         break;
 
       case 'backspace':
         if (event.ctrl) {
-          this.state.search = '';
+          this.state.input[component.id] = '';
         } else {
-          this.state.search = (
-            this.state.search.substring(0, this.state.search.length - 1)
+          this.state.input[component.id] = (
+            this.state.input[component.id].substring(0, this.state.input[component.id].length - 1)
           );
         }
 
@@ -178,7 +178,7 @@ class Input extends Rect {
         }
 
         if (PRINTABLE_KEYS.includes(key.toLowerCase())) {
-          this.state.search += key;
+          this.state.input[component.id] += key;
         }
     }
 
@@ -190,7 +190,7 @@ class Input extends Rect {
       textComponent: {
         ...component.textComponent,
 
-        text: this.state.search,
+        text: this.state.input[component.id],
         style: 'white',
 
         attributes: {

renderers/Vasari/index.js

@@ -10,7 +10,9 @@
  * states
  *******************************************/
 
+import { exec } from 'child_process';
 import { randomUUID } from 'crypto';
+
 import sdl from '@kmamal/sdl';
 import HTMLParser from 'node-html-parser';
 import Canvas from 'canvas';
@@ -67,7 +69,7 @@ class Vasari extends App {
       elements: {},
       components: {},
       baseUrl: DEFAULT_PATH,
-      search: ''
+      input: {}
     };
 
     this.window = window;
@@ -687,7 +689,7 @@ class Vasari extends App {
         break;
 
       case 'INPUT':
-        if (!component || component.value !== this.state.search) {
+        if (!component || component.value !== this.state.input[component.id]) {
           const placeholder = (
             component?.placeholder || 'Search apps & content...'
           );
@@ -712,7 +714,7 @@ class Vasari extends App {
           component = this.state.components[id] = input;
 
           if (component?.value) {
-            this.state.search = component.value;
+            this.state.input[component.id] = component.value;
           }
 
           const inputRectGradient = this.state.canvas.context.createLinearGradient(
@@ -762,7 +764,7 @@ class Vasari extends App {
           attributes.width = textComponent.attributes.width;
           attributes.height = textComponent.attributes.height;
 
-          if (this.state.search) {
+          if (this.state.input[component.id]) {
             this.state.canvas.context.fillStyle = textComponent.attributes.style;
 
             this.state.canvas.context.font = (
@@ -779,7 +781,7 @@ class Vasari extends App {
           this.state.canvas.context.textRendering = 'optimizeLegibility';
 
           this.state.canvas.context.fillText(
-            this.state.search || placeholder,
+            this.state.input[component.id] || placeholder,
             textComponent.attributes.x,
             textComponent.attributes.y,
             textComponent.attributes.width
@@ -991,7 +993,11 @@ class Vasari extends App {
         if (element.childNodes?.length) {
           const [{ _rawText } = {}] = element.childNodes;
 
-          const state = this.docState;
+          const state = {
+            ...this.docState,
+
+            exec
+          };
 
           eval(`(() => { ${_rawText} })()`);
         }
@@ -1002,7 +1008,11 @@ class Vasari extends App {
         this.events[id] = event => {
           const [{ _rawText } = {}] = element.childNodes;
 
-          const state = this.docState;
+          const state = {
+            ...this.docState,
+
+            exec
+          };
 
           eval(`(() => { ${_rawText} })()`);
         };

renderers/Vespucci/index.js

@@ -232,7 +232,7 @@ class Vespucci extends Vasari {
         break;
     }
 
-    this.state.search = path;
+    this.state.input.search = path;
     this.events = {};
     this.listeners = {};