@gpa-gemstone/react-forms 1.1.23 → 1.1.26

package/lib/DatePicker.d.ts

@@ -6,6 +6,7 @@ export default class DatePicker<T> extends React.Component<{
     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,23 @@ 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),
+            (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;

package/lib/DateRangePicker.d.ts

@@ -4,7 +4,10 @@ export default function DateRangePicker<T>(props: {
     FromField: keyof T;
     ToField: keyof T;
     Setter: (record: T) => void;
-    Disabled?: boolean;
     Label: string;
-    Valid?: boolean;
+    Valid: (fieldFrom: keyof T, fieldTo: keyof T) => boolean;
+    Disabled?: boolean;
+    Feedback?: string;
+    Format?: string;
+    Type?: ('datetime-local' | 'date');
 }): JSX.Element;

package/lib/DateRangePicker.js

@@ -34,47 +34,18 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
+var moment = require("moment");
 function DateRangePicker(props) {
-    var _a = React.useState('Custom'), range = _a[0], setRange = _a[1];
-    var _b = React.useState(ToDate(props.Record[props.FromField])), Tstart = _b[0], setTstart = _b[1];
-    var _c = React.useState(ToDate(props.Record[props.ToField])), Tend = _c[0], setTend = _c[1];
-    var _d = React.useState(Tstart != null ? ToString(Tstart) : ''), StartInput = _d[0], setStartInput = _d[1];
-    var _e = React.useState(Tend != null ? ToString(Tend) : ''), EndInput = _e[0], setEndInput = _e[1];
+    // Range box vars, need a secondary var to avoid looping react hooks
+    var _a = React.useState('Custom'), formRange = _a[0], setFormRange = _a[1];
+    var _b = React.useState('Custom'), range = _b[0], setRange = _b[1];
     React.useEffect(function () {
-        var propsStart = ToDate(props.Record[props.FromField]);
-        var propsEnd = ToDate(props.Record[props.ToField]);
-        if (propsStart == null || Tstart == null) {
-            if (!(propsStart == null && Tstart == null))
-                setTstart(propsStart);
-        }
-        else if (propsStart.getTime() !== Tstart.getTime())
-            setTstart(propsStart);
-        if (propsEnd == null || Tend == null) {
-            if (!(propsEnd == null && Tend == null))
-                setTstart(propsEnd);
-        }
-        else if (propsEnd.getTime() !== Tend.getTime())
-            setTend(propsEnd);
+        setRange(ToRange(moment(props.Record[props.ToField]).diff(props.Record[props.FromField], 'days')));
     }, [props.Record]);
     React.useEffect(function () {
-        var days = (Tstart != null && Tend != null ? Math.round((Tend.getTime() - Tstart.getTime()) / (1000 * 60 * 60 * 24)) : 0);
-        if (ToRange(days) !== range)
-            setRange(ToRange(days));
-        UpdateTime();
-    }, [Tstart, Tend]);
-    React.useEffect(function () {
-        var days = GetDays(range);
-        if (days > 0) {
-            if (Tstart != null)
-                setTend(new Date(Tstart.valueOf() + 1000 * 24 * 60 * 60 * days));
-            else if (Tend != null)
-                setTstart(new Date(Tend.valueOf() - 1000 * 24 * 60 * 60 * days));
-            else {
-                setTstart(new Date(new Date().valueOf() - 1000 * 24 * 60 * 60 * days));
-                setTend(new Date());
-            }
-        }
-    }, [range]);
+        setRange(formRange);
+        RecordSetter(moment(props.Record[props.FromField]).add(GetDays(formRange), 'days').toString(), props.ToField);
+    }, [formRange]);
     function GetDays(val) {
         if (val === '1 Day')
             return 1;
@@ -90,47 +61,6 @@ function DateRangePicker(props) {
             return 365;
         return 0;
     }
-    function ToDate(str) {
-        if (str === null)
-            return null;
-        var dt = new Date(str);
-        if (isNaN(dt.getTime()))
-            return null;
-        return dt;
-    }
-    React.useEffect(function () {
-        if (Tstart != null)
-            setStartInput(ToString(Tstart));
-    }, [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)
-            setTstart(ToDate(StartInput));
-        else
-            setTstart(null);
-    }, [StartInput]);
-    React.useEffect(function () {
-        if (Tend != null)
-            setEndInput(ToString(Tend));
-    }, [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)
-            setTend(ToDate(EndInput));
-        else
-            setTend(null);
-    }, [EndInput]);
-    function UpdateTime() {
-        var _a;
-        var to = (Tend !== null ? ToString(Tend) : '');
-        var from = (Tstart !== null ? ToString(Tstart) : '');
-        var record = __assign(__assign({}, props.Record), (_a = {}, _a[props.ToField] = to, _a[props.FromField] = from, _a));
-        props.Setter(record);
-    }
-    function ToString(dt) {
-        return dt.getUTCFullYear() + "-" + (dt.getUTCMonth() + 1).toString()
-            .padStart(2, '0') + "-" + dt.getUTCDate().toString().padStart(2, '0');
-    }
     function ToRange(days) {
         if (days === 1)
             return ('1 Day');
@@ -147,15 +77,32 @@ function DateRangePicker(props) {
         else
             return ('Custom');
     }
-    var startValid = (Tstart !== null) && (!isNaN(Tstart.getTime()));
-    var endValid = (Tend !== null) && (!isNaN(Tend.getTime())) && (!startValid || ((Tstart !== null) && (Tstart.getTime() < Tend.getTime())));
-    startValid = (props.Valid === undefined ? startValid : props.Valid);
-    endValid = (props.Valid === undefined ? endValid : props.Valid);
+    function RecordSetter(val, field) {
+        var record = __assign({}, props.Record);
+        if (val !== '') {
+            if (props.Format === null)
+                record[field] = val;
+            else
+                record[field] = moment(val).format(props.Format);
+        }
+        else
+            record[field] = null;
+        props.Setter(record);
+    }
+    function dateBox(field) {
+        return React.createElement("div", { className: "col" },
+            React.createElement("input", { className: "form-control" + (props.Valid(props.FromField, props.ToField) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
+                    RecordSetter(evt.target.value, field);
+                }, value: props.Record[field] === null ? '' :
+                    moment(props.Record[field]).format("YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "Thh:mm")), disabled: props.Disabled === null ? false : props.Disabled }),
+            field !== props.FromField ? null :
+                React.createElement("div", { className: "invalid-feedback" }, props.Feedback === undefined ? 'From and to dates required, and from must be before to.' : props.Feedback));
+    }
     return (React.createElement("div", { className: "form-group" },
-        React.createElement("label", null, props.Label),
+        props.Label === "" ? null : React.createElement("label", null, props.Label),
         React.createElement("div", { className: "row" },
             React.createElement("div", { className: "col" },
-                React.createElement("select", { className: "form-control", value: range, onChange: function (evt) { return setRange(evt.target.value); } },
+                React.createElement("select", { className: "form-control", value: range, onChange: function (evt) { return setFormRange(evt.target.value); } },
                     React.createElement("option", { value: "Custom" }, "Custom"),
                     React.createElement("option", { value: "1 Day" }, "1 Day"),
                     React.createElement("option", { value: "7 Days" }, "7 Days"),
@@ -163,9 +110,7 @@ function DateRangePicker(props) {
                     React.createElement("option", { value: "90 Days" }, "90 Days"),
                     React.createElement("option", { value: "180 Days" }, "180 Days"),
                     React.createElement("option", { value: "365 Days" }, "365 Days"))),
-            React.createElement("div", { className: "col" },
-                React.createElement("input", { className: "form-control" + (startValid ? '' : ' is-invalid'), type: "date", onChange: function (evt) { setStartInput(evt.target.value); }, value: StartInput, disabled: props.Disabled == null ? false : props.Disabled })),
-            React.createElement("div", { className: "col" },
-                React.createElement("input", { className: "form-control" + (endValid ? '' : ' is-invalid'), type: "date", onChange: function (evt) { setEndInput(evt.target.value); }, value: EndInput, disabled: props.Disabled == null ? false : props.Disabled })))));
+            dateBox(props.FromField),
+            dateBox(props.ToField))));
 }
 exports.default = DateRangePicker;

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

@@ -6,6 +6,7 @@ export default class TimePicker<T> extends React.Component<{
     Label?: string;
     Disabled?: boolean;
     Feedback?: string;
+    Step?: number;
     Valid: (field: keyof T) => boolean;
 }, {}, {}> {
     render(): JSX.Element;

package/lib/TimePicker.js

@@ -57,8 +57,9 @@ var TimePicker = /** @class */ (function (_super) {
     TimePicker.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: this.props.Valid(this.props.Field) ? 'form-control' : 'form-control is-invalid', type: "time", 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: "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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.23",
+  "version": "1.1.26",
   "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.15",
+    "@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"
+    "react": "^18.2.0",
+    "styled-components": "5.3.3",
+    "moment": "2.29.4"
   },
   "publishConfig": {
     "access": "public"