@gpa-gemstone/react-forms 1.1.64 → 1.1.66

package/lib/RadioButtons.d.ts

@@ -1,14 +1,45 @@
 interface IProps<T> {
+    /**
+        * Record to be used in form
+        * @type {T}
+    */
     Record: T;
+    /**
+        * Field of the record to be edited
+        * @type {keyof T}
+    */
     Field: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
     Setter: (record: T) => void;
+    /**
+        * Help message or element to display
+        * @type {string | JSX.Element}
+        * @optional
+    */
     Help?: string | JSX.Element;
+    /**
+        * Position to display radion buttons in
+        * @type {'vertical' | 'horizontal'}
+        * @optional
+    */
     Position?: ('vertical' | 'horizontal');
+    /**
+        * Options for the radion buttons
+        * @type {{ Value: string | number; Label: string, Disabled?: boolean }[]}
+    */
     Options: {
-        Value: string;
+        Value: string | number;
         Label: string;
         Disabled?: boolean;
     }[];
+    /**
+        * Label to display for the form, defaults to the Field prop
+        * @type {string}
+        * @optional
+    */
     Label?: string;
 }
 export default function RadioButtons<T>(props: IProps<T>): JSX.Element;

package/lib/Select.d.ts

@@ -14,7 +14,7 @@ interface IProps<T> {
       * @type {{ Value: string; Label: string }[]}
     */
     Options: {
-        Value: string;
+        Value: string | number;
         Label: string;
     }[];
     /**

package/lib/Select.js

@@ -51,7 +51,7 @@ function Select(props) {
     React.useEffect(function () {
         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) {
+        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);
             // tslint:disable-next-line
             console.warn("The current value is not available as an option. Specify EmptyOption=true if the value should be allowed.");
@@ -59,23 +59,31 @@ function Select(props) {
     }, [props.Options]);
     // Update the parent component's state with the new value.
     function SetRecord(value) {
+        var _a, _b;
         var record = __assign({}, props.Record);
-        if (value !== '')
-            record[props.Field] = value;
+        if (value !== '') {
+            var val = (_b = (_a = props.Options.find(function (op) { return op.Value == value; })) === null || _a === void 0 ? void 0 : _a.Value) !== null && _b !== void 0 ? _b : value;
+            record[props.Field] = val;
+        }
         else
             record[props.Field] = null;
-        props.Setter(record);
+        if (record[props.Field] != props.Record[props.Field])
+            props.Setter(record);
     }
     // Rretrieve the current value of the select field from the record.
     function GetRecordValue() {
-        return props.Record[props.Field] == null ? '' : props.Record[props.Field].toString();
+        return props.Record[props.Field] == null ? '' : props.Record[props.Field];
     }
+    // Variables to control the rendering of label and help icon.
+    var showLabel = props.Label !== "";
+    var showHelpIcon = props.Help !== undefined;
+    var label = props.Label === undefined ? props.Field : props.Label;
     return (React.createElement("div", { className: "form-group" },
-        (props.Label !== "") ?
+        showHelpIcon || showLabel ?
             React.createElement("label", null,
-                props.Label === undefined ? props.Field : props.Label,
-                props.Help !== undefined ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
-        props.Help !== undefined ?
+                showLabel ? label : '',
+                showHelpIcon ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
+        showHelpIcon ?
             React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
             : null,
         React.createElement("select", { "data-help": guid, className: "form-control", onChange: function (evt) { return SetRecord(evt.target.value); }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.64",
+  "version": "1.1.66",
   "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.72",
+    "@gpa-gemstone/application-typings": "0.0.73",
     "@gpa-gemstone/helper-functions": "0.0.32",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",