@k-int/stripes-kint-components 1.2.5 → 1.6.0

package/src/lib/hooks/typedownHooks/useTypedown.js

@@ -1,31 +1,115 @@
 import { useRef } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
 import {
+  getFirstFocusable,
+  getLastFocusable,
   getNextFocusable,
-} from '../../utils/getFocusableElements';
+  getPreviousFocusable,
+} from '@folio/stripes/components';
 
 import {
-  useTypedownToggle,
-  useTypedownFooter,
-  useTypedownSearchField,
-  useTypedownList
-} from '.';
+  DOWN_ARROW,
+  TAB,
+  UP_ARROW
+} from '../../constants/eventCodes';
+
+import selectorSafe from '../../utils/selectorSafe';
+
+import useTypedownToggle from './useTypedownToggle';
 
 const useTypedown = (name) => {
   // SEARCHFIELD COMPONENT
-  const searchFieldComponent = document.getElementById('typedown-searchField');
+  const searchFieldComponent = document.getElementById(`typedown-searchField-${selectorSafe(name)}`);
 
   // SET UP REFS
   const listRef = useRef();
   const triggerRef = useRef();
   const overlayRef = useRef();
-  const footerRef = useTypedownFooter(searchFieldComponent);
+  const footerRef = useRef();
+
+  const footer = document.getElementById(`typedown-footer-${selectorSafe(name)}`);
+  // Add an event listener to the footer, so that we can control tab behaviour between footer elements
+
+  if (footer && footer.getAttribute('hasListener') !== 'true') {
+    footer.addEventListener('keydown', e => {
+      // We want special behaviour on tab
+      if (e.code === TAB) {
+        // Prevent the default behaviour
+        e.preventDefault();
+        const focusFunc = e.shiftKey ? getPreviousFocusable : getNextFocusable;
+        const elem = focusFunc(footerRef.current, true, true, false, true);
+
+        if (elem) {
+          // Focus on next focusable element
+          elem.focus();
+        } else if (e.shiftKey) {
+          // We are at the beginning of the list, refocus on search bar
+          searchFieldComponent.focus();
+        } else {
+          // We are at the end of the list, move onto next focusable element in page
+          getNextFocusable(searchFieldComponent, false).focus();
+        }
+      }
+    });
+
+    footer.setAttribute('hasListener', 'true');
+  }
 
   // SET UP HANDLERS
-  const searchFieldKeyDownHandler = useTypedownSearchField(listRef, footerRef, searchFieldComponent);
-  const listKeyDownHandler = useTypedownList(listRef, footerRef, searchFieldComponent);
+  const searchFieldKeyDownHandler = e => {
+    if (e.code === UP_ARROW) {
+      const elem = getLastFocusable(listRef.current, true, true);
+      if (elem) {
+        elem.focus();
+      }
+    }
+
+    if (e.code === DOWN_ARROW) {
+      const elem = getFirstFocusable(listRef.current, true, true);
+      if (elem) {
+        elem.focus();
+      }
+    }
+
+    // Tab key (But not while shifting)
+    if (e.code === TAB && !e.shiftKey) {
+      e.preventDefault();
+      // If we have focusable elements in the footer, then focus on them, else unfocus searchbar
+      const elem = getNextFocusable(footerRef.current, true, true, true, true);
+      if (elem) {
+        elem.focus();
+      } else {
+        getNextFocusable(searchFieldComponent, false).focus();
+      }
+    }
+  };
+
+  const listKeyDownHandler = e => {
+    if (e.code === DOWN_ARROW) {
+      const elem = getNextFocusable(listRef.current, true, true);
+      elem.focus();
+    }
+
+    if (e.code === UP_ARROW) {
+      const elem = getPreviousFocusable(listRef.current, true, true);
+      elem.focus();
+    }
+
+    if (e.code === TAB) {
+      e.preventDefault();
+      let elem;
+      if (!e.shiftKey && !footerRef.current) {
+        elem = getNextFocusable(searchFieldComponent, false);
+      } else if (!e.shiftKey) {
+        elem = getNextFocusable(footerRef.current, true, true, true, true);
+      } else {
+        elem = searchFieldComponent;
+      }
+      elem.focus();
+    }
+  };
+
   const handleNextFocus = () => getNextFocusable(searchFieldComponent, false).focus();
 
   // SET UP VARIABLES

package/src/lib/hooks/useHelperApp.js

@@ -13,6 +13,10 @@ const useHelperApp = (helpers) => {
     setCurrentHelper(helper !== currentHelper ? helper : undefined);
   }, [currentHelper]);
 
