94 lines
2.8 KiB
Python
94 lines
2.8 KiB
Python
"""An editable component."""
|
|
|
|
from typing import Dict
|
|
|
|
from reflex.components.component import Component
|
|
from reflex.components.forms.debounce import DebounceInput
|
|
from reflex.components.libs.chakra import ChakraComponent
|
|
from reflex.event import EVENT_ARG
|
|
from reflex.vars import Var
|
|
|
|
|
|
class Editable(ChakraComponent):
|
|
"""The wrapper component that provides context value."""
|
|
|
|
tag = "Editable"
|
|
|
|
# If true, the Editable will be disabled.
|
|
is_disabled: Var[bool]
|
|
|
|
# If true, the read only view, has a tabIndex set to 0 so it can receive focus via the keyboard or click.
|
|
is_preview_focusable: Var[bool]
|
|
|
|
# The placeholder text when the value is empty.
|
|
placeholder: Var[str]
|
|
|
|
# If true, the input's text will be highlighted on focus.
|
|
select_all_on_focus: Var[bool]
|
|
|
|
# If true, the Editable will start with edit mode by default.
|
|
start_with_edit_view: Var[bool]
|
|
|
|
# If true, it'll update the value onBlur and turn off the edit mode.
|
|
submit_on_blur: Var[bool]
|
|
|
|
# The value of the Editable in both edit & preview mode
|
|
value: Var[str]
|
|
|
|
# The initial value of the Editable in both edit and preview mode.
|
|
default_value: Var[str]
|
|
|
|
@classmethod
|
|
def create(cls, *children, **props) -> Component:
|
|
"""Create an Editable component.
|
|
|
|
Args:
|
|
children: The children of the component.
|
|
props: The properties of the component.
|
|
|
|
Returns:
|
|
The component.
|
|
"""
|
|
if (
|
|
isinstance(props.get("value"), Var) and props.get("on_change")
|
|
) or "debounce_timeout" in props:
|
|
# Create a debounced input if the user requests full control to avoid typing jank
|
|
# Currently default to 50ms, which appears to be a good balance
|
|
debounce_timeout = props.pop("debounce_timeout", 50)
|
|
return DebounceInput.create(
|
|
super().create(*children, **props),
|
|
debounce_timeout=debounce_timeout,
|
|
)
|
|
return super().create(*children, **props)
|
|
|
|
def get_controlled_triggers(self) -> Dict[str, Var]:
|
|
"""Get the event triggers that pass the component's value to the handler.
|
|
|
|
Returns:
|
|
A dict mapping the event trigger to the var that is passed to the handler.
|
|
"""
|
|
return {
|
|
"on_change": EVENT_ARG,
|
|
"on_edit": EVENT_ARG,
|
|
"on_submit": EVENT_ARG,
|
|
"on_cancel": EVENT_ARG,
|
|
}
|
|
|
|
|
|
class EditableInput(ChakraComponent):
|
|
"""The edit view of the component. It shows when you click or focus on the text."""
|
|
|
|
tag = "EditableInput"
|
|
|
|
|
|
class EditableTextarea(ChakraComponent):
|
|
"""Use the textarea element to handle multi line text input in an editable context."""
|
|
|
|
tag = "EditableTextarea"
|
|
|
|
|
|
class EditablePreview(ChakraComponent):
|
|
"""The read-only view of the component."""
|
|
|
|
tag = "EditablePreview"
|