From 59dc90cfa51b43a27f8a85cf89b8c63d15ff9729 Mon Sep 17 00:00:00 2001 From: Dustin Swan Date: Thu, 5 Feb 2026 20:18:33 -0700 Subject: [PATCH] Fixing my textInput and example app that uses it --- src/textinput-test.cg | 31 +++++----- src/ui-components.cg | 136 ++++++++++-------------------------------- 2 files changed, 45 insertions(+), 122 deletions(-) diff --git a/src/textinput-test.cg b/src/textinput-test.cg index ede3515..eddf274 100644 --- a/src/textinput-test.cg +++ b/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 } ] } diff --git a/src/ui-components.cg b/src/ui-components.cg index ca675c2..fbfc986 100644 --- a/src/ui-components.cg +++ b/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 @@ -91,92 +96,17 @@ textInput = config \ Stateful { ) | Clicked coords \ ( - newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8; - newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284; - newSatte = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll }; - { state = newState, emit = [] } - ) - - | Focused \ { state = state, emit = [] } - | Blurred \ { state = state, emit = [] } - | _ \ { state = state, emit = [] }, - - view = state \ - 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 { - 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); + newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8; newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284; - { text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll } + newSatte = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll }; + { state = newState, emit = [] } ) - | 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, + | Focused \ { state = state.{ focused = True }, emit = [] } + | Blurred \ { state = state.{ focused = False }, emit = [] } + | _ \ { state = state, emit = [] }, - view = state config \ + view = state \ textBeforeCursor = slice state.text 0 state.cursorPos; cursorX = measureText textBeforeCursor; padding = 8; @@ -184,28 +114,24 @@ textInputOLD = { 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" }) - ] + 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 } + }, + + (state.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" }) + ] } + } };