@gpa-gemstone/react-forms 1.1.84 → 1.1.85

package/lib/DatePicker.js

@@ -44,6 +44,11 @@ var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
  * Component that allows a user to pick a date or datetime.
 */
 function DateTimePicker(props) {
+    var inputRef = React.useRef(null);
+    var width = (0, helper_functions_1.useGetContainerPosition)(inputRef).width;
+    var _a = React.useState(false), isTextOverflowing = _a[0], setIsTextOverflowing = _a[1];
+    var _b = React.useState(false), isInputHovered = _b[0], setIsInputHovered = _b[1];
+    var overflowGUID = React.useState((0, helper_functions_1.CreateGuid)())[0];
     // Formats for displaying dates in the input box and storing in the record.
     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]");
@@ -51,15 +56,15 @@ function DateTimePicker(props) {
     var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
     // State and ref declarations.
     var divRef = React.useRef(null);
-    var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
+    var helpGuid = React.useState((0, helper_functions_1.CreateGuid)())[0];
+    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 _b = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _b[0], setBoxRecord = _b[1];
-    var _c = React.useState(parse(props.Record)), pickerRecord = _c[0], setPickerRecord = _c[1];
-    var _d = React.useState(""), feedbackMessage = _d[0], setFeedbackMessage = _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(""), feedbackMessage = _f[0], setFeedbackMessage = _f[1];
+    var _g = React.useState(false), showOverlay = _g[0], setShowOverlay = _g[1];
+    var _h = React.useState(0), top = _h[0], setTop = _h[1];
+    var _j = React.useState(0), left = _j[0], setLeft = _j[1];
     var allowNull = React.useMemo(function () { var _a; return (_a = props.AllowEmpty) !== null && _a !== void 0 ? _a : false; }, [props.AllowEmpty]);
     React.useEffect(function () {
         if (props.Record[props.Field] !== null) {
@@ -128,35 +133,6 @@ function DateTimePicker(props) {
             }
         }
     }
-    function getBoxFormat(type, accuracy) {
-        var dateTime = type !== null && type !== void 0 ? type : 'date';
-        var timeUnit = accuracy !== null && accuracy !== void 0 ? accuracy : 'second';
-        if (dateTime === 'time') {
-            if (timeUnit === 'minute') {
-                return "HH:mm";
-            }
-            else if (timeUnit === 'second') {
-                return "HH:mm:ss";
-            }
-            else {
-                return "HH:mm:ss.SSS";
-            }
-        }
-        else if (dateTime === 'datetime-local') {
-            if (timeUnit === 'minute') {
-                return "YYYY-MM-DD[T]HH:mm";
-            }
-            else if (timeUnit === 'second') {
-                return "YYYY-MM-DD[T]HH:mm:ss";
-            }
-            else {
-                return "YYYY-MM-DD[T]HH:mm:ss.SSS";
-            }
-        }
-        else {
-            return "YYYY-MM-DD";
-        }
-    }
     function getFeedbackMessage() {
         if (feedbackMessage.length != 0) {
             return feedbackMessage;
@@ -214,23 +190,80 @@ function DateTimePicker(props) {
         }
         setBoxRecord(value);
     }
+    React.useEffect(function () {
+        if (inputRef.current == null)
+            return;
+        var inputWidth = getInputWidth(inputRef.current, boxRecord, step);
+        setIsTextOverflowing(inputWidth > width);
+    }, [width, boxRecord, step]);
     return (React.createElement("div", { className: "form-group", ref: divRef },
         showHelpIcon || showLabel ?
             React.createElement("label", { className: "d-flex align-items-center" },
                 React.createElement("span", null, showLabel ? label : ''),
-                showHelpIcon && (React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
+                showHelpIcon && (React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": helpGuid },
                     React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
             : null,
         showHelpIcon ?
-            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: helpGuid, Class: "info", Position: "bottom" }, props.Help)
             : null,
         React.createElement("input", { className: "gpa-gemstone-datetime form-control ".concat(IsValid() ? '' : 'is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
                 valueChange(evt.target.value);
-            }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step }),
+            }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step, ref: inputRef, "data-tooltip": overflowGUID, onMouseOver: function () { return setIsInputHovered(true); }, onMouseOut: function () { return setIsInputHovered(false); } }),
         React.createElement("div", { className: "invalid-feedback" }, getFeedbackMessage()),
+        React.createElement(ToolTip_1.default, { Show: isTextOverflowing && isInputHovered, Target: overflowGUID }, props.Format != null ? moment(boxRecord).format(props.Format) : boxRecord),
         React.createElement(DateTimePopup_1.default, { Setter: function (d) {
                 setPickerAndRecord(d);
                 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 })));
 }
+function getBoxFormat(type, accuracy) {
+    var dateTime = type !== null && type !== void 0 ? type : 'date';
+    var timeUnit = accuracy !== null && accuracy !== void 0 ? accuracy : 'second';
+    if (dateTime === 'time') {
+        if (timeUnit === 'minute') {
+            return "HH:mm";
+        }
+        else if (timeUnit === 'second') {
+            return "HH:mm:ss";
+        }
+        else {
+            return "HH:mm:ss.SSS";
+        }
+    }
+    else if (dateTime === 'datetime-local') {
+        if (timeUnit === 'minute') {
+            return "YYYY-MM-DD[T]HH:mm";
+        }
+        else if (timeUnit === 'second') {
+            return "YYYY-MM-DD[T]HH:mm:ss";
+        }
+        else {
+            return "YYYY-MM-DD[T]HH:mm:ss.SSS";
+        }
+    }
+    else {
+        return "YYYY-MM-DD";
+    }
+}
+var getInputWidth = function (inputRef, currentValue, currentStep) {
+    var computedStyle = window.getComputedStyle(inputRef);
+    var dummyInput = document.createElement('input');
+    dummyInput.type = inputRef.type;
+    dummyInput.value = currentValue;
+    dummyInput.step = currentStep;
+    dummyInput.style.font = computedStyle.font;
+    dummyInput.style.fontSize = computedStyle.fontSize;
+    dummyInput.style.fontFamily = computedStyle.fontFamily;
+    dummyInput.style.fontWeight = computedStyle.fontWeight;
+    dummyInput.style.letterSpacing = computedStyle.letterSpacing;
+    dummyInput.style.whiteSpace = 'nowrap';
+    // Position it off-screen and hide it so it doesn't affect layout
+    dummyInput.style.position = 'absolute';
+    dummyInput.style.visibility = 'hidden';
+    document.body.appendChild(dummyInput);
+    var width = dummyInput.getBoundingClientRect().width;
+    // Clean up
+    document.body.removeChild(dummyInput);
+    return width;
+};

package/lib/FileUpload.js

@@ -71,7 +71,7 @@ var FileUpload = function (props) {
                     React.createElement(gpa_symbols_1.ReactIcons.CircledX, { Color: 'red' })))),
         isFileUpload ?
             React.createElement(React.Fragment, null,
-                React.createElement("div", { className: 'row align-items-center justify-content-center', style: { border: '2px dashed var(--secondary)' } },
+                React.createElement("div", { className: 'row align-items-center justify-content-center', style: { border: '2px dashed var(--secondary)', borderRadius: '0.5em' } },
                     React.createElement("div", { className: 'col-auto' },
                         "File Name: ", fileName !== null && fileName !== void 0 ? fileName : ''),
                     React.createElement("div", { className: 'col-auto' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.84",
+  "version": "1.1.85",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -47,7 +47,7 @@
   "dependencies":   {
     "@gpa-gemstone/application-typings": "0.0.83",
     "@gpa-gemstone/gpa-symbols": "0.0.49",
-    "@gpa-gemstone/helper-functions": "0.0.38",
+    "@gpa-gemstone/helper-functions": "0.0.39",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",