Add KeyboardEvent goodness to easily bind to key press events

[Zaid-Ajaj]

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

[cmeeren]

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

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

[Zaid-Ajaj]

@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 👍

[cmeeren]

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

[Zaid-Ajaj]

@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

[cmeeren]

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

[Zaid-Ajaj]

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)