264 lines
9.7 KiB
Markdown
264 lines
9.7 KiB
Markdown
```python exec
|
||
from datetime import datetime
|
||
|
||
import reflex as rx
|
||
|
||
from pcweb.templates.docpage import docdemo, h1_comp, text_comp, docpage
|
||
|
||
SYNTHETIC_EVENTS = [
|
||
{
|
||
"name": "on_focus",
|
||
"description": "The on_focus event handler is called when the element (or some element inside of it) receives focus. For example, it’s called when the user clicks on a text input.",
|
||
"state": """class FocusState(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self, text):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.chakra.input(value = FocusState.text, on_focus=FocusState.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_blur",
|
||
"description": "The on_blur event handler is called when focus has left the element (or left some element inside of it). For example, it’s called when the user clicks outside of a focused text input.",
|
||
"state": """class BlurState(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self, text):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.chakra.input(value = BlurState.text, on_blur=BlurState.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_change",
|
||
"description": "The on_change event handler is called when the value of an element has changed. For example, it’s called when the user types into a text input each keystoke triggers the on change.",
|
||
"state": """class ChangeState(rx.State):
|
||
checked: bool = False
|
||
|
||
""",
|
||
"example": """rx.switch(on_change=ChangeState.set_checked)""",
|
||
},
|
||
{
|
||
"name": "on_click",
|
||
"description": "The on_click event handler is called when the user clicks on an element. For example, it’s called when the user clicks on a button.",
|
||
"state": """class ClickState(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(ClickState.text, on_click=ClickState.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_context_menu",
|
||
"description": "The on_context_menu event handler is called when the user right-clicks on an element. For example, it’s called when the user right-clicks on a button.",
|
||
"state": """class ContextState(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(ContextState.text, on_context_menu=ContextState.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_double_click",
|
||
"description": "The on_double_click event handler is called when the user double-clicks on an element. For example, it’s called when the user double-clicks on a button.",
|
||
"state": """class DoubleClickState(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(DoubleClickState.text, on_double_click=DoubleClickState.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_mount",
|
||
"description": "The on_mount event handler is called after the component is rendered on the page. It is similar to a page on_load event, although it does not necessarily fire when navigating between pages.",
|
||
"state": """class MountState(rx.State):
|
||
events: list[str] = []
|
||
|
||
def on_mount(self):
|
||
self.events = self.events[-4:] + ["on_mount @ " + str(datetime.now())]
|
||
""",
|
||
"example": """rx.vstack(rx.foreach(MountState.events, rx.text), on_mount=MountState.on_mount)""",
|
||
},
|
||
{
|
||
"name": "on_unmount",
|
||
"description": "The on_unmount event handler is called after removing the component from the page. However, on_unmount will only be called for internal navigation, not when following external links or refreshing the page.",
|
||
"state": """class UnmountState(rx.State):
|
||
events: list[str] = []
|
||
|
||
def on_unmount(self):
|
||
self.events = self.events[-4:] + ["on_unmount @ " + str(datetime.now())]
|
||
""",
|
||
"example": """rx.vstack(rx.foreach(UnmountState.events, rx.text), on_unmount=UnmountState.on_unmount)""",
|
||
},
|
||
{
|
||
"name": "on_mouse_up",
|
||
"description": "The on_mouse_up event handler is called when the user releases a mouse button on an element. For example, it’s called when the user releases the left mouse button on a button.",
|
||
"state": """class MouseUpState(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(MouseUpState.text, on_mouse_up=MouseUpState.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_mouse_down",
|
||
"description": "The on_mouse_down event handler is called when the user presses a mouse button on an element. For example, it’s called when the user presses the left mouse button on a button.",
|
||
"state": """class MouseDown(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(MouseDown.text, on_mouse_down=MouseDown.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_mouse_enter",
|
||
"description": "The on_mouse_enter event handler is called when the user’s mouse enters an element. For example, it’s called when the user’s mouse enters a button.",
|
||
"state": """class MouseEnter(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(MouseEnter.text, on_mouse_enter=MouseEnter.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_mouse_leave",
|
||
"description": "The on_mouse_leave event handler is called when the user’s mouse leaves an element. For example, it’s called when the user’s mouse leaves a button.",
|
||
"state": """class MouseLeave(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(MouseLeave.text, on_mouse_leave=MouseLeave.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_mouse_move",
|
||
"description": "The on_mouse_move event handler is called when the user moves the mouse over an element. For example, it’s called when the user moves the mouse over a button.",
|
||
"state": """class MouseMove(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(MouseMove.text, on_mouse_move=MouseMove.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_mouse_out",
|
||
"description": "The on_mouse_out event handler is called when the user’s mouse leaves an element. For example, it’s called when the user’s mouse leaves a button.",
|
||
"state": """class MouseOut(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(MouseOut.text, on_mouse_out=MouseOut.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_mouse_over",
|
||
"description": "The on_mouse_over event handler is called when the user’s mouse enters an element. For example, it’s called when the user’s mouse enters a button.",
|
||
"state": """class MouseOver(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.button(MouseOver.text, on_mouse_over=MouseOver.change_text)""",
|
||
},
|
||
{
|
||
"name": "on_scroll",
|
||
"description": "The on_scroll event handler is called when the user scrolls the page. For example, it’s called when the user scrolls the page down.",
|
||
"state": """class ScrollState(rx.State):
|
||
text = "Change Me!"
|
||
|
||
def change_text(self):
|
||
if self.text == "Change Me!":
|
||
self.text = "Changed!"
|
||
else:
|
||
self.text = "Change Me!"
|
||
""",
|
||
"example": """rx.vstack(
|
||
rx.text("Scroll to make the text below change."),
|
||
rx.text(ScrollState.text),
|
||
rx.text("Scroll to make the text above change."),
|
||
on_scroll=ScrollState.change_text,
|
||
overflow = "auto",
|
||
height = "3em",
|
||
width = "100%",
|
||
)""",
|
||
},
|
||
]
|
||
for i in SYNTHETIC_EVENTS:
|
||
exec(i["state"])
|
||
|
||
def component_grid():
|
||
events = []
|
||
for event in SYNTHETIC_EVENTS:
|
||
events.append(
|
||
rx.vstack(
|
||
h1_comp(text=event["name"]),
|
||
text_comp(text=event["description"]),
|
||
docdemo(
|
||
event["example"], state=event["state"], comp=eval(event["example"])
|
||
),
|
||
align_items="left",
|
||
)
|
||
)
|
||
|
||
return rx.box(*events)
|
||
```
|
||
|
||
# Event Triggers
|
||
|
||
Components can modify the state based on user events such as clicking a button or entering text in a field.
|
||
These events are triggered by event triggers.
|
||
|
||
Event triggers are component specific and are listed in the documentation for each component.
|
||
|
||
```python eval
|
||
rx.box(
|
||
rx.chakra.divider(),
|
||
component_grid(),
|
||
)
|
||
```
|