Allowing textInput to be controlled or uncontrolled. adding tab to palette to replace query text with selected item

src/cg/03-ui-components.cg

@@ -168,51 +168,58 @@ textInput = config \
     },
 
     # update : State \ Event \ State
-    update = state event \ event
+    update = state event \
+      s = (hasField "value" c
+        | True \ (c.value == state.text
+          | True \ state
+          | False \ state.{ text = c.value, cursorPos = len c.value, scrollOffset = 0 })
+        | False \ state);
+      event
       | Key { key = key, printable = True, meta = False, ctrl = False } \ (
-      newText = insertChar state.text state.cursorPos key;
+      newText = insertChar s.text s.cursorPos key;
-      newCursorPos = state.cursorPos + 1;
+      newCursorPos = s.cursorPos + 1;
-      newScroll = calcScrollOffset newText newCursorPos state.scrollOffset c.w;
+      newScroll = calcScrollOffset newText newCursorPos s.scrollOffset c.w;
-      newState = state.{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll };
+      newState = s.{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll };
       { state = newState, emit = [c.onChange newText] })
 
       | Key { key = "ArrowLeft" } \ (
-      newCursorPos = max 0 (state.cursorPos - 1);
+      newCursorPos = max 0 (s.cursorPos - 1);
-      newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset c.w;
+      newScroll = calcScrollOffset s.text newCursorPos s.scrollOffset c.w;
-      newState = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll };
+      newState = s.{ text = s.text, cursorPos = newCursorPos, scrollOffset = newScroll };
       { state = newState, emit = [] })
 
       | Key { key = "ArrowRight" } \ (
-      newCursorPos = min (len state.text) (state.cursorPos + 1);
+      newCursorPos = min (len s.text) (s.cursorPos + 1);
-      newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset c.w;
+      newScroll = calcScrollOffset s.text newCursorPos s.scrollOffset c.w;
-      newState = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll };
+      newState = s.{ text = s.text, cursorPos = newCursorPos, scrollOffset = newScroll };
       { state = newState, emit = [] })
 
       | Key { key = "Backspace" } \ (
-      newText = deleteChar state.text state.cursorPos;
+      newText = deleteChar s.text s.cursorPos;
-      newCursorPos = max 0 (state.cursorPos - 1);
+      newCursorPos = max 0 (s.cursorPos - 1);
-      newScroll = calcScrollOffset newText newCursorPos state.scrollOffset c.w;
+      newScroll = calcScrollOffset newText newCursorPos s.scrollOffset c.w;
-      newState = state.{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll };
+      newState = s.{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll };
       { state = newState, emit = [c.onChange newText] })
 
-      | Key { key = "Enter" } \ (
+      | Key { key = "Enter" } \ { state = s, emit = [c.onSubmit s.text] }
-      # newState = state.{ text = "", cursorPos = 0, scrollOffset = 0 };
-      # do we blank it out here? wish parent could decide..
-      { state = state, emit = [c.onSubmit state.text] })
 
       | Clicked coords \ (
-      newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8;
+      newCursorPos = findCursorPos s.text coords.x s.scrollOffset 8;
-      newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset c.w;
+      newScroll = calcScrollOffset s.text newCursorPos s.scrollOffset c.w;
-      newState = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll };
+      newState = s.{ text = s.text, cursorPos = newCursorPos, scrollOffset = newScroll };
       { state = newState, emit = [] })
 
       | Focused \ { state = state.{ focused = True }, emit = [] }
       | Blurred \ { state = state.{ focused = False }, emit = [] }
-      # | Key { key = k } \ { state = state, emit = [\ c.onKeyDown k ] }
+      | SetText newText \ (
-      | _ \ { state = state, emit = [] },
+        newState = s.{ text = newText, cursorPos = len newText, scrollOffset = 0 };
+        { state = newState, emit = [c.onChange newText] })
+      | _ \ { state = s, emit = [] },
 
     view = state emit \
-      textBeforeCursor = slice state.text 0 state.cursorPos;
+      text = (hasField "value" c | True \ c.value | False \ state.text);
+      cursorPos = (text == state.text | True \ state.cursorPos | False \ len text);
+      textBeforeCursor = slice text 0 cursorPos;
       cursorX = ui.measureText textBeforeCursor;
       padding = 8;
 
@@ -226,7 +233,7 @@ textInput = config \
             ui.positioned {
               x = 8 - state.scrollOffset,
               y = 0,
-              child = ui.positioned { x = 0, y = 12, child = ui.text { content = state.text, color = c.color } }
+              child = ui.positioned { x = 0, y = 12, child = ui.text { content = text, color = c.color } }
             },
 
             (state.focused

src/cg/05-palette.cg

@@ -97,6 +97,11 @@ palette = config \
         (nth effectiveIndex results
         | Some (Item data) \ { state = state, emit = [onSelect data.label] }
         | _ \ { state = state, emit = [] })
+      | Key { key = "Tab" } \ (
+        newQuery = (nth effectiveIndex results
+          | Some (Item data) \ data.label
+          | None \ paletteState.query);
+        { state = state, emit = [ paletteState.query := newQuery ] })
       | Key { key = "Escape" } \ { state = state, emit = [osState.palette.visible := False] }
       | _ \ { state = state, emit = [] },
 
@@ -118,7 +123,7 @@ palette = config \
                   children = [
                     textInput {
                       key = "palette-query",
-                      initialValue = paletteState.query,
+                      value = paletteState.query,
                       autoFocus = True,
                       color = "white",
                       backgroundColor = "rgba(0,0,0,0.2)",