Add checkbox handel func

source/Component/DetailsList/DetailsList.scss

@@ -19,9 +19,18 @@ div.details-list {
 
         div.details-list-checkbox {
             display: flex;
+            width: 30px;
             align-items: center;
             justify-content: center;
-            padding: 0 10px;
+            opacity: 0;
+        }
+    }
+
+    div.details-list-item.active,
+    div.details-list-item:hover {
+
+        div.details-list-checkbox {
+            opacity: 1;
         }
     }
 }
@@ -35,15 +44,33 @@ div.light.details-list {
     div.details-list-item:hover {
         background-color: $lt-bg-color-lvl3-light;
     }
+
+    div.details-list-item.active {
+        background-color: $lt-bg-color-lvl2-light;
+        color: rgba(0, 0, 0, 0.95);
+    }
+
+    // div.details-list-checkbox:hover {
+    //     background-color: rgba($lt-bg-color-lvl1-light, .4);
+    // }
 }
 
 div.dark.details-list {
 
     div.details-list-item:nth-child(2n) {
-        background-color: rgba($lt-bg-color-lvl5-dark, .4);
+        background-color: rgba($lt-bg-color-lvl5-dark, .8);
     }
 
     div.details-list-item:hover {
         background-color: $lt-bg-color-lvl3-dark;
     }
+
+    div.details-list-item.active {
+        background-color: $lt-bg-color-lvl2-dark;
+        color: rgba(255, 255, 255, 0.85);
+    }
+
+    // div.details-list-checkbox:hover {
+    //     background-color: rgba($lt-bg-color-lvl1-dark, .8);
+    // }
 }

source/Component/DetailsList/DetailsList.tsx

@@ -16,9 +16,13 @@ interface IColumns<D extends IItems, K extends keyof D> {
 
 interface IDetailsListProps {
     items: IItems[];
+    className?: string;
     columns: IColumns<this["items"][number], keyof this["items"][number]>[];
     hideCheckBox?: boolean;
     checkboxClassName?: string;
+    click?: () => void;
+    clickLine?: (item: IItems) => any;
+    checkBox?: (data: IItems) => any;
 }
 
 class DetailsList extends Component<IDetailsListProps> {
@@ -41,13 +45,27 @@ class DetailsList extends Component<IDetailsListProps> {
 
     public render(): ReactNode {
         return <Theme
-            className="details-list"
+            className={"details-list" + (this.props.className ? ` ${this.props.className}` : "")}
+            onClick={this.props.click}
             backgroundLevel={BackgroundLevel.Level4}
             fontLevel={FontLevel.normal}
         >{
             this.props.items.map((item) => {
                 const { checkboxClassName } = this.props;
-                return <div className="details-list-item" key={item.key}>
+                const classList: string[] = ["details-list-item"];
+                if (item.select) {
+                    classList.push("active");
+                }
+                return <div
+                    className={classList.join(" ")}
+                    key={item.key}
+                    onClick={(e) => {
+                        if (this.props.clickLine) {
+                            e.stopPropagation();
+                            this.props.clickLine(item);
+                        }
+                    }}
+                >
                     {
                         this.props.columns.map((column) => {
                             if (column.beforeCheckbox) {
@@ -59,6 +77,12 @@ class DetailsList extends Component<IDetailsListProps> {
                         this.props.hideCheckBox ? null :
                         <div 
                             className={"details-list-checkbox" + (checkboxClassName ? ` ${checkboxClassName}` : "")}
+                            onClick={(e) => {
+                                if (this.props.checkBox) {
+                                    e.stopPropagation();
+                                    this.props.checkBox(item);
+                                }
+                            }}
                         >
                             <Icon iconName="CheckMark"></Icon>
                         </div>
@@ -76,4 +100,4 @@ class DetailsList extends Component<IDetailsListProps> {
     }
 }
 
-export { DetailsList };
+export { DetailsList, IItems };