Restore the rx.color_mode.switch (#3294)
This was tentatively removed for 0.5.0 without a deprecation period, so adding it back to avoid immediate breakage in existing apps.
This commit is contained in:
Masen Furer
parent
5e1fe07e0b
commit
52e0507c40
@ -23,7 +23,8 @@ from typing import Literal, get_args
|
||||
from reflex.components.component import BaseComponent
|
||||
from reflex.components.core.cond import Cond, color_mode_cond, cond
|
||||
from reflex.components.lucide.icon import Icon
|
||||
from reflex.style import color_mode, toggle_color_mode
|
||||
from reflex.components.radix.themes.components.switch import Switch
|
||||
from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
|
||||
from reflex.utils import console
|
||||
from reflex.vars import BaseVar, Var
|
||||
|
||||
@ -143,11 +144,34 @@ class ColorModeIconButton(IconButton):
|
||||
)
|
||||
|
||||
|
||||
class ColorModeSwitch(Switch):
|
||||
"""Switch for toggling light / dark mode via toggle_color_mode."""
|
||||
|
||||
@classmethod
|
||||
def create(cls, *children, **props):
|
||||
"""Create a switch component bound to color_mode.
|
||||
|
||||
Args:
|
||||
*children: The children of the component.
|
||||
**props: The props to pass to the component.
|
||||
|
||||
Returns:
|
||||
The switch component.
|
||||
"""
|
||||
return Switch.create(
|
||||
*children,
|
||||
checked=color_mode != LIGHT_COLOR_MODE,
|
||||
on_change=toggle_color_mode,
|
||||
**props,
|
||||
)
|
||||
|
||||
|
||||
class ColorModeNamespace(BaseVar):
|
||||
"""Namespace for color mode components."""
|
||||
|
||||
icon = staticmethod(ColorModeIcon.create)
|
||||
button = staticmethod(ColorModeIconButton.create)
|
||||
switch = staticmethod(ColorModeSwitch.create)
|
||||
|
||||
|
||||
color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode))
|
||||
|
||||
@ -12,7 +12,8 @@ from typing import Literal, get_args
|
||||
from reflex.components.component import BaseComponent
|
||||
from reflex.components.core.cond import Cond, color_mode_cond, cond
|
||||
from reflex.components.lucide.icon import Icon
|
||||
from reflex.style import color_mode, toggle_color_mode
|
||||
from reflex.components.radix.themes.components.switch import Switch
|
||||
from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
|
||||
from reflex.utils import console
|
||||
from reflex.vars import BaseVar, Var
|
||||
from .components.icon_button import IconButton
|
||||
@ -362,8 +363,184 @@ class ColorModeIconButton(IconButton):
|
||||
"""
|
||||
...
|
||||
|
||||
class ColorModeSwitch(Switch):
|
||||
@overload
|
||||
@classmethod
|
||||
def create( # type: ignore
|
||||
cls,
|
||||
*children,
|
||||
as_child: Optional[Union[Var[bool], bool]] = None,
|
||||
default_checked: Optional[Union[Var[bool], bool]] = None,
|
||||
checked: Optional[Union[Var[bool], bool]] = None,
|
||||
disabled: Optional[Union[Var[bool], bool]] = None,
|
||||
required: Optional[Union[Var[bool], bool]] = None,
|
||||
name: Optional[Union[Var[str], str]] = None,
|
||||
value: Optional[Union[Var[str], str]] = None,
|
||||
size: Optional[
|
||||
Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
|
||||
] = None,
|
||||
variant: Optional[
|
||||
Union[
|
||||
Var[Literal["classic", "surface", "soft"]],
|
||||
Literal["classic", "surface", "soft"],
|
||||
]
|
||||
] = None,
|
||||
color_scheme: Optional[
|
||||
Union[
|
||||
Var[
|
||||
Literal[
|
||||
"tomato",
|
||||
"red",
|
||||
"ruby",
|
||||
"crimson",
|
||||
"pink",
|
||||
"plum",
|
||||
"purple",
|
||||
"violet",
|
||||
"iris",
|
||||
"indigo",
|
||||
"blue",
|
||||
"cyan",
|
||||
"teal",
|
||||
"jade",
|
||||
"green",
|
||||
"grass",
|
||||
"brown",
|
||||
"orange",
|
||||
"sky",
|
||||
"mint",
|
||||
"lime",
|
||||
"yellow",
|
||||
"amber",
|
||||
"gold",
|
||||
"bronze",
|
||||
"gray",
|
||||
]
|
||||
],
|
||||
Literal[
|
||||
"tomato",
|
||||
"red",
|
||||
"ruby",
|
||||
"crimson",
|
||||
"pink",
|
||||
"plum",
|
||||
"purple",
|
||||
"violet",
|
||||
"iris",
|
||||
"indigo",
|
||||
"blue",
|
||||
"cyan",
|
||||
"teal",
|
||||
"jade",
|
||||
"green",
|
||||
"grass",
|
||||
"brown",
|
||||
"orange",
|
||||
"sky",
|
||||
"mint",
|
||||
"lime",
|
||||
"yellow",
|
||||
"amber",
|
||||
"gold",
|
||||
"bronze",
|
||||
"gray",
|
||||
],
|
||||
]
|
||||
] = None,
|
||||
high_contrast: Optional[Union[Var[bool], bool]] = None,
|
||||
radius: Optional[
|
||||
Union[
|
||||
Var[Literal["none", "small", "full"]], Literal["none", "small", "full"]
|
||||
]
|
||||
] = None,
|
||||
style: Optional[Style] = None,
|
||||
key: Optional[Any] = None,
|
||||
id: Optional[Any] = None,
|
||||
class_name: Optional[Any] = None,
|
||||
autofocus: Optional[bool] = None,
|
||||
custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
|
||||
on_blur: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_change: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_click: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_context_menu: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_double_click: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_focus: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mount: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_down: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_enter: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_leave: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_move: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_out: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_over: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_mouse_up: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_scroll: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
on_unmount: Optional[
|
||||
Union[EventHandler, EventSpec, list, function, BaseVar]
|
||||
] = None,
|
||||
**props
|
||||
) -> "ColorModeSwitch":
|
||||
"""Create a switch component bound to color_mode.
|
||||
|
||||
Args:
|
||||
*children: The children of the component.
|
||||
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
|
||||
default_checked: Whether the switch is checked by default
|
||||
checked: Whether the switch is checked
|
||||
disabled: If true, prevent the user from interacting with the switch
|
||||
required: If true, the user must interact with the switch to submit the form
|
||||
name: The name of the switch (when submitting a form)
|
||||
value: The value associated with the "on" position
|
||||
size: Switch size "1" - "4"
|
||||
variant: Variant of switch: "classic" | "surface" | "soft"
|
||||
color_scheme: Override theme color for switch
|
||||
high_contrast: Whether to render the switch with higher contrast color against background
|
||||
radius: Override theme radius for switch: "none" | "small" | "full"
|
||||
style: The style of the component.
|
||||
key: A unique key for the component.
|
||||
id: The id for the component.
|
||||
class_name: The class name for the component.
|
||||
autofocus: Whether the component should take the focus once the page is loaded
|
||||
custom_attrs: custom attribute
|
||||
**props: The props to pass to the component.
|
||||
|
||||
Returns:
|
||||
The switch component.
|
||||
"""
|
||||
...
|
||||
|
||||
class ColorModeNamespace(BaseVar):
|
||||
icon = staticmethod(ColorModeIcon.create)
|
||||
button = staticmethod(ColorModeIconButton.create)
|
||||
switch = staticmethod(ColorModeSwitch.create)
|
||||
|
||||
color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user