@gpa-gemstone/react-forms 1.1.105 → 1.1.106

package/lib/ColorPicker.d.ts

@@ -1,16 +1,7 @@
 import * as React from 'react';
 import { ColorResult } from 'react-color';
-interface IProps<T> {
-    /**
-      * Record to be used in the form
-      * @type {T}
-    */
-    Record: T;
-    /**
-      * Field of the record to be edited
-      * @type {keyof T}
-    */
-    Field: keyof T;
+import { Gemstone } from '@gpa-gemstone/application-typings';
+interface IProps<T> extends Omit<Gemstone.TSX.Interfaces.IBaseFormProps<T>, "Setter"> {
     /**
       * Setter function to update the Record
       * @param record - Updated record of type T
@@ -19,17 +10,11 @@ interface IProps<T> {
     */
     Setter: (record: T, color: ColorResult) => void;
     /**
-      * Label to display for the form, defaults to the Field prop
-      * @type {string}
-      * @optional
-    */
-    Label: string;
-    /**
-      * Flag to disable the input field
-      * @type {boolean}
-      * @optional
+      * Function to determine the validity of a field
+      * @param field - Field of the record to check
+      * @returns {boolean}
     */
-    Disabled?: boolean;
+    Valid?: (field: keyof T) => boolean;
     /**
       * Feedback message to show when input is invalid
       * @type {string}

package/lib/ColorPicker.js

@@ -44,9 +44,13 @@ var styled_components_1 = require("styled-components");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var react_portal_1 = require("react-portal");
 var lodash_1 = require("lodash");
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var ToolTip_1 = require("./ToolTip");
 var WrapperDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 99999;\n    pointer-events: ", ";\n    opacity: ", ";\n    color: currentColor;\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n"], ["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 99999;\n    pointer-events: ", ";\n    opacity: ", ";\n    color: currentColor;\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n"])), function (props) { return props.Show ? 'auto' : 'none'; }, function (props) { return props.Show ? "0.9" : "0"; }, function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); });
 function ColorPicker(props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
+    var guid = React.useState(helper_functions_1.CreateGuid)[0];
+    var _f = React.useState(false), showHelp = _f[0], setShowHelp = _f[1];
     var toolTipRef = React.useRef(null);
     var buttonRef = React.useRef(null);
     var _g = React.useState(0), top = _g[0], setTop = _g[1];
@@ -72,18 +76,27 @@ function ColorPicker(props) {
             setLeft(l);
         }
     });
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { disabled: (_b = props.Disabled) !== null && _b !== void 0 ? _b : false, ref: buttonRef, className: "btn btn-block", "data-tooltip": "color-picker", onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); }, style: props.Style }, (_c = props.Label) !== null && _c !== void 0 ? _c : ""),
-        props.Feedback !== undefined && ((_d = props.Disabled) !== null && _d !== void 0 ? _d : false) ?
-            React.createElement("div", { className: "text-danger" }, props.Feedback) : null,
-        React.createElement(react_portal_1.Portal, null, !((_e = props.Disabled) !== null && _e !== void 0 ? _e : false) ?
+    var label = props.Label === undefined ? props.Field : props.Label;
+    return (React.createElement("div", { className: "form-group ", style: props.Style },
+        props.Help !== undefined || props.Label !== "" ?
+            React.createElement("label", { className: "d-flex align-items-center" },
+                React.createElement("span", null, props.Label !== "" ? label : ''),
+                props.Help !== undefined && (React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
+                    React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
+            : null,
+        props.Help !== undefined ?
+            React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
+            : null,
+        React.createElement("button", { disabled: (_b = props.Disabled) !== null && _b !== void 0 ? _b : false, ref: buttonRef, className: "btn btn-block form-control".concat(props.Valid == null || props.Valid(props.Field) ? '' : ' is-invalid'), "data-tooltip": "color-picker", onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); }, style: __assign(__assign({}, props.Style), { backgroundColor: props.Record[props.Field], color: "#ffffff" }) }, (_c = props.Record[props.Field]) !== null && _c !== void 0 ? _c : ""),
+        React.createElement(react_portal_1.Portal, null, !((_d = props.Disabled) !== null && _d !== void 0 ? _d : false) ?
             React.createElement(WrapperDiv, { className: "popover popover-body border", Show: show, Top: top, Left: left, ref: toolTipRef, onMouseOver: function () { var _a; return ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false) ? {} : setShow(true); }, onMouseOut: function () { return setShow(false); } },
                 React.createElement(react_color_1.BlockPicker, { color: props.Record[props.Field], colors: colors, onChangeComplete: function (updatedColor) {
                         var record = __assign({}, props.Record);
                         record[props.Field] = updatedColor.hex;
                         props.Setter(record, updatedColor);
-                    }, triangle: (_f = props.Triangle) !== null && _f !== void 0 ? _f : 'hide' }))
-            : React.createElement(React.Fragment, null))));
+                    }, triangle: (_e = props.Triangle) !== null && _e !== void 0 ? _e : 'hide' }))
+            : React.createElement(React.Fragment, null)),
+        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
 }
 var GetBestPosition = function (ref, targetTop, targetHeight, targetLeft, targetWidth) {
     if (ref.current === null)

package/lib/FileUpload.d.ts

@@ -6,7 +6,7 @@ interface IProps {
     /**
         * Callback function that will be called when clear button is clicked
     * */
-    OnClearHandler: () => void;
+    OnClearHandler?: () => void;
     /**
         * Attribute used to control what type of files are filtered by default in file explorer
         * @type {string}

package/lib/FileUpload.js

@@ -56,7 +56,8 @@ var FileUpload = function (props) {
         setIsFileUploaded(false);
         setFileName(null);
         setFileSize(null);
-        props.OnClearHandler();
+        if (props.OnClearHandler != null)
+            props.OnClearHandler();
     };
     var setMetaData = function (file) {
         setFileName(file.name);
@@ -76,9 +77,10 @@ var FileUpload = function (props) {
                 React.createElement("label", { style: { cursor: 'pointer' } },
                     React.createElement(gpa_symbols_1.ReactIcons.ShareArrow, { Color: 'var(--info)' }),
                     React.createElement("input", { type: "file", accept: props.FileTypeAttribute, style: { display: 'none' }, onChange: handleFileUpload }))),
-            React.createElement("div", { className: 'col-auto pl-0' },
-                React.createElement("button", { className: 'btn', onClick: handleOnClear },
-                    React.createElement(gpa_symbols_1.ReactIcons.CircledX, { Color: 'red' })))),
+            props.OnClearHandler == null ? React.createElement(React.Fragment, null) :
+                React.createElement("div", { className: 'col-auto pl-0' },
+                    React.createElement("button", { className: 'btn', onClick: handleOnClear },
+                        React.createElement(gpa_symbols_1.ReactIcons.CircledX, { Color: 'var(--danger)' })))),
         uploadStatus === 'error' ?
             React.createElement("div", { className: "alert alert-danger fade show" }, "An error occured while uploading file.")
             : null,

package/lib/MultiSearchableSelect.d.ts

@@ -33,8 +33,10 @@ interface IProps<T> extends Omit<ISearchableSelectProps<T>, 'Valid' | 'Feedback'
     /**
     * Setter function to update the Record
     * @param record - Updated Record
+    * @param index - Index in array field updated
+    * @param selectedOption - Option selected for the update
     */
-    Setter: (record: T, selectedOption?: Gemstone.TSX.Interfaces.ILabelValue<string | number>) => void;
+    Setter: (record: T, index: number, 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,7 +68,7 @@ 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)), { Label: props.DefaultValue.toString(), Value: props.DefaultValue });
+                            return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)), 0, { Label: props.DefaultValue.toString(), Value: props.DefaultValue });
                         } },
                         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))
