@gpa-gemstone/react-forms 1.1.46 → 1.1.47

package/lib/DatePicker.d.ts

@@ -10,6 +10,7 @@ interface IProps<T> {
     Format?: string;
     Type?: ('datetime-local' | 'date');
     Help?: string | JSX.Element;
+    AllowEmpty?: boolean;
 }
 export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/DatePicker.js

@@ -39,19 +39,21 @@ 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 = "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]");
     var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
     var divRef = React.useRef(null);
-    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var _b = React.useState(""), guid = _b[0], setGuid = _b[1];
+    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
     // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
-    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(false), showOverlay = _e[0], setShowOverlay = _e[1];
-    var _f = React.useState(0), top = _f[0], setTop = _f[1];
-    var _g = React.useState(0), left = _g[0], setLeft = _g[1];
+    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 _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)());
     }, []);
@@ -60,10 +62,13 @@ function DateTimePicker(props) {
         setBoxRecord(parse(props.Record).format(boxFormat));
     }, [props.Record]);
     React.useEffect(function () {
-        var _a;
+        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)));
+        }
         if (valid && parse(props.Record).format(boxFormat) !== boxRecord)
-            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = moment(boxRecord, boxFormat).format(recordFormat), _a)));
+            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = moment(boxRecord, boxFormat).format(recordFormat), _b)));
     }, [boxRecord]);
     React.useEffect(function () {
         var _a;
@@ -111,7 +116,8 @@ function DateTimePicker(props) {
         (props.Label !== "") ?
             React.createElement("label", null, props.Label == null ? props.Field : props.Label) : 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) {
-                setBoxRecord(evt.target.value);
+                var _a;
+                setBoxRecord((_a = evt.target.value) !== null && _a !== void 0 ? _a : "");
             }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: "1" }),
         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')

package/package.json

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