Detach form components to a separate directory

source/Input/AttrInput/AttrInput.scss

@@ -0,0 +1,60 @@
+@import "../../Component/Theme/Theme.scss";
+
+$line-min-height: 24px;
+
+div.attr-input-root {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    input {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border: none;
+        outline: none;
+        background-color: transparent;
+        min-height: $line-min-height;
+    };
+
+    input:focus {
+        border: none;
+        background-color: transparent;
+    }
+
+    div.button-left, div.button-right {
+        min-height: $line-min-height;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        vertical-align: middle;
+        cursor: pointer;
+        user-select: none;
+        padding: 0 3px;
+    }
+}
+
+div.dark.text-field-root {
+
+	input {
+		background-color: $lt-bg-color-lvl3-dark;
+		color: $lt-font-color-normal-dark;
+	}
+
+	div.button-left:hover, div.button-right:hover {
+		background-color: $lt-bg-color-lvl2-dark;
+	}
+}
+
+div.light.text-field-root {
+
+	input {
+		background-color: $lt-bg-color-lvl3-light;
+		color: $lt-font-color-normal-light;
+	}
+
+	div.button-left:hover, div.button-right:hover {
+		background-color: $lt-bg-color-lvl2-light;
+	}
+}

source/Input/AttrInput/AttrInput.tsx

@@ -0,0 +1,183 @@
+import { Component, ReactNode } from "react";
+import { Icon } from "@fluentui/react";
+import { AllI18nKeys } from "@Component/Localization/Localization";
+import { ObjectID } from "@Model/Renderer";
+import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
+import "./AttrInput.scss";
+
+interface IAttrInputProps extends ITextFieldProps {
+    id?: ObjectID;
+    value?: number | string;
+	isNumber?: boolean;
+    maxLength?: number;
+    minLength?: number;
+    max?: number;
+    min?: number;
+    step?: number;
+    valueChange?: (value: this["isNumber"] extends true ? number : string) => any;
+}
+
+class AttrInput extends Component<IAttrInputProps> {
+
+    private value: string = "";
+    private error?: AllI18nKeys;
+    private errorOption?: Record<string, string>;
+    private numberTestReg = [/\.0*$/, /\.\d*[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): AllI18nKeys | undefined {
+
+        // 长度校验
+        const maxLength = this.props.maxLength ?? 32;
+        if (value.length > maxLength) {
+            this.error = "Input.Error.Length";
+            this.errorOption = { num: maxLength.toString() };
+            return this.error;
+        }
+
+        const minLength = this.props.minLength ?? 1;
+        if (value.length < minLength) {
+            this.error = "Input.Error.Length.Less";
+            this.errorOption = { num: minLength.toString() };
+            return this.error;
+        }
+
+        if (this.props.isNumber) {
+            const praseNumber = (value as any) / 1;
+
+            // 数字校验
+            if (this.numberTester(value)) {
+                this.error = "Input.Error.Not.Number";
+                return this.error;
+            }
+
+            // 最大值校验
+            if (this.props.max !== undefined && praseNumber > this.props.max) {
+                this.error = "Input.Error.Max";
+                this.errorOption = { num: this.props.max.toString() };
+                return this.error;
+            }
+
+            // 最小值校验
+            if (this.props.min !== undefined && praseNumber < this.props.min) {
+                this.error = "Input.Error.Min";
+                this.errorOption = { num: this.props.min.toString() };
+                return this.error;
+            }
+
+        }
+        return undefined;
+    }
+
+    private handelValueChange = () => {
+        if (!this.error && this.props.valueChange) {
+            if (this.props.isNumber) {
+                let numberVal = (this.value as any) * 10000;
+                this.value = (Math.round(numberVal) / 10000).toString();
+            }
+            this.props.valueChange(this.value);
+        }
+        this.forceUpdate();
+    }
+
+    private changeValue = (direction: number) => {
+        if (this.error) {
+            return;
+        } else {
+            let newVal = (this.value as any / 1) + (this.props.step ?? 1) * direction;
+
+            // 最大值校验
+            if (this.props.max !== undefined && newVal > this.props.max) {
+                newVal = this.props.max;
+            }
+
+            // 最小值校验
+            if (this.props.min !== undefined && newVal < this.props.min) {
+                newVal = this.props.min;
+            }
+
+            this.value = newVal.toString();
+            this.handelValueChange()
+        }
+    }
+
+    private renderInput() {
+        return <>
+            {
+                this.props.isNumber ? <div
+                    className="button-left"
+                    onClick={() => this.changeValue(-1)}
+                >
+                    <Icon iconName="ChevronLeft"></Icon>
+                </div> : null
+            }
+            <input
+                className="input"
+                value={this.value}
+                style={{
+                    padding: this.props.isNumber ? "0 3px" : "0 8px"
+                }}
+                onChange={(e) => {
+                    this.value = e.target.value;
+                    this.error = this.check(e.target.value);
+                    this.handelValueChange();
+                }}
+            ></input>
+            {
+                this.props.isNumber ? <div
+                    className="button-right"
+                    onClick={() => this.changeValue(1)}
+                >
+                    <Icon iconName="ChevronRight"></Icon>
+                </div> : null
+            }
+        </>
+    }
+
+    public shouldComponentUpdate(nextProps: IAttrInputProps) {
+
+        // ID 都为空时更新
+        if (!nextProps.id && !this.props.id) {
+            this.updateValueFromProps(nextProps.value);
+        }
+
+        // ID 变换时更新 State 到最新的 Props
+        if (nextProps.id !== this.props.id) {
+            this.updateValueFromProps(nextProps.value);
+        }
+        return true;
+    }
+
+    public constructor(props: IAttrInputProps) {
+        super(props);
+        this.updateValueFromProps(props.value);
+    }
+
+    private updateValueFromProps(val: IAttrInputProps["value"]) {
+        const value = val ?? (this.props.isNumber ? "0" : "");
+        this.value = value.toString();
+        this.error = this.check(value.toString());
+    }
+
+	public render(): ReactNode {
+
+		return <TextField
+            {...this.props}
+            className="attr-input-root"
+            customHoverStyle
+            errorI18n={this.error}
+            errorI18nOption={this.errorOption}
+        >
+            {
+                this.renderInput()
+            }
+        </TextField>;
+	}
+}
+
+export { AttrInput };