diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py index 1c473fa59..24b5cd668 100644 --- a/reflex/components/radix/primitives/accordion.py +++ b/reflex/components/radix/primitives/accordion.py @@ -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) diff --git a/reflex/components/radix/primitives/accordion.pyi b/reflex/components/radix/primitives/accordion.pyi index 5b71da123..f088981a4 100644 --- a/reflex/components/radix/primitives/accordion.pyi +++ b/reflex/components/radix/primitives/accordion.pyi @@ -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)