@k-int/stripes-kint-components 1.3.0 → 1.7.0

package/src/lib/{Settings → SettingPage}/SettingPage.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import EditableSettingsList from './EditableSettingsList';
-import SettingsContext from './SettingsContext';
-import useSettingSection from './useSettingSection';
+import { EditableSettingsList } from '../EditableSettingsList';
+import { SettingsContext } from '../contexts';
+import { useSettingSection } from '../hooks';
 
 const SettingPage = ({ sectionName }) => {
   const { settingEndpoint } = useContext(SettingsContext);
@@ -31,10 +31,10 @@ SettingPage.propTypes = {
   sectionName: PropTypes.string,
   resources: PropTypes.shape({
     settings: PropTypes.shape({
-      records: PropTypes.array
+      records: PropTypes.arrayOf(PropTypes.object)
     }),
     refdatavalues: PropTypes.shape({
-      records: PropTypes.array
+      records: PropTypes.arrayOf(PropTypes.object)
     })
   })
 };

package/src/lib/{Settings → SettingPage}/SettingPagePane.js

@@ -1,8 +1,10 @@
 import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
 import { Pane } from '@folio/stripes/components';
 import { FormattedMessage } from 'react-intl';
-import SettingsContext from './SettingsContext';
-import { toCamelCase } from './utils';
+import { SettingsContext } from '../contexts';
+import { toCamelCase } from '../utils';
 
 const SettingPagePane = ({ sectionName, children }) => {
   const { intlKey } = useContext(SettingsContext);
@@ -18,4 +20,12 @@ const SettingPagePane = ({ sectionName, children }) => {
   );
 };
 
+SettingPagePane.propTypes = {
+  sectionName: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.node
+  ])
+};
+
 export default SettingPagePane;

package/src/lib/SettingPage/index.js

@@ -0,0 +1,2 @@
+export { default as SettingPagePane } from './SettingPagePane';
+export { default as SettingPage } from './SettingPage';

package/src/lib/TypeDown/README.md

@@ -1,115 +1 @@
-```
-import React from 'react';
-
-import { Button, Col, Pane, Row, TextField } from '@folio/stripes/components';
-import { AppIcon } from '@folio/stripes/core';
-import { generateKiwtQuery, TypeDown } from '@k-int/stripes-kint-components';
-
-import { Form, Field, useFormState } from 'react-final-form';
-
-const TestField = () => {
-  const pathMutator = (input, path) => {
-    const query = generateKiwtQuery(
-      {
-        searchKey: 'name,alternateNames.name',
-        stats: false
-      }, {
-        sort: 'name',
-        query: input,
-      }
-    );
-
-    return `${path}${query}`;
-  };
-
-  console.log("Current values: %o", useFormState()?.values)
-  return (
-    <Field
-      component={TypeDown}
-      name="test"
-      path="erm/sas"
-      pathMutator={pathMutator}
-      renderFooter={() => (
-        <>
-          <Button
-            id="footer button 1"
-            marginBottom0
-            onClick={() => {
-              alert('sup')
-            }}
-            type="button"
-          >
-            Hello 1
-          </Button>
-          <Button
-            id="footer button 2"
-            marginBottom0
-            onClick={() => {
-              alert('sup 2')
-            }}
-            type="button"
-          >
-            Hello 2
-          </Button>
-        </>
-      )}
-      renderListItem={agreement => {
-        return (
-          <>
-            <AppIcon
-              app="agreements"
-              size="small"
-            >
-              {agreement.name}
-            </AppIcon>
-          </>
-        );
-      }}
-    />
-    );
-};
-
-
-const TestComponent = () => {
-  return (
-    <Pane
-      defaultWidth="fill"
-      dismissible
-      id="test-typedown"
-      paneTitle={"Test typedown"}
-    >
-      <Form
-        enableReinitialize
-        navigationCheck
-        onSubmit={(values) => console.log("submitting: %o", values)}
-        subscription={{ values: true }}
-      >
-        {({ handleSubmit }) => {
-          return (
-            <form onSubmit={handleSubmit}>
-              <Row>
-                <Col xs={6}>
-                  <TestField />
-                </Col>
-                <Col xs={6}>
-                  <Field
-                    component={TextField}
-                    name="test2"
-                  />
-                </Col>
-              </Row>
-              <Button
-                type="submit"
-              >
-                submit
-              </Button>
-            </form>
-          );
-        }}
-      </Form>
-    </Pane>
-  );
-};
-
-export default TestComponent;
-```
+DEPRECATED - DO NOT USE. You probably want Typedown

package/src/lib/TypeDown/TypeDown.js

