@gpa-gemstone/react-forms 1.1.84 → 1.1.86

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,14 +71,14 @@ 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' },
                         "File Size: ",
                         formatFileSize(fileSize))))
             :
-                React.createElement("div", { className: 'row', onDragOver: handleDragOver, onDrop: handleDrop, style: { border: '2px dashed var(--secondary)' } },
+                React.createElement("div", { className: 'row', onDragOver: handleDragOver, onDrop: handleDrop, style: { border: '2px dashed var(--secondary)', borderRadius: '0.5em' } },
                     React.createElement("div", { className: 'col-12 pt-3 pb-3 d-flex justify-content-center align-items-center' },
                         React.createElement(gpa_symbols_1.ReactIcons.Image, { Size: 100 }),
                         React.createElement("span", null, "Drag and Drop")))));

package/lib/SearchableSelect.d.ts

@@ -12,11 +12,11 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     */
     AllowCustom?: boolean;
     /**
-    * Function to perform a search and return a promise with a list of IOption and an optional callback
+    * Function to perform a search and return a promiselike object with a list of IOption and an optional callback
     * @param search - Search string
-    * @returns {[promise: Promise<IOption[]>, callback?: () => void]}
+    * @returns {[promise: PromiseLike<IOption[]>, callback?: () => void]}
     */
-    Search: (search: string) => [Promise<IOption[]>, () => void];
+    Search: (search: string) => [PromiseLike<IOption[]>, () => void];
     /**
     * CSS styles to apply to the form group
     * @type {React.CSSProperties}

package/lib/SearchableSelect.js

@@ -21,17 +21,6 @@
 //       Generated original version of source code.
 //
 // ******************************************************************************************************
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SearchableSelect;
 var React = require("react");
@@ -58,54 +47,57 @@ function SearchableSelect(props) {
             return callback;
         }
     }, [props.GetLabel]);
+    // Call props.Search every 500ms to avoid hammering the server while typing
     React.useEffect(function () {
         setLoading(true);
-        var _a = props.Search(search), handle = _a[0], callback = _a[1];
-        handle.then(function (d) {
-            setResults(d.map(function (o) { return ({ Value: o.Value, Element: o.Label }); }));
-            setLoading(false);
-        }).catch(function () { return setLoading(false); });
-        return callback;
+        var searchHandle;
+        var searchCallback;
+        var timeoutHandle = setTimeout(function () {
+            var _a;
+            _a = props.Search(search), searchHandle = _a[0], searchCallback = _a[1];
+            searchHandle.then(function (d) {
+                setResults(d.map(function (o) { return ({ Value: o.Value, Element: o.Label }); }));
+                setLoading(false);
+            }, function () {
+                setLoading(false);
+            });
+        }, 500);
+        return function () {
+            if (searchCallback != null)
+                searchCallback();
+            if (timeoutHandle != null)
+                clearTimeout(timeoutHandle);
+        };
     }, [search]);
-    var handleOnBlur = React.useCallback(function () {
-        setSearch(label);
-    }, [label]);
+    var update = React.useCallback(function (record, selectedOption) {
+        var _a, _b;
+        var stringVal = (_b = (_a = record[props.Field]) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
+        var newLabel = stringVal;
+        if (!React.isValidElement(selectedOption.Element))
+            newLabel = selectedOption.Element;
+        setLabel(newLabel);
+        props.Setter(record);
+        setSearch(newLabel);
+    }, [props.Setter, props.Field, label]);
     var options = React.useMemo(function () {
         var _a, _b;
         var ops = [];
         ops.push({
             Value: props.Record[props.Field],
             Element: React.createElement("div", { className: 'input-group' },
-                React.createElement("input", { type: "text", className: "form-control", value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: handleOnBlur, disabled: (_a = props.Disabled) !== null && _a !== void 0 ? _a : false }),
+                React.createElement("input", { type: "text", className: "form-control", value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: function () { return setSearch(label); }, onClick: function (evt) { evt.preventDefault(); evt.stopPropagation(); }, disabled: (_a = props.Disabled) !== null && _a !== void 0 ? _a : false }),
                 loading ?
                     React.createElement("div", { className: "input-group-append" },
                         React.createElement("span", { className: "input-group-text" },
                             React.createElement(gpa_symbols_1.ReactIcons.SpiningIcon, null)))
                     : null)
         });
-        if (!((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false))
-            ops.push({ Value: 'search-' + props.Record[props.Field], Element: label });
-        else
-            ops.push({ Value: search, Element: search });
+        if ((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false)
+            -ops.push({ Value: search, Element: React.createElement(React.Fragment, null,
+                    search,
+                    " (Entered Value)") });
         ops.push.apply(ops, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
         return ops;
-    }, [search, props.Record[props.Field], results, props.Disabled, loading, label, props.AllowCustom, handleOnBlur]);
-    var update = React.useCallback(function (record, selectedOption) {
-        var _a;
-        var _b, _c;
-        var stringVal = (_c = (_b = record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : '';
-        var newLabel = stringVal;
-        if (!React.isValidElement(selectedOption.Element))
-            newLabel = selectedOption.Element;
-        setLabel(newLabel);
-        if (stringVal.startsWith('search-')) {
-            var value = stringVal.replace('search-', '');
-            props.Setter(__assign(__assign({}, record), (_a = {}, _a[props.Field] = value, _a)));
-            setSearch(newLabel !== null && newLabel !== void 0 ? newLabel : value);
-            return;
-        }
-        props.Setter(record);
-        setSearch(newLabel);
-    }, [props.Setter, props.Field, label]);
+    }, [search, props.Record[props.Field], results, props.Disabled, loading, label]);
     return React.createElement(StylableSelect_1.default, { Record: props.Record, Field: props.Field, Setter: update, Label: props.Label, Disabled: props.Disabled, Help: props.Help, Style: props.Style, Options: options, BtnStyle: props.BtnStyle });
 }

package/lib/StylableSelect.js

@@ -121,7 +121,7 @@ function StylableSelect(props) {
     var showLabel = props.Label !== "";
     var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
-    return (React.createElement("div", { ref: stylableSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
+    return (React.createElement("div", { ref: stylableSelect, className: "form-group", style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
         showHelpIcon || showLabel ?
             React.createElement("label", { className: "d-flex align-items-center" },
                 React.createElement("span", null, showLabel ? label : ''),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.84",
+  "version": "1.1.86",
   "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",