@gpa-gemstone/react-forms 1.1.89 → 1.1.91

package/lib/MutliCheckBoxSelect.d.ts

@@ -1,3 +1,8 @@
+interface IOption {
+    Value: number | string;
+    Label: string | JSX.Element;
+    Selected: boolean;
+}
 interface IProps {
     /**
       * Label to display for the form, defaults to the Field prop
@@ -9,22 +14,14 @@ interface IProps {
       * Array of options for the multi-select checkboxe
       * @type {{ Value: number | string; Text: string; Selected: boolean }[]}
     */
-    Options: {
-        Value: number | string;
-        Text: string;
-        Selected: boolean;
-    }[];
+    Options: IOption[];
     /**
       * Function to handle changes in the selection
       * @param evt - The change event
       * @param Options - The updated options array
       * @returns {void}
     */
-    OnChange: (evt: any, Options: {
-        Value: number | string;
-        Text: string;
-        Selected: boolean;
-    }[]) => void;
+    OnChange: (evt: any, Options: IOption[]) => void;
     /**
       * Help message or element to display
       * @type {string | JSX.Element}

package/lib/MutliCheckBoxSelect.js

@@ -108,7 +108,7 @@ var MultiSelect = function (props) {
         ((_a = props.ItemTooltip) !== null && _a !== void 0 ? _a : 'no-tip') !== 'no-tip' ?
             React.createElement(ToolTip_1.default, { Show: showItems, Target: guid, Position: "bottom" },
                 React.createElement("p", null, "Selected Options:"),
-                selectedOptions.slice(0, 10).map(function (opt) { return React.createElement("p", null, opt.Text); }),
+                selectedOptions.slice(0, 10).map(function (opt) { return React.createElement("p", null, opt.Label); }),
                 selectedOptions.length > 10 ? React.createElement("p", null, "and ".concat(selectedOptions.length - 10, " other(s)")) : null)
             : null,
         React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'block', width: 'inherit' } },
@@ -142,6 +142,6 @@ var MultiSelect = function (props) {
                             props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { return props.OnChange(evt, [f]); } },
                                 React.createElement("td", null,
                                     React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: function () { return null; } })),
-                                React.createElement("td", null, f.Text))); }))))))));
+                                React.createElement("td", null, f.Label))); }))))))));
 };
 exports.default = MultiSelect;

package/lib/RadioButtons.d.ts

@@ -1,4 +1,7 @@
 import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IOption extends Gemstone.TSX.Interfaces.ILabelValue<string | number> {
+    Disabled?: boolean;
+}
 interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
         * Position to display radion buttons in
@@ -8,13 +11,9 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     Position?: ('vertical' | 'horizontal');
     /**
         * Options for the radion buttons
-        * @type {{ Value: string | number; Label: string, Disabled?: boolean }[]}
+        * @type {IOption[]}
     */
-    Options: {
-        Value: string | number;
-        Label: string;
-        Disabled?: boolean;
-    }[];
+    Options: IOption[];
 }
 export default function RadioButtons<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/SearchableSelect.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Gemstone } from '@gpa-gemstone/application-typings';
-interface IOption {
-    Value: string | number;
-    Label: string;
+export interface AbortablePromise<T> extends PromiseLike<T> {
+    abort?: () => void;
 }
 interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
@@ -14,9 +13,9 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     /**
     * 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: PromiseLike<IOption[]>, callback?: () => void]}
+    * @returns {AbortablePromise<T>}
     */
-    Search: (search: string) => [PromiseLike<IOption[]>, () => void];
+    Search: (search: string) => AbortablePromise<Gemstone.TSX.Interfaces.ILabelValue<string | number>[]>;
     /**
     * CSS styles to apply to the form group
     * @type {React.CSSProperties}
@@ -29,7 +28,7 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     * @optional
     */
     BtnStyle?: React.CSSProperties;
-    GetLabel?: () => [Promise<string>, () => void];
+    GetLabel?: () => AbortablePromise<string>;
     /**
      * Flag to reset search text to an empty string when a user selects an option. Defaulting to false
      */

package/lib/SearchableSelect.js

@@ -45,23 +45,24 @@ function SearchableSelect(props) {
         }
         else {
             setLoading(true);
-            var _d = props.GetLabel(), handle = _d[0], callback = _d[1];
-            handle.then(function (lab) {
+            var handle_1 = props.GetLabel();
+            handle_1.then(function (lab) {
                 setLabel(lab);
                 setSearch(lab);
                 setLoading(false);
             });
-            return callback;
+            return function () {
+                if ((handle_1 === null || handle_1 === void 0 ? void 0 : handle_1.abort) != null)
+                    handle_1.abort();
+            };
         }
-    }, [props.GetLabel]);
+    }, [props.GetLabel, props.Record[props.Field], props.ResetSearchOnSelect]);
     // Call props.Search every 500ms to avoid hammering the server while typing
     React.useEffect(function () {
         setLoading(true);
         var searchHandle;
-        var searchCallback;
         var timeoutHandle = setTimeout(function () {
-            var _a;
-            _a = props.Search(search), searchHandle = _a[0], searchCallback = _a[1];
+            searchHandle = props.Search(search);
             searchHandle.then(function (d) {
                 setResults(d.map(function (o) { return ({ Value: o.Value, Element: o.Label }); }));
                 setLoading(false);
@@ -70,8 +71,8 @@ function SearchableSelect(props) {
             });
         }, 500);
         return function () {
-            if (searchCallback != null)
-                searchCallback();
+            if ((searchHandle === null || searchHandle === void 0 ? void 0 : searchHandle.abort) != null)
+                searchHandle.abort();
             if (timeoutHandle != null)
                 clearTimeout(timeoutHandle);
         };

package/lib/Select.d.ts

@@ -4,10 +4,7 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
       * Options for the select dropdown
       * @type {{ Value: string; Label: string }[]}
     */
-    Options: {
-        Value: string | number;
-        Label: string;
-    }[];
+    Options: Gemstone.TSX.Interfaces.ILabelValue<string | number>[];
     /**
       * Flag to include an empty option in the select dropdown
       * @type {boolean}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.89",
+  "version": "1.1.91",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,9 +45,9 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/application-typings": "0.0.84",
-    "@gpa-gemstone/gpa-symbols": "0.0.50",
-    "@gpa-gemstone/helper-functions": "0.0.40",
+    "@gpa-gemstone/application-typings": "0.0.86",
+    "@gpa-gemstone/gpa-symbols": "0.0.52",
+    "@gpa-gemstone/helper-functions": "0.0.42",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",