@@ -30,6 +30,7 @@ const TypeDown = ({
 }) => {
   useEffect(() => {
     if (process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
       console.warn('TypeDown component is deprecated, you likely want either Typedown or QueryTypedown');
     }
   }, []);
@@ -71,13 +72,13 @@ const TypeDown = ({
     </div>
   ), [renderListItem, uniqueIdentificationPath]);
 
-  const handleChange = value => {
+  const handleChange = useCallback(value => {
     input.onChange(value);
 
     if (typeof onChange === 'function') {
       onChange(value);
     }
-  };
+  }, [input, onChange]);
 
   const dropDown = useCallback(() => {
     return (
@@ -132,6 +133,7 @@ const TypeDown = ({
   }, [
     data,
     footerRef,
+    handleChange,
     handleNextFocus,
     input,
     listKeyDownHandler,

package/src/lib/Typedown/Typedown.js

@@ -131,7 +131,7 @@ const Typedown = ({
           <div
             ref={footerRef}
             className={css.footer}
-            id="typedown-footer"
+            id={`typedown-footer-${selectorSafe(input.name)}`}
           >
             {renderFooter()}
           </div>
@@ -222,6 +222,7 @@ const Typedown = ({
 
 Typedown.propTypes = {
   dataOptions: PropTypes.arrayOf(PropTypes.object),
+  filterPath: PropTypes.string,
   input: PropTypes.object,
   meta: PropTypes.object,
   onChange: PropTypes.func,

package/src/lib/{Settings → contexts}/SettingsContext.js

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react';
+import { createContext } from 'react';
 
 const SettingsContext = createContext();
 export default SettingsContext;

package/src/lib/contexts/index.js

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

package/src/lib/hooks/README.md

@@ -21,6 +21,7 @@ endpoint | string | The endpoint to fetch refdataValues from | | ✓ |
 desc | string | The refdataCategory (usually of the form `DomainClass.Field`) | | ✕ |
 queryParams | object | A set of queryParameters to hand to react-query's `useQuery` | | ✕ |
 returnQueryObject | bool | A switch to return the entirety of the queryObject from useQuery. If `false`, the data will be destructured, if `true` the return will be the full object returned by react-query's `useQuery` | false | ✕ |
+options | object | An object of the shape SASQ_MAP (See generateKiwtQuery) to pass to the generateKiwtQuery inside. Any passed desc "d" will be passed as a filter `DescKey.${d}`, with DescKey acting as FilterName, assuming `filterKeys: { DescKey: "desc" }` in options, so `desc==${d}` is passed directly to the backend. | `{filterKeys: {DescKey: "desc" }, stats: false, max: 100}` | ✕ |
 
 ## useMutateRefdataValue
 A hook for mutations (Create/Delete/Edit) of refdataValues.
@@ -117,6 +118,8 @@ A hook which takes an object containing various helper components to render, and
 When the url contains a query of the form `helper={name}`, this hook will check the helpers object it was handed for a key matching `{name}`, and if there is one it will return the component value for that key.
 
 The hook also returns an object `helperToggleFunctions`, which will have the same keys as were handed to the hook, and values corresponding to "toggle" functions for that key. These functions are a simple way to change the helper query in the url.
+
+Finally the hook also returns an ease-of-use function `isOpen`, which takes a string input and returns a boolean if the current helper in the URL matches that string or not.
 ### Basic usage
 ```
 import { useHelperApp } from '@k-int/stripes-kint-components'
@@ -181,3 +184,107 @@ import { useQuery } from 'react-query';
     </SearchAndSortQuery>
 
 ```
+
+## useQIndex
+A hook with a similar API to setState, but instead stores a value in the `qindex` parameter in the URL.
+Returns an array `[qindex, setQindex]`. There is no way to set an initialValue with the hook, as the state is derived from the URL rather than the other way around. This means that multiple `useQIndex` hooks can exist at once.
+
+### BasicUsage
+```
+import {
+  Button,
+} from '@folio/stripes/components';
+import useQindex from '../../../../stripes-kint-components/src/lib/hooks/useQIndex';
+
+const Test() {
+  const [qindex, setQindex] = useQindex();
+
+  return (
+    <>
+      <Button
+        onClick={() => setQindex(qindex + "1")}
+      >
+        change the qindex
+      </Button>
+      <div>
+        {`The current qindex is: ${qindex}`
+      </div>
+    </>
+  );
+}
+
+export default Test;
+```
+
+## useKiwtFieldArray
+A hook to replace `withKiwtFieldArray` [from stripes-erm-components](https://github.com/folio-org/stripes-erm-components/tree/master/lib/withKiwtFieldArray). Provides functions for adding and deleting items in a way which the backend endpoints will understand, as well as an "items" array to track the current set of valid items in the form.
+
+
+### BasicUsage
+```
+...
+import useKiwtFieldArray from '../../../util/useKiwtFieldArray';
+...
+
+const TestFieldArray = () => {
+  const {
+    items,
+    onAddField,
+    onDeleteField
+  } = useKiwtFieldArray(name, true);
+
+  return (
+    <>
+      {items.map((item, index) => {
+        return (
+          <Row>
+            <Col xs={3}>
+              <Field
+                name={`${name}[${index}].name`}
+                component={TextField}
+                required
+                validate={requiredValidator}
+              />
+            </Col>
+            <Col xs={1}>
+              <IconButton
+                icon="trash"
+                id="remove-volume-button"
+                onClick={() => onDeleteField(index, volume)}
+              />
+            </Col>
+          </Row>
+        );
+      })}
+      <Button
+        onClick={() => onAddField({}})}
+      >
+        ADD NEW
+      </Button>
+    </>
+  );
+};
+
+const Test = ({}) => {
+  return (
+    <Form
+      ...
+      render={({ handleSubmit, submitting, form }) => (
+        <form onSubmit={handleSubmit}>
+          <FieldArray
+            name="test"
+            component={TestFieldArray}
+          />
+        </form>
+      )}
+    />
+  );
+};
+export default Test
+```
+
+### Props
+Name | Type | Description | default | required
+--- | --- | --- | --- | ---
+name | String | The name of the fieldArray, used to hook into the final form state for that field. | | ✓ |
+submitWholeDeletedObject | bool | a boolean flag to ensure that a deleted object is sent whole to the backend, rather than just as an id. | false | ✕ |

package/src/lib/hooks/index.js

@@ -5,3 +5,6 @@ export { default as useActiveElement } from './useActiveElement';
 export { default as useKiwtSASQuery } from './useKiwtSASQuery';
 export { default as useHelperApp } from './useHelperApp';
 export { default as useLocalStorageState } from './useLocalStorageState';
+export { default as useQIndex } from './useQIndex';
+export { useSettings, useSettingSection } from './settingsHooks';
+export { default as useKiwtFieldArray } from './useKiwtFieldArray';

package/src/lib/hooks/settingsHooks/index.js

@@ -0,0 +1,2 @@
+export { default as useSettings } from './useSettings';
+export { default as useSettingSection } from './useSettingSection';

package/src/lib/{Settings → hooks/settingsHooks}/useSettings.js

@@ -1,15 +1,16 @@
 import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
 import { useQuery } from 'react-query';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useOkapiKy } from '@folio/stripes/core';
 
 import { Settings } from '@folio/stripes/smart-components';
 
-import SettingPage from './SettingPage';
-import SettingPagePane from './SettingPagePane';
-import SettingsContext from './SettingsContext';
+import { SettingPage, SettingPagePane } from '../../SettingPage';
+import { SettingsContext } from '../../contexts';
 
-import { sortByLabel, toCamelCase } from './utils';
+import { sortByLabel, toCamelCase } from '../../utils';
 
 const useSettings = ({
   dynamicPageExclusions,
@@ -21,7 +22,7 @@ const useSettings = ({
 }) => {
   const ky = useOkapiKy();
   const intl = useIntl();
-  const extraPathItems = dynamicPageExclusions.map(dpe => `filters=section!=${dpe}`) 
+  const extraPathItems = dynamicPageExclusions.map(dpe => `filters=section!=${dpe}`);
   extraPathItems.push('max=500');
 
   const { data: appSettings = [], isLoading } = useQuery(
@@ -50,7 +51,7 @@ const useSettings = ({
     );
   });
 
-  const pageList = persistentPages.concat(dynamic).sort(sortByLabel)
+  const pageList = persistentPages.concat(dynamic).sort(sortByLabel);
 
   const SettingsContextProvider = ({ children }) => {
     return (
@@ -67,6 +68,13 @@ const useSettings = ({
     );
   };
 
+  SettingsContextProvider.propTypes = {
+    children: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.node
+    ])
+  };
+
   const SettingsComponent = (props) => {
     const settingsData = useContext(SettingsContext);
 

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

@@ -1,6 +1,3 @@
 export { default as useTypedown } from './useTypedown';
-export { default as useTypedownFooter } from './useTypedownFooter';
-export { default as useTypedownList } from './useTypedownList';
-export { default as useTypedownSearchField } from './useTypedownSearchField';
 export { default as useTypedownToggle } from './useTypedownToggle';
 export { default as useTypedownData } from './useTypedownData';

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

@@ -1,19 +1,22 @@
 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 {
+  DOWN_ARROW,
+  TAB,
+  UP_ARROW
+} from '../../constants/eventCodes';
 
 import selectorSafe from '../../utils/selectorSafe';
 
-import {
-  useTypedownToggle,
-  useTypedownFooter,
-  useTypedownSearchField,
-  useTypedownList
-} from '.';
+import useTypedownToggle from './useTypedownToggle';
 
 const useTypedown = (name) => {
   // SEARCHFIELD COMPONENT
@@ -23,11 +26,90 @@ const useTypedown = (name) => {
   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 };