@gpa-gemstone/react-forms 1.1.99 → 1.1.100

package/lib/MultiSearchableSelect.d.ts

@@ -1,6 +1,6 @@
 import { IProps as ISearchableSelectProps } from './SearchableSelect';
 import { Gemstone } from '@gpa-gemstone/application-typings';
-interface IProps<T> extends Omit<ISearchableSelectProps<T>, 'Valid' | 'Feedback' | 'GetLabel'> {
+interface IProps<T> extends Omit<ISearchableSelectProps<T>, 'Valid' | 'Feedback' | 'GetLabel' | 'Setter'> {
     /**
       * Default value to use when adding an item and when value is null
       * @type {number}
@@ -30,6 +30,11 @@ interface IProps<T> extends Omit<ISearchableSelectProps<T>, 'Valid' | 'Feedback'
      * Flag to disable all input fields
      */
     Disabled?: boolean;
+    /**
+    * Setter function to update the Record
+    * @param record - Updated Record
+    */
+    Setter: (record: T, selectedOption?: Gemstone.TSX.Interfaces.ILabelValue<string | number>) => void;
 }
 declare function MultiSearchableSelect<T>(props: IProps<T>): JSX.Element;
 export default MultiSearchableSelect;

package/lib/MultiSearchableSelect.js

@@ -68,22 +68,20 @@ function MultiSearchableSelect(props) {
                         : null,
                     React.createElement("button", { className: 'btn', onClick: function () {
                             var _a;
-                            return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)));
+                            return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)), { Label: props.DefaultValue.toString(), Value: props.DefaultValue });
                         } },
-                        " ",
-                        React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null),
-                        " ")),
+                        React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null))),
                 React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "top" }, props.Help))
             : null,
         fieldArray.map(function (r, index) {
             var _a, _b, _c, _d, _e, _f;
             return (React.createElement("div", { className: 'row align-items-center', key: index },
                 React.createElement("div", { className: 'col-10' },
-                    React.createElement(SearchableSelect_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', Help: index === 0 ? props.Help : undefined, Feedback: (_b = (_a = props.ItemFeedback) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : undefined, Valid: function () { var _a, _b; return (_b = (_a = props.ItemValid) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : true; }, Style: props.Style, Disabled: props.Disabled, Setter: function (record) {
+                    React.createElement(SearchableSelect_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', Help: index === 0 ? props.Help : undefined, Feedback: (_b = (_a = props.ItemFeedback) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : undefined, Valid: function () { var _a, _b; return (_b = (_a = props.ItemValid) === null || _a === void 0 ? void 0 : _a.call(props, r, index, fieldArray)) !== null && _b !== void 0 ? _b : true; }, Style: props.Style, Disabled: props.Disabled, Setter: function (record, option) {
                             var _a;
                             var newArray = __spreadArray([], fieldArray, true);
                             newArray[index] = record[index];
-                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)));
+                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)), option);
                         }, Search: props.Search, BtnStyle: props.BtnStyle, GetLabel: props.GetLabel != null ? function () { return props.GetLabel(fieldArray[index], index); } : undefined, ResetSearchOnSelect: props.ResetSearchOnSelect, AllowCustom: props.AllowCustom })),
                 React.createElement("div", { className: "col-".concat(index === __spreadArray([], fieldArray, true).length - 1 ? 1 : 2, " ").concat(index === 0 ? 'd-flex align-items-center' : '') },
                     React.createElement("button", { className: 'btn', style: ((_c = props.Disabled) !== null && _c !== void 0 ? _c : false) ? { display: 'none' } : undefined, onClick: function () {

package/lib/SearchableSelect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Gemstone } from '@gpa-gemstone/application-typings';
-export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+export interface IProps<T> extends Omit<Gemstone.TSX.Interfaces.IBaseFormProps<T>, 'Setter'> {
     /**
     * Function to determine the validity of a field
     * @param field - Field of the record to check
@@ -42,5 +42,10 @@ export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
      * Flag to reset search text to an empty string when a user selects an option or when the element loses focus. Defaulting to false
      */
     ResetSearchOnSelect?: boolean;
+    /**
+    * Setter function to update the Record
+    * @param record - Updated Record
+    */
+    Setter: (record: T, selectedOption: Gemstone.TSX.Interfaces.ILabelValue<string | number>) => void;
 }
 export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;

package/lib/SearchableSelect.js

@@ -35,7 +35,7 @@ function SearchableSelect(props) {
     var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
     var setter = React.useCallback(function (record, selectedOption) {
         handleSetSearch(selectedOption);
-        props.Setter(record);
+        props.Setter(record, { Label: selectedOption.Element, Value: selectedOption.Value }); //we know Element is a string as we set this ourselves
     }, [props.Setter, props.Field]);
     var handleSetSearch = React.useCallback(function (selectedOption) {
         var _a, _b, _c;

package/lib/Select.d.ts

@@ -1,5 +1,5 @@
 import { Gemstone } from '@gpa-gemstone/application-typings';
-interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+interface IProps<T> extends Omit<Gemstone.TSX.Interfaces.IBaseFormProps<T>, 'Setter'> {
     /**
       * Options for the select dropdown
       * @type {{ Value: string; Label: string }[]}
@@ -17,6 +17,11 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
       * @optional
     */
     EmptyLabel?: string;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T, selectedOption: Gemstone.TSX.Interfaces.ILabelValue<string | number>) => void;
 }
 export default function Select<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/Select.js

@@ -49,13 +49,14 @@ function Select(props) {
         var _a;
         var currentValue = GetRecordValue();
         if (!((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) && props.Options.length > 0 && props.Options.findIndex(function (option) { return option.Value == currentValue; }) === -1) {
-            SetRecord(props.Options[0].Value);
+            var option = props.Options[0];
+            SetRecord(option.Value, option);
             // tslint:disable-next-line
             console.warn("The current value is not available as an option. Specify EmptyOption=true if the value should be allowed.");
         }
     }, [props.Options]);
     // Update the parent component's state with the new value.
-    function SetRecord(value) {
+    function SetRecord(value, option) {
         var _a, _b;
         var record = __assign({}, props.Record);
         if (value !== '') {
@@ -65,7 +66,7 @@ function Select(props) {
         else
             record[props.Field] = null;
         if (record[props.Field] != props.Record[props.Field])
-            props.Setter(record);
+            props.Setter(record, option);
     }
     // Rretrieve the current value of the select field from the record.
     function GetRecordValue() {
@@ -85,7 +86,11 @@ function Select(props) {
         showHelpIcon ?
             React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
             : null,
-        React.createElement("select", { className: "form-control", onChange: function (evt) { return SetRecord(evt.target.value); }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },
+        React.createElement("select", { className: "form-control", onChange: function (evt) {
+                var val = evt.target.value;
+                var option = props.Options.find(function (op) { return op.Value == val; });
+                SetRecord(val, option);
+            }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },
             ((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) ? React.createElement("option", { value: "" }, props.EmptyLabel !== undefined ? props.EmptyLabel : '') : null,
             props.Options.map(function (a, i) { return (React.createElement("option", { key: i, value: a.Value }, a.Label)); }))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.99",
+  "version": "1.1.100",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -46,7 +46,7 @@
   },
   "dependencies":   {
     "@gpa-gemstone/application-typings": "0.0.88",
-    "@gpa-gemstone/gpa-symbols": "0.0.55",
+    "@gpa-gemstone/gpa-symbols": "0.0.56",
     "@gpa-gemstone/helper-functions": "0.0.46",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",