95 lines
2.9 KiB
Python
95 lines
2.9 KiB
Python
"""Container to stack elements with spacing."""
|
|
|
|
from typing import List, Optional, Union
|
|
|
|
from pynecone.components.component import Component
|
|
from pynecone.components.libs.chakra import ChakraComponent
|
|
from pynecone.var import Var
|
|
|
|
|
|
class Accordion(ChakraComponent):
|
|
"""The wrapper that uses cloneElement to pass props to AccordionItem children."""
|
|
|
|
tag = "Accordion"
|
|
|
|
# If true, multiple accordion items can be expanded at once.
|
|
allow_multiple: Var[bool]
|
|
|
|
# If true, any expanded accordion item can be collapsed again.
|
|
allow_toggle: Var[bool] = True # type: ignore
|
|
|
|
# The initial index(es) of the expanded accordion item(s).
|
|
default_index: Var[Optional[List[int]]]
|
|
|
|
# The index(es) of the expanded accordion item
|
|
index: Var[Union[int, List[int]]]
|
|
|
|
# If true, height animation and transitions will be disabled.
|
|
reduce_motion: Var[bool]
|
|
|
|
@classmethod
|
|
def create(cls, *children, items=None, icon_pos="right", **props) -> Component:
|
|
"""Create an accordion component.
|
|
|
|
Args:
|
|
children: The children of the component.
|
|
items: The items of the accordion component: list of tuples (label,panel)
|
|
icon_pos: The position of the arrow icon of the accordion. "right", "left" or None
|
|
props: The properties of the component.
|
|
|
|
Returns:
|
|
The accordion component
|
|
"""
|
|
if len(children) == 0:
|
|
children = []
|
|
if not items:
|
|
items = []
|
|
for label, panel in items:
|
|
if icon_pos == "right":
|
|
button = AccordionButton.create(label, AccordionIcon.create())
|
|
elif icon_pos == "left":
|
|
button = AccordionButton.create(AccordionIcon.create(), label)
|
|
else:
|
|
button = AccordionButton.create(label)
|
|
|
|
children.append(
|
|
AccordionItem.create(
|
|
button,
|
|
AccordionPanel.create(panel),
|
|
)
|
|
)
|
|
return super().create(*children, **props)
|
|
|
|
|
|
class AccordionItem(ChakraComponent):
|
|
"""A single accordion item."""
|
|
|
|
tag = "AccordionItem"
|
|
|
|
# A unique id for the accordion item.
|
|
id_: Var[str]
|
|
|
|
# If true, the accordion item will be disabled.
|
|
is_disabled: Var[bool]
|
|
|
|
# If true, the accordion item will be focusable.
|
|
is_focusable: Var[bool]
|
|
|
|
|
|
class AccordionButton(ChakraComponent):
|
|
"""The button that toggles the expand/collapse state of the accordion item. This button must be wrapped in an element with role heading."""
|
|
|
|
tag = "AccordionButton"
|
|
|
|
|
|
class AccordionPanel(ChakraComponent):
|
|
"""The container for the details to be revealed."""
|
|
|
|
tag = "AccordionPanel"
|
|
|
|
|
|
class AccordionIcon(ChakraComponent):
|
|
"""A chevron-down icon that rotates based on the expanded/collapsed state."""
|
|
|
|
tag = "AccordionIcon"
|