@@ -81,13 +81,13 @@ function MultiSearchableSelect(props) {
                             var _a;
                             var newArray = __spreadArray([], fieldArray, true);
                             newArray[index] = record[index];
-                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)), option);
+                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)), index, 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 () {
                             var _a;
                             var newRecords = __spreadArray([], fieldArray, true).filter(function (_, i) { return i !== index; });
-                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));
+                            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)), index);
                         } },
                         React.createElement(gpa_symbols_1.ReactIcons.TrashCan, { Color: 'red' }))),
                 index === __spreadArray([], fieldArray, true).length - 1 ?
@@ -95,7 +95,7 @@ function MultiSearchableSelect(props) {
                         React.createElement("button", { className: 'btn', style: ((_f = (((_d = props.DisableAdd) !== null && _d !== void 0 ? _d : false) || ((_e = props.Disabled) !== null && _e !== void 0 ? _e : false))) !== null && _f !== void 0 ? _f : false) ? { display: 'none' } : undefined, onClick: function () {
                                 var _a;
                                 var newRecords = __spreadArray(__spreadArray([], __spreadArray([], fieldArray, true), true), [props.DefaultValue], false);
-                                props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));
+                                props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)), newRecords.length - 1, { Label: props.DefaultValue.toString(), Value: props.DefaultValue });
                             } },
                             React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null)))
                     : null));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.105",
+  "version": "1.1.106",
   "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.91",
+    "@gpa-gemstone/application-typings": "0.0.92",
     "@gpa-gemstone/gpa-symbols": "0.0.57",
-    "@gpa-gemstone/helper-functions": "0.0.50",
+    "@gpa-gemstone/helper-functions": "0.0.51",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",