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

Merge 557719127c into d7956c19d3

Browse Source
This commit is contained in:
Anirban Biswas 2024-12-14 11:46:29 +00:00 committed by GitHub
commit 107ce97311
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,7 +64,7 @@ class TextFieldRoot(elements.Input, RadixThemesComponent):
required: Var[bool] required: Var[bool]
# Specifies the type of input # Specifies the type of input
type: Var[str] type: Var[str] = Var.create("text") # Default to "text"
# Value of the input # Value of the input
value: Var[Union[str, int, float]] value: Var[Union[str, int, float]]
@ -87,35 +87,50 @@ class TextFieldRoot(elements.Input, RadixThemesComponent):
# Fired when a key is released. # Fired when a key is released.
on_key_up: EventHandler[key_event] on_key_up: EventHandler[key_event]
# Whether the password toggle is enabled (for type="password")
enable_password_toggle: Var[bool] = Var.create(False)
# Tracks whether the password is visible
is_password_visible: Var[bool] = Var.create(False)
@classmethod @classmethod
def create(cls, *children, **props) -> Component: def create(cls, *children, **props) -> Component:
"""Create an Input component. """Create a TextField component with optional password toggle.
Args: Args:
*children: The children of the component. *children: The children of the component.
**props: The properties of the component. **props: The properties of the component.
Returns: Returns:
The component. The TextField component.
""" """
value = props.get("value") # Check if the input type is "password" and toggle is enabled
enable_password_toggle = props.get("enable_password_toggle", False)
is_password_visible = props.get("is_password_visible", Var.create(False))
# React expects an empty string(instead of null) for controlled inputs. if enable_password_toggle and props.get("type") == "password":
if value is not None and is_optional( # Adjust the type based on visibility
(value_var := Var.create(value))._var_type props["type"] = Var.create("text") if is_password_visible else Var.create("password")
):
props["value"] = ternary_operation( # Create the base input field
(value_var != Var.create(None)) # pyright: ignore [reportGeneralTypeIssues] text_field = super().create(*children, **props)
& (value_var != Var(_js_expr="undefined")),
value, # Add an eye icon for toggling password visibility
Var.create(""), toggle_icon = elements.Button.create(
"👁️" if not is_password_visible else "👁️‍🗨️",
on_click=toggle(is_password_visible),
style={"cursor": "pointer", "margin-left": "0.5rem"},
) )
component = super().create(*children, **props) # Wrap input and toggle button together
if props.get("value") is not None and props.get("on_change") is not None: return elements.Div.create(
# create a debounced input if the user requests full control to avoid typing jank text_field,
return DebounceInput.create(component) toggle_icon,
return component style={"display": "flex", "align-items": "center"},
)
# For all other cases, return the regular input field
return super().create(*children, **props)
class TextFieldSlot(RadixThemesComponent): class TextFieldSlot(RadixThemesComponent):