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.el.element import Element
from reflex.components.tags.tag import Tag from reflex.components.tags.tag import Tag
from reflex.constants import Dirs, EventTriggers 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.utils.imports import ImportDict
from reflex.vars import VarData from reflex.vars import VarData
from reflex.vars.base import LiteralVar, Var from reflex.vars.base import LiteralVar, Var
@ -354,10 +360,10 @@ class Input(BaseHTML):
on_blur: EventHandler[input_event] on_blur: EventHandler[input_event]
# Fired when a key is pressed down # 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 # Fired when a key is released
on_key_up: EventHandler[lambda e0: [e0.key]] on_key_up: EventHandler[key_event]
class Label(BaseHTML): class Label(BaseHTML):
@ -595,10 +601,10 @@ class Textarea(BaseHTML):
on_blur: EventHandler[input_event] on_blur: EventHandler[input_event]
# Fired when a key is pressed down # 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 # 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]: def _exclude_props(self) -> list[str]:
return super()._exclude_props() + [ 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.breakpoints import Responsive
from reflex.components.core.debounce import DebounceInput from reflex.components.core.debounce import DebounceInput
from reflex.components.el import elements 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 reflex.vars.base import Var
from ..base import ( from ..base import (
@ -92,10 +92,10 @@ class TextArea(RadixThemesComponent, elements.Textarea):
on_blur: EventHandler[input_event] on_blur: EventHandler[input_event]
# Fired when a key is pressed down. # 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. # Fired when a key is released.
on_key_up: EventHandler[lambda e0: [e0.key]] on_key_up: EventHandler[key_event]
@classmethod @classmethod
def create(cls, *children, **props) -> Component: 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.breakpoints import Responsive
from reflex.components.core.debounce import DebounceInput from reflex.components.core.debounce import DebounceInput
from reflex.components.el import elements 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 reflex.vars.base import Var
from ..base import ( from ..base import (
@ -81,10 +81,10 @@ class TextFieldRoot(elements.Div, RadixThemesComponent):
on_blur: EventHandler[input_event] on_blur: EventHandler[input_event]
# Fired when a key is pressed down. # 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. # Fired when a key is released.
on_key_up: EventHandler[lambda e0: [e0.key]] on_key_up: EventHandler[key_event]
@classmethod @classmethod
def create(cls, *children, **props) -> Component: def create(cls, *children, **props) -> Component:

22
reflex/event.py
View File

@ -415,6 +415,16 @@ class JavascriptInputEvent:
target: JavascriptHTMLInputElement = JavascriptHTMLInputElement() 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]: def input_event(e: Var[JavascriptInputEvent]) -> Tuple[str]:
"""Get the value from an input event. """Get the value from an input event.
@ -427,6 +437,18 @@ def input_event(e: Var[JavascriptInputEvent]) -> Tuple[str]:
return (e.target.value,) 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( @dataclasses.dataclass(
init=True, init=True,
frozen=True, frozen=True,