@gpa-gemstone/react-forms 1.1.48 → 1.1.50

package/lib/DatePicker.js

@@ -39,39 +39,59 @@ var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var HelperMessage_1 = require("./HelperMessage");
 function DateTimePicker(props) {
-    var _a;
     // Formats that will be used for dateBoxes
     var boxFormat = getBoxFormat(props.Type, props.Accuracy);
     var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss.SSS[Z]");
     var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
     var divRef = React.useRef(null);
-    var _b = React.useState(""), guid = _b[0], setGuid = _b[1];
-    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
+    var recordChange = React.useRef(false);
+    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
     // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
-    var _d = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _d[0], setBoxRecord = _d[1];
-    var _e = React.useState(parse(props.Record)), pickerRecord = _e[0], setPickerRecord = _e[1];
+    var _c = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _c[0], setBoxRecord = _c[1];
+    var _d = React.useState(parse(props.Record)), pickerRecord = _d[0], setPickerRecord = _d[1];
+    var _e = React.useState(""), feedbackMessage = _e[0], setFeedbackMessage = _e[1];
     var _f = React.useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
     var _g = React.useState(0), top = _g[0], setTop = _g[1];
     var _h = React.useState(0), left = _h[0], setLeft = _h[1];
-    var allowEmpty = (_a = props.AllowEmpty) !== null && _a !== void 0 ? _a : false;
     React.useEffect(function () {
         setGuid((0, helper_functions_1.CreateGuid)());
     }, []);
     React.useEffect(function () {
         setPickerRecord(parse(props.Record));
         setBoxRecord(parse(props.Record).format(boxFormat));
+        recordChange.current = false;
     }, [props.Record]);
     React.useEffect(function () {
         var _a, _b;
-        var valid = moment(boxRecord, boxFormat).isValid();
-        if (allowEmpty && boxRecord.length === 0 && !valid && props.Record !== null) {
-            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
+        var _c;
+        if (!recordChange.current)
+            return;
+        var date = moment(boxRecord, boxFormat);
+        var validStartDate = moment("1753-01-01", "YYYY-MM-DD");
+        var valid = true;
+        // Invalid date format
+        if (!date.isValid()) {
+            setFeedbackMessage("Please enter a date as " + boxFormat);
+            valid = false;
         }
+        // Date before 1753
+        else if (date.isBefore(validStartDate)) {
+            setFeedbackMessage("Date cannot be before " + validStartDate.format(boxFormat));
+            valid = false;
+        }
+        else {
+            setFeedbackMessage("");
+        }
+        if (((_c = props.AllowEmpty) !== null && _c !== void 0 ? _c : false) && boxRecord.length === 0 && !valid && props.Record !== null)
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
         if (valid && parse(props.Record).format(boxFormat) !== boxRecord)
             props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = moment(boxRecord, boxFormat).format(recordFormat), _b)));
     }, [boxRecord]);
     React.useEffect(function () {
         var _a;
+        if (!recordChange.current)
+            return;
         if (pickerRecord.format(recordFormat) !== parse(props.Record).format(recordFormat))
             props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = pickerRecord.format(recordFormat), _a)));
     }, [pickerRecord]);
@@ -130,10 +150,26 @@ function DateTimePicker(props) {
             return "YYYY-MM-DD";
         }
     }
+    function getFeedbackMessage() {
+        if (feedbackMessage.length != 0) {
+            return feedbackMessage;
+        }
+        else if (props.Feedback == null || props.Feedback.length == 0) {
+            return props.Field.toString();
+        }
+        else {
+            return props.Field.toString() + " is a required field.";
+        }
+    }
     var showLabel = props.Label !== "";
     var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
     var step = props.Accuracy === 'millisecond' ? '0.001' : (props.Accuracy === 'minute' ? '60' : '1');
+    var IsValid = function () {
+        if (feedbackMessage.length > 0)
+            return false;
+        return props.Valid(props.Field);
+    };
     return (React.createElement("div", { className: "form-group", ref: divRef },
         showHelpIcon || showLabel ?
             React.createElement("label", null,
@@ -151,12 +187,13 @@ function DateTimePicker(props) {
         showHelpIcon ?
             React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
             : null,
-        React.createElement("input", { "data-help": guid, className: "gpa-gemstone-datetime form-control" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
+        React.createElement("input", { "data-help": guid, className: "gpa-gemstone-datetime form-control " + (IsValid() ? '' : 'is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
                 var _a;
                 setBoxRecord((_a = evt.target.value) !== null && _a !== void 0 ? _a : "");
+                recordChange.current = true;
             }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step }),
-        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
-        React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); if (props.Type === 'date')
+        React.createElement("div", { className: "invalid-feedback" }, getFeedbackMessage()),
+        React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); recordChange.current = true; if (props.Type === 'date')
                 setShowOverlay(false); }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined ? 'date' : props.Type, Accuracy: props.Accuracy })));
 }
 exports.default = DateTimePicker;

package/lib/DateTimeUI/Calender.js

@@ -37,7 +37,7 @@ function Calender(props) {
     React.useEffect(function () {
         var d1 = moment([year, month, 1]).startOf('week');
         var w = [];
-        while (d1.month() <= month && d1.year() === year) {
+        while ((d1.month() <= month && d1.year() === year) || (d1.year() < year)) {
             w.push({
                 sunday: moment(d1),
                 monday: moment(d1).add(1, 'day'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.48",
+  "version": "1.1.50",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",