laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add keyboard event

Browse Source
This commit is contained in:
Khaleel Al-Adhami 2024-10-08 16:48:28 -07:00
parent 04afd30958
commit 9c2465f785
4 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
reflex/components/el/elements/forms.py
View File

@ -10,7 +10,13 @@ from jinja2 import Environment
from reflex.components.el.element import Element
from reflex.components.tags.tag import Tag
from reflex.constants import Dirs, EventTriggers
from reflex.event import EventChain, EventHandler, input_event, prevent_default
from reflex.event import (
EventChain,
EventHandler,
input_event,
key_event,
prevent_default,
)
from reflex.utils.imports import ImportDict
from reflex.vars import VarData
from reflex.vars.base import LiteralVar, Var
@ -354,10 +360,10 @@ class Input(BaseHTML):
on_blur: EventHandler[input_event]
# Fired when a key is pressed down
on_key_down: EventHandler[lambda e0: [e0.key]]
on_key_down: EventHandler[key_event]
# Fired when a key is released
on_key_up: EventHandler[lambda e0: [e0.key]]
on_key_up: EventHandler[key_event]
class Label(BaseHTML):
@ -595,10 +601,10 @@ class Textarea(BaseHTML):
on_blur: EventHandler[input_event]
# Fired when a key is pressed down
on_key_down: EventHandler[lambda e0: [e0.key]]
on_key_down: EventHandler[key_event]
# Fired when a key is released
on_key_up: EventHandler[lambda e0: [e0.key]]
on_key_up: EventHandler[key_event]
def _exclude_props(self) -> list[str]:
return super()._exclude_props() + [

6
reflex/components/radix/themes/components/text_area.py
View File

@ -6,7 +6,7 @@ from reflex.components.component import Component
from reflex.components.core.breakpoints import Responsive
from reflex.components.core.debounce import DebounceInput
from reflex.components.el import elements
from reflex.event import EventHandler, input_event
from reflex.event import EventHandler, input_event, key_event
from reflex.vars.base import Var
from ..base import (
@ -92,10 +92,10 @@ class TextArea(RadixThemesComponent, elements.Textarea):
on_blur: EventHandler[input_event]
# Fired when a key is pressed down.
on_key_down: EventHandler[lambda e0: [e0.key]]
on_key_down: EventHandler[key_event]
# Fired when a key is released.
on_key_up: EventHandler[lambda e0: [e0.key]]
on_key_up: EventHandler[key_event]
@classmethod
def create(cls, *children, **props) -> Component:

6
reflex/components/radix/themes/components/text_field.py
View File

@ -8,7 +8,7 @@ from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.breakpoints import Responsive
from reflex.components.core.debounce import DebounceInput
from reflex.components.el import elements
from reflex.event import EventHandler, input_event
from reflex.event import EventHandler, input_event, key_event
from reflex.vars.base import Var
from ..base import (
@ -81,10 +81,10 @@ class TextFieldRoot(elements.Div, RadixThemesComponent):
on_blur: EventHandler[input_event]
# Fired when a key is pressed down.
on_key_down: EventHandler[lambda e0: [e0.key]]
on_key_down: EventHandler[key_event]
# Fired when a key is released.
on_key_up: EventHandler[lambda e0: [e0.key]]
on_key_up: EventHandler[key_event]
@classmethod
def create(cls, *children, **props) -> Component:

22
reflex/event.py
View File

@ -415,6 +415,16 @@ class JavascriptInputEvent:
target: JavascriptHTMLInputElement = JavascriptHTMLInputElement()
@dataclasses.dataclass(
init=True,
frozen=True,
)
class JavasciptKeyboardEvent:
"""Interface for a Javascript KeyboardEvent https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent."""
key: str = ""
def input_event(e: Var[JavascriptInputEvent]) -> Tuple[str]:
"""Get the value from an input event.
@ -427,6 +437,18 @@ def input_event(e: Var[JavascriptInputEvent]) -> Tuple[str]:
return (e.target.value,)
def key_event(e: Var[JavasciptKeyboardEvent]) -> Tuple[str]:
"""Get the key from a keyboard event.
Args:
e: The keyboard event.
Returns:
The key from the keyboard event.
"""
return (e.key,)
@dataclasses.dataclass(
init=True,
frozen=True,