Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Restore the rx.color_mode.switch #3294

Merged
merged 1 commit into from
May 13, 2024
Merged

Restore the rx.color_mode.switch #3294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion reflex/components/radix/themes/color_mode.py
View file
Open in desktop
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
Open in desktop
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))
Loading