@gpa-gemstone/react-forms 1.1.85 → 1.1.86

package/lib/FileUpload.js

@@ -78,7 +78,7 @@ var FileUpload = function (props) {
                         "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.85",
+  "version": "1.1.86",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",