@gpa-gemstone/react-forms 1.1.27 → 1.1.30

package/lib/DatePicker.d.ts

@@ -1,13 +1,12 @@
-import * as React from 'react';
-export default class DatePicker<T> extends React.Component<{
+/// <reference types="react" />
+export default function DatePicker<T>(props: {
     Record: T;
     Field: keyof T;
     Setter: (record: T) => void;
+    Valid: (field: keyof T) => boolean;
     Label?: string;
     Disabled?: boolean;
     Feedback?: string;
     Format?: string;
-    Valid: (field: keyof T) => boolean;
-}, {}, {}> {
-    render(): JSX.Element;
-}
+    Type?: ('datetime-local' | 'date');
+}): JSX.Element;

package/lib/DatePicker.js

@@ -21,21 +21,6 @@
 //       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++) {
@@ -50,33 +35,39 @@ 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() {
-        return _super !== null && _super.apply(this, arguments) || this;
+function DatePicker(props) {
+    // Tracks weather or not props.Record changes are due to internal input boxes or externally
+    var _a = React.useState(false), internal = _a[0], setInternal = _a[1];
+    // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
+    var _b = React.useState(ParseRecord()), boxRecord = _b[0], setBoxRecord = _b[1];
+    // Formats that will be used for dateBoxes
+    var boxFormat = "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss");
+    var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss.SSS[Z]");
+    function ParseRecord() {
+        var _a;
+        return __assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.Field] === null ? '' : moment(props.Record[props.Field], recordFormat).format(boxFormat), _a));
     }
-    DatePicker.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: "date", onChange: function (evt) {
-                    var record = __assign({}, _this.props.Record);
-                    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.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));
+    ;
+    React.useEffect(function () {
+        if (!internal)
+            setBoxRecord(ParseRecord());
+        setInternal(false);
+    }, [props.Record]);
+    return (React.createElement("div", { className: "form-group" },
+        (props.Label !== "") ?
+            React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
+        React.createElement("input", { className: "form-control" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
+                var _a;
+                var record = __assign({}, props.Record);
+                if (evt.target.value !== '')
+                    record[props.Field] = moment(evt.target.value, boxFormat).format(recordFormat);
+                else
+                    record[props.Field] = null;
+                // These two updates should be batched together
+                props.Setter(record);
+                setBoxRecord(__assign(__assign({}, boxRecord), (_a = {}, _a[props.Field] = evt.target.value, _a)));
+                setInternal(true);
+            }, value: boxRecord[props.Field], disabled: props.Disabled === undefined ? false : props.Disabled }),
+        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
+}
 exports.default = DatePicker;

package/lib/Input.js

@@ -41,23 +41,30 @@ 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];
+    var _c = React.useState(false), internal = _c[0], setInternal = _c[1];
+    var _d = React.useState(''), heldVal = _d[0], setHeldVal = _d[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
     React.useEffect(function () {
         setGuid((0, helper_functions_1.CreateGuid)());
     }, []);
     React.useEffect(function () {
-        setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
+        if (!internal) {
+            setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
+        }
+        setInternal(false);
     }, [props.Record[props.Field]]);
-    function valueChange(evt) {
+    function valueChange(value) {
         var _a, _b;
+        setInternal(true);
         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);
+            if ((0, helper_functions_1.IsNumber)(value)) {
+                props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = value !== '' ? parseFloat(value) : null, _a)));
+                setHeldVal(value);
+            }
+        }
+        else {
+            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = value !== '' ? value : null, _b)));
+            setHeldVal(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" },
         (props.Label !== "") ?
@@ -67,7 +74,7 @@ function Input(props) {
         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: heldVal, 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.target.value); }, 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/TimePicker.d.ts

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

package/lib/TimePicker.js

@@ -21,21 +21,6 @@
 //       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++) {
@@ -49,26 +34,18 @@ var __assign = (this && this.__assign) || function () {
 };
 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;
+function DatePicker(props) {
+    return (React.createElement("div", { className: "form-group" },
+        (props.Label !== "") ?
+            React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
+        React.createElement("input", { className: 'form-control' + (props.Valid(props.Field) ? '' : ' is-invalid'), type: "time", step: props.Step === null ? 60 : props.Step, onChange: function (evt) {
+                var record = __assign({}, props.Record);
+                if (evt.target.value !== '')
+                    record[props.Field] = evt.target.value;
+                else
+                    record[props.Field] = null;
+                props.Setter(record);
+            }, value: props.Record[props.Field] == null ? '' : props.Record[props.Field].toString(), disabled: props.Disabled == null ? false : props.Disabled }),
+        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
+}
+exports.default = DatePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.27",
+  "version": "1.1.30",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,7 +45,7 @@
     "typescript": "4.4.4"
   },
   "dependencies": {
-    "@gpa-gemstone/helper-functions": "0.0.16",
+    "@gpa-gemstone/helper-functions": "0.0.17",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "react": "^18.2.0",