Feliz: Agregue la bondad KeyboardEvent para enlazar fácilmente a eventos de pulsación de teclas

Creado en 2 nov. 2019 · 6Comentarios · Fuente: Zaid-Ajaj/Feliz

Estaba pensando en agregar una buena forma de vincularme a eventos de teclado, algo como lo siguiente sería realmente increíble:

Escenario 1: vincular a un evento clave único (caso de uso más común)

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

Escenario 2.1: vincular a varias claves

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

Escenario 2.2: vincular a varias claves

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

¡Esto está en juego! Los RR.PP. son muy bienvenidos, avíseme a mí y a otros colaboradores si desea intentarlo.

Feliz good first issue help wanted

Fuente

Zaid-Ajaj

👍1

Todos 6 comentarios

Oh, bueno, ¡me gusta cómo estás pensando!

En mi humilde opinión, Key lee mejor que Keys , es decir, Key.Enter frente a Keys.Enter .

cmeeren en 2 nov. 2019

@cmeeren Tiene razón, para mantener la coherencia, hemos estado usando una palabra singular para los módulos prop , style y key (en minúsculas) sería una adición natural 👍

Zaid-Ajaj en 2 nov. 2019

Sí, aunque he notado que tenemos colors y ahora fonts ... Algo para considerar cambiar. :)

cmeeren en 2 nov. 2019

@cmeeren Hizo un problema sobre colors y fonts en el # 95

Refinamiento de la propuesta

El escenario 2.2 es inconsistente con el resto de los controladores de eventos porque significa que también deberíamos implementar onClick(dispatch, Login) y lo más probable es que no lo hagamos (los comentarios y la discusión son bienvenidos, por supuesto)

En cuanto al escenario 1 y el escenario 2, los controladores de eventos deben aceptar KeyboardEvent como argumento para la lambda (junto a la clave). es decir, los eventos de teclado tomarán las sobrecargas:

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

Zaid-Ajaj en 2 nov. 2019

Me parece bien. Sin embargo, la prueba está en el pudín. Veamos cómo se siente en uso. :)

cmeeren en 2 nov. 2019

🚀1

Bondad del teclado agregada:

// 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 en 20 mar. 2020

🚀1

¿Fue útil esta página

0 / 5 - 0 calificaciones