@gpa-gemstone/react-forms 1.1.79 → 1.1.81

package/lib/FileUpload.js

@@ -62,11 +62,11 @@ var FileUpload = function (props) {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: 'row' },
-            React.createElement("div", { className: 'col-auto mt-2' },
+            React.createElement("div", { className: 'col-auto mt-2 pl-0' },
                 React.createElement("label", { style: { cursor: 'pointer' } },
                     React.createElement(gpa_symbols_1.ReactIcons.ShareArrow, { Color: 'var(--info)' }),
                     React.createElement("input", { type: "file", onChange: handleFileUpload, accept: props.FileTypeAttribute, style: { display: 'none' } }))),
-            React.createElement("div", { className: 'col-auto' },
+            React.createElement("div", { className: 'col-auto pl-0' },
                 React.createElement("button", { className: 'btn', onClick: handleOnClear },
                     React.createElement(gpa_symbols_1.ReactIcons.CircledX, { Color: 'red' })))),
         isFileUpload ?

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> {
@@ -29,12 +29,7 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     * @optional
     */
     BtnStyle?: React.CSSProperties;
-    /**
-    * Custom label to display instead of the default record[field] value. Useful when having a field like an ID.
-    * @type {string}
-    * @optional
-    */
-    SearchLabel?: string;
+    GetLabel?: () => [Promise<string>, () => void];
 }
 export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/SearchableSelect.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.79",
+  "version": "1.1.81",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,8 +45,8 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/application-typings": "0.0.80",
-    "@gpa-gemstone/gpa-symbols": "0.0.46",
+    "@gpa-gemstone/application-typings": "0.0.81",
+    "@gpa-gemstone/gpa-symbols": "0.0.47",
     "@gpa-gemstone/helper-functions": "0.0.37",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",