From 8e3330b398dc4f7b547235ffef7fe6441653daff Mon Sep 17 00:00:00 2001 From: MrKBear Date: Wed, 9 Mar 2022 11:45:00 +0800 Subject: [PATCH] Add panel error message component --- source/Component/AttrInput/AttrInput.tsx | 9 ++++++++- .../Component/ErrorMessage/ErrorMessage.scss | 3 +++ .../Component/ErrorMessage/ErrorMessage.tsx | 16 ++++++++++++++++ source/Localization/ZH-CN.ts | 2 +- source/Panel/Panel.tsx | 5 ++--- source/Panel/RangeDetails/RangeDetails.tsx | 19 ++++++------------- 6 files changed, 36 insertions(+), 18 deletions(-) create mode 100644 source/Component/ErrorMessage/ErrorMessage.scss create mode 100644 source/Component/ErrorMessage/ErrorMessage.tsx diff --git a/source/Component/AttrInput/AttrInput.tsx b/source/Component/AttrInput/AttrInput.tsx index c496140..03bbc77 100644 --- a/source/Component/AttrInput/AttrInput.tsx +++ b/source/Component/AttrInput/AttrInput.tsx @@ -24,6 +24,13 @@ class AttrInput extends Component { private value: string = ""; private error: ReactNode; + private numberTestReg = [/\.0*$/, /[1-9]+0+$/]; + + private numberTester(value: string) { + return isNaN((value as any) / 1) || + this.numberTestReg[0].test(value) || + this.numberTestReg[1].test(value); + } private check(value: string): ReactNode { @@ -37,7 +44,7 @@ class AttrInput extends Component { const praseNumber = (value as any) / 1; // 数字校验 - if (isNaN(praseNumber) || /\.0*$/.test(value)) { + if (this.numberTester(value)) { return } diff --git a/source/Component/ErrorMessage/ErrorMessage.scss b/source/Component/ErrorMessage/ErrorMessage.scss new file mode 100644 index 0000000..aa33898 --- /dev/null +++ b/source/Component/ErrorMessage/ErrorMessage.scss @@ -0,0 +1,3 @@ +div.panel-error-message { + padding-top: 5px; +} \ No newline at end of file diff --git a/source/Component/ErrorMessage/ErrorMessage.tsx b/source/Component/ErrorMessage/ErrorMessage.tsx new file mode 100644 index 0000000..d82ef9c --- /dev/null +++ b/source/Component/ErrorMessage/ErrorMessage.tsx @@ -0,0 +1,16 @@ +import { AllI18nKeys, Localization } from "@Component/Localization/Localization"; +import { FunctionComponent } from "react"; +import "./ErrorMessage.scss"; + +interface IErrorMessageProps { + i18nKey: AllI18nKeys; + options?: Record; +} + +const ErrorMessage: FunctionComponent = (props) => { + return
+ +
+} + +export { ErrorMessage }; \ No newline at end of file diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index e07c1aa..e0ca849 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -26,7 +26,7 @@ const ZH_CN = { "Object.List.New.Group": "组对象 {id}", "Object.List.New.Range": "范围对象 {id}", "Object.List.No.Data": "模型中没有任何对象，点击按钮以创建", - "Panel.Title.Notfound": "找不到面板: {id}", + "Panel.Title.Notfound": "{id}", "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!", "Panel.Title.Render.View": "实时预览", "Panel.Info.Render.View": "实时仿真结果预览", diff --git a/source/Panel/Panel.tsx b/source/Panel/Panel.tsx index 66b5c66..a3cddeb 100644 --- a/source/Panel/Panel.tsx +++ b/source/Panel/Panel.tsx @@ -1,6 +1,7 @@ import { ReactNode, Component, FunctionComponent } from "react"; import { Theme } from "@Component/Theme/Theme"; import { Localization } from "@Component/Localization/Localization"; +import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage"; import { RenderView } from "./RenderView/RenderView"; import { ObjectList } from "./ObjectList/ObjectList"; import { ObjectCommand } from "./ObjectList/ObjectCommand"; @@ -45,9 +46,7 @@ function getPanelById(panelId: PanelId): ReactNode { const C = info.class; return } else return - + } } diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx index c28e871..d8c5362 100644 --- a/source/Panel/RangeDetails/RangeDetails.tsx +++ b/source/Panel/RangeDetails/RangeDetails.tsx @@ -1,7 +1,8 @@ import { Component, ReactNode } from "react"; import { AttrInput } from "@Component/AttrInput/AttrInput"; import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status"; -import { AllI18nKeys } from "@Component/Localization/Localization"; +import { AllI18nKeys, Localization } from "@Component/Localization/Localization"; +import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage"; import { Range } from "@Model/Range"; import { ObjectID } from "@Model/Renderer"; import { ColorInput } from "@Component/ColorInput/ColorInput"; @@ -24,14 +25,6 @@ class RangeDetails extends Component { "Common.Attr.Key.Radius.Z" ] - private renderErrorFrom(error: AllI18nKeys) { - return <> - {this.AttrI18nKey.map((key, index) => { - return - })} - - } - private renderAttrInput( id: ObjectID, key: number, val: string | number | undefined, change: (val: string, status: Status) => any, @@ -115,10 +108,10 @@ class RangeDetails extends Component { public render(): ReactNode { if (this.props.status) { if (this.props.status.focusObject.size <= 0) { - return this.renderErrorFrom("Panel.Info.Range.Details.Attr.Error.Unspecified"); + return ; } if (this.props.status.focusObject.size > 1) { - return this.renderErrorFrom("Common.Attr.Key.Error.Multiple"); + return ; } let id: ObjectID = 0; this.props.status.focusObject.forEach((cid => id = cid)); @@ -128,10 +121,10 @@ class RangeDetails extends Component { if (range instanceof Range) { return this.renderFrom(range); } else { - return this.renderErrorFrom("Panel.Info.Range.Details.Attr.Error.Not.Range"); + return ; } } - return this.renderErrorFrom("Panel.Info.Range.Details.Attr.Error.Unspecified"); + return ; } }