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

convert text inside list_item to span and set icon display to inline (#2860)

Browse Source 
* convert text inside list_item to span and set icon display to inline

* fix props

* add comment for reflex-web
This commit is contained in:
Thomas Brandého 2024-03-15 18:57:20 +01:00 committed by GitHub
parent 432fcd4a5b
commit 1048f86dd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 84 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
reflex/components/radix/themes/layout/list.py
View File

@ -5,6 +5,8 @@ from typing import Iterable, Literal, Optional, Union
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.foreach import Foreach
from reflex.components.el.elements.typography import Li
from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.typography.text import Text
from reflex.style import Style
from reflex.vars import Var
@ -39,12 +41,16 @@ LiteralListStyleTypeOrdered = Literal[
class BaseList(Flex, LayoutComponent):
"""Base class for ordered and unordered lists."""
# The style of the list. Default to "none".
list_style_type: Var[
Union[LiteralListStyleTypeUnordered, LiteralListStyleTypeOrdered]
]
@classmethod
def create(
cls,
*children,
items: Optional[Union[Var[Iterable], Iterable]] = None,
list_style_type: str = "",
**props,
):
"""Create a list component.
@ -52,21 +58,23 @@ class BaseList(Flex, LayoutComponent):
Args:
*children: The children of the component.
items: A list of items to add to the list.
list_style_type: The style of the list.
**props: The properties of the component.
Returns:
The list component.
"""
list_style_type = props.pop("list_style_type", "none")
if not children and items is not None:
if isinstance(items, Var):
children = [Foreach.create(items, ListItem.create)]
else:
children = [ListItem.create(item) for item in items]
props["list_style_type"] = list_style_type
# props["list_style_type"] = list_style_type
props["direction"] = "column"
style = props.setdefault("style", {})
style["list_style_position"] = "outside"
style["list_style_type"] = list_style_type
if "gap" in props:
style["gap"] = props["gap"]
return super().create(*children, **props)
@ -102,6 +110,7 @@ class UnorderedList(BaseList):
Returns:
The list component.
"""
return super().create(
*children, items=items, list_style_type=list_style_type, **props
@ -129,6 +138,7 @@ class OrderedList(BaseList):
Returns:
The list component.
"""
return super().create(
*children, items=items, list_style_type=list_style_type, **props
@ -138,7 +148,24 @@ class OrderedList(BaseList):
class ListItem(Li):
"""Display an item of an ordered or unordered list."""
...
@classmethod
def create(cls, *children, **props):
"""Create a list item component.
Args:
*children: The children of the component.
**props: The properties of the component.
Returns:
The list item component.
"""
for child in children:
if isinstance(child, Text):
child.as_ = "span"
elif isinstance(child, Icon) and "display" not in child.style:
child.style["display"] = "inline"
return super().create(*children, **props)
class List(ComponentNamespace):

62
reflex/components/radix/themes/layout/list.pyi
View File

@ -11,6 +11,8 @@ from typing import Iterable, Literal, Optional, Union
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.foreach import Foreach
from reflex.components.el.elements.typography import Li
from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.typography.text import Text
from reflex.style import Style
from reflex.vars import Var
from .base import LayoutComponent
@ -41,7 +43,50 @@ class BaseList(Flex, LayoutComponent):
cls,
*children,
items: Optional[Union[Union[Var[Iterable], Iterable], Iterable]] = None,
list_style_type: Optional[str] = "",
list_style_type: Optional[
Union[
Var[
Union[
Literal["none", "disc", "circle", "square"],
Literal[
"none",
"decimal",
"decimal-leading-zero",
"lower-roman",
"upper-roman",
"lower-greek",
"lower-latin",
"upper-latin",
"armenian",
"georgian",
"lower-alpha",
"upper-alpha",
"hiragana",
"katakana",
],
]
],
Union[
Literal["none", "disc", "circle", "square"],
Literal[
"none",
"decimal",
"decimal-leading-zero",
"lower-roman",
"upper-roman",
"lower-greek",
"lower-latin",
"upper-latin",
"armenian",
"georgian",
"lower-alpha",
"upper-alpha",
"hiragana",
"katakana",
],
],
]
] = None,
as_child: Optional[Union[Var[bool], bool]] = None,
direction: Optional[
Union[
@ -257,7 +302,7 @@ class BaseList(Flex, LayoutComponent):
Args:
*children: The children of the component.
items: A list of items to add to the list.
list_style_type: The style of the list.
list_style_type: The style of the list. Default to "none".
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
@ -306,6 +351,7 @@ class BaseList(Flex, LayoutComponent):
Returns:
The list component.
"""
...
@ -581,6 +627,7 @@ class UnorderedList(BaseList):
Returns:
The list component.
"""
...
@ -873,12 +920,11 @@ class OrderedList(BaseList):
Returns:
The list component.
"""
...
class ListItem(Li):
...
@overload
@classmethod
def create( # type: ignore
@ -977,7 +1023,7 @@ class ListItem(Li):
] = None,
**props
) -> "ListItem":
"""Create the component.
"""Create a list item component.
Args:
*children: The children of the component.
@ -1003,13 +1049,11 @@ class ListItem(Li):
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 of the component.
**props: The properties of the component.
Returns:
The component.
The list item component.
Raises:
TypeError: If an invalid child is passed.
"""
...