Fixing my textInput and example app that uses it

src/textinput-test.cg

@@ -1,11 +1,8 @@
 init = {};
 
 update = state event \ event
-  | FocusEmail coords \ state.{ focusedInput = "email" }
-  | FocusPassword coords \ state.{ focusedInput = "password" }
-
-  | Noop \ state
-
+  # | FocusEmail coords \ state.{ focusedInput = "email" }
+  # | FocusPassword coords \ state.{ focusedInput = "password" }
   | _ \ state;
 
 view = state viewport \
@@ -18,20 +15,20 @@ view = state viewport \
        textInput {
          key = "email",
          initialValue = "",
+         initialFocus = True,
          w = 300,
          h = 40,
-         onChange = text \ Noop,
-         focused = True,
-         onFocus = Noop
-
-         # focused = state.focusedInput == "email",
-         # onFocus = FocusEmail,
-       # },
-       # textInput.view state.password {
-       #   focused = state.focusedInput == "password",
-       #   onFocus = FocusPassword,
-       #   w = 300,
-       #   h = 40
+         onChange = text \ Noop
+         # onFocus = Noop
+       },
+       textInput {
+         key = "password",
+         initialValue = "",
+         initialFocus = False,
+         w = 300,
+         h = 40,
+         onChange = text \ Noop
+         # onFocus = Noop
        }
      ]
    }

src/ui-components.cg

@@ -55,7 +55,12 @@ textInput = config \ Stateful {
   focusable = True,
 
   # init : State
-  init = { text = config.initialValue, cursorPos = 0, scrollOffset = 0 },
+  init = {
+    text = config.initialValue,
+    focused = config.initialFocus,
+    cursorPos = 0,
+    scrollOffset = 0
+  },
 
   # update : State \ Event \ State
   update = state event \ event
@@ -97,8 +102,8 @@ textInput = config \ Stateful {
     { state = newState, emit = [] }
     )
 
-    | Focused \ { state = state, emit = [] }
-    | Blurred \ { state = state, emit = [] }
+    | Focused \ { state = state.{ focused = True }, emit = [] }
+    | Blurred \ { state = state.{ focused = False }, emit = [] }
     | _ \ { state = state, emit = [] },
 
   view = state \
@@ -109,85 +114,7 @@ textInput = config \ Stateful {
     Clip {
       w = config.w,
       h = config.h,
-      child = Clickable {
-        event = config.onFocus,
-        child =
-          Stack {
-            children = [
-              Rect { w = config.w, h = config.h, color = "rgba(240,240,240,0.9)", radius = 4 },
-
-              Positioned {
-                x = 8 - state.scrollOffset,
-                y = 8,
-                child = Text { content = state.text, x = 0, y = 17 }
-              },
-
-              (config.focused
-              | True \ Positioned {
-                x = 8 + cursorX - state.scrollOffset,
-                y = 8,
-                child = Rect { w = 2, h = 24, color = "black" }
-              }
-              | _ \ Rect { w = 0, h = 0, color = "transparent" })
-            ]
-          }
-        }
-      }
-};
-
-
-textInputOLD = {
-  # init : String \ State
-  init = text \ { text = text, cursorPos = 0, scrollOffset = 0 },
-
-  # update : State \ Event \ State
-  update = state event \ event
-    | ArrowLeft \ (
-    newCursorPos = max 0 (state.cursorPos - 1);
-    newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284;
-    { text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll }
-    )
-
-    | ArrowRight \ (
-    newCursorPos = min (len state.text) (state.cursorPos + 1);
-    newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284;
-    { text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll }
-    )
-
-    | Backspace \ (
-    newText = deleteChar state.text state.cursorPos;
-    newCursorPos = max 0 (state.cursorPos - 1);
-    newScroll = calcScrollOffset newText newCursorPos state.scrollOffset 284;
-    { text = newText, cursorPos = newCursorPos, scrollOffset = newScroll }
-    )
-
-    | Char c \ (
-    newText = insertChar state.text state.cursorPos c;
-    newCursorPos = state.cursorPos + 1;
-    newScroll = calcScrollOffset newText newCursorPos state.scrollOffset 284;
-    { text = newText, cursorPos = newCursorPos, scrollOffset = newScroll }
-    )
-
-    | Clicked coords \ (
-        newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8;
-        newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284;
-        { text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll }
-        )
-
-    | _ \ state,
-
-  view = state config \
-    textBeforeCursor = slice state.text 0 state.cursorPos;
-    cursorX = measureText textBeforeCursor;
-    padding = 8;
-
-    Clip {
-      w = config.w,
-      h = config.h,
-      child = Clickable {
-        event = config.onFocus,
-        child =
-          Stack {
+      child = Stack {
         children = [
           Rect { w = config.w, h = config.h, color = "rgba(240,240,240,0.9)", radius = 4 },
 
@@ -197,7 +124,7 @@ textInputOLD = {
             child = Text { content = state.text, x = 0, y = 17 }
           },
 
-              (config.focused
+          (state.focused
           | True \ Positioned {
             x = 8 + cursorX - state.scrollOffset,
             y = 8,
@@ -207,5 +134,4 @@ textInputOLD = {
         ]
       }
     }
-      }
 };