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

accordion default classname (#2628)

Browse Source
This commit is contained in:
Thomas Brandého 2024-02-15 22:57:12 +01:00 committed by GitHub
parent 6ded702d03
commit 411a3a1f13
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 203 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
reflex/components/radix/primitives/accordion.py
View File

@ -428,7 +428,9 @@ class AccordionRoot(AccordionComponent):
def _get_imports(self):
return imports.merge_imports(
super()._get_imports(), self._var_data.imports if self._var_data else {}
super()._get_imports(),
self._var_data.imports if self._var_data else {},
{"@emotion/react": [imports.ImportVar(tag="keyframes")]},
)
def get_event_triggers(self) -> Dict[str, Any]:
@ -442,6 +444,26 @@ class AccordionRoot(AccordionComponent):
"on_value_change": lambda e0: [e0],
}
def _get_custom_code(self) -> str:
return """
const slideDown = keyframes`
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
`
const slideUp = keyframes`
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
`
"""
class AccordionItem(AccordionComponent):
"""An accordion component."""
@ -493,25 +515,23 @@ class AccordionItem(AccordionComponent):
# The item requires a value to toggle (use a random unique name if not provided).
value = props.pop("value", get_unique_variable_name())
if "AccordionItem" not in (
cls_name := props.pop("class_name", "AccordionItem")
):
cls_name = f"{cls_name} AccordionItem"
if (header is not None) and (content is not None):
children = [
AccordionHeader.create(
AccordionTrigger.create(
header,
Icon.create(
tag="chevron_down",
class_name="AccordionChevron",
display="inline-block",
),
class_name="AccordionTrigger",
AccordionIcon.create(),
),
),
AccordionContent.create(content, class_name="AccordionContent"),
AccordionContent.create(content),
]
return super().create(
*children, value=value, **props, class_name="AccordionItem"
)
return super().create(*children, value=value, **props, class_name=cls_name)
class AccordionHeader(AccordionComponent):
@ -521,12 +541,26 @@ class AccordionHeader(AccordionComponent):
alias = "RadixAccordionHeader"
@classmethod
def create(cls, *children, **props) -> Component:
"""Create the Accordion header component.
Args:
*children: The children of the component.
**props: The properties of the component.
Returns:
The Accordion header Component.
"""
if "AccordionHeader" not in (
cls_name := props.pop("class_name", "AccordionHeader")
):
cls_name = f"{cls_name} AccordionHeader"
return super().create(*children, class_name=cls_name, **props)
def _apply_theme(self, theme: Component):
self.style = Style(
{
**self.style,
}
)
self.style = Style({**self.style})
class AccordionTrigger(AccordionComponent):
@ -536,12 +570,48 @@ class AccordionTrigger(AccordionComponent):
alias = "RadixAccordionTrigger"
@classmethod
def create(cls, *children, **props) -> Component:
"""Create the Accordion trigger component.
Args:
*children: The children of the component.
**props: The properties of the component.
Returns:
The Accordion trigger Component.
"""
if "AccordionTrigger" not in (
cls_name := props.pop("class_name", "AccordionTrigger")
):
cls_name = f"{cls_name} AccordionTrigger"
return super().create(*children, class_name=cls_name, **props)
def _apply_theme(self, theme: Component):
self.style = Style(
{
**self.style,
}
)
self.style = Style({**self.style})
class AccordionIcon(Icon):
"""An accordion icon component."""
@classmethod
def create(cls, *children, **props) -> Component:
"""Create the Accordion icon component.
Args:
*children: The children of the component.
**props: The properties of the component.
Returns:
The Accordion icon Component.
"""
if "AccordionChevron" not in (
cls_name := props.pop("class_name", "AccordionChevron")
):
cls_name = f"{cls_name} AccordionChevron"
return super().create(tag="chevron_down", class_name=cls_name, **props)
class AccordionContent(AccordionComponent):
@ -551,38 +621,32 @@ class AccordionContent(AccordionComponent):
alias = "RadixAccordionContent"
@classmethod
def create(cls, *children, **props) -> Component:
"""Create the Accordion content component.
Args:
*children: The children of the component.
**props: The properties of the component.
Returns:
The Accordion content Component.
"""
if "AccordionContent" not in (
cls_name := props.pop("class_name", "AccordionContent")
):
cls_name = f"{cls_name} AccordionContent"
return super().create(*children, class_name=cls_name, **props)
def _apply_theme(self, theme: Component):
self.style = Style(
{
**self.style,
}
)
self.style = Style({**self.style})
def _get_imports(self):
return {
**super()._get_imports(),
"@emotion/react": [imports.ImportVar(tag="keyframes")],
}
def _get_custom_code(self) -> str:
return """
const slideDown = keyframes`
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
`
const slideUp = keyframes`
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
`
"""
# def _get_imports(self):
# return {
# **super()._get_imports(),
# "@emotion/react": [imports.ImportVar(tag="keyframes")],
# }
class Accordion(SimpleNamespace):
@ -591,6 +655,7 @@ class Accordion(SimpleNamespace):
content = staticmethod(AccordionContent.create)
header = staticmethod(AccordionHeader.create)
item = staticmethod(AccordionItem.create)
icon = staticmethod(AccordionIcon.create)
root = staticmethod(AccordionRoot.create)
trigger = staticmethod(AccordionTrigger.create)

104
reflex/components/radix/primitives/accordion.pyi
View File

@ -447,7 +447,7 @@ class AccordionHeader(AccordionComponent):
] = None,
**props
) -> "AccordionHeader":
"""Create the component.
"""Create the Accordion header component.
Args:
*children: The children of the component.
@ -458,13 +458,10 @@ class AccordionHeader(AccordionComponent):
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.
Raises:
TypeError: If an invalid child is passed.
The Accordion header Component.
"""
...
@ -528,7 +525,7 @@ class AccordionTrigger(AccordionComponent):
] = None,
**props
) -> "AccordionTrigger":
"""Create the component.
"""Create the Accordion trigger component.
Args:
*children: The children of the component.
@ -539,13 +536,88 @@ class AccordionTrigger(AccordionComponent):
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 Accordion trigger Component.
"""
...
Raises:
TypeError: If an invalid child is passed.
class AccordionIcon(Icon):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
size: Optional[Union[Var[int], int]] = 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,
**props
) -> "AccordionIcon":
"""Create the Accordion icon component.
Args:
*children: The children of the component.
size: The size of the icon in pixels.
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 properties of the component.
Returns:
The Accordion icon Component.
"""
...
@ -609,7 +681,7 @@ class AccordionContent(AccordionComponent):
] = None,
**props
) -> "AccordionContent":
"""Create the component.
"""Create the Accordion content component.
Args:
*children: The children of the component.
@ -620,13 +692,10 @@ class AccordionContent(AccordionComponent):
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.
Raises:
TypeError: If an invalid child is passed.
The Accordion content Component.
"""
...
@ -634,6 +703,7 @@ class Accordion(SimpleNamespace):
content = staticmethod(AccordionContent.create)
header = staticmethod(AccordionHeader.create)
item = staticmethod(AccordionItem.create)
icon = staticmethod(AccordionIcon.create)
root = staticmethod(AccordionRoot.create)
trigger = staticmethod(AccordionTrigger.create)