change NodePanel

render-process/Editor/NodePanel.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
-import { Card } from 'antd';
+import { Card, Divider, Form, Input, AutoComplete, Select } from 'antd';
 import { INode } from '@antv/g6/lib/interface/item';
+import { BehaviorNodeModel } from '../../common/BehaviorTreeModel';
+import Settings from '../../main-process/Settings';
+import { FormInstance } from 'antd/lib/form';
+
+const { Item } = Form;
 
 interface NodePanelProps {
-  
+  model: BehaviorNodeModel;
+  settings: Settings;
 }
 
 interface NodePanelState {
@@ -11,22 +17,67 @@ interface NodePanelState {
 }
 
 export default class NodePanel extends React.Component<NodePanelProps> {
-  componentDidMount() {
+  formRef = React.createRef<FormInstance>();
+
+  componentDidUpdate() {
+    const { model, settings } = this.props;
+    this.formRef.current.setFieldsValue({
+      name: model.name,
+    });
   }
 
-  renderNode() {
-    return (
-      <div>
-        {}
-      </div>
-    )
-  }
+  onFinish = (values: any) => {
+    console.log('Success:', values);
+  };
+
+  onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
 
   render() {
-    // const { curNode } = this.props;
+    const { model, settings } = this.props;
+    const conf = settings.getNodeConf(model.name);
+    console.log("model", model, conf);
+    const title = conf.desc;
+
+    const names: string[] = [];
+    settings.nodeConfig.map((e) => {
+      names.push(e.name);
+    })
+
+    const name = model.name;
+
+    const layout = {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 },
+    };
     return (
-      <Card title="节点信息" style={{ height: "100%" }}>
-        {/* {curNode ? this.renderNode() : "未选中"} */}
+      <Card title={title} style={{ height: "100%" }}>
+        <Form
+          {...layout}
+          name="basic"
+          onFinish={this.onFinish}
+          ref={this.formRef}
+        >
+          <Item
+            label="节点id"
+          >
+            <Input value={model.id} disabled={true} />
+          </Item>
+          <Item
+            label="节点名称"
+            name="name"
+          >
+            <AutoComplete
+              dataSource={names}
+              filterOption={(inputValue, option: any) =>
+                option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+              }
+              onChange={this.onFinish}
+              defaultValue={name}
+            />
+          </Item>
+        </Form>
       </Card>
     )
   }