@gpa-gemstone/react-forms 1.1.78 → 1.1.80

package/lib/SearchableSelect.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Gemstone } from '@gpa-gemstone/application-typings';
 interface IOption {
-    Value: string;
+    Value: string | number;
     Label: string;
 }
 interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
@@ -16,7 +16,7 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     * @param search - Search string
     * @returns {[promise: Promise<IOption[]>, callback?: () => void]}
     */
-    Search: (search: string) => [promise: Promise<IOption[]>, callback?: () => void];
+    Search: (search: string) => [Promise<IOption[]>, () => void];
     /**
     * CSS styles to apply to the form group
     * @type {React.CSSProperties}
@@ -27,10 +27,9 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     * CSS style to apply to the button holding the selected value
     * @type {React.CSSProperties}
     * @optional
-    *
     */
     BtnStyle?: React.CSSProperties;
-    SearchLabel?: string;
+    GetLabel?: () => [Promise<string>, () => void];
 }
 export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/SearchableSelect.js

@@ -38,57 +38,71 @@ var React = require("react");
 var StylableSelect_1 = require("./StylableSelect");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function SearchableSelect(props) {
-    var _a, _b, _c;
-    var _d = React.useState((_c = (_b = ((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field])) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ''), search = _d[0], setSearch = _d[1];
-    var _e = React.useState([]), results = _e[0], setResults = _e[1];
-    var _f = React.useState(false), loading = _f[0], setLoading = _f[1];
+    var _a = React.useState(props.Record[props.Field].toString()), search = _a[0], setSearch = _a[1];
+    var _b = React.useState(props.Record[props.Field].toString()), label = _b[0], setLabel = _b[1];
+    var _c = React.useState([]), results = _c[0], setResults = _c[1];
+    var _d = React.useState(false), loading = _d[0], setLoading = _d[1];
+    React.useEffect(function () {
+        if (props.GetLabel === undefined)
+            setLabel(props.Record[props.Field].toString());
+        else {
+            setLoading(true);
+            var _a = props.GetLabel(), handle = _a[0], callback = _a[1];
+            handle.then(function (lab) {
+                setLabel(lab);
+                setSearch(lab);
+                setLoading(false);
+            });
+            return callback;
+        }
+    }, [props.GetLabel]);
     React.useEffect(function () {
         setLoading(true);
-        var _a = props.Search(search), h = _a[0], c = _a[1];
-        h.then(function (d) {
-            setResults(d.map(function (o) { return ({ Value: o.Value, Element: React.createElement("p", null, o.Label) }); }));
+        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);
         });
-        return c;
+        return callback;
     }, [search]);
-    React.useEffect(function () {
-        if (props.SearchLabel == null)
-            return;
-        setSearch(props.SearchLabel);
-    }, [props.SearchLabel]);
+    var handleOnBlur = React.useCallback(function () {
+        setSearch(label);
+    }, [label]);
     var options = React.useMemo(function () {
-        var _a, _b, _c, _d;
+        var _a;
         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: (((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false) ? function () {
-                        var _a;
-                        return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = search, _a)));
-                    } : function () { var _a; return setSearch((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field].toString()); }) }),
+            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 }),
                 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: React.createElement("p", null, (_c = props.SearchLabel) !== null && _c !== void 0 ? _c : props.Record[props.Field]) });
-        if ((_d = props.AllowCustom) !== null && _d !== void 0 ? _d : false)
-            ops.push({ Value: search, Element: React.createElement("p", null, search) });
+        if (!((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false))
+            ops.push({ Value: 'search-' + props.Record[props.Field], Element: label });
+        else
+            ops.push({ Value: search, Element: search });
         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], props.Disabled, loading, props.SearchLabel, results]);
-    var update = React.useCallback(function (record) {
+    }, [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;
-        if (record[props.Field].toString().startsWith('search-')) {
-            var value = record[props.Field].toString().replace('search-', '');
+        var stringVal = record[props.Field].toString();
+        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((_b = props.SearchLabel) !== null && _b !== void 0 ? _b : value);
+            setSearch(newLabel !== null && newLabel !== void 0 ? newLabel : value);
             return;
         }
         props.Setter(record);
-        setSearch((_c = props.SearchLabel) !== null && _c !== void 0 ? _c : record[props.Field].toString());
-    }, [props.Setter, props.Field, props.SearchLabel]);
+        setSearch(newLabel);
+    }, [props.Setter, props.Field, 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.d.ts

@@ -1,13 +1,45 @@
 import * as React from 'react';
-import { Gemstone } from '@gpa-gemstone/application-typings';
 export interface IOption {
     Value: any;
-    Element: React.ReactElement<any>;
+    Element: React.ReactElement<any> | string;
 }
-interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+interface IProps<T> {
     /**
-    * Options for the select dropdown
-    * @type {{  Value: any, Element: React.ReactElement<any> }[]}
+      * Record to be used in form
+      * @type {T}
+    */
+    Record: T;
+    /**
+        * Field of the record to be edited
+        * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+        * Label to display for the form, defaults to the Field prop
+        * @type {string}
+        * @optional
+    */
+    Label?: string;
+    /**
+      * Help message or element to display
+      * @type {string | JSX.Element}
+      * @optional
+    */
+    Help?: string | JSX.Element;
+    /**
+      * Flag to disable the input field
+      * @type {boolean}
+      * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T, option: IOption) => void;
+    /**
+  * Options for the select dropdown
+  * @type {{  Value: any, Element: React.ReactElement<any> }[]}
   */
     Options: IOption[];
     /**

package/lib/StylableSelect.js

@@ -98,7 +98,7 @@ function StylableSelect(props) {
             record[props.Field] = selectedOption.Value;
         else
             record[props.Field] = null;
-        props.Setter(record);
+        props.Setter(record, selectedOption);
     }
     // Effect for initial setup and event listeners.
     React.useEffect(function () {
@@ -145,6 +145,6 @@ function StylableSelect(props) {
                 } },
                 React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
                     React.createElement("tbody", null, props.Options.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
-                        React.createElement("tr", { key: i, onClick: function (evt) { return handleOptionClick(evt, f); } },
+                        React.createElement("tr", { key: i, onMouseDown: function (evt) { return handleOptionClick(evt, f); } },
                             React.createElement("td", null, f.Element))); })))))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.78",
+  "version": "1.1.80",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,7 +45,7 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/application-typings": "0.0.79",
+    "@gpa-gemstone/application-typings": "0.0.80",
     "@gpa-gemstone/gpa-symbols": "0.0.46",
     "@gpa-gemstone/helper-functions": "0.0.37",
     "@types/react": "^17.0.14",