@gpa-gemstone/react-forms 1.1.92 → 1.1.93

package/lib/FileUpload.d.ts

@@ -2,7 +2,7 @@ interface IProps {
     /**
         * Callback function that will be called when a file is uploaded
     * */
-    OnLoadHandler: (result: File) => void;
+    OnLoadHandler: (result: File) => Promise<any>;
     /**
         * Callback function that will be called when clear button is clicked
     * */

package/lib/FileUpload.js

@@ -28,9 +28,12 @@ var FileUpload = function (props) {
     var _a = React.useState(null), fileName = _a[0], setFileName = _a[1];
     var _b = React.useState(null), fileSize = _b[0], setFileSize = _b[1];
     var _c = React.useState(false), isFileUpload = _c[0], setIsFileUploaded = _c[1];
+    var _d = React.useState('unintiated'), uploadStatus = _d[0], setUploadStatus = _d[1];
     var handleFileUpload = function (evt) {
-        if (evt.target == null || evt.target.files == null || evt.target.files.length === 0)
+        if (evt.target == null || evt.target.files == null || evt.target.files.length === 0) {
+            setUploadStatus('unintiated');
             return;
+        }
         var file = evt.target.files[0];
         setMetaData(file);
     };
@@ -49,6 +52,7 @@ var FileUpload = function (props) {
         e.stopPropagation();
     };
     var handleOnClear = function () {
+        setUploadStatus('unintiated');
         setIsFileUploaded(false);
         setFileName(null);
         setFileSize(null);
@@ -57,31 +61,42 @@ var FileUpload = function (props) {
     var setMetaData = function (file) {
         setFileName(file.name);
         setFileSize(file.size);
-        props.OnLoadHandler(file);
-        setIsFileUploaded(true);
+        setUploadStatus('loading');
+        props.OnLoadHandler(file).then(function () {
+            setIsFileUploaded(true);
+            setUploadStatus('idle');
+        }).catch(function () {
+            setIsFileUploaded(false);
+            setUploadStatus('error');
+        });
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: 'row' },
             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("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' })))),
-        isFileUpload ?
-            React.createElement(React.Fragment, null,
-                React.createElement("div", { className: 'row align-items-center justify-content-center', style: { border: '2px dashed var(--secondary)', borderRadius: '0.5em' } },
-                    React.createElement("div", { className: 'col-auto' },
-                        "File Name: ", fileName !== null && fileName !== void 0 ? fileName : ''),
-                    React.createElement("div", { className: 'col-auto' },
-                        "File Size: ",
-                        formatFileSize(fileSize))))
+        uploadStatus === 'error' ?
+            React.createElement("div", { className: "alert alert-danger fade show" }, "An error occured while uploading file.")
+            : null,
+        React.createElement("div", { className: 'row', onDragOver: handleDragOver, onDrop: handleDrop, style: { border: '2px dashed var(--secondary)', borderRadius: '0.5em' } }, uploadStatus === 'loading' ?
+            React.createElement("div", { className: 'd-flex col-12 align-items-center justify-content-center' },
+                React.createElement(gpa_symbols_1.ReactIcons.SpiningIcon, { Size: 200 }))
             :
-                React.createElement("div", { className: 'row', onDragOver: handleDragOver, onDrop: handleDrop, style: { border: '2px dashed var(--secondary)', borderRadius: '0.5em' } },
-                    React.createElement("div", { className: 'col-12 pt-3 pb-3 d-flex justify-content-center align-items-center' },
-                        React.createElement(gpa_symbols_1.ReactIcons.Image, { Size: 100 }),
-                        React.createElement("span", null, "Drag and Drop")))));
+                isFileUpload ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: 'col-auto' },
+                            "File Name: ", fileName !== null && fileName !== void 0 ? fileName : ''),
+                        React.createElement("div", { className: 'col-auto' },
+                            "File Size: ",
+                            formatFileSize(fileSize)))
+                    :
+                        React.createElement("div", { className: 'col-12 pt-3 pb-3 d-flex justify-content-center align-items-center' },
+                            React.createElement(gpa_symbols_1.ReactIcons.Image, { Size: 100 }),
+                            React.createElement("span", null, "Drag and Drop")))));
 };
 //Helper Functions
 var formatFileSize = function (size) {

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.Label); }),
+                selectedOptions.slice(0, 10).map(function (opt, i) { return React.createElement("p", { key: i }, 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' } },

package/lib/SearchableSelect.d.ts

@@ -4,6 +4,18 @@ export interface AbortablePromise<T> extends PromiseLike<T> {
     abort?: () => void;
 }
 interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+    /**
+    * Function to determine the validity of a field
+    * @param field - Field of the record to check
+    * @returns {boolean}
+    */
+    Valid?: (field: keyof T) => boolean;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
     /**
     * Flag to allow custom input values
     * @type {boolean}
@@ -30,7 +42,7 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
     BtnStyle?: React.CSSProperties;
     GetLabel?: () => AbortablePromise<string>;
     /**
-     * Flag to reset search text to an empty string when a user selects an option. Defaulting to false
+     * 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;
 }

package/lib/SearchableSelect.js

@@ -30,33 +30,35 @@ var getInitialSearchText = function (useBlankString, recordValue) {
     return useBlankString ? '' : recordValue;
 };
 function SearchableSelect(props) {
-    var _a, _b;
-    var _c = React.useState(function () { var _a, _b, _c; return getInitialSearchText((_a = props.ResetSearchOnSelect) !== null && _a !== void 0 ? _a : false, (_c = (_b = props.Record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ''); }), search = _c[0], setSearch = _c[1];
-    var _d = React.useState((_b = (_a = props.Record[props.Field]) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''), label = _d[0], setLabel = _d[1];
-    var _e = React.useState([]), results = _e[0], setResults = _e[1];
-    var _f = React.useState(false), loading = _f[0], setLoading = _f[1];
-    React.useEffect(function () {
+    var _a = React.useState(function () { var _a, _b, _c; return getInitialSearchText((_a = props.ResetSearchOnSelect) !== null && _a !== void 0 ? _a : false, (_c = (_b = props.Record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ''); }), search = _a[0], setSearch = _a[1];
+    var _b = React.useState([]), searchOptions = _b[0], setSearchOptions = _b[1];
+    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, props.Field]);
+    var handleSetSearch = React.useCallback(function (selectedOption) {
         var _a, _b, _c;
-        if (props.GetLabel === undefined) {
-            if ((_a = props.ResetSearchOnSelect) !== null && _a !== void 0 ? _a : false)
-                setSearch('');
-            else
-                setLabel((_c = (_b = props.Record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : '');
+        if ((_a = props.ResetSearchOnSelect) !== null && _a !== void 0 ? _a : false) {
+            setSearch('');
+            return;
         }
-        else {
-            setLoading(true);
-            var handle_1 = props.GetLabel();
-            handle_1.then(function (lab) {
-                setLabel(lab);
-                setSearch(lab);
-                setLoading(false);
-            });
-            return function () {
-                if ((handle_1 === null || handle_1 === void 0 ? void 0 : handle_1.abort) != null)
-                    handle_1.abort();
-            };
+        if (props.GetLabel === undefined) {
+            var newSearch = (_c = selectedOption !== null && selectedOption !== void 0 ? selectedOption : (_b = props.Record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : '';
+            setSearch(newSearch);
+            return;
         }
-    }, [props.GetLabel, props.Record[props.Field], props.ResetSearchOnSelect]);
+        setLoading(true);
+        var handle = props.GetLabel();
+        handle.then(function (lab) {
+            setSearch(lab);
+            setLoading(false);
+        }, function () { return setLoading(false); });
+    }, [props.ResetSearchOnSelect, props.GetLabel, props.Record[props.Field]]);
+    //Effect to set search when props.Record[props.Field] changes externally
+    React.useEffect(function () {
+        handleSetSearch();
+    }, [props.Record[props.Field], handleSetSearch]);
     // Call props.Search every 500ms to avoid hammering the server while typing
     React.useEffect(function () {
         setLoading(true);
@@ -64,7 +66,7 @@ function SearchableSelect(props) {
         var timeoutHandle = setTimeout(function () {
             searchHandle = props.Search(search);
             searchHandle.then(function (d) {
-                setResults(d.map(function (o) { return ({ Value: o.Value, Element: o.Label }); }));
+                setSearchOptions(d.map(function (o) { return ({ Value: o.Value, Element: o.Label }); }));
                 setLoading(false);
             }, function () {
                 setLoading(false);
@@ -77,38 +79,25 @@ function SearchableSelect(props) {
                 clearTimeout(timeoutHandle);
         };
     }, [search]);
-    var update = React.useCallback(function (record, selectedOption) {
-        var _a, _b, _c;
-        var stringVal = (_b = (_a = record[props.Field]) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-        var newLabel = stringVal;
-        if (!React.isValidElement(selectedOption.Element))
-            newLabel = selectedOption.Element;
-        setLabel(newLabel);
-        props.Setter(record);
-        if ((_c = props.ResetSearchOnSelect) !== null && _c !== void 0 ? _c : false)
-            setSearch('');
-        else
-            setSearch(newLabel);
-    }, [props.Setter, props.Field, label]);
     var options = React.useMemo(function () {
-        var _a, _b;
+        var _a, _b, _c, _d;
         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: function () { return setSearch(label); }, onClick: function (evt) { evt.preventDefault(); evt.stopPropagation(); }, disabled: (_a = props.Disabled) !== null && _a !== void 0 ? _a : false }),
+                React.createElement("input", { type: "text", className: "form-control ".concat(((_b = (_a = props.Valid) === null || _a === void 0 ? void 0 : _a.call(props, props.Field)) !== null && _b !== void 0 ? _b : true) ? '' : 'border-danger'), value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: function () { return handleSetSearch(); }, onClick: function (evt) { evt.preventDefault(); evt.stopPropagation(); }, disabled: (_c = props.Disabled) !== null && _c !== void 0 ? _c : 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 ((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false)
+        if ((_d = props.AllowCustom) !== null && _d !== void 0 ? _d : false)
             ops.push({ Value: search, Element: React.createElement(React.Fragment, null,
                     search,
                     " (Entered Value)") });
-        ops.push.apply(ops, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
+        ops.push.apply(ops, searchOptions.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
         return ops;
-    }, [search, props.Record[props.Field], results, props.Disabled, loading, 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 });
+    }, [search, props.Record[props.Field], props.Field, searchOptions, props.Disabled, loading, props.Valid, handleSetSearch]);
+    return React.createElement(StylableSelect_1.default, { Record: props.Record, Field: props.Field, Setter: setter, Label: props.Label, Disabled: props.Disabled, Help: props.Help, Style: props.Style, Options: options, BtnStyle: props.BtnStyle, Valid: props.Valid, Feedback: props.Feedback });
 }

package/lib/StylableSelect.d.ts

@@ -4,6 +4,18 @@ export interface IOption {
     Element: React.ReactElement<any> | string;
 }
 interface IProps<T> {
+    /**
+    * Function to determine the validity of a field
+    * @param field - Field of the record to check
+    * @returns {boolean}
+    */
+    Valid?: (field: keyof T) => boolean;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
     /**
       * Record to be used in form
       * @type {T}

package/lib/StylableSelect.js

@@ -42,17 +42,17 @@ var react_portal_1 = require("react-portal");
 var _ = require("lodash");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 function StylableSelect(props) {
-    var _a;
+    var _a, _b, _c;
     // State hooks and ref for managing component state and interactions.
     var stylableSelect = React.useRef(null);
     var selectTable = React.useRef(null);
     var tableContainer = React.useRef(null);
-    var _b = React.useState(false), show = _b[0], setShow = _b[1];
-    var _c = React.useState(props.Options[0].Element), selected = _c[0], setSelected = _c[1];
-    var _d = React.useState(""), guid = _d[0], setGuid = _d[1];
-    var _e = React.useState(false), showHelp = _e[0], setShowHelp = _e[1];
-    var _f = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _f[0], setPosition = _f[1];
-    React.useEffect(function () {
+    var _d = React.useState(false), show = _d[0], setShow = _d[1];
+    var _e = React.useState(props.Options[0].Element), selected = _e[0], setSelected = _e[1];
+    var _f = React.useState(""), guid = _f[0], setGuid = _f[1];
+    var _g = React.useState(false), showHelp = _g[0], setShowHelp = _g[1];
+    var _h = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _h[0], setPosition = _h[1];
+    React.useLayoutEffect(function () {
         var updatePosition = _.debounce(function () {
             if (stylableSelect.current != null) {
                 var rect = stylableSelect.current.getBoundingClientRect();
@@ -82,6 +82,16 @@ function StylableSelect(props) {
         // Ignore if disabled or not a mousedown event
         if ((props.Disabled === undefined ? false : props.Disabled) || evt.type !== 'mousedown' || stylableSelect.current == null)
             return;
+        // if we’re about to OPEN it, measure right now
+        if (!show && stylableSelect.current != null) {
+            var rect = stylableSelect.current.getBoundingClientRect();
+            setPosition({
+                Top: rect.bottom,
+                Left: rect.left,
+                Width: rect.width,
+                Height: rect.height
+            });
+        }
         //ignore the click if it was inside the table or table container
         if ((selectTable.current != null && selectTable.current.contains(evt.target)) || (tableContainer.current != null && tableContainer.current.contains(evt.target)))
             return;
@@ -131,8 +141,9 @@ function StylableSelect(props) {
         props.Help !== undefined ?
             React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "bottom" }, props.Help)
             : null,
-        React.createElement("button", { type: "button", style: __assign({ border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
+        React.createElement("button", { type: "button", style: __assign({ padding: '.375rem .75rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), className: "dropdown-toggle form-control ".concat(((_c = (_b = props.Valid) === null || _b === void 0 ? void 0 : _b.call(props, props.Field)) !== null && _c !== void 0 ? _c : true) ? '' : 'is-invalid'), onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
             React.createElement("div", { style: props.Style }, selected)),
+        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
         React.createElement(react_portal_1.Portal, null,
             React.createElement("div", { ref: tableContainer, className: 'popover', style: {
                     maxHeight: window.innerHeight - position.Top,

package/lib/ToggleSwitch.js

@@ -45,7 +45,7 @@ function ToggleSwitch(props) {
     // Variables to control the rendering of label and help icon.
     var showHelpIcon = props.Help !== undefined;
     var label = props.Label === undefined ? props.Field : props.Label;
-    return (React.createElement("div", { className: "custom-control custom-switch", style: props.Style },
+    return (React.createElement("div", { className: "custom-control custom-switch form-group", style: props.Style },
         React.createElement("input", { type: "checkbox", className: "custom-control-input", onChange: function (evt) {
                 var record = __assign({}, props.Record);
                 record[props.Field] = evt.target.checked;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.92",
+  "version": "1.1.93",
   "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.86",
+    "@gpa-gemstone/application-typings": "0.0.87",
     "@gpa-gemstone/gpa-symbols": "0.0.52",
-    "@gpa-gemstone/helper-functions": "0.0.43",
+    "@gpa-gemstone/helper-functions": "0.0.44",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "lodash": "^4.17.21",