Add behavior list component style

source/Component/BehaviorPicker/BehaviorPicker.scss

@@ -1,7 +1,9 @@
+@import "../Theme/Theme.scss";
 
 div.behavior-picker-list {
     width: 100%;
     max-width: 400px;
+    padding: 8px 0;
 
     div.behavior-picker-line {
         width: 100%;
@@ -22,5 +24,63 @@ div.behavior-picker-list {
                 z-index: 2;
             }
         }
+
+        div.behavior-picker-line-icon-view {
+            width: 30px;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            i.behavior-icon {
+                display: inline-block;
+            }
+
+            i.view-icon {
+                display: none;
+            }
+
+            i.view-icon:hover {
+                color: $lt-green;
+            }
+        }
+
+        div.behavior-picker-title {
+            height: 100%;
+            width: calc(100% - 60px);
+            display: flex;
+            align-items: center;
+
+            div {
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+
+        div.behavior-picker-line-delete-view {
+            width: 30px;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            i:hover {
+                color: $lt-red;
+            }
+        }
+    }
+
+    div.behavior-picker-line:hover {
+
+        div.behavior-picker-line-icon-view {
+            
+            i.behavior-icon {
+                display: none;
+            }
+
+            i.view-icon {
+                display: inline-block;
+            }
+        }
     }
 }

source/Component/BehaviorPicker/BehaviorPicker.tsx

@@ -1,35 +1,63 @@
 import { DetailsList } from "@Component/DetailsList/DetailsList";
 import { Component, ReactNode } from "react";
 import { Behavior } from "@Model/Behavior";
+import { Icon } from "@fluentui/react";
+import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
+import { Localization } from "@Component/Localization/Localization";
 import "./BehaviorPicker.scss";
 
 interface IBehaviorPickerProps {
-    behavior: Behavior[]
+    behavior: Behavior[];
+    delete?: (behavior: Behavior) => void;
+    action?: (behavior: Behavior) => void;
+    add?: () => void;
 }
 
-class BehaviorPicker extends Component<IBehaviorPickerProps> {
+@useSettingWithEvent("language")
+class BehaviorPicker extends Component<IBehaviorPickerProps & IMixinSettingProps> {
 
     private getData() {
-        let data: Array<{key: string, behavior: Behavior}> = [];
+        let data: Array<{key: string, behavior: Behavior | undefined}> = [];
         for (let i = 0; i < this.props.behavior.length; i++) {
             data.push({
                 key: this.props.behavior[i].id,
                 behavior: this.props.behavior[i]
             })
         }
+        data.push({
+            key: "@@AddButton_List_Key",
+            behavior: undefined
+        })
         return data;
     }
 
-    private renderColor(color: string): ReactNode {
-        return <div className="behavior-picker-line-color-view">
-            <div style={{ borderLeft: `10px solid ${color}` }}/>
-        </div>    
-    }
-
-    private renderLine = (behavior: Behavior): ReactNode => {
-        return <>
-            {this.renderColor(behavior.color)}
-        </>;
+    private renderLine = (behavior?: Behavior): ReactNode => {
+        if (behavior) {
+            return <>
+                <div className="behavior-picker-line-color-view">
+                    <div style={{ borderLeft: `10px solid ${behavior.color}` }}/>
+                </div>
+                <div className="behavior-picker-line-icon-view">
+                    <Icon iconName={behavior.iconName} className="behavior-icon"/>
+                    <Icon iconName="EditCreate" className="view-icon"/>
+                </div>
+                <div className={`behavior-picker-title ${this.props.setting?.language}`}>
+                    <div>{behavior.name}</div>
+                </div>
+                <div className="behavior-picker-line-delete-view">
+                    <Icon iconName="Delete"/>
+                </div>
+            </>;
+        } else {
+            return <>
+                <div className="behavior-picker-line-icon-view">
+                    <Icon iconName="Add" className="add-icon"/>
+                </div>
+                <div className={`behavior-picker-title`}>
+                    <Localization i18nKey="Behavior.Picker.Add.Button"/>
+                </div>
+            </>;
+        }
     }
 
     public render(): ReactNode {