Add object list component

source/Component/DetailsList/DetailsList.scss

@@ -0,0 +1,49 @@
+@import "../Theme/Theme.scss";
+
+div.details-list {
+    width: 100%;
+
+    div.details-list-item {
+        display: flex;
+        align-items: stretch;
+        user-select: none;
+        cursor: pointer;
+        min-height: 30px;
+
+        div.details-list-value {
+            padding: 5px 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        div.details-list-checkbox {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 10px;
+        }
+    }
+}
+
+div.light.details-list {
+    
+    div.details-list-item:nth-child(2n) {
+        background-color: rgba($lt-bg-color-lvl5-light, .4);
+    }
+
+    div.details-list-item:hover {
+        background-color: $lt-bg-color-lvl3-light;
+    }
+}
+
+div.dark.details-list {
+
+    div.details-list-item:nth-child(2n) {
+        background-color: rgba($lt-bg-color-lvl5-dark, .4);
+    }
+
+    div.details-list-item:hover {
+        background-color: $lt-bg-color-lvl3-dark;
+    }
+}

source/Component/DetailsList/DetailsList.tsx

@@ -0,0 +1,71 @@
+import { Icon } from "@fluentui/react";
+import { Component, ReactNode } from "react";
+import { BackgroundLevel, FontLevel, Theme } from "../Theme/Theme";
+import "./DetailsList.scss";
+
+type IItems = Record<string, any> & {key: string, select?: boolean};
+
+interface IColumns<D extends IItems, K extends keyof D> {
+    key: K;
+    className?: string;
+    beforeCheckbox?: boolean;
+    render: (data: D[K]) => ReactNode,
+    click?: (data: D[K]) => any,
+}
+
+interface IDetailsListProps {
+    items: IItems[];
+    columns: IColumns<this["items"][number], keyof this["items"][number]>[];
+    hideCheckBox?: boolean;
+    checkboxClassName?: string;
+}
+
+class DetailsList extends Component<IDetailsListProps> {
+
+    private renderValue<D extends IItems, K extends keyof D>(item: IItems, column: IColumns<D, K>) {
+        return <div
+            className={"details-list-value" + (column.className ? ` ${column.className}` : "")}
+            key={column.key as any}
+        >
+            {column.render(item[column.key as any])}
+        </div>
+    }
+
+    public render(): ReactNode {
+        return <Theme
+            className="details-list"
+            backgroundLevel={BackgroundLevel.Level4}
+            fontLevel={FontLevel.normal}
+        >{
+            this.props.items.map((item) => {
+                const { checkboxClassName } = this.props;
+                return <div className="details-list-item" key={item.key}>
+                    {
+                        this.props.columns.map((column) => {
+                            if (column.beforeCheckbox) {
+                                return this.renderValue(item, column);
+                            }
+                        })
+                    }
+                    {
+                        this.props.hideCheckBox ? null :
+                        <div 
+                            className={"details-list-checkbox" + (checkboxClassName ? ` ${checkboxClassName}` : "")}
+                        >
+                            <Icon iconName="CheckMark"></Icon>
+                        </div>
+                    }
+                    {
+                        this.props.columns.map((column) => {
+                            if (!column.beforeCheckbox) {
+                                return this.renderValue(item, column);
+                            }
+                        })
+                    }
+                </div>
+            })
+        }</Theme>
+    }
+}
+
+export { DetailsList };

source/Component/Theme/Theme.scss

@@ -1,6 +1,6 @@
 @import "@fluentui/react/dist/sass/References";
 
-$lt-font-size-normal: $ms-font-size-14;
+$lt-font-size-normal: 13px;
 $lt-font-size-lvl3: $ms-font-size-16;
 $lt-font-size-lvl2: $ms-font-size-18;
 $lt-font-size-lvl1: $ms-font-size-24;