@k-int/stripes-kint-components 2.4.1 → 2.5.0

package/src/lib/ActionList/ActionList.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { Form } from 'react-final-form';
@@ -17,10 +17,11 @@ const propTypes = {
   editableFields: PropTypes.object,
   fieldComponents: PropTypes.object,
   hideCreateButton: PropTypes.bool,
+  label: PropTypes.string,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
-const ActionList = ({
+const ActionList = forwardRef(({
   actionAssigner,
   actionCalls = {}, // DEPRECATED
   columnMapping,
@@ -30,9 +31,14 @@ const ActionList = ({
   editableFields = {},
   fieldComponents = {},
   hideCreateButton,
+  label,
   visibleFields,
   ...mclProps // Assume anything left over is to directly apply to the MCL
-}) => {
+}, ref) => {
+  const ActionListFieldArrayWithRef = (alfaProps) => (
+    <ActionListFieldArray ref={ref} {...alfaProps} />
+  );
+
   return (
     <>
       <Form
@@ -48,12 +54,13 @@ const ActionList = ({
               actionAssigner={actionAssigner}
               actionCalls={actionCalls}
               columnMapping={columnMapping}
-              component={ActionListFieldArray}
+              component={ActionListFieldArrayWithRef}
               creatableFields={creatableFields}
               createCallback={createCallback}
               editableFields={editableFields}
               fieldComponents={fieldComponents}
               hideCreateButton={hideCreateButton}
+              label={label}
               name="contentData"
               visibleFields={visibleFields}
               {...mclProps}
@@ -63,7 +70,7 @@ const ActionList = ({
       </Form>
     </>
   );
-};
+});
 
 ActionList.propTypes = propTypes;
 

package/src/lib/ActionList/ActionListFieldArray.js

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
 
 import { Field, useForm, useFormState } from 'react-final-form';
-import { Button, IconButton, MultiColumnList, TextField } from '@folio/stripes/components';
+import { Button, Headline, IconButton, MultiColumnList, TextField } from '@folio/stripes/components';
 import css from '../../../styles/ActionListFieldArray.css';
 
 const EDITING_ACTIONS_WIDTH = 25;
@@ -22,10 +22,11 @@ const propTypes = {
   fieldComponents: PropTypes.object,
   formatter: PropTypes.object,
   hideCreateButton: PropTypes.bool,
+  label: PropTypes.string,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
-const ActionListFieldArray = ({
+const ActionListFieldArray = forwardRef(({
   actionAssigner,
   actionCalls, // DEPRECATED
   columnMapping,
@@ -35,9 +36,10 @@ const ActionListFieldArray = ({
   fields,
   fieldComponents,
   hideCreateButton = false,
+  label,
   visibleFields,
   ...mclProps // Assume anything left over is to directly apply to the MCL
-}) => {
+}, ref) => {
   // Grab finalForm functions/values from form hooks
   const { change } = useForm();
   const { initialValues, pristine, submitting, values } = useFormState();
@@ -58,7 +60,12 @@ const ActionListFieldArray = ({
   };
 
   const handleSave = (index) => {
-    const { actionListActions: _a, ...rowData } = fields.value[index];
+    const {
+      actionListActions: _a,
+      fieldName: _fn,
+      fieldIndex: _fi,
+      ...rowData
+    } = fields.value[index];
 
     // Find "edit" entry in actionAssigner
     const editCallback = actionAssigner(rowData)?.find(act => act.name === 'edit')?.callback;
@@ -70,7 +77,12 @@ const ActionListFieldArray = ({
   };
 
   const handleCreate = (index) => {
-    const { actionListActions: _a, ...rowData } = fields.value[index];
+    const {
+      actionListActions: _a,
+      fieldName: _fn,
+      fieldIndex: _fi,
+      ...rowData
+    } = fields.value[index];
 
     if (createCallback) {
       createCallback(rowData);
@@ -79,6 +91,17 @@ const ActionListFieldArray = ({
     }
   };
 
+  const handleClickCreate = () => {
+    toggleEditing('NEW_ROW');
+    fields.push({});
+  };
+
+  // Way to go into create mode from external component, and way to tell internal editing state
+  useImperativeHandle(ref, () => ({
+    create: handleClickCreate,
+    editing
+  }));
+
  const getColumnWidths = () => {
     const widthNotInUseByActions = editing ?
       TOTAL_WIDTH - EDITING_ACTIONS_WIDTH :
@@ -190,54 +213,13 @@ const ActionListFieldArray = ({
     );
   };
 
-  const formatContent = () => {
+  const assignActions = () => {
     return (
       fields.map((fieldName, fieldIndex) => {
         // Fetch the content from the field Values
         const cd = get(values, fieldName);
         cd.actionListActions = actionAssigner(cd);
-
-        // Row is being edited if it has no id, or its id is in the editing string
-        const editingRow = cd.id === editing || !cd.id;
-        const returnObj = { ...cd };
-
-        // If editing, replace values with fields
-        if (editingRow) {
-          /*
-            Check if the property is a visible field.
-            If it is not then we don't allow editing in this component.
-          */
-          for (const key of visibleFields) {
-            const editFunction = editableFields[key] ?? (() => true);
-            const createFunction = creatableFields[key] ?? (() => true);
-            /*
-              Next check if this is a new row, if so we should run the createableField function with the data.
-              If it is not a new row, then we run the editableField function with the data,
-              and it should return true/false
-
-              For both checks
-              true => Field, false => display value
-            */
-            if (
-                (!cd.id && createFunction(cd)) ||
-                (editFunction(cd))
-            ) {
-              returnObj[key] =
-                fieldComponents[key] ?
-                fieldComponents[key]({
-                  name: `${fieldName}.${key}`
-                }) :
-                <Field
-                  autoFocus={fieldIndex === 0}
-                  component={TextField}
-                  marginBottom0
-                  name={`${fieldName}.${key}`}
-                  parse={v => v}
-                />;
-            }
-          }
-        }
-        return returnObj;
+        return { ...cd, fieldName, fieldIndex };
       })
     );
   };
@@ -250,11 +232,46 @@ const ActionListFieldArray = ({
       returnObj[key] = cd => {
          // Row is being edited if it has no id, or its id is in the editing string
         const editingRow = cd.id === editing || !cd.id;
-        // If not editing, use the passed formatter values
 
-        let returnValue = cd[key];
+        // Default to the passed formatter values
+        let returnValue = formatter?.[key] ? formatter[key](cd) : cd[key];
+
+        // If editing, replace values with fields
+        if (editingRow) {
+          /*
+            Check if the property is a visible field.
+            If it is not then we don't allow editing in this component.
+          */
+          const editFunction = editableFields[key] ?? (() => true);
+          const createFunction = creatableFields[key] ?? (() => true);
+          /*
+            Next check if this is a new row, if so we should run the createableField function with the data.
+            If it is not a new row, then we run the editableField function with the data,
+            and it should return true/false
+
+            For both checks
+            true => Field, false => display value
+          */
+          if (
+              (!cd.id && createFunction(cd)) ||
+              (editFunction(cd))
+          ) {
+            returnValue =
+              fieldComponents[key] ?
+              fieldComponents[key]({
+                name: `${cd.fieldName}.${key}`
+              }) :
+              <Field
+                autoFocus={cd.fieldIndex === 0}
+                component={TextField}
+                marginBottom0
+                name={`${cd.fieldName}.${key}`}
+                parse={v => v}
+              />;
+          }
+        }
 
-        if (!editingRow && formatter?.[key]) {
+        if (formatter?.[key]) {
           returnValue = formatter[key](cd);
         }
 
@@ -266,25 +283,29 @@ const ActionListFieldArray = ({
 
   return (
     <>
-      {!hideCreateButton &&
-        <Button
-          buttonClass={css.buttonRight}
-          disabled={(!actionCalls.create && !createCallback)} // DEPRECATED actionCalls
-          onClick={() => {
-            toggleEditing('NEW_ROW');
-            fields.push({});
-          }}
+      <div className={css.header}>
+        <Headline
+          className={css.headerText}
         >
-          <FormattedMessage id="stripes-kint-components.actionList.create" />
-        </Button>
-      }
+          {label}
+        </Headline>
+        {!hideCreateButton &&
+          <Button
+            disabled={editing || (!actionCalls.create && !createCallback)} // DEPRECATED actionCalls
+            marginBottom0
+            onClick={handleClickCreate}
+          >
+            <FormattedMessage id="stripes-kint-components.actionList.create" />
+          </Button>
+        }
+      </div>
       <MultiColumnList
         columnMapping={{
           ...columnMapping,
           actionListActions: <FormattedMessage id="stripes-kint-components.actionList.actions" />
         }}
         columnWidths={getColumnWidths()}
-        contentData={formatContent()}
+        contentData={assignActions()}
         formatter={{
           actionListActions: renderActionButtons,
           ...fieldAwareFormatter()
@@ -295,7 +316,7 @@ const ActionListFieldArray = ({
       />
     </>
   );
-};
+});
 
 ActionListFieldArray.propTypes = propTypes;
 

package/src/lib/ActionList/README.md

@@ -55,6 +55,25 @@ createCallback = (data) => setContentData({
 />
 ```
 
+## Inline creation trigger
+In rare circumstances, it may be necessary to trigger the inline creation from an external component. One particular example is within a settings Pane, forcing the create button up into the pane header.
+
+ActionList can accept a `ref`, which will provide the implementing component with a `create()` method for triggering inline create. It will also provide the internal "editing" state, which should be used to disable any create button.
+
+```
+import { useRef } from 'react';
+import { ActionList } from '@k-int/stripes-kint-components'
+
+const myRef = useRef();
+
+<button disabled={myRef.editing} onClick={() => myRef?.current?.create()}>
+  create
+</button>
+<ActionList
+  ref={myRef}
+/>
+```
+
 ## Props
 
 Name | Type | Description | default | required

package/src/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -7,8 +7,6 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import { useQueryClient } from 'react-query';
 
-import SafeHTMLMessage from '@folio/react-intl-safe-html';
-
 import { Button, ConfirmationModal, Pane } from '@folio/stripes/components';
 
 import FormModal from '../../FormModal/FormModal';
@@ -212,7 +210,7 @@ const CustomPropertiesSettings = ({
         id="delete-job-confirmation"
         message={
           labelOverrides?.confirmMessage ??
-          <SafeHTMLMessage id="stripes-kint-components.customProperties.delete.confirmMessage" values={{ name: customProperty?.name }} />
+          <FormattedMessage id="stripes-kint-components.customProperties.delete.confirmMessage" values={{ name: customProperty?.name }} />
         }
         onCancel={() => setDeleteModal(false)}
         onConfirm={() => {

package/src/lib/CustomProperties/View/CustomPropertyCard.js

@@ -113,7 +113,7 @@ const CustomPropertyCard = ({
             {renderValue()}
           </KeyValue>
         </Col>
-        {customProperty?.internalNote ? (
+        {customProperty?.note ? (
           <Col xs={6}>
             <KeyValue
               label={
@@ -124,7 +124,7 @@ const CustomPropertyCard = ({
               <span
                 style={{ whiteSpace: 'pre-wrap' }}
               >
-                {customProperty.internalNote}
+                {customProperty.note}
               </span>
             </KeyValue>
           </Col>

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -8,10 +8,11 @@ import ActionList from '../ActionList';
 
 const propTypes = {
   desc: PropTypes.string,
+  label: PropTypes.string,
   refdataEndpoint: PropTypes.string
 };
 
-const EditableRefdataList = ({ desc, refdataEndpoint }) => {
+const EditableRefdataList = ({ desc, label, refdataEndpoint }) => {
   /* A component that allows for editing of refdata values */
 
   // fetch refdata values
@@ -89,6 +90,7 @@ const EditableRefdataList = ({ desc, refdataEndpoint }) => {
       editableFields={{
         value: () => false
       }}
+      label={label}
       visibleFields={['label', 'value']}
     />
   );

package/src/lib/EditableSettingsList/EditableSettingsList.js

@@ -9,6 +9,7 @@ import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
 const EditableSettingsList = ({
   data,
   initialValues,
+  label,
   onSave
 }) => {
   return (
@@ -26,6 +27,7 @@ const EditableSettingsList = ({
           <FieldArray
             component={EditableSettingsListFieldArray}
             data={data}
+            label={label}
             name="settings"
             onSave={onSave}
           />
@@ -40,7 +42,12 @@ EditableSettingsList.propTypes = {
   data: PropTypes.shape({
     refdatavalues: PropTypes.arrayOf(PropTypes.object)
   }),
-  initialValues: PropTypes.object
+  initialValues: PropTypes.object,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.object
+  ])
 };
 
 export default EditableSettingsList;

package/src/lib/FormModal/FormModal.js

@@ -16,7 +16,8 @@ const FormModal = ({
       onSubmit={onSubmit}
       {...formProps}
     >
-      {({ handleSubmit, form: { restart } }) => {
+      {({ handleSubmit, form: { getState, restart } }) => {
+        const formState = getState();
         const handleClose = (e) => {
           onClose(e);
           restart();
@@ -24,15 +25,18 @@ const FormModal = ({
 
         const renderFooter = () => {
           if (footer) {
-            return footer({ handleSubmit, handleClose });
+            return footer({ formState, handleSubmit, handleClose });
           }
 
+          const { invalid, pristine, submitting } = formState;
           return (
             <ModalFooter>
               <Button
                 buttonStyle="primary"
+                disabled={submitting || invalid || pristine}
                 marginBottom0
                 onClick={handleSubmit}
+                type="submit"
               >
                 {
                   labelOverrides.save ??

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -199,9 +199,16 @@ const SASQLookupComponent = (props) => {
               >
                 <Body
                   data={data}
+                  filterPaneVisible={filterPaneVisible}
                   query={query}
                   toggleFilterPane={toggleFilterPane}
                   {...restOfInfiniteQueryProps}
+                  {...sasqRenderProps}
+                  /*
+                   * This is insane, it looks like SASQProps `initialSortState`
+                   * needs to be passed through to MCL, as it relies on MCL calling the initial
+                   * sort handler. Passing through SASQProps.
+                   */
                   {...sasqProps}
                   {...props}
                 />

package/src/lib/Typedown/Typedown.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 
 import get from 'lodash/get';
 
-import { EndOfList, IconButton, Label, Popper } from '@folio/stripes/components';
+import { EndOfList, IconButton, Popper } from '@folio/stripes/components';
 
 import SearchField from '../SearchField';
 import css from '../../../styles/TypeDown.css';
@@ -179,10 +179,12 @@ const Typedown = ({
         <SearchField
           // Pass meta through so correct styling gets applied to the TextField
           id={`typedown-searchField-${selectorSafe(input.name)}`}
+          label={label}
           marginBottom0
           meta={meta}
           onChange={handleType}
           onKeyDown={searchFieldKeyDownHandler}
+          required={required}
         />
       </div>
     );
@@ -195,16 +197,8 @@ const Typedown = ({
         css.typedown,
         className
       )}
+      id={`typedown-id-${id}`}
     >
-      {label &&
-        <Label
-          htmlFor={id}
-          id={`${id}-label`}
-          required={required}
-        >
-          {label}
-        </Label>
-      }
       {renderSearchField()}
       <Popper
         key="typedown-menu-toggle"

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

@@ -1,15 +1,32 @@
 import React from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { useOkapiKy } from '@folio/stripes/core';
+import { generateKiwtQueryParams } from '../../utils';
 
 const useSettingSection = ({
   sectionName,
   settingEndpoint
 }) => {
   const ky = useOkapiKy();
+  const queryParams = generateKiwtQueryParams({
+    filters: [
+      {
+        path: 'section',
+        value: sectionName
+      }
+    ],
+    sort: [
+      {
+        path: 'key'
+      }
+    ],
+    perPage: 100,
+    stats: false
+  }, {});
+
   const { data: settings = [] } = useQuery(
-    ['stripes-kint-components', 'useSetting', 'appSettings', sectionName],
-    () => ky(`${settingEndpoint}?filters=section=${sectionName}&sort=key;asc`).json()
+    ['stripes-kint-components', 'useSetting', 'appSettings', queryParams, sectionName],
+    () => ky(`${settingEndpoint}?${queryParams?.join('&')}`).json()
   );
 
   const { mutateAsync: putSetting } = useMutation(

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

@@ -10,7 +10,7 @@ import { Settings } from '@folio/stripes/smart-components';
 import { SettingPage, SettingPagePane } from '../../SettingPage';
 import { SettingsContext } from '../../contexts';
 
-import { sortByLabel, toCamelCase } from '../../utils';
+import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../../utils';
 
 const useSettings = ({
   dynamicPageExclusions,
@@ -22,12 +22,19 @@ const useSettings = ({
 }) => {
   const ky = useOkapiKy();
   const intl = useIntl();
-  const extraPathItems = dynamicPageExclusions.map(dpe => `filters=section!=${dpe}`);
-  extraPathItems.push('max=500');
+  const queryParams = generateKiwtQueryParams({
+      filters: dynamicPageExclusions?.map(dpe => ({
+        path: 'section',
+        comparator: '!=',
+        value: dpe
+      })),
+      perPage: 100,
+      stats: false
+  }, {});
 
   const { data: appSettings = [], isLoading } = useQuery(
-    ['stripes-kint-components', 'useSettings', 'appSettings', settingEndpoint],
-    () => ky(`${settingEndpoint}?${extraPathItems.join('&')}`).json()
+    ['stripes-kint-components', 'useSettings', 'appSettings', settingEndpoint, queryParams],
+    () => ky(`${settingEndpoint}?${queryParams?.join('&')}`).json()
   );
 
   const sections = [...new Set(appSettings.map(s => s.section))];

package/src/lib/utils/matchString.js

@@ -1,7 +1,7 @@
 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')
+  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
 

package/styles/ActionListFieldArray.css

@@ -1,3 +1,11 @@
-.buttonRight {
-  float: right;
+@import '@folio/stripes-components/lib/variables.css';
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--gutter)
+}
+
+.headerText {
+  margin-bottom: 0;
 }