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

radiogroup high level api (#2401)

Browse Source
This commit is contained in:
Tom Gotsman 2024-01-18 16:41:55 -08:00 committed by GitHub
parent 7d99d235f1
commit 676f2c5dc2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 319 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
reflex/components/radix/themes/components/__init__.py
View File

@ -49,7 +49,7 @@ from .iconbutton import IconButton
from .icons import Icon
from .inset import Inset
from .popover import PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger
from .radiogroup import RadioGroupItem, RadioGroupRoot
from .radiogroup import HighLevelRadioGroup, RadioGroupItem, RadioGroupRoot
from .scrollarea import ScrollArea
from .select import (
HighLevelSelect,
@ -163,6 +163,7 @@ popover_close = PopoverClose.create
# Radio Group
radio_group_root = RadioGroupRoot.create
radio_group_item = RadioGroupItem.create
radio_group = HighLevelRadioGroup.create
# Scroll Area
scroll_area = ScrollArea.create

66
reflex/components/radix/themes/components/radiogroup.py
View File

@ -1,14 +1,21 @@
"""Interactive components provided by @radix-ui/themes."""
from typing import Any, Dict, Literal
from typing import Any, Dict, List, Literal
import reflex as rx
from reflex.components.component import Component
from reflex.components.radix.themes.layout.flex import Flex
from reflex.components.radix.themes.typography.text import Text
from reflex.vars import Var
from ..base import (
CommonMarginProps,
LiteralAccentColor,
LiteralSize,
RadixThemesComponent,
)
LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
class RadioGroupRoot(CommonMarginProps, RadixThemesComponent):
"""Trigger an action or event, such as submitting a form or displaying a dialog."""
@ -73,3 +80,60 @@ class RadioGroupItem(CommonMarginProps, RadixThemesComponent):
# When true, indicates that the user must check the radio item before the owning form can be submitted.
required: Var[bool]
class HighLevelRadioGroup(RadioGroupRoot):
"""High level wrapper for the RadioGroup component."""
# The items of the radio group.
items: Var[List[str]]
# The direction of the radio group.
direction: Var[LiteralFlexDirection] = Var.create_safe("column")
# The gap between the items of the radio group.
gap: Var[LiteralSize] = Var.create_safe("2")
# The size of the radio group.
size: Var[Literal["1", "2", "3"]] = Var.create_safe("2")
@classmethod
def create(cls, items: Var[List[str]], **props) -> Component:
"""Create a radio group component.
Args:
items: The items of the radio group.
**props: Additional properties to apply to the accordion item.
Returns:
The created radio group component.
"""
direction = props.pop("direction", "column")
gap = props.pop("gap", "2")
size = props.pop("size", "2")
def radio_group_item(value: str) -> Component:
return Text.create(
Flex.create(
RadioGroupItem.create(value=value),
value,
gap="2",
),
size=size,
as_="label",
)
if isinstance(items, Var):
child = [rx.foreach(items, radio_group_item)]
else:
child = [radio_group_item(value) for value in items] # type: ignore
return RadioGroupRoot.create(
Flex.create(
*child,
direction=direction,
gap=gap,
),
size=size,
**props,
)

254
reflex/components/radix/themes/components/radiogroup.pyi
View File

@ -7,9 +7,20 @@ 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 Any, Dict, Literal
from typing import Any, Dict, List, Literal
import reflex as rx
from reflex.components.component import Component
from reflex.components.radix.themes.layout.flex import Flex
from reflex.components.radix.themes.typography.text import Text
from reflex.vars import Var
from ..base import CommonMarginProps, LiteralAccentColor, RadixThemesComponent
from ..base import (
CommonMarginProps,
LiteralAccentColor,
LiteralSize,
RadixThemesComponent,
)
LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
class RadioGroupRoot(CommonMarginProps, RadixThemesComponent):
def get_event_triggers(self) -> Dict[str, Any]: ...
@ -438,3 +449,242 @@ class RadioGroupItem(CommonMarginProps, RadixThemesComponent):
A new component instance.
"""
...
class HighLevelRadioGroup(RadioGroupRoot):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
items: Optional[Union[Var[List[str]], List[str]]] = None,
direction: Optional[
Union[
Var[Literal["row", "column", "row-reverse", "column-reverse"]],
Literal["row", "column", "row-reverse", "column-reverse"],
]
] = None,
gap: Optional[
Union[
Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
]
] = 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: 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,
value: Optional[Union[Var[str], str]] = None,
default_value: Optional[Union[Var[str], str]] = None,
disabled: Optional[Union[Var[bool], bool]] = None,
name: Optional[Union[Var[str], str]] = None,
required: Optional[Union[Var[bool], bool]] = None,
orientation: Optional[
Union[
Var[Literal["horizontal", "vertical"]],
Literal["horizontal", "vertical"],
]
] = None,
loop: Optional[Union[Var[bool], bool]] = None,
m: Optional[
Union[
Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
]
] = None,
mx: Optional[
Union[
Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
]
] = None,
my: Optional[
Union[
Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
]
] = None,
mt: Optional[
Union[
Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
]
] = None,
mr: Optional[
Union[
Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
]
] = None,
mb: Optional[
Union[
Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
]
] = None,
ml: Optional[
Union[
Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
]
] = 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_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,
on_value_change: Optional[
Union[EventHandler, EventSpec, list, function, BaseVar]
] = None,
**props
) -> "HighLevelRadioGroup":
"""Create a radio group component.
Args:
items: The items of the radio group.
items: The items of the radio group.
direction: The direction of the radio group.
gap: The gap between the items of the radio group.
size: The size of the radio group: "1" | "2" | "3"
variant: The variant of the radio group
color: The color of the radio group
high_contrast: Whether to render the radio group with higher contrast color against background
value: The controlled value of the radio item to check. Should be used in conjunction with onValueChange.
default_value: The initial value of checked radio item. Should be used in conjunction with onValueChange.
disabled: Whether the radio group is disabled
name: The name of the group. Submitted with its owning form as part of a name/value pair.
required: Whether the radio group is required
orientation: The orientation of the component.
loop: When true, keyboard navigation will loop from last item to first, and vice versa.
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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: Additional properties to apply to the accordion item.
Returns:
The created radio group component.
"""
...