From 3c3e64a0954bcdb5f84032ee85b51ea0ee0f3b29 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar <ramesh.p@matriotsolutions.com>
Date: Mon, 1 Mar 2021 18:22:29 +0530
Subject: [PATCH] TMSS-494: Anlge fields updated with Cleave.js component.
---
.../components/Spreadsheet/DegreeInputmask.js | 29 +++++++++--------
.../components/Spreadsheet/TimeInputmask.js | 31 ++++++++++---------
.../tmss_webapp/src/utils/unit.converter.js | 2 +-
.../tmss_webapp/src/utils/validator.js | 6 ++--
4 files changed, 36 insertions(+), 32 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js
index 66ac10063cc..16e5057bdf3 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/DegreeInputmask.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { InputMask } from 'primereact/inputmask';
import Validator from '../../utils/validator';
+import Cleave from 'cleave.js/react';
const BG_COLOR= '#f878788f';
@@ -16,29 +17,31 @@ export default class DegreeInputMask extends Component {
*/
callbackUpdateAngle(e) {
let isValid = false;
- if(Validator.validateAngle(e.value)){
- e.originalEvent.target.style.backgroundColor = '';
+ if (Validator.validateAngle(e.target.value)) {
+ e.target.style.backgroundColor = '';
isValid = true;
- }else{
- e.originalEvent.target.style.backgroundColor = BG_COLOR;
+ } else {
+ e.target.style.backgroundColor = BG_COLOR;
}
this.props.context.componentParent.updateAngle(
- this.props.node.rowIndex,this.props.colDef.field,e.value,false,isValid
+ this.props.node.rowIndex,this.props.colDef.field,e.target.value,false,isValid
);
}
- afterGuiAttached(){
- this.input.input.focus();
+ afterGuiAttached() {
+ this.input.focus();
+ this.input.select();
}
render() {
return (
- <InputMask mask="99:99:99.9999" value={this.props.value}
- placeholder="DD:mm:ss.ssss"
- className="inputmask"
- onChange={this.callbackUpdateAngle}
- autoFocus
- ref={input =>{this.input = input}} />
+ <Cleave placeholder="DD:mm:ss.ssss" value={this.props.value}
+ options={{numericOnly: true, blocks: [2, 2, 2, 4],
+ delimiters: [':', ':', '.'],
+ delimiterLazyShow: false}}
+ className="inputmask"
+ htmlRef={(ref) => this.input = ref }
+ onChange={this.callbackUpdateAngle} />
);
}
}
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/TimeInputmask.js b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/TimeInputmask.js
index 3b80b7a82e7..540f276baf8 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/TimeInputmask.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Spreadsheet/TimeInputmask.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { InputMask } from 'primereact/inputmask';
import Validator from '../../utils/validator';
+import Cleave from 'cleave.js/react';
const BG_COLOR= '#f878788f';
@@ -12,33 +13,33 @@ export default class TimeInputMask extends Component {
callbackUpdateAngle(e) {
let isValid = false;
- if(Validator.validateTime(e.value)){
- e.originalEvent.target.style.backgroundColor = '';
+ if (Validator.validateTime(e.target.value)) {
+ e.target.style.backgroundColor = '';
isValid = true;
- }else{
- e.originalEvent.target.style.backgroundColor = BG_COLOR;
+ } else {
+ e.target.style.backgroundColor = BG_COLOR;
}
-
+ e.target.style.border = "none";
this.props.context.componentParent.updateAngle(
- this.props.node.rowIndex,this.props.colDef.field,e.value,false,isValid
+ this.props.node.rowIndex,this.props.colDef.field,e.target.value,false,isValid
);
}
afterGuiAttached(){
- this.input.input.focus();
+ this.input.focus();
+ this.input.select();
}
-
+
render() {
return (
- <InputMask
- value={this.props.value}
- mask="99:99:99.9999"
- placeholder="HH:mm:ss.ssss"
+ <Cleave placeholder="HH:mm:ss.ssss" value={this.props.value}
+ options={{numericOnly: true, blocks: [2, 2, 2, 4],
+ delimiters: [':', ':', '.'],
+ delimiterLazyShow: false}}
className="inputmask"
- onChange={this.callbackUpdateAngle}
- ref={input =>{this.input = input}}
- />
+ htmlRef={(ref) => this.input = ref }
+ onChange={this.callbackUpdateAngle} />
);
}
}
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js b/SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js
index 32ca7186a73..471818ef7f1 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js
@@ -92,7 +92,7 @@ const UnitConverter = {
getAngleOutput(prpOutput, isDegree) {
if(prpOutput){
const splitOutput = prpOutput.split(':');
- const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+ const seconds = splitOutput[2]?splitOutput[2].split('.')[0]:splitOutput[2];
let milliSeconds = prpOutput.split('.')[1] || '0000';
milliSeconds = milliSeconds.padEnd(4,0);
if (isDegree) {
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js b/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js
index 4f4b1b2aba5..c3101bd69b6 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/utils/validator.js
@@ -1,7 +1,7 @@
const Validator = {
validateTime(value) {
- const splitOutput = value.split(':');
- const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+ const splitOutput = value.split(':');
+ const seconds = splitOutput[2]?splitOutput[2].split('.')[0]:splitOutput[2];
let milliSeconds = value.split('.')[1] || '0000';
milliSeconds = milliSeconds.padEnd(4,0);
if (splitOutput.length < 3) {
@@ -19,7 +19,7 @@ const Validator = {
},
validateAngle(value) {
const splitOutput = value.split(':');
- const seconds = splitOutput[2]?splitOutput[2].split('.')[0].split('.')[0]:splitOutput[2];
+ const seconds = splitOutput[2]?splitOutput[2].split('.')[0]:splitOutput[2];
let milliSeconds = value.split('.')[1] || '0000';
milliSeconds = milliSeconds.padEnd(4,0);
if (splitOutput.length < 3) {
--
GitLab