@gpa-gemstone/react-forms 1.1.37 → 1.1.39

package/lib/DatePicker.js

@@ -39,8 +39,8 @@ var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 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 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);
     // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke

package/lib/DateTimeUI/Calender.js

@@ -111,7 +111,7 @@ function Calender(props) {
                     React.createElement("td", { style: { width: 20, padding: 5 } }, "FR"),
                     React.createElement("td", { style: { width: 20, padding: 5 } }, "SA")) : null),
             React.createElement("tbody", null,
-                mode === 'month' ? weeks.map(function (w) { return React.createElement("tr", { key: w.sunday.isoWeekYear(), style: { height: 20, lineHeight: '20px' } },
+                mode === 'month' ? weeks.map(function (w) { return React.createElement("tr", { key: w.sunday.isoWeek(), style: { height: 20, lineHeight: '20px' } },
                     React.createElement(DayCell, { date: w.sunday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
                     React.createElement(DayCell, { date: w.monday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
                     React.createElement(DayCell, { date: w.tuesday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
@@ -142,7 +142,7 @@ var DayCell = function (props) {
     var _b = React.useState(false), hover = _b[0], setHover = _b[1];
     var _c = React.useState(false), disabled = _c[0], setDisabled = _c[1];
     React.useEffect(function () {
-        setActive(props.date.date() === props.day);
+        setActive(props.date.date() === props.day && props.month === props.date.month());
         setDisabled(props.date.month() !== props.month);
     }, [props.month, props.date, props.day]);
     var color = (disabled ? '#777' : (active ? '#fff' : undefined));

package/lib/DateTimeUI/Clock.js

@@ -46,11 +46,21 @@ function Clock(props) {
     }, [hour, minute, second]);
     function increase(type) {
         var d = moment(props.DateTime).add(1, type);
-        setHour(d.format("HH"));
+        if (type === 'h')
+            setHour(d.format("HH"));
+        if (type === 'm')
+            setMinute(d.format("mm"));
+        if (type === 's')
+            setSecond(d.format("ss"));
     }
     function decrease(type) {
         var d = moment(props.DateTime).subtract(1, type);
-        setHour(d.format("HH"));
+        if (type === 'h')
+            setHour(d.format("HH"));
+        if (type === 'm')
+            setMinute(d.format("mm"));
+        if (type === 's')
+            setSecond(d.format("ss"));
     }
     return (React.createElement("div", { style: { background: '#f0f0f0', marginTop: 10, opacity: 1 } },
         React.createElement("table", { style: { textAlign: 'center' } },

package/lib/Input.d.ts

@@ -12,6 +12,7 @@ interface IProps<T> {
     Style?: React.CSSProperties;
     AllowNull?: boolean;
     Size?: 'small' | 'large';
+    DefaultValue?: number;
 }
 export default function Input<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/Input.js

@@ -52,6 +52,15 @@ function Input(props) {
         }
         setInternal(false);
     }, [props.Record[props.Field]]);
+    function onBlur() {
+        var _a;
+        var _b;
+        var allowNull = props.AllowNull === undefined ? false : props.AllowNull;
+        if (!allowNull && (props.Type === 'number' || props.Type === 'integer') && heldVal === '') {
+            setInternal(false);
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = (_b = props.DefaultValue) !== null && _b !== void 0 ? _b : 0, _a)));
+        }
+    }
     function valueChange(value) {
         var _a, _b, _c;
         setInternal(true);
@@ -62,12 +71,18 @@ function Input(props) {
                 props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = v !== '' ? parseFloat(v) : null, _a)));
                 setHeldVal(v);
             }
+            else if (v === '') {
+                setHeldVal(v);
+            }
         }
         else if (props.Type === 'integer') {
             if ((0, helper_functions_1.IsInteger)(value) || (value === '' && allowNull)) {
                 props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = value !== '' ? parseFloat(value) : null, _b)));
                 setHeldVal(value);
             }
+            else if (value === '') {
+                setHeldVal(value);
+            }
         }
         else {
             props.Setter(__assign(__assign({}, props.Record), (_c = {}, _c[props.Field] = value !== '' ? value : null, _c)));
@@ -77,7 +92,7 @@ function Input(props) {
     var showLabel = props.Label !== "";
     var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
-    return (React.createElement("div", { className: "form-control " + (props.Size === 'large' ? 'form-control-lg' : '') + (props.Size === 'small' ? 'form-control-sm' : ''), style: props.Style },
+    return (React.createElement("div", { className: "form-group " + (props.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.Style },
         showHelpIcon || showLabel ?
             React.createElement("label", null,
                 showLabel ? label : '',
@@ -85,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 }),
+        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("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
 }
 exports.default = Input;

package/package.json

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