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

Fixing my textInput and example app that uses it

Browse Source
master
Dustin Swan 1 day ago
parent a9afb03694
commit 59dc90cfa5
Signed by: dustinswan
GPG Key ID: 30D46587E2100467
2 changed files with 45 additions and 122 deletions
Show Stats Download Patch File Download Diff File

31
src/textinput-test.cg
Unescape Escape View File

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

136
src/ui-components.cg
Unescape Escape View File

@ -55,7 +55,12 @@ textInput = config \ Stateful {
focusable = True, focusable = True,
# init : State # 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 \ State
update = state event \ event update = state event \ event
@ -91,92 +96,17 @@ textInput = config \ Stateful {
) )
| Clicked coords \ ( | Clicked coords \ (
newCursorPos = findCursorPos state.text coords.x state.scrollOffset 8; 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);
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284; 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 \ ( | Focused \ { state = state.{ focused = True }, emit = [] }
newCursorPos = min (len state.text) (state.cursorPos + 1); | Blurred \ { state = state.{ focused = False }, emit = [] }
newScroll = calcScrollOffset state.text newCursorPos state.scrollOffset 284; | _ \ { state = state, emit = [] },
{ 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 \ view = state \
textBeforeCursor = slice state.text 0 state.cursorPos; textBeforeCursor = slice state.text 0 state.cursorPos;
cursorX = measureText textBeforeCursor; cursorX = measureText textBeforeCursor;
padding = 8; padding = 8;
@ -184,28 +114,24 @@ textInputOLD = {
Clip { Clip {
w = config.w, w = config.w,
h = config.h, h = config.h,
child = Clickable { child = Stack {
event = config.onFocus, children = [
child = Rect { w = config.w, h = config.h, color = "rgba(240,240,240,0.9)", radius = 4 },
Stack {
children = [ Positioned {
Rect { w = config.w, h = config.h, color = "rgba(240,240,240,0.9)", radius = 4 }, x = 8 - state.scrollOffset,
y = 8,
Positioned { child = Text { content = state.text, x = 0, y = 17 }
x = 8 - state.scrollOffset, },
y = 8,
child = Text { content = state.text, x = 0, y = 17 } (state.focused
}, | True \ Positioned {
x = 8 + cursorX - state.scrollOffset,
(config.focused y = 8,
| True \ Positioned { child = Rect { w = 2, h = 24, color = "black" }
x = 8 + cursorX - state.scrollOffset,
y = 8,
child = Rect { w = 2, h = 24, color = "black" }
}
| _ \ Rect { w = 0, h = 0, color = "transparent" })
]
} }
} | _ \ Rect { w = 0, h = 0, color = "transparent" })
]
} }
}
}; };

Write Preview
Loading…
Cancel
Save