From ac88c4d3fd9e2b65c66a03e36a0812c90dbc9f66 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Fri, 4 Mar 2022 16:22:05 +0800 Subject: [PATCH] Add object list component --- source/Component/DetailsList/DetailsList.scss | 49 +++++++++++++ source/Component/DetailsList/DetailsList.tsx | 71 +++++++++++++++++++ source/Component/Theme/Theme.scss | 2 +- source/Localization/EN-US.ts | 2 + source/Localization/ZH-CN.ts | 2 + source/Page/SimulatorWeb/SimulatorWeb.tsx | 2 +- source/Panel/ObjectList/ObjectList.scss | 0 source/Panel/ObjectList/ObjectList.tsx | 30 ++++++++ source/Panel/Panel.tsx | 6 ++ 9 files changed, 162 insertions(+), 2 deletions(-) create mode 100644 source/Component/DetailsList/DetailsList.scss create mode 100644 source/Component/DetailsList/DetailsList.tsx create mode 100644 source/Panel/ObjectList/ObjectList.scss create mode 100644 source/Panel/ObjectList/ObjectList.tsx diff --git a/source/Component/DetailsList/DetailsList.scss b/source/Component/DetailsList/DetailsList.scss new file mode 100644 index 0000000..011913f --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/source/Component/DetailsList/DetailsList.tsx b/source/Component/DetailsList/DetailsList.tsx new file mode 100644 index 0000000..f565fe6 --- /dev/null +++ b/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 & {key: string, select?: boolean}; + +interface IColumns { + key: K; + className?: string; + beforeCheckbox?: boolean; + render: (data: D[K]) => ReactNode, + click?: (data: D[K]) => any, +} + +interface IDetailsListProps { + items: IItems[]; + columns: IColumns[]; + hideCheckBox?: boolean; + checkboxClassName?: string; +} + +class DetailsList extends Component { + + private renderValue(item: IItems, column: IColumns) { + return
+ {column.render(item[column.key as any])} +
+ } + + public render(): ReactNode { + return { + this.props.items.map((item) => { + const { checkboxClassName } = this.props; + return
+ { + this.props.columns.map((column) => { + if (column.beforeCheckbox) { + return this.renderValue(item, column); + } + }) + } + { + this.props.hideCheckBox ? null : +
+ +
+ } + { + this.props.columns.map((column) => { + if (!column.beforeCheckbox) { + return this.renderValue(item, column); + } + }) + } +
+ }) + } + } +} + +export { DetailsList }; \ No newline at end of file diff --git a/source/Component/Theme/Theme.scss b/source/Component/Theme/Theme.scss index ce09e98..3f24727 100644 --- a/source/Component/Theme/Theme.scss +++ b/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; diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 608e97d..5966d8e 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -23,6 +23,8 @@ const EN_US = { "Panel.Info.Notfound": "This panel with id {id} can not found!", "Panel.Title.Render.View": "Live preview", "Panel.Info.Render.View": "Live simulation results preview", + "Panel.Title.Object.List.View": "Object list", + "Panel.Info.Object.List.View": "Edit View All Object Properties", } export default EN_US; \ No newline at end of file diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index aaa6290..214f9a9 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -23,5 +23,7 @@ const ZH_CN = { "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!", "Panel.Title.Render.View": "实时预览", "Panel.Info.Render.View": "实时仿真结果预览", + "Panel.Title.Object.List.View": "对象列表", + "Panel.Info.Object.List.View": "编辑查看全部对象属性", } export default ZH_CN; \ No newline at end of file diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx index cee10f3..05f4e99 100644 --- a/source/Page/SimulatorWeb/SimulatorWeb.tsx +++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx @@ -72,7 +72,7 @@ class SimulatorWeb extends Component { }, { items: [{ - panles: ["Label d"] + panles: ["ObjectList"] }, { items: [{panles: ["Label e", "ee"]}, {panles: ["F"]}], layout: LayoutDirection.Y diff --git a/source/Panel/ObjectList/ObjectList.scss b/source/Panel/ObjectList/ObjectList.scss new file mode 100644 index 0000000..e69de29 diff --git a/source/Panel/ObjectList/ObjectList.tsx b/source/Panel/ObjectList/ObjectList.tsx new file mode 100644 index 0000000..beb8365 --- /dev/null +++ b/source/Panel/ObjectList/ObjectList.tsx @@ -0,0 +1,30 @@ +import { Component, ReactNode } from "react"; +import { DetailsList } from "@Component/DetailsList/DetailsList"; + +class ObjectList extends Component { + public render(): ReactNode { + return {name} + }, { + key: "behaviors", + render: (behaviors) => {(behaviors as Record<"name", string>[]).map(r => r.name).join(", ")} + }, { + key: "label", + render: (label) => {(label as Record<"name", string>[]).map(r => r.name).join(", ")} + } + ]} + /> + } +} + +export { ObjectList }; \ No newline at end of file diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index b9605f0..7bda3a7 100644 --- a/source/Panel/Panel.tsx +++ b/source/Panel/Panel.tsx @@ -2,6 +2,7 @@ import { ReactNode, Component, FunctionComponent } from "react"; import { Theme } from "@Component/Theme/Theme"; import { Localization } from "@Component/Localization/Localization"; import { RenderView } from "./RenderView/RenderView"; +import { ObjectList } from "./ObjectList/ObjectList"; interface IPanelInfo { nameKey: string; @@ -15,6 +16,7 @@ interface IPanelInfo { type PanelId = "" | "RenderView" // 主渲染器 +| "ObjectList" // 对象列表 ; const PanelInfoMap = new Map(); @@ -22,6 +24,10 @@ PanelInfoMap.set("RenderView", { nameKey: "Panel.Title.Render.View", introKay: "Panel.Info.Render.View", class: RenderView, hidePadding: true, hideScrollBar: true, isDeepDark: true }); +PanelInfoMap.set("ObjectList", { + nameKey: "Panel.Title.Object.List.View", introKay: "Panel.Info.Object.List.View", + class: ObjectList, hidePadding: true +}) function getPanelById(panelId: PanelId): ReactNode { switch (panelId) {