@k-int/stripes-kint-components 2.3.1 → 2.4.0

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useInfiniteQuery } from 'react-query';
@@ -17,34 +16,30 @@ import {
   Button,
   IconButton,
   Icon,
-  MultiColumnList,
   Pane,
   PaneMenu,
   SearchField,
 } from '@folio/stripes/components';
-import NoResultsMessage from '../NoResultsMessage';
 
 import { generateKiwtQuery } from '../utils';
 import { useKiwtSASQuery, useLocalStorageState } from '../hooks';
 
+import TableBody from './TableBody';
+
+const SASQLookupComponent = (props) => {
+  const {
+    children,
+    fetchParameters = {},
+    FilterComponent = () => null,
+    FilterPaneHeaderComponent = () => null,
+    filterPaneProps,
+    id,
+    mainPaneProps,
+    noSearchField,
+    RenderBody,
+    sasqProps,
+  } = props;
 
-const SASQLookupComponent = ({
-  children,
-  fetchParameters = {},
-  FilterPaneHeaderComponent = () => null,
-  FilterComponent = () => null,
-  history,
-  id,
-  location,
-  mainPaneProps,
-  match,
-  mclProps,
-  noSearchField,
-  path,
-  resultColumns = [],
-  RenderBody,
-  sasqProps,
-}) => {
   const { query, queryGetter, querySetter } = useKiwtSASQuery();
   const { 0: namespace } = useNamespace();
   const ky = useOkapiKy();
@@ -62,10 +57,7 @@ const SASQLookupComponent = ({
 
   const {
     data: totalData = {},
-    error,
-    isError,
-    isLoading,
-    fetchNextPage,
+    ...restOfInfiniteQueryProps
   } = useInfiniteQuery(
     [namespace, id, 'data', query],
     fetchPageData
@@ -93,20 +85,6 @@ const SASQLookupComponent = ({
     {}
   ) ?? {};
 
-  // TODO focus handling to stop redraw movin to top
-
-  const onNeedMoreData = (_askAmount, index) => {
-    fetchNextPage({ pageParam: index });
-  };
-
-  // Build the map of column definitions
-  const columnMapping = Object.fromEntries(
-    resultColumns.map(e => [e.propertyPath, e.label])
-  );
-
-  // Build the list of visible columns
-  const visibleColumns = resultColumns.map(e => e.propertyPath);
-
   return (
     <SearchAndSortQuery
       initialSearchState={{ query: '' }}
@@ -115,56 +93,23 @@ const SASQLookupComponent = ({
       {...sasqProps}
     >
       {
-        ({
+        (sasqRenderProps) => {
+          const {
           activeFilters,
           filterChanged,
           getFilterHandlers,
           getSearchHandlers,
-          onSort,
           onSubmitSearch,
           resetAll,
           searchChanged,
           searchValue
-        }) => {
+        } = sasqRenderProps;
+
           const searchHandlers = getSearchHandlers();
-          const sortOrder = query.sort ?? '';
           const disableReset = !filterChanged && !searchChanged;
 
           const filterCount = activeFilters.string ? activeFilters.string.split(',').length : 0;
 
-          const TableBody = () => (
-            <MultiColumnList
-              autosize
-              columnMapping={columnMapping}
-              contentData={data?.results}
-              isEmptyMessage={
-                <NoResultsMessage
-                  {...{
-                    error,
-                    isError,
-                    isLoading,
-                    filterPaneIsVisible: filterPaneVisible,
-                    searchTerm: query.query,
-                    toggleFilterPane
-                  }}
-                />
-              }
-              isSelected={({ item }) => item.id === match?.params?.id}
-              onHeaderClick={onSort}
-              onNeedMoreData={onNeedMoreData}
-              onRowClick={(_e, rowData) => {
-                history.push(`${path}/${rowData?.id}${location?.search}`);
-              }}
-              pagingType="click"
-              sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
-              sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
-              totalCount={data.totalRecords}
-              virtualize
-              visibleColumns={visibleColumns}
-              {...mclProps}
-            />
-          );
-
           const Body = RenderBody ?? TableBody;
 
           return (
@@ -184,6 +129,7 @@ const SASQLookupComponent = ({
                     </PaneMenu>
                   }
                   paneTitle={<FormattedMessage id="stripes-smart-components.searchAndFilter" />}
+                  {...filterPaneProps}
                 >
                   <form onSubmit={onSubmitSearch}>
                     <FilterPaneHeaderComponent />
@@ -192,7 +138,13 @@ const SASQLookupComponent = ({
                         <SearchField
                           autoFocus
                           name="query"
-                          onChange={searchHandlers.query}
+                          onChange={e => {
+                            if (e.target?.value) {
+                              searchHandlers.query(e); // SASQ needs the whole event here
+                            } else {
+                              searchHandlers.reset();
+                            }
+                          }}
                           onClear={searchHandlers.reset}
                           value={searchValue.query}
                         />
@@ -240,10 +192,19 @@ const SASQLookupComponent = ({
                   </PaneMenu>
                 :
                 null}
+                noOverflow
+                padContent={false}
                 paneSub={<FormattedMessage id="stripes-kint-components.sasqLookupComponent.mainPane.found" values={{ total: data?.total }} />}
                 {...mainPaneProps}
               >
-                <Body data={data} />
+                <Body
+                  data={data}
+                  query={query}
+                  toggleFilterPane={toggleFilterPane}
+                  {...restOfInfiniteQueryProps}
+                  {...sasqProps}
+                  {...props}
+                />
               </Pane>
               {children}
             </PersistedPaneset>
@@ -260,6 +221,7 @@ SASQLookupComponent.propTypes = {
     PropTypes.node
   ]),
   fetchParameters: PropTypes.object,
+  filterPaneProps: PropTypes.object,
   FilterComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node

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

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+
+import { useHistory, useLocation } from 'react-router-dom';
+
+import {
+  MultiColumnList,
+} from '@folio/stripes/components';
+import NoResultsMessage from '../../NoResultsMessage';
+
+const TableBody = ({
+  data,
+  error,
+  fetchNextPage,
+  filterPaneVisible,
+  isError,
+  isLoading,
+  match,
+  mclProps,
+  onSort,
+  path,
+  resultColumns,
+  toggleFilterPane,
+  query,
+}) => {
+  const sortOrder = query.sort ?? '';
+  const history = useHistory();
+  const location = useLocation();
+
+  const onNeedMoreData = (_askAmount, index) => {
+    fetchNextPage({ pageParam: index });
+  };
+
+  // Build the map of column definitions
+  const columnMapping = Object.fromEntries(
+    resultColumns.map(e => [e.propertyPath, e.label])
+  );
+
+  // Build the list of visible columns
+  const visibleColumns = resultColumns.map(e => e.propertyPath);
+
+  return (
+    <MultiColumnList
+      autosize
+      columnMapping={columnMapping}
+      contentData={data?.results}
+      hasMargin
+      isEmptyMessage={
+        <NoResultsMessage
+          {...{
+            error,
+            isError,
+            isLoading,
+            filterPaneIsVisible: filterPaneVisible,
+            searchTerm: query.query,
+            toggleFilterPane
+          }}
+        />
+      }
+      isSelected={({ item }) => item.id === match?.params?.id}
+      onHeaderClick={onSort}
+      onNeedMoreData={onNeedMoreData}
+      onRowClick={(_e, rowData) => {
+        history.push(`${path}/${rowData?.id}${location?.search}`);
+      }}
+      pagingType="click"
+      sortDirection={sortOrder.startsWith('-') ? 'descending' : 'ascending'}
+      sortOrder={sortOrder.replace(/^-/, '').replace(/,.*/, '')}
+      totalCount={data.totalRecords}
+      visibleColumns={visibleColumns}
+      {...mclProps}
+    />
+  );
+};
+
+TableBody.propTypes = {
+  data: PropTypes.shape({
+    totalRecords: PropTypes.number,
+    results: PropTypes.arrayOf(PropTypes.object)
+  }),
+  error: PropTypes.object,
+  fetchNextPage: PropTypes.func,
+  filterPaneVisible: PropTypes.bool,
+  history: PropTypes.object,
+  isError: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  location: PropTypes.object,
+  match: PropTypes.object,
+  mclProps: PropTypes.object,
+  onSort: PropTypes.func,
+  path: PropTypes.string.isRequired,
+  query: PropTypes.object,
+  resultColumns: PropTypes.arrayOf(PropTypes.object),
+  toggleFilterPane: PropTypes.func
+};
+
+export default TableBody;

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

@@ -0,0 +1 @@
+export { default } from './TableBody';

package/src/lib/SASQLookupComponent/index.js

@@ -1 +1,2 @@
-export { default } from './SASQLookupComponent';
+export { default as SASQLookupComponent } from './SASQLookupComponent';
+export { default as TableBody } from './TableBody';

package/src/lib/SASQRoute/SASQRoute.js

@@ -6,7 +6,7 @@ import {
   Switch
 } from 'react-router-dom';
 
-import SASQLookupComponent from '../SASQLookupComponent';
+import { SASQLookupComponent } from '../SASQLookupComponent';
 import SASQViewComponent from '../SASQViewComponent';
 
 const SASQRoute = ({ children, path, fetchParameters, ...props }) => {

package/src/lib/utils/highlightString.js

@@ -0,0 +1,42 @@
+import matchString from './matchString';
+
+const highlightString = (match, str, ignoreNull = true) => {
+  const [parts, regex] = matchString(match, str, ignoreNull);
+
+  return (
+    parts.filter(part => part).map((part, i) => (
+      regex.test(part) ?
+        <mark
+          key={i}
+        >
+          {part}
+        </mark> :
+        <span key={i}>
+          {part}
+        </span>
+    ))
+  );
+};
+
+const boldString = (match, str, ignoreNull = true) => {
+  const [parts, regex] = matchString(match, str, ignoreNull);
+
+  return (
+    parts.filter(part => part).map((part, i) => (
+      regex.test(part) ?
+        <strong
+          key={i}
+        >
+          {part}
+        </strong> :
+        <span key={i}>
+          {part}
+        </span>
+    ))
+  );
+};
+
+export {
+  boldString,
+  highlightString
+};

package/src/lib/utils/index.js

@@ -15,3 +15,7 @@ export { default as groupCustomPropertiesByCtx } from './groupCustomPropertiesBy
 export { default as renderHelpText } from './renderHelpText';
 export { default as sortByLabel } from './sortByLabel';
 export { default as toCamelCase } from './toCamelCase'; // I hate that this exists
+
+
+export { default as matchString } from './matchString';
+export { boldString, highlightString } from './highlightString';

package/src/lib/utils/matchString.js

@@ -0,0 +1,14 @@
+import escapeRegExp from 'lodash/escapeRegExp';
+
+const matchString = (match, str, ignoreNull = true) => {
+  const regex = new RegExp(`${match.split(/(\s+)/).filter(h => h.trim()).map(hl => '(' + escapeRegExp(hl) + ')').join('|')}`, 'gi')
+  if (ignoreNull && !match) {
+    const nullRegex = /a^/gi; // Should match nothing
+
+    return [[str], nullRegex];
+  }
+
+  return [str.split(regex), regex];
+};
+
+export default matchString;