|
@@ -12,14 +12,15 @@ interface IFloatLineComponentProps {
|
|
isInteger?: boolean;
|
|
isInteger?: boolean;
|
|
onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
|
|
onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
|
|
additionalClass?: string;
|
|
additionalClass?: string;
|
|
- step?: string,
|
|
|
|
|
|
+ step?: string;
|
|
digits?: number;
|
|
digits?: number;
|
|
- globalState: GlobalState
|
|
|
|
|
|
+ globalState: GlobalState;
|
|
}
|
|
}
|
|
|
|
|
|
export class FloatLineComponent extends React.Component<IFloatLineComponentProps, { value: string }> {
|
|
export class FloatLineComponent extends React.Component<IFloatLineComponentProps, { value: string }> {
|
|
private _localChange = false;
|
|
private _localChange = false;
|
|
private _store: number;
|
|
private _store: number;
|
|
|
|
+ private _regExp: RegExp;
|
|
|
|
|
|
constructor(props: IFloatLineComponentProps) {
|
|
constructor(props: IFloatLineComponentProps) {
|
|
super(props);
|
|
super(props);
|
|
@@ -27,6 +28,15 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
|
|
let currentValue = this.props.target[this.props.propertyName];
|
|
let currentValue = this.props.target[this.props.propertyName];
|
|
this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 2)) : "0" };
|
|
this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 2)) : "0" };
|
|
this._store = currentValue;
|
|
this._store = currentValue;
|
|
|
|
+
|
|
|
|
+ let rexp = "(.*\\.";
|
|
|
|
+ let numDigits = this.props.digits || 2;
|
|
|
|
+ while (numDigits--) {
|
|
|
|
+ rexp += ".";
|
|
|
|
+ }
|
|
|
|
+ rexp += ").+";
|
|
|
|
+
|
|
|
|
+ this._regExp = new RegExp(rexp);
|
|
}
|
|
}
|
|
|
|
|
|
shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: { value: string }) {
|
|
shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: { value: string }) {
|
|
@@ -62,12 +72,11 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
|
|
}
|
|
}
|
|
|
|
|
|
updateValue(valueString: string) {
|
|
updateValue(valueString: string) {
|
|
-
|
|
|
|
if (/[^0-9\.\-]/g.test(valueString)) {
|
|
if (/[^0-9\.\-]/g.test(valueString)) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
- valueString = valueString.replace(/(.+\...).+/, "$1");
|
|
|
|
|
|
+ valueString = valueString.replace(this._regExp, "$1");
|
|
|
|
|
|
let valueAsNumber: number;
|
|
let valueAsNumber: number;
|
|
|
|
|
|
@@ -77,7 +86,6 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
|
|
valueAsNumber = parseFloat(valueString);
|
|
valueAsNumber = parseFloat(valueString);
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
this._localChange = true;
|
|
this._localChange = true;
|
|
this.setState({ value: valueString});
|
|
this.setState({ value: valueString});
|
|
|
|
|
|
@@ -100,12 +108,12 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
|
|
{this.props.label}
|
|
{this.props.label}
|
|
</div>
|
|
</div>
|
|
<div className="value">
|
|
<div className="value">
|
|
- <input type="number" step={this.props.step || "0.01"} className="numeric-input"
|
|
|
|
- onBlur={evt => {
|
|
|
|
|
|
+ <input type="number" step={this.props.step || "0.01"} className="numeric-input"
|
|
|
|
+ onBlur={(evt) => {
|
|
this.props.globalState.blockKeyboardEvents = false;
|
|
this.props.globalState.blockKeyboardEvents = false;
|
|
}}
|
|
}}
|
|
onFocus={() => this.props.globalState.blockKeyboardEvents = true}
|
|
onFocus={() => this.props.globalState.blockKeyboardEvents = true}
|
|
- value={this.state.value} onChange={evt => this.updateValue(evt.target.value)} />
|
|
|
|
|
|
+ value={this.state.value} onChange={(evt) => this.updateValue(evt.target.value)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|