Skip to content

Commit

Permalink
per Fred
Browse files Browse the repository at this point in the history
  • Loading branch information
namnguyen20999 committed Nov 18, 2024
1 parent 6d07b2c commit 8c36415
Show file tree
Hide file tree
Showing 10 changed files with 17 additions and 55 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",
),
"list_item": Element(
"item_list": Element(
"lov",
{
"lov": ElementProperty(PropertyType.lov),
"sort": ElementProperty(PropertyType.string),
},
# The name of the React component (TodoList) that implements this custom
# element, exported as TodoList in front-end/src/index.ts
# react_component="ListItem",
# The name of the React component (ItemList) that implements this custom
# element, exported as ItemList in front-end/src/index.ts
# react_component="ItemList",
)
}

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 ToDoListProps {
interface ItemListProps {
lov?: LoV;
defaultLov?: string;
sort?: "asc" | "desc";
Expand All @@ -12,14 +12,14 @@ const styles = {
display: "flex",
alignItems: "center",
},
listItemImage: {
image: {
marginRight: "8px",
width: "1em",
height: "1em",
},
};

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

const sortedLovList = useMemo(() => {
Expand All @@ -37,7 +37,7 @@ const ListItem: React.FC<ToDoListProps> = ({ lov, defaultLov = "", sort }) => {
{sortedLovList.map((todo, index) => (
<li key={index} style={styles.listItem}>
{typeof todo.item === "string" ? null : (
<img src={todo.item.path} alt={todo.item.text} style={styles.listItemImage} />
<img src={todo.item.path} alt={todo.item.text} style={styles.image} />
)}
{todo.id}
</li>
Expand All @@ -47,4 +47,4 @@ const ListItem: React.FC<ToDoListProps> = ({ lov, defaultLov = "", sort }) => {
);
};

export default ListItem;
export default ItemList;

This file was deleted.

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 ListItem from "./ListItem";
import ItemList from "./ItemList";

export { ColoredLabel as ExampleLabel, GameTable, ListItem };
export { ColoredLabel as ExampleLabel, GameTable, ItemList };
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@
from taipy.gui import Gui, Icon

languages = [
["Python", Icon("./python.png", "Python logo")],
["JavaScript", Icon("./javascript.png", "JavaScript logo")],
["TypeScript", Icon("./typescript.png", "TypeScript logo")],
["Java", Icon("./java.png", "Java logo")],
["C++", Icon("./cpp.png", "C++ logo")],
["Python", Icon("images/python.png", "Python logo")],
["JavaScript", Icon("images/javascript.png", "JavaScript logo")],
["TypeScript", Icon("images/typescript.png", "TypeScript logo")],
["Java", Icon("images/java.png", "Java logo")],
["C++", Icon("images/cpp.png", "C++ logo")],
]

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

if __name__ == "__main__":
Expand Down

0 comments on commit 8c36415

Please sign in to comment.