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

create high level api for select component (#2402)

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

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

@ -52,6 +52,7 @@ from .popover import PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger
from .radiogroup import RadioGroupItem, RadioGroupRoot
from .scrollarea import ScrollArea
from .select import (
HighLevelSelect,
SelectContent,
SelectGroup,
SelectItem,
@ -174,6 +175,7 @@ select_item = SelectItem.create
select_separator = SelectSeparator.create
select_group = SelectGroup.create
select_label = SelectLabel.create
select = HighLevelSelect.create
# Separator
separator = Separator.create

82
reflex/components/radix/themes/components/select.py
View File

@ -1,6 +1,8 @@
"""Interactive components provided by @radix-ui/themes."""
from typing import Any, Dict, Literal
from typing import Any, Dict, List, Literal, Union
import reflex as rx
from reflex.components.component import Component
from reflex.vars import Var
from ..base import (
@ -144,3 +146,81 @@ class SelectSeparator(CommonMarginProps, RadixThemesComponent):
"""Trigger an action or event, such as submitting a form or displaying a dialog."""
tag = "Select.Separator"
class HighLevelSelect(SelectRoot):
"""High level wrapper for the Select component."""
# The items of the select.
items: Var[List[str]]
# The placeholder of the select.
placeholder: Var[str]
# The label of the select.
label: Var[str]
# The color of the select.
color: Var[LiteralAccentColor]
# Whether to render the select with higher contrast color against background.
high_contrast: Var[bool]
# The variant of the select.
variant: Var[Literal["classic", "surface", "soft", "ghost"]]
# The radius of the select.
radius: Var[LiteralRadius]
# The width of the select.
width: Var[str]
@classmethod
def create(cls, items: Union[List[str], Var[List[str]]], **props) -> Component:
"""Create a select component.
Args:
items: The items of the select.
**props: Additional properties to apply to the select component.
Returns:
The select component.
"""
content_props = {
prop: props.pop(prop) for prop in ["high_contrast"] if prop in props
}
trigger_props = {
prop: props.pop(prop)
for prop in ["placeholder", "variant", "radius", "width"]
if prop in props
}
color = props.pop("color", None)
if color is not None:
content_props["color_scheme"] = color
trigger_props["color_scheme"] = color
label = props.pop("label", None)
if isinstance(items, Var):
child = [
rx.foreach(items, lambda item: SelectItem.create(item, value=item))
]
else:
child = [SelectItem.create(item, value=item) for item in items]
return SelectRoot.create(
SelectTrigger.create(
**trigger_props,
),
SelectContent.create(
SelectGroup.create(
SelectLabel.create(label) if label is not None else "",
*child,
),
**content_props,
),
**props,
)

238
reflex/components/radix/themes/components/select.pyi
View File

@ -7,7 +7,9 @@ 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, Union
import reflex as rx
from reflex.components.component import Component
from reflex.vars import Var
from ..base import (
CommonMarginProps,
@ -1452,3 +1454,237 @@ class SelectSeparator(CommonMarginProps, RadixThemesComponent):
A new component instance.
"""
...
class HighLevelSelect(SelectRoot):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
items: Optional[Union[Var[List[str]], List[str]]] = None,
placeholder: Optional[Union[Var[str], str]] = None,
label: Optional[Union[Var[str], str]] = 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,
variant: Optional[
Union[
Var[Literal["classic", "surface", "soft", "ghost"]],
Literal["classic", "surface", "soft", "ghost"],
]
] = None,
radius: Optional[
Union[
Var[Literal["none", "small", "medium", "large", "full"]],
Literal["none", "small", "medium", "large", "full"],
]
] = None,
width: Optional[Union[Var[str], str]] = None,
size: Optional[Union[Var[Literal[1, 2, 3]], Literal[1, 2, 3]]] = None,
default_value: Optional[Union[Var[str], str]] = None,
value: Optional[Union[Var[str], str]] = None,
default_open: Optional[Union[Var[bool], bool]] = None,
open: Optional[Union[Var[bool], bool]] = None,
name: Optional[Union[Var[str], str]] = None,
disabled: Optional[Union[Var[bool], bool]] = None,
required: 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_open_change: 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
) -> "HighLevelSelect":
"""Create a select component.
Args:
items: The items of the select.
items: The items of the select.
placeholder: The placeholder of the select.
label: The label of the select.
color: The color of the select.
high_contrast: Whether to render the select with higher contrast color against background.
variant: The variant of the select.
radius: The radius of the select.
width: The width of the select.
size: The size of the select: "1" | "2" | "3"
default_value: The value of the select when initially rendered. Use when you do not need to control the state of the select.
value: The controlled value of the select. Should be used in conjunction with on_value_change.
default_open: The open state of the select when it is initially rendered. Use when you do not need to control its open state.
open: The controlled open state of the select. Must be used in conjunction with on_open_change.
name: The name of the select control when submitting the form.
disabled: When True, prevents the user from interacting with select.
required: When True, indicates that the user must select a value before the owning form can be submitted.
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 select component.
Returns:
The select component.
"""
...