+  const isOpen = (hlp) => {
+    return currentHelper === hlp;
+  };
+
   useEffect(() => {
     if (currentHelper !== query?.helper) {
       const newQuery = {
@@ -56,7 +60,7 @@ const useHelperApp = (helpers) => {
     helperToggleFunctions[h] = () => handleToggleHelper(h);
   });
 
-  return { HelperComponent, helperToggleFunctions };
+  return { HelperComponent, helperToggleFunctions, isOpen };
 };
 
 export default useHelperApp;

package/src/lib/hooks/useKiwtFieldArray.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { useFieldArray } from 'react-final-form-arrays';
+
+const useKiwtFieldArray = (name, submitWholeDeletedObject = false) => {
+  const { fields } = useFieldArray(name);
+  const { value: values = [] } = fields;
+  const [endOfList, setEndOfList] = useState(0);
+
+  useEffect(() => {
+    const i = values.filter(line => !line._delete);
+    setEndOfList(i.length);
+  }, [values]);
+
+  const onAddField = (field = { _delete: false }) => {
+    fields.insert(endOfList, field);
+  };
+
+  const onMarkForDeletion = (field) => {
+    if (field && field.id) {
+      if (submitWholeDeletedObject) {
+        fields.push({ ...field, _delete: true });
+      } else {
+        fields.push({ id: field.id, _delete: true });
+      }
+    }
+  };
+
+  const onDeleteField = (index, field) => {
+    fields.remove(index);
+    onMarkForDeletion(field);
+  };
+
+  const onPrependField = (field = { _delete: false }) => {
+    fields.unshift(field);
+  };
+
+  const onReplaceField = (index, field) => {
+    if (fields.update) { // react-final-form-arrays
+      fields.update(index, field);
+    }
+  };
+
+  const onUpdateField = (index, field) => {
+    fields.update(index, {
+      ...fields.value[index],
+      ...field,
+    });
+  };
+
+  const items = values.slice(0, endOfList);
+
+  return {
+    items,
+    onAddField,
+    onDeleteField,
+    onMarkForDeletion,
+    onPrependField,
+    onReplaceField,
+    onUpdateField,
+  };
+};
+
+export default useKiwtFieldArray;

package/src/lib/hooks/useKiwtSASQuery.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
 
 import buildUrl from '../utils/buildUrl';
+import useQindex from './useQIndex';
 
 const locationQuerySetter = ({ location, history, nsValues }) => {
   const url = buildUrl(location, nsValues);
@@ -13,8 +14,15 @@ const useKiwtSASQuery = () => {
   const location = useLocation();
   const [query, setQuery] = useState({});
   const queryGetter = () => query;
+
+  const [qindex] = useQindex();
+  // Ensure we update the query along with the querySetter
+  if (query.qindex !== qindex) {
+    setQuery({ ...query, qindex });
+  }
+
   const querySetter = ({ nsValues }) => {
-    setQuery(nsValues);
+    setQuery({ ...query, ...nsValues, qindex });
     locationQuerySetter({ location, history, nsValues });
   };
   return { query, queryGetter, querySetter };

package/src/lib/hooks/useLocalStorageState.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { useLocalStorage, writeStorage } from '@rehooks/local-storage';
+
+
+const useLocalStorageState = (key, defaultValue) => {
+  const [local] = useLocalStorage(key, defaultValue);
+  const [localState, setLocalState] = useState(local);
+
+  const setLocalStorageState = (newValue) => {
+    setLocalState(newValue);
+    writeStorage(key, newValue);
+  };
+
+  return [localState, setLocalStorageState];
+};
+
+export default useLocalStorageState;

package/src/lib/hooks/useQIndex.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import queryString from 'query-string';
+
+const useQIndex = () => {
+  const history = useHistory();
+  const location = useLocation();
+
+  const query = queryString.parse(location.search);
+  const [currentQindex, setCurrentQindex] = useState(query?.qindex);
+
+  const handleQindexChange = (newQindex) => {
+    setCurrentQindex(newQindex);
+    if (newQindex !== query?.qindex) {
+      const newQuery = {
+        ...query,
+        qindex: newQindex
+      };
+
+      history.push({
+        pathname: location.pathname,
+        search: `?${queryString.stringify(newQuery)}`
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (currentQindex !== query?.qindex) {
+      setCurrentQindex(query?.qindex);
+    }
+  }, [
+    currentQindex,
+    history,
+    location,
+    query
+  ]);
+
+  return [currentQindex, handleQindexChange];
+};
+
+export default useQIndex;

package/src/lib/hooks/useRefdata.js

@@ -4,25 +4,42 @@ import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
 
+import { generateKiwtQuery } from '../utils';
+
 const useRefdata = ({
   endpoint,
   desc,
   queryParams,
-  returnQueryObject = false
+  returnQueryObject = false,
+  options = {
+    filterKeys: {
+      DescKey: 'desc'
+    },
+    stats: false,
+    max: 100
+  }
 }) => {
   const ky = useOkapiKy();
-  let path = endpoint;
+
+  const nsValues = {};
+
+  /* Desc will tend to contain a '.', which will throw off generateKiwtQuery.
+   * To combat this we can insert another Desc. at the beginning to act as the filtername, so
+   * Funder.Name => Desc.desc=Funder.Name. This way "Desc" acts as the filterName, and without a filterKey
+   * "desc=Funder.Name" is passed wholesale to the query.
+   */
 
   if (Array.isArray(desc)) {
     // If we have an array, append a desc filter for each desc given
-    desc.forEach((d, index) => {
-      path += `${index === 0 ? '?filters=' : '%7C%7C'}desc=${d}`;
-    });
+    nsValues.filters = desc.map(d => `DescKey.${d}`).join(',');
   } else if (desc) {
     // If we just have a string, append a single desc filter
-    path += `?filters=desc=${desc}`;
+    nsValues.filters = `DescKey.${desc}`;
   }
 
+  const query = generateKiwtQuery(options, nsValues);
+  const path = `${endpoint}${query}`;
+
   const queryObject = useQuery(
     ['stripes-kint-components', 'useRefdata', 'refdata', desc ?? ''],
     () => ky(path).json(),

package/src/lib/utils/README.md

@@ -29,5 +29,43 @@ import { generateKiwtQuery } from '@k-int/stripes-kint-components'
 ### Props
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
-options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to a KIWT query. | | ✓ |
+options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to a KIWT query. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. | | ✓ |
+nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |
+
+## generateKiwtQueryParams
+A util function for generating an array of "KIWT" (K-Int Web-Toolkit) style backend query parameters from a SASQ query object
+### Basic usage
+```
+import { generateKiwtQueryParams } from '@k-int/stripes-kint-components'
+...
+  const nsValues = {
+    query: 'test',
+    filters: 'requestStatus.completed,journalVolume.test1,startDate.startDate>=2021-10-28'
+  }
+
+  const options = {
+    searchKey: 'request.name',
+    filterKeys: {
+      requestStatus: 'requestStatus.value,
+      journalVolume: 'journalVolume'
+    }
+  }
+
+  const queryArray = generateKiwtQueryParams(options, nsValues)
+
+  // We'd expect queryArray === [
+    "match=request.name",
+    "term=test",
+    "filters=requestStatus.value==completed",
+    "filters=journalVolume==test1",
+    "filters=startDate%3E=2021-10-28",
+    "stats=true"
+  ]
+...
+```
+
+### Props
+Name | Type | Description | default | required
+--- | --- | --- | --- | ---
+options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys` and `stats`, which maps the incoming nsValues objects to an KIWT query array. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. | | ✓ |
 nsValues | object | An object containing the actual query parameters to become the mapped KIWT query | | ✓ |

package/src/lib/utils/generateKiwtQuery.js

@@ -1,61 +1,7 @@
-const generateKiwtQuery = (options, nsValues) => {
-  const { query, filters, sort } = nsValues;
-  const {
-    searchKey = '',
-    /* Assumtion made that if no filterKey is provided then the given filterValues for that key are standalaone, ie require no comparator or key */
-    filterKeys = {},
-    sortKeys = {},
-    stats = true,
-  } = options;
-
-  const paramsArray = [];
-
-  if (query) {
-    paramsArray.push(...searchKey.split(',')?.map(m => `match=${m}`));
-    paramsArray.push(`term=${query}`);
-  }
-
-  if (filters) {
-    const filterMap = {};
-    filters.split(',').forEach(filter => {
-      const [filterName, ...rest] = filter.split('.');
-      const filterValue = rest.join('.');
-
-      if (filterMap[filterName] === undefined) filterMap[filterName] = [];
-      filterMap[filterName].push(filterValue);
-    });
-
-    // We now have a filterMap of shape { status: ['active', 'cancelled'], type: ['local'] }
-    Object.entries(filterMap).forEach(([filterName, filterValues]) => {
-      const filterKey = filterKeys[filterName];
-
-      if (!filterKey) {
-        // These filters have no key mapping so we just pass the values to the backend as-is.
-        paramsArray.push(...filterValues?.map(f => `filters=${f}`));
-      } else {
-        const filterString = filterValues.map(v => `${filterKey}==${v}`).join('||');
-        paramsArray.push(`filters=${filterString}`);
-      }
-    });
-  }
-
-  if (sort) {
-    paramsArray.push(...sort.split(',').map(sortKey => {
-      const descending = sortKey.startsWith('-');
-      let term = sortKey.replace('-', '');
-
-      if (term in sortKeys) {
-        term = term.replace(term, sortKeys[term]);
-      }
-
-      return `sort=${term};${descending ? 'desc' : 'asc'}`;
-    }));
-  }
-
-  if (stats) {
-    paramsArray.push('stats=true');
-  }
+import generateKiwtQueryParams from './generateKiwtQueryParams';
 
+const generateKiwtQuery = (options, nsValues) => {
+  const paramsArray = generateKiwtQueryParams(options, nsValues);
   return paramsArray.length ? '?' + paramsArray.map(p => encodeURI(p)).join('&') : '';
 };
 

package/src/lib/utils/generateKiwtQueryParams.js

@@ -0,0 +1,67 @@
+const generateKiwtQueryParams = (options, nsValues) => {
+  const { qindex, query, filters, sort } = nsValues;
+  const {
+    searchKey = '',
+    /* Assumtion made that if no filterKey is provided then the given filterValues for that key are standalaone, ie require no comparator or key */
+    filterKeys = {},
+    sortKeys = {},
+    stats = true,
+    ...rest
+  } = options;
+
+  const paramsArray = [];
+
+  if (query) {
+    paramsArray.push(...(qindex || searchKey).split(',')?.map(m => `match=${m}`));
+    paramsArray.push(`term=${query}`);
+  }
+
+  if (filters) {
+    const filterMap = {};
+    filters.split(',').forEach(filter => {
+      const [filterName, ...filterRest] = filter.split('.');
+      const filterValue = filterRest.join('.');
+
+      if (filterMap[filterName] === undefined) filterMap[filterName] = [];
+      filterMap[filterName].push(filterValue);
+    });
+
+    // We now have a filterMap of shape { status: ['active', 'cancelled'], type: ['local'] }
+    Object.entries(filterMap).forEach(([filterName, filterValues]) => {
+      const filterKey = filterKeys[filterName];
+
+      if (!filterKey) {
+        // These filters have no key mapping so we just pass the values to the backend as-is.
+        paramsArray.push(...filterValues?.map(f => `filters=${f}`));
+      } else {
+        const filterString = filterValues.map(v => `${filterKey}==${v}`).join('||');
+        paramsArray.push(`filters=${filterString}`);
+      }
+    });
+  }
+
+  if (sort) {
+    paramsArray.push(...sort.split(',').map(sortKey => {
+      const descending = sortKey.startsWith('-');
+      let term = sortKey.replace('-', '');
+
+      if (term in sortKeys) {
+        term = term.replace(term, sortKeys[term]);
+      }
+
+      return `sort=${term};${descending ? 'desc' : 'asc'}`;
+    }));
+  }
+
+  if (stats) {
+    paramsArray.push('stats=true');
+  }
+
+  for (const [key, value] of Object.entries(rest)) {
+    paramsArray.push(`${key}=${value}`);
+  }
+
+  return paramsArray;
+};
+
+export default generateKiwtQueryParams;

package/src/lib/utils/index.js

@@ -1,2 +1,10 @@
 export { default as generateKiwtQuery } from './generateKiwtQuery';
+export { default as generateKiwtQueryParams } from './generateKiwtQueryParams';
+export { default as selectorSafe } from './selectorSafe';
+
 export { default as buildUrl } from './buildUrl';
+
+// Settings utils
+export { default as renderHelpText } from './renderHelpText';
+export { default as sortByLabel } from './sortByLabel';
+export { default as toCamelCase } from './toCamelCase'; // I hate that this exists

package/src/lib/{Settings/utils → utils}/renderHelpText.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import css from '../../../../styles/renderHelpText.css';
+import css from '../../../styles/renderHelpText.css';
 
 const renderHelpText = (id) => {
   return (

package/src/lib/{Settings/utils → utils}/sortByLabel.js

@@ -12,4 +12,4 @@ const sortByLabel = (a, b) => {
   return 0;
 };
 
-export default sortByLabel;
+export default sortByLabel;

package/styles/NoResultsMessage.css

@@ -0,0 +1,38 @@
+/**
+ * No Results Message
+ */
+
+ @import '@folio/stripes-components/lib/variables.css';
+
+ /* Empty Message */
+ .noResultsMessage {
+   padding: 15px;
+   color: var(--color-text-p2);
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   left: 0;
+   right: 0;
+   background: var(--color-fill);
+   flex-direction: column;
+ }
+ 
+ .noResultsMessage,
+ .noResultsMessageLabelWrap {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+ }
+ 
+ .noResultsMessageLabelWrap {
+   font-size: var(--font-size-large);
+ }
+ 
+ .noResultsMessageIcon,
+ .noResultsMessageLabel {
+   margin: 0 4px;
+ }
+ 
+ .noResultsMessageButton {
+   margin-top: 15px;
+ }

package/test/helpers/index.js

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

package/test/helpers/translationsProperties.js

@@ -0,0 +1,40 @@
+import translations from '../../translations/stripes-kint-components/en';
+
+const translationsProperties = [
+  {
+    prefix: 'stripes-kint-components',
+    translations,
+  },
+  /* Don't think we're using any of the below rn */
+  {
+    prefix: 'stripes-core',
+    translations: {
+      'label.missingRequiredField': 'Please fill this in to continue',
+      'button.save': 'Save',
+    }
+  },
+  {
+    prefix: 'stripes-components',
+    translations: {
+      'saveAndClose': 'Save and close',
+      'cancel': 'Cancel',
+      'paneMenuActionsToggleLabel': 'Actions',
+      'collapseAll': 'Collapse all',
+      'button.edit': 'Edit'
+    },
+  },
+  {
+    prefix: 'stripes-smart-components',
+    translations: {
+      'permissionError': 'Sorry - your permissions do not allow access to this page.',
+      'searchAndFilter': 'Search and filter',
+      'hideSearchPane': 'Hide search pane',
+      'search': 'Search',
+      'resetAll': 'Reset all',
+      'searchResultsCountHeader': '"{count, number} {count, plural, one {record found} other {records found}}"',
+      'new': 'New'
+    },
+  }
+];
+
+export default translationsProperties;

package/test/jest/helpers/KintHarness.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Harness } from '@folio/stripes-erm-components/test/jest/helpers';
+
+import { SettingsContext } from '../../../src/lib/contexts';
+import translationsProperties from '../../helpers';
+
+
+export default function KintHarness({
+  children,
+  settingsValues = {
+    intlKey: 'stripes-kint-components',
+    refdataEndpoint: 'path/to/refdata',
+    settingEndpoint: 'path/to/settings',
+    templateEndpoint: 'path/to/templates'
+  },
+  translations = translationsProperties,
+  ...harnessProps
+}) {
+  return (
+    <SettingsContext.Provider value={settingsValues}>
+      <Harness
+        translations={translations}
+        {...harnessProps}
+      >
+        {children}
+      </Harness>
+    </SettingsContext.Provider>
+  );
+}
+
+KintHarness.propTypes = {
+  children: PropTypes.node,
+  settingsValues: PropTypes.object,
+  translations: PropTypes.object
+};

package/test/jest/helpers/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as renderWithKintHarness } from './renderWithKintHarness';