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

Progress component to support color_scheme on component level (#2684)

Browse Source 
* Progress component to support `color_scheme` on component level

* pyi fix
This commit is contained in:
Elijah Ahianyo 2024-02-21 22:38:27 +00:00 committed by GitHub
parent a3be76fb75
commit a6fb25e139
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 111 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
reflex/components/radix/primitives/progress.py
View File

@ -2,11 +2,13 @@
from __future__ import annotations
from typing import Optional
from typing import Optional, Union
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color
from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.components.radix.themes.base import LiteralAccentColor
from reflex.style import Style
from reflex.vars import Var
@ -57,10 +59,26 @@ class ProgressIndicator(ProgressComponent):
# The maximum progress value.
max: Var[Optional[int]]
# The color scheme of the progress indicator.
color_scheme: Var[LiteralAccentColor]
def _apply_theme(self, theme: Component):
global_color_scheme = getattr(theme, "accent_color", None)
if global_color_scheme is None and self.color_scheme is None:
raise ValueError(
"`color_scheme` cannot be None. Either set the `color_scheme` prop on the progress indicator "
"component or set the `accent_color` prop in your global theme."
)
color_scheme = color(
self.color_scheme if self.color_scheme is not None else global_color_scheme, # type: ignore
9,
)
self.style = Style(
{
"background-color": "var(--accent-9)",
"background-color": color_scheme,
"width": "100%",
"height": "100%",
f"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
@ -72,20 +90,28 @@ class ProgressIndicator(ProgressComponent):
}
)
def _exclude_props(self) -> list[str]:
return ["color_scheme"]
class Progress(ComponentNamespace):
"""High level API for progress bar."""
"""High-level API for progress bar."""
root = staticmethod(ProgressRoot.create)
indicator = staticmethod(ProgressIndicator.create)
@staticmethod
def __call__(width: Optional[str] = "100%", **props) -> Component:
"""High level API for progress bar.
def __call__(
width: Optional[str] = "100%",
color_scheme: Optional[Union[Var, LiteralAccentColor]] = None,
**props,
) -> Component:
"""High-level API for progress bar.
Args:
width: The width of the progerss bar
**props: The props of the progress bar
width: The width of the progress bar.
**props: The props of the progress bar.
color_scheme: The color scheme of the progress indicator.
Returns:
The progress bar.
@ -93,9 +119,15 @@ class Progress(ComponentNamespace):
style = props.setdefault("style", {})
style.update({"width": width})
progress_indicator_props = (
{"color_scheme": color_scheme} if color_scheme is not None else {}
)
return ProgressRoot.create(
ProgressIndicator.create(
value=props.get("value"), max=props.get("max", 100)
value=props.get("value"),
max=props.get("max", 100),
**progress_indicator_props, # type: ignore
),
**props,
)

73
reflex/components/radix/primitives/progress.pyi
View File

@ -7,10 +7,12 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style
from typing import Optional
from typing import Optional, Union
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color
from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.components.radix.themes.base import LiteralAccentColor
from reflex.style import Style
from reflex.vars import Var
@ -188,6 +190,68 @@ class ProgressIndicator(ProgressComponent):
*children,
value: Optional[Union[Var[Optional[int]], Optional[int]]] = None,
max: Optional[Union[Var[Optional[int]], Optional[int]]] = 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,
as_child: Optional[Union[Var[bool], bool]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
@ -248,6 +312,7 @@ class ProgressIndicator(ProgressComponent):
*children: The children of the component.
value: The current progress value.
max: The maximum progress value.
color_scheme: The color scheme of the progress indicator.
as_child: Change the default rendered element for the one passed as a child.
style: The style of the component.
key: A unique key for the component.
@ -270,6 +335,10 @@ class Progress(ComponentNamespace):
indicator = staticmethod(ProgressIndicator.create)
@staticmethod
def __call__(width: Optional[str] = "100%", **props) -> Component: ...
def __call__(
width: Optional[str] = "100%",
color_scheme: Optional[Union[Var, LiteralAccentColor]] = None,
**props
) -> Component: ...
progress = Progress()