@gpa-gemstone/react-forms 1.1.21 → 1.1.24

package/lib/DatePicker.d.ts

@@ -5,6 +5,9 @@ export default class DatePicker<T> extends React.Component<{
     Setter: (record: T) => void;
     Label?: string;
     Disabled?: boolean;
+    Feedback?: string;
+    Format?: string;
+    Valid: (field: keyof T) => boolean;
 }, {}, {}> {
     render(): JSX.Element;
 }

package/lib/DatePicker.js

@@ -49,6 +49,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
+var moment = require("moment");
 var DatePicker = /** @class */ (function (_super) {
     __extends(DatePicker, _super);
     function DatePicker() {
@@ -57,15 +58,24 @@ var DatePicker = /** @class */ (function (_super) {
     DatePicker.prototype.render = function () {
         var _this = this;
         return (React.createElement("div", { className: "form-group" },
-            React.createElement("label", null, this.props.Label == null ? this.props.Field : this.props.Label),
-            React.createElement("input", { className: "form-control", type: "date", onChange: function (evt) {
+            (this.props.Label !== "") ?
+                React.createElement("label", null, this.props.Label == null ? this.props.Field : this.props.Label) : null,
+            React.createElement("input", { className: this.props.Valid(this.props.Field) ? 'form-control' : 'form-control is-invalid', type: "date", onChange: function (evt) {
                     var record = __assign({}, _this.props.Record);
-                    if (evt.target.value !== '')
-                        record[_this.props.Field] = evt.target.value;
+                    if (evt.target.value !== '') {
+                        if (_this.props.Format === null)
+                            record[_this.props.Field] = evt.target.value;
+                        else
+                            record[_this.props.Field] = moment(evt.target.value).format(_this.props.Format);
+                    }
                     else
                         record[_this.props.Field] = null;
                     _this.props.Setter(record);
-                }, value: this.props.Record[this.props.Field] == null ? '' : this.props.Record[this.props.Field].toString(), disabled: this.props.Disabled == null ? false : this.props.Disabled })));
+                }, value: this.props.Record[this.props.Field] == null ? '' :
+                    this.props.Format == null ?
+                        this.props.Record[this.props.Field].toString() :
+                        moment(this.props.Record[this.props.Field]).format("YYYY-MM-DD"), disabled: this.props.Disabled == null ? false : this.props.Disabled }),
+            React.createElement("div", { className: "invalid-feedback" }, this.props.Feedback == null ? this.props.Field + ' is a required field.' : this.props.Feedback)));
     };
     return DatePicker;
 }(React.Component));

package/lib/DateRangePicker.js

@@ -104,7 +104,7 @@ function DateRangePicker(props) {
     }, [Tstart]);
     React.useEffect(function () {
         // only if InputStart is a valid ToString
-        if (StartInput.match('^([0-9][0-9][0-9][0-9])-([0-9][0-9])-([0-2][0-9])') != null)
+        if (StartInput.match('^([0-9][0-9][0-9][0-9])-([0-1][0-9])-([0-3][0-9])') != null)
             setTstart(ToDate(StartInput));
         else
             setTstart(null);
@@ -115,7 +115,7 @@ function DateRangePicker(props) {
     }, [Tend]);
     React.useEffect(function () {
         // only if EndInput is a valid ToString
-        if (EndInput.match('^([0-9][0-9][0-9][0-9])-([0-9][0-9])-([0-2][0-9])') != null)
+        if (EndInput.match('^([0-9][0-9][0-9][0-9])-([0-1][0-9])-([0-3][0-9])') != null)
             setTend(ToDate(EndInput));
         else
             setTend(null);

package/lib/Input.js

@@ -41,24 +41,33 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 function Input(props) {
     var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
     var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1];
     React.useEffect(function () {
         setGuid((0, helper_functions_1.CreateGuid)());
     }, []);
+    React.useEffect(function () {
+        setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
+    }, [props.Record[props.Field]]);
     function valueChange(evt) {
         var _a, _b;
-        if (props.Type === 'number')
-            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.value !== '' ? parseFloat(evt.target.value) : null, _a)));
+        if (props.Type === 'number') {
+            if (parseFloat(heldVal) !== parseFloat(evt.target.value))
+                props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.value !== '' ? parseFloat(evt.target.value) : null, _a)));
+            else
+                setHeldVal(evt.target.value);
+        }
         else
             props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = evt.target.value !== '' ? evt.target.value : null, _b)));
     }
     return (React.createElement("div", { className: "form-group" },
-        React.createElement("label", null,
-            props.Label == null ? props.Field : props.Label,
-            props.Help !== undefined ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null),
+        (props.Label !== "") ?
+            React.createElement("label", null,
+                props.Label === null ? props.Field : props.Label,
+                props.Help !== undefined ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
         props.Help !== undefined ?
             React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
             : null,
-        React.createElement("input", { "data-help": guid, type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt); }, value: props.Record[props.Field] == null ? '' : props.Record[props.Field].toString(), disabled: props.Disabled == null ? false : props.Disabled }),
+        React.createElement("input", { "data-help": guid, type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt); }, value: heldVal, disabled: props.Disabled == null ? false : props.Disabled }),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
 }
 exports.default = Input;

