Optim object picker & isDelete flag

source/Component/ObjectPicker/ObjectPicker.scss

@@ -4,19 +4,32 @@ $line-min-height: 24px;
 
 div.object-picker {
 
+    div.list-color {
+        width: 3px;
+        height: $line-min-height;
+        border-radius: 1000px;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
     div.value-view {
+        flex-shrink: 1;
         width: 100%;
         height: 100%;
+        max-width: calc( 100% - 51px );
         min-height: $line-min-height;
         display: flex;
         align-items: center;
-        white-space: nowrap;
-        word-break: keep-all;
-        text-overflow: ellipsis;
-        overflow: hidden;
 
         span {
+            word-break: keep-all;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
             display: block;
+            max-width: 100%;
         }
     }
 
@@ -28,4 +41,17 @@ div.object-picker {
         justify-content: center;
         align-items: center;
     }
+
+    div.list-empty {
+        width: $line-min-height;
+        height: $line-min-height;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    div.list-empty:hover {
+        color: $lt-red;
+    }
 }

source/Component/ObjectPicker/ObjectPicker.tsx

@@ -4,10 +4,10 @@ import { Group } from "@Model/Group";
 import { Range } from "@Model/Range";
 import { TextField, ITextFieldProps } from "../TextField/TextField";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { PickerList, IDisplayItem } from "../PickerList/PickerList";
+import { PickerList, IDisplayItem, getObjectDisplayInfo, IDisplayInfo } from "../PickerList/PickerList";
 import { Localization } from "@Component/Localization/Localization";
 import { Icon } from "@fluentui/react";
-import CtrlObject from "@Model/CtrlObject";
+import { CtrlObject } from "@Model/CtrlObject";
 import "./ObjectPicker.scss";
 
 type IObjectType = Label | Group | Range | CtrlObject;
@@ -16,6 +16,7 @@ interface IObjectPickerProps extends ITextFieldProps {
     type: Array<"L" | "G" | "R">;
     value?: IObjectType;
     valueChange?: (value: IObjectType) => any;
+    cleanValue?: () => any;
 }
 
 interface IObjectPickerState {
@@ -57,6 +58,8 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
         return option;
     }
 
+    private isClean: boolean = false;
+
     public constructor(props: IObjectPickerProps) {
         super(props);
         this.state = {
@@ -68,6 +71,7 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
 
     private renderPicker() {
         return <PickerList
+            noData="Object.Picker.List.No.Data"
             target={this.pickerTarget}
             objectList={this.getAllOption()}
             clickObjectItems={((item) => {
@@ -88,22 +92,18 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
 
     public render(): ReactNode {
 
-        let name = "";
-        let icon = "Label";
-        if (this.props.value instanceof CtrlObject) {
-            name = this.props.value.displayName;
+        let disPlayInfo: IDisplayInfo;
+        let isDelete: boolean = false;
 
-            if (this.props.value instanceof Range) {
-                icon = "CubeShape"
+        if (this.props.value) {
+            disPlayInfo = getObjectDisplayInfo(this.props.value);
+            isDelete = this.props.value.isDeleted();
+        } else {
+            disPlayInfo = {
+                name: "",
+                icon: "Label",
+                color: "rgba(0,0,0,0)"
             }
-
-            if (this.props.value instanceof Group) {
-                icon = "WebAppBuilderFragment"
-            }
-        }
-        if (this.props.value instanceof Label) {
-            name = this.props.value.name;
-            icon = "tag";
         }
 
         return <>
@@ -113,21 +113,52 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
                 keyI18n={this.props.keyI18n}
                 targetRef={this.pickerTarget}
                 onClick={() => {
-                    this.setState({
-                        isPickerVisible: true
-                    })
+                    if (this.isClean) {
+                        this.isClean = false;
+                    } else {
+                        this.setState({
+                            isPickerVisible: true
+                        })
+                    }
                 }}
             >
+                <div
+                    className="list-color"
+                    style={{
+                            backgroundColor: disPlayInfo.color
+                    }}
+                />
                 <div className="list-button">
-                    <Icon iconName={icon}/>
+                    <Icon iconName={disPlayInfo.icon}/>
                 </div>
-                <div className="value-view">
+                <div
+                    className="value-view"
+                    style={{
+                        textDecoration: isDelete ? "line-through" : undefined,
+                        opacity: isDelete ? ".6" : undefined
+                    }}
+                >
                     {   
-                        name ? 
-                            <span>{name}</span> :
+                        disPlayInfo.name ? 
+                            <span>{disPlayInfo.name}</span> :
                             <Localization i18nKey="Input.Error.Select"/>
                     }
                 </div>
+                <div
+                    className="list-empty"
+                    onClick={() => {
+                        if (this.props.cleanValue && disPlayInfo.name) {
+                            this.isClean = true;
+                            this.props.cleanValue();
+                        }
+                    }}
+                >
+                    {   
+                        disPlayInfo.name ? 
+                            <Icon iconName="delete"/> :
+                            null
+                    }
+                </div>
             </TextField>
 
             {this.state.isPickerVisible ?  this.renderPicker(): null}