@k-int/stripes-kint-components 2.8.2 → 3.0.0

package/src/index.js

@@ -1,7 +1,6 @@
 // Useful hooks
 export {
   useActiveElement,
-  useAvailableCustomProperties,
   useCustomProperties,
   useHelperApp,
   useInvalidateRefdata,
@@ -14,7 +13,10 @@ export {
   useRefdata,
   useTemplates,
   useSettings,
-  useAppSettings
+  useAppSettings,
+  useIntlKeyStore,
+  useKintIntl,
+  useIntlKey
 } from './lib/hooks';
 
 // Useful utility functions
@@ -32,13 +34,16 @@ export {
   parseErrorResponse,
 } from './lib/utils';
 
-// Validators (Some/all copied from stripes-erm-components but this gives another way to acquire them)
+// Validators
 export {
   composeValidators,
+  composeValidatorsWithArgs,
   invalidNumber,
+  rangeOverflow,
+  rangeUnderflow,
   required,
   requiredObject,
-} from './lib/utils/validators';
+} from './lib/utils';
 
 // Contexts
 export {
@@ -127,3 +132,5 @@ export * as customPropertyContants from './lib/constants/customProperties';
 export { default as CycleButton } from './lib/CycleButton';
 export { default as IconSelect } from './lib/IconSelect';
 export { default as RichSelect, useSelectedOption } from './lib/RichSelect';
+
+export { default as FormattedKintMessage } from './lib/FormattedKintMessage';

package/src/lib/ActionList/ActionList.js

@@ -9,7 +9,6 @@ import ActionListFieldArray from './ActionListFieldArray';
 
 const propTypes = {
   actionAssigner: PropTypes.func,
-  actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   contentData: PropTypes.arrayOf(PropTypes.object),
   creatableFields: PropTypes.object,
@@ -18,17 +17,19 @@ const propTypes = {
   editableFields: PropTypes.object,
   fieldComponents: PropTypes.object,
   hideCreateButton: PropTypes.bool,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node
   ]),
+  labelOverrides: PropTypes.object,
   validateFields: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
 const ActionList = forwardRef(({
   actionAssigner,
-  actionCalls = {}, // DEPRECATED
   columnMapping,
   contentData,
   creatableFields = {},
@@ -37,7 +38,10 @@ const ActionList = forwardRef(({
   editableFields = {},
   fieldComponents = {},
   hideCreateButton,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   label,
+  labelOverrides = {},
   validateFields,
   visibleFields,
   ...mclProps // Assume anything left over is to directly apply to the MCL
@@ -59,7 +63,6 @@ const ActionList = forwardRef(({
           <form onSubmit={e => { e.preventDefault(); }}>
             <FieldArray
               actionAssigner={actionAssigner}
-              actionCalls={actionCalls}
               columnMapping={columnMapping}
               component={ActionListFieldArrayWithRef}
               creatableFields={creatableFields}
@@ -68,7 +71,10 @@ const ActionList = forwardRef(({
               editableFields={editableFields}
               fieldComponents={fieldComponents}
               hideCreateButton={hideCreateButton}
+              intlKey={passedIntlKey}
+              intlNS={passedIntlNS}
               label={label}
+              labelOverrides={labelOverrides}
               name="contentData"
               triggerFormSubmit={handleSubmit}
               validateFields={validateFields}

package/src/lib/ActionList/ActionListFieldArray.js

@@ -1,11 +1,13 @@
 import React, { forwardRef, useImperativeHandle, useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { Field, useForm, useFormState } from 'react-final-form';
-import { Button, Headline, IconButton, MultiColumnList, TextField } from '@folio/stripes/components';
+import { Button, Headline, IconButton, MultiColumnList, TextField, Tooltip } from '@folio/stripes/components';
+import { useKintIntl } from '../hooks';
+
 import css from '../../../styles/ActionListFieldArray.css';
 
 const EDITING_ACTIONS_WIDTH = 25;
@@ -14,7 +16,6 @@ const TOTAL_WIDTH = 100;
 
 const propTypes = {
   actionAssigner: PropTypes.func,
-  actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   creatableFields: PropTypes.object,
   createCallback: PropTypes.func,
@@ -24,18 +25,52 @@ const propTypes = {
   fieldComponents: PropTypes.object,
   formatter: PropTypes.object,
   hideCreateButton: PropTypes.bool,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node
   ]),
+  labelOverrides: PropTypes.object,
+  onRowClick: PropTypes.func,
   triggerFormSubmit: PropTypes.func.isRequired,
   validateFields: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
+// This needs to be outside of the main component for forwardRef to work properly it seems.
+const ActionTrigger = forwardRef(({ action, ...actionTriggerProps }, ref) => {
+  if (action.icon) {
+    return (
+      <IconButton
+        ref={ref}
+        icon={action.icon}
+        {...actionTriggerProps}
+      />
+    );
+  }
+
+  return (
+    <Button
+      ref={ref}
+      marginBottom0
+      {...actionTriggerProps}
+    >
+      {action.label ?? action.name}
+    </Button>
+  );
+});
+
+ActionTrigger.propTypes = {
+  action: PropTypes.shape({
+    icon: PropTypes.string,
+    label: PropTypes.string,
+    name: PropTypes.string
+  })
+};
+
 const ActionListFieldArray = forwardRef(({
   actionAssigner,
-  actionCalls, // DEPRECATED
   columnMapping,
   creatableFields,
   createCallback,
@@ -44,7 +79,11 @@ const ActionListFieldArray = forwardRef(({
   fields,
   fieldComponents,
   hideCreateButton = false,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   label,
+  labelOverrides = {},
+  onRowClick,
   validateFields,
   visibleFields,
   triggerFormSubmit,
@@ -53,7 +92,7 @@ const ActionListFieldArray = forwardRef(({
   // Grab finalForm functions/values from form hooks
   const { change } = useForm();
   const { hasValidationErrors, initialValues, pristine, submitting, values } = useFormState();
-
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
   /*
     Keep track of which field we are editing.
     null for no field, string id if we are editing an existing field and
@@ -81,8 +120,6 @@ const ActionListFieldArray = forwardRef(({
     const editCallback = actionAssigner(rowData)?.find(act => act.name === 'edit')?.callback;
     if (editCallback) {
       editCallback(rowData);
-    } else {
-      actionCalls.edit(rowData); // DEPRECATED
     }
   };
 
@@ -96,8 +133,6 @@ const ActionListFieldArray = forwardRef(({
 
     if (createCallback) {
       createCallback(rowData);
-    } else {
-      actionCalls.create(rowData); // DEPRECATED
     }
   };
 
@@ -139,7 +174,7 @@ const ActionListFieldArray = forwardRef(({
     if (data.id === editing || (!data.id && editing === 'NEW_ROW')) {
       // Render the save/cancel buttons
       return (
-        <div>
+        <div id="action-button-parent">
           <Button
             key={`save[${data.rowIndex}]`}
             buttonStyle="primary"
@@ -159,7 +194,10 @@ const ActionListFieldArray = forwardRef(({
             }}
             type="submit"
           >
-            <FormattedMessage id="stripes-kint-components.actionList.save" />
+            {kintIntl.formatKintMessage({
+              id: 'save',
+              overrideValue: labelOverrides?.save
+            })}
           </Button>
           <Button
             key={`cancel[${data.rowIndex}]`}
@@ -175,24 +213,23 @@ const ActionListFieldArray = forwardRef(({
               }
             }}
           >
-            <FormattedMessage id="stripes-kint-components.actionList.cancel" />
+            {kintIntl.formatKintMessage({
+              id: 'cancel',
+              overrideValue: labelOverrides?.cancel
+            })}
           </Button>
         </div>
       );
     }
 
     return (
-      <div>
+      <div id="action-button-parent">
         {actions?.map(action => {
           let actionFunction;
           if (action.callback) {
             actionFunction = () => action.callback(rest);
           }
 
-          if (!actionFunction && actionCalls[action.name]) {
-            actionFunction = () => actionCalls[action.name](rest); // DEPRECATED
-          }
-
           // Edit has special action functionality, revealing fields etc.
           if (action.name === 'edit') {
             actionFunction = () => toggleEditing(data.id);
@@ -209,32 +246,58 @@ const ActionListFieldArray = forwardRef(({
             }
           }
 
-          // If we're handed an icon, use that for the action button
-          if (action.icon) {
+          let tooltip;
+          let tooltipSub;
+          if (action?.tooltip) {
+            if (typeof action.tooltip === 'function') {
+              tooltip = action.tooltip(data);
+            } else {
+              tooltip = action.tooltip;
+            }
+
+            if (action?.tooltipSub) {
+              if (typeof action.tooltipSub === 'function') {
+                tooltipSub = action.tooltipSub(data);
+              } else {
+                tooltipSub = action.tooltipSub;
+              }
+            }
+          }
+
+          // If a tooltip is declared, render that around the actionButton
+          if (tooltip) {
             return (
-              <IconButton
-                key={`action-${action.name}[${data.rowIndex}]`}
-                ariaLabel={ariaLabel}
-                disabled={editing}
-                icon={action.icon}
-                onClick={() => (actionFunction ? actionFunction() : () => null)}
-                to={action.to}
-              />
+              <Tooltip
+                id={`action-${action.name}[${data.rowIndex}]-tooltip`}
+                sub={tooltipSub}
+                text={tooltip}
+              >
+                {({ ref: actionTriggerRef, ariaIds }) => (
+                  <ActionTrigger
+                    key={`action-${action.name}[${data.rowIndex}]`}
+                    ref={actionTriggerRef}
+                    action={action}
+                    aria-describedby={ariaIds.sub}
+                    aria-labelledby={ariaIds.text}
+                    disabled={editing}
+                    onClick={() => (actionFunction ? actionFunction() : () => null)}
+                    to={action.to}
+                  />
+                )}
+              </Tooltip>
             );
           }
 
-          // Else return a button with the label, or failing that the name of the action
+          // Finally, render the action button itself
           return (
-            <Button
+            <ActionTrigger
               key={`action-${action.name}[${data.rowIndex}]`}
+              action={action}
               ariaLabel={ariaLabel}
               disabled={editing}
-              marginBottom0
               onClick={() => (actionFunction ? actionFunction() : () => null)}
               to={action.to}
-            >
-              {action.label ?? action.name}
-            </Button>
+            />
           );
         })}
       </div>
@@ -323,18 +386,24 @@ const ActionListFieldArray = forwardRef(({
         </Headline>
         {!hideCreateButton &&
           <Button
-            disabled={editing || (!actionCalls.create && !createCallback)} // DEPRECATED actionCalls
+            disabled={editing || !createCallback}
             marginBottom0
             onClick={handleClickCreate}
           >
-            <FormattedMessage id="stripes-kint-components.new" />
+            {kintIntl.formatKintMessage({
+              id: 'new',
+              overrideValue: labelOverrides?.new
+            })}
           </Button>
         }
       </div>
       <MultiColumnList
         columnMapping={{
           ...columnMapping,
-          actionListActions: <FormattedMessage id="stripes-kint-components.actionList.actions" />
+          actionListActions: kintIntl.formatKintMessage({
+            id: 'actions',
+            overrideValue: labelOverrides?.actions
+          })
         }}
         columnWidths={getColumnWidths()}
         contentData={assignActions()}
@@ -342,7 +411,16 @@ const ActionListFieldArray = forwardRef(({
           actionListActions: renderActionButtons,
           ...fieldAwareFormatter()
         }}
-        interactive={false}
+        interactive={!!onRowClick}
+        onRowClick={onRowClick ? (e, row) => {
+          // Make sure we ONLY fire row click from row, and not from action buttons.
+          const targetIsAction = e.target.closest('[id^=action-button-parent]') !== null;
+
+          if (!targetIsAction) {
+            const { actionListActions: _ala, ...rowWithoutActions } = row;
+            onRowClick(e, rowWithoutActions);
+          }
+        } : null}
         visibleColumns={[...visibleFields, 'actionListActions']}
         {...restOfMclProps}
       />

package/src/lib/ActionList/README.md

@@ -91,7 +91,7 @@ const myRef = useRef();
 
 Name | Type | Description | default | required
 --- | --- | --- | --- | ---
-actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject, ariaLabel: () => null }`. The prop `name` is required, but `label` and `icon` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. The `ariaLabel` prop, which can be either a static string or a function accepting the row data and returning a string, will give the associated icon button an aria-label. If a `to` prop is passed, then the resulting button will be rendered as a \<Link/> element, as per Stripes Button/IconButton.| | ✓ |
+actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject, ariaLabel: () => null, tooltip: 'tooltip', tooltipSub: 'tooltipSub' }`. The props `name` and `callback` are required, but `label`,  `icon`, `to` and `tooltip`/`tooltipSub` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. The `ariaLabel` prop, which can be either a static string or a function accepting the row data and returning a string, will give the associated icon button an aria-label. If a `to` prop is passed, then the resulting button will be rendered as a \<Link/> element, as per Stripes Button/IconButton. If a `tooltip` prop is passed, the actionButton will be rendered with a surrounding Stripes Tooltip, with text `tooltip` and sub `tooltipSub`. | | ✓ |
 actionCalls (DEPRECATED) | object\<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. THESE CAN NOW BE PASSED AS "callback" in the actionAssigner. | {} | ✕ |
 columnMapping | object | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField` | | ✕ |
 contentData | array | An array of objects to render along with their actions | | ✓ |
@@ -102,6 +102,7 @@ editableFields | object\<function> | An object with keys from the `visibleFields
 fieldComponents | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take some `fieldProps` (currently only the name of the field `name`), and returns a Field component to be used in "edit mode" for the visible field specified. | | ✕ |
 formatter | object\<function> | A "formatter" object that takes the same shape as an MCL formatter, and is used in the same way whilst a row is NOT being edited. While editing a given row, this formatter entry is ignored. | | ✕ |
 hideCreateButton | boolean | A simple bool to hide the create button. Default behaviour without create action is disabled. | false | ✕ |
+onRowClick | function | A function accepting an event and the row data, fired on row click. The presence of this prop will cause the MCL to take on the interactive styling | | ✕ |
 validateFields | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and either return a validate function for final-form, or null | | ✕ |
 visibleFields | array\<String> | An array of strings corresponding to those fields to be displayed in the rendered MultiColumnList | | ✓ |
 ...mclProps | any | Any other props supplied to ActionList will be applied to the MCL directly. *WARNING* Some MCL props may override important functionality within ActionList | | ✕ |

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

@@ -1,19 +1,19 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { FormattedMessage } from 'react-intl';
-
 import { Col, MultiColumnList, Row, Spinner, Select, Button } from '@folio/stripes/components';
 
 import { Form } from 'react-final-form';
 import SearchField from '../../SearchField';
-import { useCustomProperties } from '../../hooks';
+import { useCustomProperties, useKintIntl } from '../../hooks';
 
 import css from '../../../../styles/CustomProperties.css';
 
 const CustomPropertiesLookup = ({
   contextFilterOptions, // expects an array of the form [{value: "OpenAccess", label: "Open Access"}, {value: false, label: "None"}]
   customPropertiesEndpoint: endpoint,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   mclProps,
   onSelectCustomProperty,
@@ -50,6 +50,8 @@ const CustomPropertiesLookup = ({
   };
   const [searchTerm, setSearchTerm] = useState('');
 
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   return (
     <>
       <Form
@@ -63,7 +65,13 @@ const CustomPropertiesLookup = ({
             onSubmit={handleSubmit}
           >
             <SearchField
-              ariaLabel={labelOverrides.searchAriaLabel ?? 'custom-property-search-field'}
+              ariaLabel={
+                kintIntl.formatKintMessage({
+                  id: 'customProperties.config.searchAriaLabel',
+                  overrideValue: labelOverrides.searchAriaLabel,
+                  fallbackMessage: 'custom-property-search-field'
+                })
+              }
               className={css.lookupSearch}
               marginBottom0
               onChange={e => setSearchTerm(e.target.value)}
@@ -75,7 +83,10 @@ const CustomPropertiesLookup = ({
               marginBottom0
               type="submit"
             >
-              <FormattedMessage id="stripes-kint-components.search" />
+              {kintIntl.formatKintMessage({
+                id: 'search',
+                overrideValue: labelOverrides.search
+              })}
             </Button>
           </form>
         )}
@@ -84,7 +95,12 @@ const CustomPropertiesLookup = ({
         <Col xs={6}>
           <Select
             dataOptions={contextFilterOptions}
-            label={<FormattedMessage id="stripes-kint-components.customProperties.ctx" />}
+            label={
+              kintIntl.formatKintMessage({
+                id: 'customProperties.ctx',
+                overrideValue: labelOverrides.ctx
+              })
+            }
             onChange={(e) => {
               setSelectedContext(e.target.value);
             }}
@@ -96,29 +112,55 @@ const CustomPropertiesLookup = ({
         <Spinner /> :
         <MultiColumnList
           columnMapping={{
-            'label': labelOverrides?.label ?? <FormattedMessage id="stripes-kint-components.customProperties.label" />,
-            'primary': labelOverrides?.primary ?? <FormattedMessage id="stripes-kint-components.customProperties.primary" />,
-            'ctx': labelOverrides?.ctx ?? <FormattedMessage id="stripes-kint-components.customProperties.ctx" />,
-            'weight': labelOverrides?.weight ?? <FormattedMessage id="stripes-kint-components.customProperties.weight" />,
-            'type': labelOverrides?.type ?? <FormattedMessage id="stripes-kint-components.customProperties.type" />,
-            'category': labelOverrides?.category ?? <FormattedMessage id="stripes-kint-components.customProperties.category" />
+            'label': kintIntl.formatKintMessage({
+              id: 'customProperties.label',
+              overrideValue: labelOverrides.label
+            }),
+            'primary': kintIntl.formatKintMessage({
+              id: 'customProperties.primary',
+              overrideValue: labelOverrides.primary
+            }),
+            'ctx': kintIntl.formatKintMessage({
+              id: 'customProperties.ctx',
+              overrideValue: labelOverrides.ctx
+            }),
+            'weight': kintIntl.formatKintMessage({
+              id: 'customProperties.weight',
+              overrideValue: labelOverrides.weight
+            }),
+            'type': kintIntl.formatKintMessage({
+              id: 'customProperties.type',
+              overrideValue: labelOverrides.type
+            }),
+            'category': kintIntl.formatKintMessage({
+              id: 'customProperties.category',
+              overrideValue: labelOverrides.category
+            }),
           }}
           contentData={custprops}
           formatter={{
             primary: data => {
               if (data?.primary) {
                 return (
-                  <FormattedMessage id="stripes-kint-components.yes" />
+                  kintIntl.formatKintMessage({
+                    id: 'yes',
+                    overrideValue: labelOverrides.yes
+                  })
                 );
               } else {
                 return (
-                  <FormattedMessage id="stripes-kint-components.no" />
+                  kintIntl.formatKintMessage({
+                    id: 'no',
+                    overrideValue: labelOverrides.no
+                  })
                 );
               }
             },
             type: data => (
-              labelOverrides?.[data?.type] ??
-              <FormattedMessage id={`stripes-kint-components.customProperties.type.${data?.type}`} />
+              kintIntl.formatKintMessage({
+                id: `customProperties.type.${data?.type}`,
+                overrideValue: labelOverrides?.[data?.type]
+              })
             ),
             category: data => data?.category?.desc
           }}
@@ -140,6 +182,8 @@ CustomPropertiesLookup.propTypes = {
     ])
   })),
   customPropertiesEndpoint: PropTypes.string,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   mclProps: PropTypes.object,
   onSelectCustomProperty: PropTypes.func,

package/src/lib/CustomProperties/Config/CustomPropertiesLookup.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import '@folio/stripes-erm-components/test/jest/__mock__';
 import { MemoryRouter } from 'react-router-dom';
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
-import { custPropLookup } from './testResources';
 import CustomPropertiesLookup from './CustomPropertiesLookup';
+import renderWithKintHarness from '../../../../test/jest/helpers/renderWithKintHarness';
 
+jest.mock('../../hooks');
 jest.mock('../../SearchField', () => () => <div>SearchField</div>);
 
 describe('CustomPropertiesLookup', () => {
@@ -14,7 +14,18 @@ describe('CustomPropertiesLookup', () => {
     renderComponent = renderWithKintHarness(
       <MemoryRouter>
         <CustomPropertiesLookup
-          {...custPropLookup}
+          contextFilterOptions={[
+            {
+              'value': '',
+              'label': 'All'
+            },
+            {
+              'value': 'isNull',
+              'label': 'None'
+            }
+          ]}
+          customPropertiesEndpoint="erm/custprops"
+          onSelectCustomProperty={() => ({})}
           visibleColumns={['label', 'primary', 'ctx', 'weight', 'type', 'category']}
         />
       </MemoryRouter>
@@ -24,7 +35,6 @@ describe('CustomPropertiesLookup', () => {
   it('renders expected options', () => {
     const { getByText } = renderComponent;
     expect(getByText('All')).toBeInTheDocument();
-    expect(getByText('OpenAccess')).toBeInTheDocument();
     expect(getByText('None')).toBeInTheDocument();
   });