@k-int/stripes-kint-components 5.4.0 → 5.5.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [5.5.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.4.0...v5.5.0) (2024-03-15)
+
+
+### Bug Fixes
+
+* FormModal handleSUbmit clears form ([2abf0dd](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/2abf0dddd042a0ea79970aa09b01ecca073d5705))
+
+
+### Features
+
+* SASQLookupComponent rowNavigation ([57aa5d2](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/57aa5d231f2700e2930ff26726d8445d03bd9001))
+
 # [5.4.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.3.1...v5.4.0) (2024-02-29)
 
 

package/es/lib/FormModal/FormModal.js

@@ -41,12 +41,17 @@ const FormModal = _ref => {
         onClose(e);
         restart();
       };
+      const handleSaveAndClear = function () {
+        handleSubmit(...arguments);
+        restart();
+      };
       const renderFooter = () => {
         if (footer) {
           return footer({
             formState,
-            handleSubmit,
-            handleClose
+            handleSubmit: handleSaveAndClear,
+            handleClose,
+            handleSubmitNoRestart: handleSubmit
           });
         }
         const {
@@ -59,7 +64,7 @@ const FormModal = _ref => {
             buttonStyle: "primary",
             disabled: submitting || invalid || pristine,
             marginBottom0: true,
-            onClick: handleSubmit,
+            onClick: handleSaveAndClear,
             type: "submit",
             children: kintIntl.formatKintMessage({
               id: 'saveAndClose',
@@ -75,15 +80,12 @@ const FormModal = _ref => {
           })]
         });
       };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
-        onSubmit: handleSubmit,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
-          enforceFocus: false,
-          footer: renderFooter(),
-          onClose: handleClose,
-          ...modalProps,
-          children: children
-        })
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
+        enforceFocus: false,
+        footer: renderFooter(),
+        onClose: handleClose,
+        ...modalProps,
+        children: children
       });
     }
   });

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -32,6 +32,8 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     noSearchField,
     persistedPanesetProps = {},
     RenderBody,
+    rowNavigation = true,
+    // Default navigation onRowClick
     sasqProps,
     searchFieldAriaLabel,
     searchFieldProps
@@ -221,6 +223,7 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
             intlNS: passedIntlNS,
             labelOverrides: labelOverrides,
             query: query,
+            rowNavigation: rowNavigation,
             toggleFilterPane: toggleFilterPane,
             ...restOfInfiniteQueryProps,
             ...sasqRenderProps,