package/lib/Select.js

@@ -45,9 +45,10 @@ function Select(props) {
         setGuid((0, helper_functions_1.CreateGuid)());
     }, []);
     return (React.createElement("div", { className: "form-group" },
-        React.createElement("label", null,
-            props.Label == null ? props.Field : props.Label,
-            props.Help !== undefined ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null),
+        (props.Label !== "") ?
+            React.createElement("label", null,
+                props.Label === null ? props.Field : props.Label,
+                props.Help !== undefined ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
         props.Help !== undefined ?
             React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
             : null,

package/lib/TimePicker.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export default class TimePicker<T> extends React.Component<{
+    Record: T;
+    Field: keyof T;
+    Setter: (record: T) => void;
+    Label?: string;
+    Disabled?: boolean;
+    Feedback?: string;
+    Step?: number;
+    Valid: (field: keyof T) => boolean;
+}, {}, {}> {
+    render(): JSX.Element;
+}

package/lib/TimePicker.js

@@ -0,0 +1,74 @@
+"use strict";
+// ******************************************************************************************************
+//  TimePicker.tsx - Gbtc
+//
+//  Copyright © 2022, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  03/21/2022 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var TimePicker = /** @class */ (function (_super) {
+    __extends(TimePicker, _super);
+    function TimePicker() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TimePicker.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("div", { className: "form-group" },
+            (this.props.Label !== "") ?
+                React.createElement("label", null, this.props.Label == null ? this.props.Field : this.props.Label) : null,
+            React.createElement("input", { className: this.props.Valid(this.props.Field) ? 'form-control' : 'form-control is-invalid', type: "time", step: this.props.Step === null ? 60 : this.props.Step, onChange: function (evt) {
+                    var record = __assign({}, _this.props.Record);
+                    if (evt.target.value !== '')
+                        record[_this.props.Field] = evt.target.value;
+                    else
+                        record[_this.props.Field] = null;
+                    _this.props.Setter(record);
+                }, value: this.props.Record[this.props.Field] == null ? '' : this.props.Record[this.props.Field].toString(), disabled: this.props.Disabled == null ? false : this.props.Disabled }),
+            React.createElement("div", { className: "invalid-feedback" }, this.props.Feedback == null ? this.props.Field + ' is a required field.' : this.props.Feedback)));
+    };
+    return TimePicker;
+}(React.Component));
+exports.default = TimePicker;

package/lib/index.d.ts

@@ -8,4 +8,6 @@ import EnumCheckBoxes from './EnumCheckBoxes';
 import ArrayMultiSelect from './ArrayMultiSelect';
 import ArrayCheckBoxes from './ArrayCheckBoxes';
 import MultiCheckBoxSelect from './MutliCheckBoxSelect';
-export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect };
+import DoubleInput from './DoubleInput';
+import TimePicker from './TimePicker';
+export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker };

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiCheckBoxSelect = exports.ArrayCheckBoxes = exports.ArrayMultiSelect = exports.EnumCheckBoxes = exports.DateRangePicker = exports.TextArea = exports.Select = exports.DatePicker = exports.Input = exports.CheckBox = void 0;
+exports.TimePicker = exports.DoubleInput = exports.MultiCheckBoxSelect = exports.ArrayCheckBoxes = exports.ArrayMultiSelect = exports.EnumCheckBoxes = exports.DateRangePicker = exports.TextArea = exports.Select = exports.DatePicker = exports.Input = exports.CheckBox = void 0;
 var CheckBox_1 = require("./CheckBox");
 exports.CheckBox = CheckBox_1.default;
 var Input_1 = require("./Input");
@@ -43,3 +43,7 @@ var ArrayCheckBoxes_1 = require("./ArrayCheckBoxes");
 exports.ArrayCheckBoxes = ArrayCheckBoxes_1.default;
 var MutliCheckBoxSelect_1 = require("./MutliCheckBoxSelect");
 exports.MultiCheckBoxSelect = MutliCheckBoxSelect_1.default;
+var DoubleInput_1 = require("./DoubleInput");
+exports.DoubleInput = DoubleInput_1.default;
+var TimePicker_1 = require("./TimePicker");
+exports.TimePicker = TimePicker_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.21",
+  "version": "1.1.24",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,11 +45,12 @@
     "typescript": "4.4.4"
   },
   "dependencies": {
-    "@gpa-gemstone/helper-functions": "0.0.14",
+    "@gpa-gemstone/helper-functions": "0.0.16",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "react": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "5.3.3",
+    "moment": "2.29.4"
   },
   "publishConfig": {
     "access": "public"