Feliz: Add KeyboardEvent goodness to easily bind to key press events

Created on 2 Nov 2019 · 6Comments · Source: Zaid-Ajaj/Feliz

I was thinking of adding a nice way to bind to keyboard events, something like the following would be really awesome:

Scenario 1: bind to a single key event (most common use-case)

Html.input [
    prop.onKeyUp(key.enter, fun _ -> dispatch Login)
    prop.onChange (UsernameChanged >> dispatch)
    prop.valueOrDefault state.Username
]

Scenario 2.1: bind to multiple keys

Html.input [
    prop.onKeyUp [ key.enter, fun _ -> dispatch Login ]
    prop.onChange (UsernameChanged >> dispatch)
    prop.valueOrDefault state.Username
]

Scenario 2.2: bind to multiple keys

Html.input [
    prop.onKeyUp(dispatch, [ key.enter, Login; key.esc, Reset ])
    prop.onChange (UsernameChanged >> dispatch)
    prop.valueOrDefault state.Username
]

This is up for grabs! PRs are very much welcome, let me and other contributors know if you want to take a stab at it

Feliz good first issue help wanted

Source

Zaid-Ajaj

👍1

All 6 comments

Ooh, nice, I like how you're thinking!

IMHO Key reads better than Keys, i.e. Key.Enter vs. Keys.Enter.

cmeeren on 2 Nov 2019

@cmeeren You are right, to keep it consistent, we have been using a singular word for modules prop, style and key (lower-cased) would be a natural addition 👍

Zaid-Ajaj on 2 Nov 2019

Yep, though I have noticed that we have colors and now fonts... Something to consider changing. :)

cmeeren on 2 Nov 2019

@cmeeren Made an issue about colors and fonts at #95

Refinement of the proposal

Scenario 2.2 is inconsistent with the rest of the event handlers because it means we should also implement onClick(dispatch, Login) and most likely we won't (feedback and discussion is welcome of course)

As for scenario 1 and scenario 2, the event handlers in there should accept the KeyboardEvent as argument for the lambda (along side the key). i.e. the keyboard events will take the overloads:

KeyboardEvent -> unit // default
IKeyboardKey * (KeyboardEvent -> unit) // scenario 1
(IKeyboardKey * (KeyboardEvent -> unit)) list // scenario 2

Zaid-Ajaj on 2 Nov 2019

Looks good to me. The proof is in the pudding, though. Let's see how it feels in use. :)

cmeeren on 2 Nov 2019

🚀1

Keyboard goodness added:

// Enter only
prop.onKeyUp (key.enter, fun _ -> dispatch Login)
// Enter + CTRL
prop.onKeyUp (key.ctrl(key.enter), fun _ -> dispatch Login)
// Enter + SHIFT
prop.onKeyUp (key.shift(key.enter), fun _ -> dispatch Login)
// Enter + CTRL + SHIFT
prop.onKeyUp (key.ctrlAndShift(key.enter), fun _ -> dispatch Login)

Zaid-Ajaj on 20 Mar 2020

🚀1

Was this page helpful?

0 / 5 - 0 ratings