@@ -253,6 +256,7 @@ SASQLookupComponent.propTypes = {
   RenderBody: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   resource: _propTypes.default.object,
   resultColumns: _propTypes.default.arrayOf(_propTypes.default.object),
+  rowNavigation: _propTypes.default.bool,
   sasqProps: _propTypes.default.object,
   searchFieldAriaLabel: _propTypes.default.string,
   searchFieldProps: _propTypes.default.object

package/es/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
 var _components = require("@folio/stripes/components");
@@ -11,7 +12,7 @@ var _NoResultsMessage = _interopRequireDefault(require("../../NoResultsMessage")
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const TableBody = _ref => {
-  var _query$sort;
+  var _query$sort, _match$params2;
   let {
     data,
     error,
@@ -23,10 +24,15 @@ const TableBody = _ref => {
     isLoading,
     labelOverrides = {},
     match,
-    mclProps,
+    mclProps: {
+      formatter = {},
+      ...mclProps
+    },
     onSort,
     path,
     resultColumns,
+    rowNavigation = true,
+    // Default navigation onRowClick
     toggleFilterPane,
     query
   } = _ref;
@@ -44,11 +50,48 @@ const TableBody = _ref => {
 
   // Build the list of visible columns
   const visibleColumns = resultColumns.map(e => e.propertyPath);
+  const getRowUrl = (0, _react.useCallback)(rowData => {
+    const baseUrl = "".concat(path, "/").concat(rowData === null || rowData === void 0 ? void 0 : rowData.id);
+    return {
+      url: "".concat(baseUrl).concat(location === null || location === void 0 ? void 0 : location.search),
+      path,
+      baseUrl,
+      location
+    };
+  }, [location, path]);
+  const getEnhancedFormatter = (0, _react.useCallback)(() => {
+    const enhancedFormatter = {};
+    for (const [key, value] of Object.entries(formatter)) {
+      enhancedFormatter[key] = item => value({
+        ...item,
+        defaultRowUrl: getRowUrl(item)
+      });
+    }
+    return enhancedFormatter;
+  }, [formatter, getRowUrl]);
+  const getOnRowClick = (0, _react.useCallback)(() => {
+    if (rowNavigation) {
+      return (_e, rowData) => {
+        history.push(getRowUrl(rowData).url);
+      };
+    }
+    return null;
+  }, [getRowUrl, history, rowNavigation]);
+  const isSelected = (0, _react.useCallback)(_ref2 => {
+    var _match$params;
+    let {
+      item
+    } = _ref2;
+    return item.id === (match === null || match === void 0 || (_match$params = match.params) === null || _match$params === void 0 ? void 0 : _match$params.id);
+  }, [match === null || match === void 0 || (_match$params2 = match.params) === null || _match$params2 === void 0 ? void 0 : _match$params2.id]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, {
     autosize: true,
     columnMapping: columnMapping,
     contentData: data === null || data === void 0 ? void 0 : data.results,
+    formatter: getEnhancedFormatter() // Pass enhanced formatter
+    ,
     hasMargin: true,
+    interactive: rowNavigation,
     isEmptyMessage: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoResultsMessage.default, {
       error,
       filterPaneIsVisible: filterPaneVisible,
@@ -60,18 +103,10 @@ const TableBody = _ref => {
       searchTerm: query.query,
       toggleFilterPane
     }),
-    isSelected: _ref2 => {
-      var _match$params;
-      let {
-        item
-      } = _ref2;
-      return item.id === (match === null || match === void 0 || (_match$params = match.params) === null || _match$params === void 0 ? void 0 : _match$params.id);
-    },
+    isSelected: isSelected,
     onHeaderClick: onSort,
     onNeedMoreData: onNeedMoreData,
-    onRowClick: (_e, rowData) => {
-      history.push("".concat(path, "/").concat(rowData === null || rowData === void 0 ? void 0 : rowData.id).concat(location === null || location === void 0 ? void 0 : location.search));
-    },
+    onRowClick: getOnRowClick(),
     pagingType: "click",
     sortDirection: sortOrder.startsWith('-') ? 'descending' : 'ascending',
     sortOrder: sortOrder.replace(/^-/, '').replace(/,.*/, ''),
@@ -101,6 +136,7 @@ TableBody.propTypes = {
   path: _propTypes.default.string.isRequired,
   query: _propTypes.default.object,
   resultColumns: _propTypes.default.arrayOf(_propTypes.default.object),
+  rowNavigation: _propTypes.default.bool,
   toggleFilterPane: _propTypes.default.func
 };
 var _default = exports.default = TableBody;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -52,7 +52,7 @@
     "@semantic-release/npm": "^11.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-const-enum": "^1.0.1",
-    "babel-plugin-module-resolver": "^4.0.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-plugin-transform-async-to-promises": "^0.8.15",
     "babel-polyfill": "^6.26.0",
@@ -74,7 +74,7 @@
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.0",
     "redux-observable": "^1.2.0",
-    "regenerator-runtime": "^0.13.3",
+    "regenerator-runtime": "^0.14.0",
     "rxjs": "^6.6.3",
     "semantic-release": "^22.0.6",
     "sinon": "^14.0.0",

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

package/src/lib/FormModal/FormModal.js

@@ -27,9 +27,14 @@ const FormModal = ({
           restart();
         };
 
+        const handleSaveAndClear = (...onSaveProps) => {
+          handleSubmit(...onSaveProps);
+          restart();
+        };
+
         const renderFooter = () => {
           if (footer) {
-            return footer({ formState, handleSubmit, handleClose });
+            return footer({ formState, handleSubmit: handleSaveAndClear, handleClose, handleSubmitNoRestart: handleSubmit });
           }
 
           const { invalid, pristine, submitting } = formState;
@@ -39,7 +44,7 @@ const FormModal = ({
                 buttonStyle="primary"
                 disabled={submitting || invalid || pristine}
                 marginBottom0
-                onClick={handleSubmit}
+                onClick={handleSaveAndClear}
                 type="submit"
               >
                 {kintIntl.formatKintMessage({
@@ -61,18 +66,14 @@ const FormModal = ({
         };
 
         return (
-          <form
-            onSubmit={handleSubmit}
+          <Modal
+            enforceFocus={false}
+            footer={renderFooter()}
+            onClose={handleClose}
+            {...modalProps}
           >
-            <Modal
-              enforceFocus={false}
-              footer={renderFooter()}
-              onClose={handleClose}
-              {...modalProps}
-            >
-              {children}
-            </Modal>
-          </form>
+            {children}
+          </Modal>
         );
       }}
     </Form>

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -44,6 +44,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     noSearchField,
     persistedPanesetProps = {},
     RenderBody,
+    rowNavigation = true, // Default navigation onRowClick
     sasqProps,
     searchFieldAriaLabel,
     searchFieldProps
@@ -266,6 +267,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
                   intlNS={passedIntlNS}
                   labelOverrides={labelOverrides}
                   query={query}
+                  rowNavigation={rowNavigation}
                   toggleFilterPane={toggleFilterPane}
                   {...restOfInfiniteQueryProps}
                   {...sasqRenderProps}
@@ -320,6 +322,7 @@ SASQLookupComponent.propTypes = {
   ]),
   resource: PropTypes.object,
   resultColumns: PropTypes.arrayOf(PropTypes.object),
+  rowNavigation: PropTypes.bool,
   sasqProps: PropTypes.object,
   searchFieldAriaLabel: PropTypes.string,
   searchFieldProps: PropTypes.object

package/src/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import { useHistory, useLocation } from 'react-router-dom';
@@ -18,10 +19,14 @@ const TableBody = ({
   isLoading,
   labelOverrides = {},
   match,
-  mclProps,
+  mclProps: {
+    formatter = {},
+    ...mclProps
+  },
   onSort,
   path,
   resultColumns,
+  rowNavigation = true, // Default navigation onRowClick
   toggleFilterPane,
   query,
 }) => {
@@ -41,12 +46,45 @@ const TableBody = ({
   // Build the list of visible columns
   const visibleColumns = resultColumns.map(e => e.propertyPath);
 
+  const getRowUrl = useCallback((rowData) => {
+    const baseUrl = `${path}/${rowData?.id}`;
+    return {
+      url: `${baseUrl}${location?.search}`,
+      path,
+      baseUrl,
+      location
+    };
+  }, [location, path]);
+
+  const getEnhancedFormatter = useCallback(() => {
+    const enhancedFormatter = {};
+    for (const [key, value] of Object.entries(formatter)) {
+      enhancedFormatter[key] = (item) => value({ ...item, defaultRowUrl: getRowUrl(item) });
+    }
+
+    return enhancedFormatter;
+  }, [formatter, getRowUrl]);
+
+  const getOnRowClick = useCallback(() => {
+    if (rowNavigation) {
+      return (_e, rowData) => {
+        history.push(getRowUrl(rowData).url);
+      };
+    }
+
+    return null;
+  }, [getRowUrl, history, rowNavigation]);
+
+  const isSelected = useCallback(({ item }) => item.id === match?.params?.id, [match?.params?.id]);
+
   return (
     <MultiColumnList
       autosize
       columnMapping={columnMapping}
       contentData={data?.results}
+      formatter={getEnhancedFormatter()} // Pass enhanced formatter
       hasMargin
+      interactive={rowNavigation}
       isEmptyMessage={
         <NoResultsMessage
           {...{
@@ -62,12 +100,10 @@ const TableBody = ({
           }}
         />
       }
-      isSelected={({ item }) => item.id === match?.params?.id}
+      isSelected={isSelected}
       onHeaderClick={onSort}
       onNeedMoreData={onNeedMoreData}
-      onRowClick={(_e, rowData) => {
-        history.push(`${path}/${rowData?.id}${location?.search}`);
-      }}
+      onRowClick={getOnRowClick()}
       pagingType="click"
       sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
       sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
@@ -99,6 +135,7 @@ TableBody.propTypes = {
   path: PropTypes.string.isRequired,
   query: PropTypes.object,
   resultColumns: PropTypes.arrayOf(PropTypes.object),
+  rowNavigation: PropTypes.bool,
   toggleFilterPane: PropTypes.func
 };