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

package/src/lib/Typedown/README.md

@@ -0,0 +1,115 @@
+```
+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;
+```

package/src/lib/Typedown/Typedown.js

@@ -0,0 +1,235 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import get from 'lodash/get';
+
+import { EndOfList, IconButton, Popper } from '@folio/stripes/components';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { interactionStyles } from '@folio/stripes-components/lib/sharedStyles/interactionStyles.css';
+
+import SearchField from '../SearchField';
+import css from '../../../styles/TypeDown.css';
+
+import { useTypedown } from '../hooks/typedownHooks';
+import selectorSafe from '../utils/selectorSafe';
+
+const Typedown = ({
+  dataOptions,
+  input,
+  filterPath,
+  meta,
+  onChange,
+  onType,
+  renderFooter = null,
+  renderListItem = null,
+  uniqueIdentificationPath = 'id'
+}) => {
+  const selectedUniqueId = get(input.value, uniqueIdentificationPath);
+
+  // Display data needs to be in line with data options but also able to react to default handleType
+  const [displayData, setDisplayData] = useState(dataOptions);
+  useEffect(() => {
+    setDisplayData(dataOptions);
+  }, [dataOptions]);
+
+  // Setup default handleType
+  const handleType = (e) => {
+    const regex = new RegExp(`${e.target.value.toLowerCase()}`);
+    if (onType) {
+      onType(e);
+    } else if (filterPath && e?.target?.value) {
+      setDisplayData(dataOptions.filter(item => get(item, filterPath)?.toLowerCase()?.match(regex)));
+    } else if (e?.target?.value) {
+      setDisplayData(dataOptions.filter(item => get(item, uniqueIdentificationPath)?.toLowerCase()?.match(regex)));
+    } else {
+      setDisplayData(dataOptions);
+    }
+  };
+
+  // Hook to set up all the essentials
+  const {
+    refs: {
+      listRef,
+      triggerRef,
+      overlayRef,
+      footerRef
+    },
+    handlers: {
+      handleNextFocus,
+      listKeyDownHandler,
+      searchFieldKeyDownHandler
+    },
+    variables: {
+      open,
+      portal,
+      resizeRef,
+      searchWidth
+    }
+  } = useTypedown(input.name);
+
+  const renderItem = useCallback((option) => (
+    <div
+      className={css.listItem}
+    >
+      {renderListItem ?
+        renderListItem(option) :
+        get(option, uniqueIdentificationPath)
+      }
+    </div>
+  ), [renderListItem, uniqueIdentificationPath]);
+
+  const handleChange = useCallback(value => {
+    input.onChange(value);
+
+    if (typeof onChange === 'function') {
+      onChange(value);
+    }
+  }, [input, onChange]);
+
+  const dropDown = useCallback(() => {
+    return (
+      <div
+        className={css.dropdownMenu}
+        id={`typedown-parent-${selectorSafe(input.name)}-menu`}
+        style={{ '--searchWidth': `${searchWidth}px` }}
+      >
+        <div
+          ref={listRef}
+          className={css.listContainer}
+          id="typedown-list"
+        >
+          {displayData?.length ? displayData?.map((d, index) => {
+            const isSelected = get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
+            return (
+              <button
+                key={`typedown-button-[${index}]`}
+                className={classnames(
+                  interactionStyles,
+                  css.fullWidth,
+                  css.menuButton
+                )}
+                data-selected={isSelected}
+                id={`typedown-button-[${index}]`}
+                onClick={() => {
+                  handleChange(d);
+                  handleNextFocus();
+                }}
+                onKeyDown={listKeyDownHandler}
+                type="button"
+              >
+                {renderItem(d)}
+              </button>
+            );
+          }) :
+          // TODO test this
+          <EndOfList />
+          }
+        </div>
+        {renderFooter &&
+          <div
+            ref={footerRef}
+            className={css.footer}
+            id={`typedown-footer-${selectorSafe(input.name)}`}
+          >
+            {renderFooter()}
+          </div>
+        }
+      </div>
+    );
+  }, [
+    displayData,
+    footerRef,
+    handleChange,
+    handleNextFocus,
+    input,
+    listKeyDownHandler,
+    listRef,
+    renderFooter,
+    renderItem,
+    searchWidth,
+    uniqueIdentificationPath
+  ]);
+
+  const renderSearchField = () => {
+    return (
+      <div
+        ref={triggerRef}
+        id={`typedown-parent-${selectorSafe(input.name)}-searchField`}
+      >
+        <SearchField
+          // Pass meta through so correct styling gets applied to the TextField
+          id={`typedown-searchField-${selectorSafe(input.name)}`}
+          marginBottom0
+          meta={meta}
+          onChange={handleType}
+          onKeyDown={searchFieldKeyDownHandler}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div
+      ref={resizeRef}
+    >
+      {renderSearchField()}
+      <Popper
+        key="typedown-menu-toggle"
+        anchorRef={triggerRef}
+        className={classnames(
+          css.dropdown,
+          css.fullWidth
+        )}
+        isOpen={open}
+        modifiers={{
+          flip: { boundariesElement: 'viewport', padding: 10 },
+          preventOverflow: { boundariesElement: 'viewport', padding: 10 }
+        }}
+        overlayProps={{
+          'ref': overlayRef,
+          'tabIndex': '-1',
+          'onClick': (e) => { e.stopPropagation(); }  // prevent propagation of click events
+        }}
+        overlayRef={overlayRef}
+        portal={portal}
+      >
+        {dropDown()}
+      </Popper>
+      {selectedUniqueId && !open &&
+        <div
+          className={classnames(
+            css.selected,
+            css.selectedDisplay
+          )}
+        >
+          <div
+            className={css.selectedItem}
+          >
+            {renderItem(input.value)}
+          </div>
+          <IconButton
+            className={css.clearItem}
+            icon="times-circle-solid"
+            onClick={() => handleChange()}
+          />
+        </div>
+      }
+    </div>
+  );
+};
+
+Typedown.propTypes = {
+  dataOptions: PropTypes.arrayOf(PropTypes.object),
+  filterPath: PropTypes.string,
+  input: PropTypes.object,
+  meta: PropTypes.object,
+  onChange: PropTypes.func,
+  onType: PropTypes.func,
+  renderFooter: PropTypes.func,
+  renderListItem: PropTypes.func,
+  uniqueIdentificationPath: PropTypes.string
+};
+
+export default Typedown;

package/src/lib/Typedown/index.js

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

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'
@@ -124,7 +127,7 @@ import { useHelperApp } from '@k-int/stripes-kint-components'
 const ChatPane = () => { ... }
 const Tags = () => { ... }
 ...
-const { HelperComponent, helperToggleFunctions } = useActiveElement({
+const { HelperComponent, helperToggleFunctions } = useHelperApp({
   chat: ChatPane,
   tags: Tags
 });
@@ -180,4 +183,108 @@ 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

@@ -4,3 +4,7 @@ export { default as useMutateRefdataValue } from './useMutateRefdataValue';
 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';