207 lines
6.6 KiB
Python
207 lines
6.6 KiB
Python
"""A pin input component."""
|
|
from __future__ import annotations
|
|
|
|
from typing import Any, Optional, Union
|
|
|
|
from reflex.components.chakra import ChakraComponent, LiteralInputVariant
|
|
from reflex.components.component import Component
|
|
from reflex.components.tags.tag import Tag
|
|
from reflex.constants import EventTriggers
|
|
from reflex.utils import format
|
|
from reflex.utils.imports import ImportDict, merge_imports
|
|
from reflex.vars import Var
|
|
|
|
|
|
class PinInput(ChakraComponent):
|
|
"""The component that provides context to all the pin-input fields."""
|
|
|
|
tag: str = "PinInput"
|
|
|
|
# State var to bind the the input.
|
|
value: Optional[Var[str]] = None
|
|
|
|
# If true, the pin input receives focus on mount
|
|
auto_focus: Optional[Var[bool]] = None
|
|
|
|
# The default value of the pin input
|
|
default_value: Optional[Var[str]] = None
|
|
|
|
# The border color when the input is invalid.
|
|
error_border_color: Optional[Var[str]] = None
|
|
|
|
# The border color when the input is focused.
|
|
focus_border_color: Optional[Var[str]] = None
|
|
|
|
# The top-level id string that will be applied to the input fields. The index of the input will be appended to this top-level id.
|
|
id_: Optional[Var[str]] = None
|
|
|
|
# The length of the number input.
|
|
length: Optional[Var[int]] = None
|
|
|
|
# If true, the pin input component is put in the disabled state
|
|
is_disabled: Optional[Var[bool]] = None
|
|
|
|
# If true, the pin input component is put in the invalid state
|
|
is_invalid: Optional[Var[bool]] = None
|
|
|
|
# If true, focus will move automatically to the next input once filled
|
|
manage_focus: Optional[Var[bool]] = None
|
|
|
|
# If true, the input's value will be masked just like `type=password`
|
|
mask: Optional[Var[bool]] = None
|
|
|
|
# The placeholder for the pin input
|
|
placeholder: Optional[Var[str]] = None
|
|
|
|
# The type of values the pin-input should allow ("number" | "alphanumeric").
|
|
type_: Optional[Var[str]] = None
|
|
|
|
# "outline" | "flushed" | "filled" | "unstyled"
|
|
variant: Optional[Var[LiteralInputVariant]] = None
|
|
|
|
# The name of the form field
|
|
name: Optional[Var[str]] = None
|
|
|
|
def _get_imports(self) -> ImportDict:
|
|
"""Include PinInputField explicitly because it may not be a child component at compile time.
|
|
|
|
Returns:
|
|
The merged import dict.
|
|
"""
|
|
range_var = Var.range(0)
|
|
return merge_imports(
|
|
super()._get_imports(),
|
|
PinInputField().get_imports(), # type: ignore
|
|
range_var._var_data.imports if range_var._var_data is not None else {},
|
|
)
|
|
|
|
def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
|
|
"""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 {
|
|
**super().get_event_triggers(),
|
|
EventTriggers.ON_CHANGE: lambda e0: [e0],
|
|
EventTriggers.ON_COMPLETE: lambda e0: [e0],
|
|
}
|
|
|
|
def get_ref(self) -> str | None:
|
|
"""Override ref handling to handle array refs.
|
|
|
|
PinInputFields may be created dynamically, so it's not possible
|
|
to compute their ref at compile time, so we return a cheating
|
|
guess if the id is specified.
|
|
|
|
The `ref` for this outer component will always be stripped off, so what
|
|
is returned here only matters for form ref collection purposes.
|
|
|
|
Returns:
|
|
None.
|
|
"""
|
|
if any(isinstance(c, PinInputField) for c in self.children):
|
|
return None
|
|
if self.id:
|
|
return format.format_array_ref(self.id, idx=self.length)
|
|
return super().get_ref()
|
|
|
|
def _get_ref_hook(self) -> Optional[str]:
|
|
"""Override the base _get_ref_hook to handle array refs.
|
|
|
|
Returns:
|
|
The overrided hooks.
|
|
"""
|
|
if self.id:
|
|
ref = format.format_array_ref(self.id, None)
|
|
refs_declaration = Var.range(self.length).foreach(
|
|
lambda: Var.create_safe("useRef(null)", _var_is_string=False),
|
|
)
|
|
refs_declaration._var_is_local = True
|
|
if ref:
|
|
return (
|
|
f"const {ref} = {str(refs_declaration)}; "
|
|
f"{str(Var.create_safe(ref).as_ref())} = {ref}"
|
|
)
|
|
return super()._get_ref_hook()
|
|
|
|
def _render(self) -> Tag:
|
|
"""Override the base _render to remove the fake get_ref.
|
|
|
|
Returns:
|
|
The rendered component.
|
|
"""
|
|
return super()._render().remove_props("ref")
|
|
|
|
@classmethod
|
|
def create(cls, *children, **props) -> Component:
|
|
"""Create a pin input component.
|
|
|
|
If no children are passed in, the component will create a default pin input
|
|
based on the length prop.
|
|
|
|
Args:
|
|
*children: The children of the component.
|
|
**props: The props of the component.
|
|
|
|
Returns:
|
|
The pin input component.
|
|
"""
|
|
if children:
|
|
props.pop("length", None)
|
|
elif "length" in props:
|
|
field_props = {}
|
|
if "id" in props:
|
|
field_props["id"] = props["id"]
|
|
if "name" in props:
|
|
field_props["name"] = props["name"]
|
|
children = [
|
|
PinInputField.for_length(props["length"], **field_props),
|
|
]
|
|
return super().create(*children, **props)
|
|
|
|
|
|
class PinInputField(ChakraComponent):
|
|
"""The text field that user types in - must be a direct child of PinInput."""
|
|
|
|
tag: str = "PinInputField"
|
|
|
|
# the position of the PinInputField inside the PinInput.
|
|
# Default to None because it is assigned by PinInput when created.
|
|
index: Optional[Var[int]] = None
|
|
|
|
# The name of the form field
|
|
name: Optional[Var[str]] = None
|
|
|
|
@classmethod
|
|
def for_length(cls, length: Var | int, **props) -> Var:
|
|
"""Create a PinInputField for a PinInput with a given length.
|
|
|
|
Args:
|
|
length: The length of the PinInput.
|
|
props: The props of each PinInputField (name will become indexed).
|
|
|
|
Returns:
|
|
The PinInputField.
|
|
"""
|
|
name = props.get("name")
|
|
|
|
def _create(i):
|
|
if name is not None:
|
|
props["name"] = f"{name}-{i}"
|
|
return PinInputField.create(**props, index=i, key=i)
|
|
|
|
return Var.range(length).foreach(_create) # type: ignore
|
|
|
|
def _get_ref_hook(self) -> Optional[str]:
|
|
return None
|
|
|
|
def get_ref(self):
|
|
"""Get the array ref for the pin input.
|
|
|
|
Returns:
|
|
The array ref.
|
|
"""
|
|
if self.id:
|
|
return format.format_array_ref(self.id, self.index)
|