diff --git a/pynecone/components/component.py b/pynecone/components/component.py index fa46b68e4..7ec1230b1 100644 --- a/pynecone/components/component.py +++ b/pynecone/components/component.py @@ -5,7 +5,7 @@ from __future__ import annotations import typing from abc import ABC from functools import wraps -from typing import Any, Callable, Dict, List, Optional, Set, Type, Union +from typing import Any, Callable, Dict, List, Optional, Set, Tuple, Type, Union from pynecone import constants, utils from pynecone.base import Base @@ -234,6 +234,15 @@ class Component(Base, ABC): """ return EVENT_ARG + @classmethod + def get_alias(cls) -> Optional[str]: + """Get the alias for the component. + + Returns: + The alias. + """ + return None + def __repr__(self) -> str: """Represent the component in React. @@ -257,7 +266,9 @@ class Component(Base, ABC): The tag to render. """ # Create the base tag. - tag = Tag(name=self.tag) + alias = self.get_alias() + name = alias if alias is not None else self.tag + tag = Tag(name=name) # Add component props to the tag. props = {attr: getattr(self, attr) for attr in self.get_props()} @@ -387,7 +398,9 @@ class Component(Base, ABC): def _get_imports(self) -> ImportDict: if self.library is not None and self.tag is not None: - return {self.library: {self.tag}} + alias = self.get_alias() + tag = self.tag if alias is None else " as ".join([self.tag, alias]) + return {self.library: {tag}} return {} def get_imports(self) -> ImportDict: @@ -525,14 +538,6 @@ class CustomComponent(Component): custom_components |= self.get_component().get_custom_components(seen=seen) return custom_components - def _render(self) -> Tag: - """Define how to render the component in React. - - Returns: - The tag to render. - """ - return Tag(name=self.tag).add_props(**self.props) - def get_prop_vars(self) -> List[BaseVar]: """Get the prop vars. diff --git a/pynecone/components/datadisplay/datatable.py b/pynecone/components/datadisplay/datatable.py index bed81c1ac..64c135d2c 100644 --- a/pynecone/components/datadisplay/datatable.py +++ b/pynecone/components/datadisplay/datatable.py @@ -1,6 +1,6 @@ """Table components.""" -from typing import Any, List +from typing import Any, List, Optional from pynecone import utils from pynecone.components.component import Component, ImportDict @@ -37,6 +37,15 @@ class DataTable(Gridjs): # Enable pagination. pagination: Var[bool] + @classmethod + def get_alias(cls) -> Optional[str]: + """Get the alias for the component. + + Returns: + The alias. + """ + return "DataTableGrid" + @classmethod def create(cls, *children, **props): """Create a datatable component.