dustinswan/cg
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Dustin Swan 2026-02-21 21:31:18 -07:00
parent eb5618c64e
commit 5d7d297050
No known key found for this signature in database
GPG key ID: 30D46587E2100467
2 changed files with 39 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/cg/03-ui-components.cg
View file

@ -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;
newCursorPos = state.cursorPos + 1;
newScroll = calcScrollOffset newText newCursorPos state.scrollOffset c.w;
newState = state.{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll };
newText = insertChar s.text s.cursorPos key;
newCursorPos = s.cursorPos + 1;
newScroll = calcScrollOffset newText newCursorPos s.scrollOffset c.w;
newState = s.{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll };
{ state = newState, emit = [c.onChange newText] })
| Key { key = "ArrowLeft" } \ (
newCursorPos = max 0 (state.cursorPos - 1);
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset c.w;
newState = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll };
newCursorPos = max 0 (s.cursorPos - 1);
newScroll = calcScrollOffset s.text newCursorPos s.scrollOffset c.w;
newState = s.{ text = s.text, cursorPos = newCursorPos, scrollOffset = newScroll };
{ state = newState, emit = [] })
| Key { key = "ArrowRight" } \ (
newCursorPos = min (len state.text) (state.cursorPos + 1);
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset c.w;
newState = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll };
newCursorPos = min (len s.text) (s.cursorPos + 1);
newScroll = calcScrollOffset s.text newCursorPos s.scrollOffset c.w;
newState = s.{ text = s.text, cursorPos = newCursorPos, scrollOffset = newScroll };
{ state = newState, emit = [] })
| Key { key = "Backspace" } \ (
newText = deleteChar state.text state.cursorPos;
newCursorPos = max 0 (state.cursorPos - 1);
newScroll = calcScrollOffset newText newCursorPos state.scrollOffset c.w;
newState = state.{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll };
newText = deleteChar s.text s.cursorPos;
newCursorPos = max 0 (s.cursorPos - 1);
newScroll = calcScrollOffset newText newCursorPos s.scrollOffset c.w;
newState = s.{ text = newText, cursorPos = newCursorPos, scrollOffset = newScroll };
{ state = newState, emit = [c.onChange newText] })
| Key { key = "Enter" } \ (
# newState = state.{ text = "", cursorPos = 0, scrollOffset = 0 };
# do we blank it out here? wish parent could decide..
{ state = state, emit = [c.onSubmit state.text] })
| Key { key = "Enter" } \ { state = s, emit = [c.onSubmit s.text] }
| Clicked coords \ (
newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8;
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset c.w;
newState = state.{ text = state.text, cursorPos = newCursorPos, scrollOffset = newScroll };
newCursorPos = findCursorPos s.text coords.x s.scrollOffset 8;
newScroll = calcScrollOffset s.text newCursorPos s.scrollOffset c.w;
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 ] }
| _ \ { state = state, emit = [] },
| SetText newText \ (
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

7
src/cg/05-palette.cg
View file

@ -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)",