Bind model data into object list

source/Panel/ObjectList/ObjectList.tsx

@@ -1,30 +1,65 @@
 import { Component, ReactNode } from "react";
 import { DetailsList } from "@Component/DetailsList/DetailsList";
+import { useStatus, IMixinStatusProps } from "@Context/Status";
+import { Localization } from "@Component/Localization/Localization";
+
+@useStatus
+class ObjectList extends Component<IMixinStatusProps> {
+
+    private handelChange = () => {
+        this.forceUpdate();
+    }
+
+    public componentDidMount(){
+        if (this.props.status) {
+            this.props.status.model.on("objectChange", this.handelChange);
+        }
+    }
+
+    public componentWillUnmount(){
+        if (this.props.status) {
+            this.props.status.model.off("objectChange", this.handelChange);
+        }
+    }
+
+    private renderList() {
+        const objList = this.props.status?.model.objectPool ?? [];
+
+        if (objList.length <= 0) {
+            return <Localization i18nKey="Object.List.No.Data" style={{
+                padding: "10px",
+                display: "block"
+            }}/>
+        }
 
-class ObjectList extends Component {
-    public render(): ReactNode {
         return <DetailsList
-            items={[
-                {key: "1", name: "Object 01", behaviors: [{name: "B1"}, {name: "B2"}], label: [{name: "L1"}, {name: "L2"}]},
-                {key: "2", name: "New Object", behaviors: [{name: "M1"}], label: [{name: "L1"}]},
-                {key: "3", name: "Range 01", behaviors: [], label: []},
-                {key: "4", name: "Cube", behaviors: [{name: "AA1"}], label: []},
-                {key: "5", name: "Custom Object", behaviors: [{name: "B1"}], label: [{name: "Q1"}, {name: "L2"}]}
-            ]}
+            items={objList.concat([]).map((object => {
+                return {
+                    key: object.id.toString(),
+                    name: object.displayName,
+                    color: object.color,
+                    display: object.display,
+                    update: object.update
+                }
+            }))}
             columns={[
                 {
                     key: "name",
                     render: (name) => <span>{name}</span>
-                }, {
-                    key: "behaviors",
-                    render: (behaviors) => <span>{(behaviors as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
-                }, {
-                    key: "label",
-                    render: (label) => <span>{(label as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
+                // }, {
+                //     key: "behaviors",
+                //     render: (behaviors) => <span>{(behaviors as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
+                // }, {
+                //     key: "label",
+                //     render: (label) => <span>{(label as Record<"name", string>[]).map(r => r.name).join(", ")}</span>
                 }
             ]}
         />
     }
+
+    public render(): ReactNode {
+        return this.renderList();
+    }
 }
 
 export { ObjectList };