mirror of https://gitee.com/cf-fz/WebCAD.git
!2369 优化:加大板编号数字字体大小,"未编号"保存不变
ChenX
parent
2e67025fd0
commit
10278cefe7
@ -0,0 +1,121 @@
|
||||
import { Intent, NumericInput, Position, Tooltip } from "@blueprintjs/core";
|
||||
import { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import React from "react";
|
||||
import { KeyBoard } from "../../Common/KeyEnum";
|
||||
import { FixedNotZero } from "../../Common/Utils";
|
||||
|
||||
interface INumericInputProps
|
||||
{
|
||||
value: number;
|
||||
canNull?: boolean; //输入框可以为空
|
||||
min?: number; //最小值
|
||||
max?: number; //最大值
|
||||
stepSize?: number;
|
||||
float?: number; //保留小数位数
|
||||
onValueChange?: (valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement) => void;
|
||||
onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void; //可以用来赋值使用
|
||||
style?: React.CSSProperties;
|
||||
tooltip?: boolean;
|
||||
}
|
||||
|
||||
@observer
|
||||
export class INumericInput extends React.Component<INumericInputProps, {}>
|
||||
{
|
||||
_InputRef = React.createRef<NumericInput>();
|
||||
_Float: number = this.props.float ?? 0; //支持几位小数, 等于0时 为整数
|
||||
_Value_Min: number = this.props.min ?? -1e7;
|
||||
_Value_Max: number = this.props.max ?? 1e7;
|
||||
_CanNull: boolean = this.props.canNull ?? false; //输入框值可为空
|
||||
_InitialValue: number | string = this.props.value; //初始值
|
||||
@observable _Value: number | string = this.props.value;
|
||||
@observable _isPopoverOpen: boolean = false;
|
||||
|
||||
componentDidUpdate(prevProps: INumericInputProps)
|
||||
{
|
||||
if (this.props.value !== prevProps.value)
|
||||
this._Value = this.props.value;
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
return (
|
||||
<Tooltip
|
||||
content={`仅限${this._Value_Min}-${this._Value_Max}间的数字!`}
|
||||
position={Position.TOP}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={this.props.tooltip && this._isPopoverOpen}
|
||||
>
|
||||
<NumericInput
|
||||
tabIndex={1}
|
||||
ref={this._InputRef}
|
||||
style={this.props.style}
|
||||
buttonPosition="none"
|
||||
min={this._Value_Min}
|
||||
max={this._Value_Max}
|
||||
stepSize={this.props.stepSize ?? 1}
|
||||
value={this._Value}
|
||||
onValueChange={(num, value, e) =>
|
||||
{
|
||||
if (value === "-")
|
||||
{
|
||||
if (this._Value_Min >= 0)
|
||||
{
|
||||
this._Value = 0;
|
||||
this._isPopoverOpen = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (value === "" || "-0.".includes(value) && value !== "0")
|
||||
{
|
||||
this._Value = value;
|
||||
return;
|
||||
}
|
||||
if (isNaN(num) || num < this._Value_Min || num > this._Value_Max)
|
||||
{
|
||||
this._isPopoverOpen = true; 3;
|
||||
return;
|
||||
}
|
||||
if (num >= this._Value_Min && num < this._Value_Max && value === num + ".")
|
||||
{
|
||||
if (num === this._Value_Min) return; //MIN = -3 ,防止输入出现如( -3.)
|
||||
this._Value = value;
|
||||
return;
|
||||
}
|
||||
this._Value = parseFloat(FixedNotZero(num, this._Float));
|
||||
this._isPopoverOpen = false;
|
||||
}}
|
||||
onFocus={(e) =>
|
||||
{
|
||||
e.target.select();
|
||||
//记录初始值 按ESC键时还原这个值
|
||||
this._InitialValue = this._Value;
|
||||
}}
|
||||
onKeyDown={(e: React.KeyboardEvent) =>
|
||||
{
|
||||
if (e.keyCode === KeyBoard.Enter || e.keyCode === KeyBoard.Space)
|
||||
this._InputRef.current.inputElement.blur();
|
||||
else if (e.keyCode === KeyBoard.Escape)
|
||||
{
|
||||
this._InputRef.current.inputElement.value = this._InitialValue.toString();
|
||||
this._InputRef.current.inputElement.blur();
|
||||
}
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onBlur={(e) =>
|
||||
{
|
||||
this._Value = FixedNotZero(e.currentTarget.value, this._Float);
|
||||
if (!this._Value)
|
||||
{
|
||||
this._Value = this._CanNull ? "" : this._Value_Min.toString();
|
||||
e.currentTarget.value = this._Value;
|
||||
}
|
||||
if (this.props.onBlur)
|
||||
this.props.onBlur(e);
|
||||
this._isPopoverOpen = false;
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue