@k-int/stripes-kint-components 5.5.1 → 5.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [5.6.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.5.2...v5.6.0) (2024-04-04)
+
+
+### Features
+
+* FormModal default now handles async and sync submit handlers differently, and implementor can hook into those with onError and onSuccess props. ([822882c](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/822882cfa428e8785c2f04541776526b5846e5f3))
+
+## [5.5.2](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.5.1...v5.5.2) (2024-03-25)
+
+
+### Bug Fixes
+
+* **deps:** update dependency react-resize-detector to v10 ([407e388](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/407e388de33b42cfb9c02a4c1d37bb1940eb4a65))
+
 ## [5.5.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.5.0...v5.5.1) (2024-03-19)
 
 

package/README.md

@@ -14,7 +14,7 @@ In the case where components from this repository require translations, it will
 In order to develop this module within a stripes workspace, a couple of steps are needed
 - An environment variable must be set up (See https://chlee.co/how-to-setup-environment-variables-for-windows-mac-and-linux/), `STRIPES_TRANSPILE_TOKENS="@k-int"`
 - Clone this repository `git clone git@gitlab.com:knowledge-integration/folio/stripes-kint-components.git`
-- Delete all the `devDependencies` in your local package.json. (DO NOT MERGE THESE CHANGES BACK TO MASTER)
+- Ensure your branch's `kint-components` version is at least in line with, or higher than the latest released artifact version (THIS SHOULD NOT BE MERGED TO MAIN: Release versions are controlled by the semantic releases plugin at release time.)
 - Nuke your workspace node_modules and rebuild
 
 ### What went wrong
@@ -40,9 +40,9 @@ If the compatibility chart below states compatible with a certain flower release
 
 Release major | Latest release | Flower releases present in (ERM) | Flower compatibility
 --- | --- | --- | --- |
-v1 | 1.7.0 | Lotus | Kiwi - Morning Glory |
-v2 | 2.8.6 | Morning Glory | Kiwi - Morning Glory |
-v3 | 3.2.3 | Nolana | Morning Glory - Nolana |
-v4 | 4.7.0 | Orchid | Morning Glory - Orchid+ |
-v5 | 5.1.3 | Poppy | Morning Glory - Poppy+ |
+v1 | 1.7.x | Lotus | Kiwi - Morning Glory |
+v2 | 2.8.x | Morning Glory | Kiwi - Morning Glory |
+v3 | 3.2.x | Nolana | Morning Glory - Nolana |
+v4 | 4.7.x | Orchid | Morning Glory - Orchid |
+v5 | 5.5.x | Poppy, Quesnalia | Morning Glory - Quesnalia+ |
 

package/es/lib/FormModal/FormModal.js

@@ -21,7 +21,11 @@ const FormModal = _ref => {
       onClose,
       ...modalProps
     },
+    onError,
+    // Optional handler to run onSuccess for default handleSaveAndClear
     onSubmit,
+    onSuccess,
+    // Optional handler to run onSuccess for default handleSaveAndClear
     ...formProps
   } = _ref;
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
@@ -41,9 +45,52 @@ const FormModal = _ref => {
         onClose(e);
         restart();
       };
+
+      // Handle asynchronous submit functions differently to synchronous ones
       const handleSaveAndClear = function () {
-        handleSubmit(...arguments);
-        restart();
+        try {
+          const submitReturn = handleSubmit(...arguments);
+
+          // Figure out if we're in an async or sync submit function
+          if (typeof submitReturn === 'object' && typeof submitReturn.then === 'function') {
+            // Async function
+            return submitReturn.then(incomingParams => {
+              restart();
+              return incomingParams;
+            }).then(incomingParams => {
+              if (onSuccess && typeof onSuccess === 'function') {
+                // Allow onSuccess to dictate what continues downstream
+                return onSuccess(incomingParams);
+              }
+              return incomingParams;
+            }).catch(incomingParams => {
+              if (onError && typeof onError === 'function') {
+                // Allow onError to dictate what continues downstream
+                return onError(incomingParams);
+              }
+              return incomingParams;
+            });
+          } else if (onSuccess && typeof onSuccess === 'function') {
+            // Sync function and we have an onSuccess handler
+
+            // onSuccess dictates return
+            const returnShape = onSuccess(submitReturn);
+            restart();
+            return returnShape;
+          } else {
+            // Sync function and we have no onSuccess handler
+
+            restart();
+            return submitReturn;
+          }
+        } catch (err) {
+          // Sync function catch
+          if (onError && typeof onError === 'function') {
+            // Allow onError to dictate what continues downstream
+            return onError(err);
+          }
+          return null;
+        }
       };
       const renderFooter = () => {
         if (footer) {
@@ -51,7 +98,9 @@ const FormModal = _ref => {
             formState,
             handleSubmit: handleSaveAndClear,
             handleClose,
-            handleSubmitNoRestart: handleSubmit
+            handleSubmitNoRestart: handleSubmit,
+            // DEPRECATED -- should use handleSubmitRaw
+            handleSubmitRaw: handleSubmit
           });
         }
         const {
@@ -100,6 +149,8 @@ FormModal.propTypes = {
     footer: _propTypes.default.func,
     onClose: _propTypes.default.func
   }),
-  onSubmit: _propTypes.default.func
+  onError: _propTypes.default.func,
+  onSubmit: _propTypes.default.func,
+  onSuccess: _propTypes.default.func
 };
 var _default = exports.default = FormModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@rehooks/local-storage": "^2.4.4",
     "compose-function": "^3.0.3",
-    "react-resize-detector": "^7.1.2",
+    "react-resize-detector": "^10.0.0",
     "zustand": "^4.0.0"
   },
   "devDependencies": {
@@ -76,8 +76,7 @@
     "regenerator-runtime": "^0.14.0",
     "rxjs": "^7.0.0",
     "semantic-release": "^22.0.6",
-    "sinon": "^17.0.0",
-    "typescript": "^2.8.0"
+    "sinon": "^17.0.0"
   },
   "peerDependencies": {
     "@folio/stripes": ">=9.0.0",

package/src/lib/FormModal/FormModal.js

@@ -10,7 +10,9 @@ const FormModal = ({
   intlNS: passedIntlNS,
   labelOverrides = {},
   modalProps: { footer, onClose, ...modalProps },
+  onError, // Optional handler to run onSuccess for default handleSaveAndClear
   onSubmit,
+  onSuccess, // Optional handler to run onSuccess for default handleSaveAndClear
   ...formProps
 }) => {
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
@@ -27,14 +29,63 @@ const FormModal = ({
           restart();
         };
 
+        // Handle asynchronous submit functions differently to synchronous ones
         const handleSaveAndClear = (...onSaveProps) => {
-          handleSubmit(...onSaveProps);
-          restart();
+          try {
+            const submitReturn = handleSubmit(...onSaveProps);
+
+            // Figure out if we're in an async or sync submit function
+            if (typeof submitReturn === 'object' && typeof submitReturn.then === 'function') {
+              // Async function
+              return submitReturn.then((incomingParams) => {
+                restart();
+                return incomingParams;
+              }).then((incomingParams) => {
+                if (onSuccess && typeof onSuccess === 'function') {
+                  // Allow onSuccess to dictate what continues downstream
+                  return onSuccess(incomingParams);
+                }
+                return incomingParams;
+              }).catch((incomingParams) => {
+                if (onError && typeof onError === 'function') {
+                  // Allow onError to dictate what continues downstream
+                  return onError(incomingParams);
+                }
+                return incomingParams;
+              });
+            } else if (onSuccess && typeof onSuccess === 'function') {
+              // Sync function and we have an onSuccess handler
+
+              // onSuccess dictates return
+              const returnShape = onSuccess(submitReturn);
+              restart();
+              return returnShape;
+            } else {
+              // Sync function and we have no onSuccess handler
+
+              restart();
+              return submitReturn;
+            }
+          } catch (err) {
+            // Sync function catch
+            if (onError && typeof onError === 'function') {
+              // Allow onError to dictate what continues downstream
+              return onError(err);
+            }
+
+            return null;
+          }
         };
 
         const renderFooter = () => {
           if (footer) {
-            return footer({ formState, handleSubmit: handleSaveAndClear, handleClose, handleSubmitNoRestart: handleSubmit });
+            return footer({
+              formState,
+              handleSubmit: handleSaveAndClear,
+              handleClose,
+              handleSubmitNoRestart: handleSubmit, // DEPRECATED -- should use handleSubmitRaw
+              handleSubmitRaw: handleSubmit
+            });
           }
 
           const { invalid, pristine, submitting, validating } = formState;
@@ -93,7 +144,9 @@ FormModal.propTypes = {
     footer: PropTypes.func,
     onClose: PropTypes.func,
   }),
-  onSubmit: PropTypes.func
+  onError: PropTypes.func,
+  onSubmit: PropTypes.func,
+  onSuccess: PropTypes.func
 };
 
 export default FormModal;