per Fred

doc/gui/extension/example_library/example_library.py

@@ -42,15 +42,15 @@ class ExampleLibrary(ElementLibrary):
                 # 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",
             )
         }
 

doc/gui/extension/example_library/front-end/src/ListItem.tsx → doc/gui/extension/example_library/front-end/src/ItemList.tsx

@@ -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";
@@ -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(() => {
@@ -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>
@@ -47,4 +47,4 @@ const ListItem: React.FC<ToDoListProps> = ({ lov, defaultLov = "", sort }) => {
     );
 };
 
-export default ListItem;
+export default ItemList;

doc/gui/extension/example_library/front-end/src/ListOfLanguages.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import { LoV, useLovListMemo } from "taipy-gui";
-
-interface ToDoListProps {
-    lov?: LoV;
-    defaultLov?: string;
-}
-
-const selectStyle = {
-    padding: "10px",
-    fontSize: "16px",
-    borderRadius: "5px",
-    border: "1px solid #ccc",
-}
-
-const divStyle = {
-    margin: "20px",
-    fontFamily: "Arial, sans-serif",
-}
-
-const ListOfLanguages = (props: ToDoListProps) => {
-    const { lov, defaultLov = "" } = props;
-    const lovList = useLovListMemo(lov, defaultLov);
-
-    return (
-        <div style={divStyle}>
-            <select style={selectStyle}>
-                {lovList.map((todo, index) => (
-                    <option key={index} value={typeof todo.item === "string" ? todo.item : ""}>
-                        {typeof todo.item === "string" ? todo.item : null}
-                    </option>
-                ))}
-            </select>
-        </div>
-    );
-};
-
-export default ListOfLanguages;

doc/gui/extension/example_library/front-end/src/index.ts

@@ -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 };

doc/gui/extension/list_item.py → doc/gui/extension/item_list.py

@@ -13,16 +13,16 @@ from example_library import ExampleLibrary
 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__":