Skip to content

Commit

Permalink
Change component name
Browse files Browse the repository at this point in the history
  • Loading branch information
namnguyen20999 committed Nov 20, 2024
1 parent 8c36415 commit f6f4a5d
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 15 deletions.
8 changes: 4 additions & 4 deletions doc/gui/extension/example_library/example_library.py
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ def __init__(self) -> None:
# element, exported as GameTable in front-end/src/index.ts
# react_component="GameTable",
),
"item_list": Element(
"labeled_item_list": Element(
"lov",
{
"lov": ElementProperty(PropertyType.lov),
"sort": ElementProperty(PropertyType.string),
},
# The name of the React component (ItemList) that implements this custom
# element, exported as ItemList in front-end/src/index.ts
# react_component="ItemList",
# The name of the React component (LabeledItem) that implements this custom
# element, exported as LabeledItemList in front-end/src/index.ts
react_component="LabeledItem",
)
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useMemo } from "react";
import { LoV, useLovListMemo } from "taipy-gui";

interface ItemListProps {
interface LabeledItemProps {
lov?: LoV;
defaultLov?: string;
sort?: "asc" | "desc";
Expand All @@ -19,7 +19,7 @@ const styles = {
},
};

const ItemList: React.FC<ItemListProps> = ({ lov, defaultLov = "", sort }) => {
const LabeledItem: React.FC<LabeledItemProps> = ({ lov, defaultLov = "", sort }) => {
const lovList = useLovListMemo(lov, defaultLov);

const sortedLovList = useMemo(() => {
Expand All @@ -34,17 +34,17 @@ const ItemList: React.FC<ItemListProps> = ({ lov, defaultLov = "", sort }) => {
return (
<div>
<ul>
{sortedLovList.map((todo, index) => (
{sortedLovList.map((item, index) => (
<li key={index} style={styles.listItem}>
{typeof todo.item === "string" ? null : (
<img src={todo.item.path} alt={todo.item.text} style={styles.image} />
{typeof item.item === "string" ? null : (
<img src={item.item.path} alt={item.item.text} style={styles.image} />
)}
{todo.id}
{item.id}
</li>
))}
</ul>
</div>
);
};

export default ItemList;
export default LabeledItem;
4 changes: 2 additions & 2 deletions doc/gui/extension/example_library/front-end/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@
// the name used in the element declaration in the element library.
import ColoredLabel from "./ColoredLabel";
import GameTable from "./GameTable";
import ItemList from "./ItemList";
import LabeledItem from "./LabeledItem";

export { ColoredLabel as ExampleLabel, GameTable, ItemList };
export { ColoredLabel as ExampleLabel, GameTable, LabeledItem };
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@
]

page = """
The list of programming languages is as follows:
<|{languages}|example.item_list|sort=asc|>
<|{languages}|example.labeled_item_list|sort=asc|>
"""

if __name__ == "__main__":
Expand Down

0 comments on commit f6f4a5d

Please sign in to comment.