Skip to content

Commit

Permalink
Restore the rx.color_mode.switch (#3294)
Browse files Browse the repository at this point in the history 
This was tentatively removed for 0.5.0 without a deprecation period, so adding
it back to avoid immediate breakage in existing apps.
  • Loading branch information
@masenf
masenf committed May 13, 2024
1 parent 5e1fe07 commit 52e0507
Show file tree
Hide file tree
Showing 2 changed files with 203 additions and 2 deletions.
26 changes: 25 additions & 1 deletion reflex/components/radix/themes/color_mode.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
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

Expand Down Expand Up @@ -143,11 +144,34 @@ def create(
)


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))
179 changes: 178 additions & 1 deletion reflex/components/radix/themes/color_mode.pyi
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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))

0 comments on commit 52e0507

Please sign in to comment.