@gpa-gemstone/react-forms 1.1.40 → 1.1.42

package/lib/DatePicker.d.ts

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

package/lib/DatePicker.js

@@ -37,18 +37,24 @@ var React = require("react");
 var moment = require("moment");
 var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var HelperMessage_1 = require("./HelperMessage");
 function DateTimePicker(props) {
     // 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];
     // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
-    var _a = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _a[0], setBoxRecord = _a[1];
-    var _b = React.useState(parse(props.Record)), pickerRecord = _b[0], setPickerRecord = _b[1];
-    var _c = React.useState(false), showOverlay = _c[0], setShowOverlay = _c[1];
-    var _d = React.useState(0), top = _d[0], setTop = _d[1];
-    var _e = React.useState(0), left = _e[0], setLeft = _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(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];
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+    }, []);
     React.useEffect(function () {
         setPickerRecord(parse(props.Record));
         setBoxRecord(parse(props.Record).format(boxFormat));
@@ -66,6 +72,11 @@ function DateTimePicker(props) {
     }, [pickerRecord]);
     React.useLayoutEffect(function () {
         var node = (divRef.current !== null ? (0, helper_functions_1.GetNodeSize)(divRef.current) : { top: top, left: left, height: 0, width: 0 });
+        if (node.height === 0 && node.width === 0) {
+            setLeft(0);
+            setTop(-9999);
+            return;
+        }
         setLeft(node.left + 0.5 * node.width);
         setTop(node.top + node.height + 10);
     });
@@ -77,10 +88,29 @@ function DateTimePicker(props) {
         if (evt.target.closest(".gpa-gemstone-datetime") == null)
             setShowOverlay(false);
     }
+    var showLabel = props.Label !== "";
+    var showHelpIcon = props.Help !== undefined;
+    var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement("div", { className: "form-group", ref: divRef },
+        showHelpIcon || showLabel ?
+            React.createElement("label", null,
+                showLabel ? label : '',
+                showHelpIcon ? 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,
+        showHelpIcon ?
+            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            : null,
         (props.Label !== "") ?
             React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
-        React.createElement("input", { 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" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
                 setBoxRecord(evt.target.value);
             }, 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),

package/lib/DateTimeUI/Calender.js

@@ -31,8 +31,8 @@ function Calender(props) {
     var _d = React.useState('month'), mode = _d[0], setMode = _d[1];
     var _e = React.useState('None'), hover = _e[0], setHover = _e[1];
     React.useEffect(function () {
-        setMonth(props.DateTime.month());
-        setYear(props.DateTime.year());
+        setMonth(isNaN(props.DateTime.month()) ? 0 : props.DateTime.month());
+        setYear(isNaN(props.DateTime.year()) ? moment.utc().year() : props.DateTime.year());
     }, [props.DateTime]);
     React.useEffect(function () {
         var d1 = moment([year, month, 1]).startOf('week');
@@ -84,6 +84,8 @@ function Calender(props) {
     }
     function setDate(d) {
         var ud = moment(props.DateTime);
+        if (!ud.isValid())
+            ud = moment.utc().startOf('d');
         ud.year(d.year()).month(d.month()).date(d.date());
         props.Setter(ud);
     }

package/lib/DateTimeUI/Clock.js

@@ -39,8 +39,12 @@ function Clock(props) {
         var h = parseInt(hour, 10);
         var m = parseInt(minute, 10);
         var s = parseInt(second, 10);
+        if (isNaN(h) || isNaN(m) || isNaN(s))
+            return;
         if (h !== props.DateTime.hour() || m !== props.DateTime.minute() || s !== props.DateTime.second()) {
             var d = moment(props.DateTime);
+            if (!d.isValid())
+                d = moment.utc().startOf('d');
             d.hour(h).minute(m).second(s);
             props.Setter(d);
         }
@@ -99,6 +103,10 @@ var TimeInput = function (props) {
     var _a = React.useState(props.value.toString()), val = _a[0], setVal = _a[1];
     var _b = React.useState(false), error = _b[0], setError = _b[1];
     React.useEffect(function () {
+        if (props.value.length > 5) {
+            setVal("");
+            return;
+        }
         setVal(props.value.toString());
     }, [props.value]);
     React.useEffect(function () {

package/lib/Input.js

@@ -100,7 +100,7 @@ function Input(props) {
         showHelpIcon ?
             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.target.value); }, value: heldVal, disabled: props.Disabled == null ? false : props.Disabled, onBlur: onBlur }),
+        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, onBlur: onBlur, step: 'any' }),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
 }
 exports.default = Input;

package/lib/MutliCheckBoxSelect.d.ts

@@ -2,12 +2,12 @@
 interface IProps {
     Label?: string;
     Options: {
-        Value: number;
+        Value: number | string;
         Text: string;
         Selected: boolean;
     }[];
     OnChange: (evt: any, Options: {
-        Value: number;
+        Value: number | string;
         Text: string;
         Selected: boolean;
     }[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.40",
+  "version": "1.1.42",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -43,7 +43,7 @@
     "typescript": "4.4.4"
   },
   "dependencies":   {
-    "@gpa-gemstone/helper-functions": "0.0.21",
+    "@gpa-gemstone/helper-functions": "0.0.22",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "moment": "2.29.4",