@k-int/stripes-kint-components 2.1.2 → 2.3.0

package/src/index.js

@@ -1,8 +1,10 @@
 // Useful hooks
 export {
   useActiveElement,
+  useAvailableCustomProperties,
   useCustomProperties,
   useHelperApp,
+  useInvalidateRefdata,
   useKiwtFieldArray,
   useKiwtSASQuery,
   useLocalStorageState,
@@ -18,10 +20,21 @@ export {
 export {
   generateKiwtQuery,
   generateKiwtQueryParams,
+  groupCustomPropertiesByCtx,
   refdataOptions,
-  selectorSafe
+  refdataQueryKey,
+  selectorSafe,
+  typedownQueryKey,
 } from './lib/utils';
 
+// Validators (Some/all copied from stripes-erm-components but this gives another way to acquire them)
+export {
+  composeValidators,
+  invalidNumber,
+  required,
+  requiredObject,
+} from './lib/utils/validators';
+
 // Contexts
 export {
   SettingsContext,
@@ -77,9 +90,28 @@ export { default as FormModal } from './lib/FormModal';
 
 // Custom properties
 export {
+  // Config
   CustomPropertiesLookup,
   CustomPropertiesSettings,
-  CustomPropertiesView
-} from './lib/CustomProperties/Config';
+  CustomPropertyView,
+  CustomPropertyForm,
+  // Edit
+  CustomPropertiesEdit,
+  CustomPropertiesEditCtx,
+  CustomPropertiesListField,
+  CustomPropertyFormCard,
+  CustomPropertyField,
+  // View
+  CustomPropertiesView,
+  CustomPropertiesViewCtx,
+  CustomPropertyCard,
+  // Filter
+  CustomPropertiesFilter,
+  CustomPropertiesFilterForm,
+  CustomPropertiesFilterField,
+  CustomPropertiesFilterFieldArray,
+  useOperators,
+  useParseActiveFilterStrings
+} from './lib/CustomProperties';
 
 export * as customPropertyContants from './lib/constants/customProperties';

package/src/lib/ActionList/ActionList.js

@@ -13,19 +13,23 @@ const propTypes = {
   columnMapping: PropTypes.object,
   contentData: PropTypes.arrayOf(PropTypes.object),
   creatableFields: PropTypes.object,
+  createCallback: PropTypes.func,
   editableFields: PropTypes.object,
   fieldComponents: PropTypes.object,
+  hideCreateButton: PropTypes.bool,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
 const ActionList = ({
   actionAssigner,
-  actionCalls = {},
+  actionCalls = {}, // DEPRECATED
   columnMapping,
   contentData,
   creatableFields = {},
+  createCallback,
   editableFields = {},
   fieldComponents = {},
+  hideCreateButton,
   visibleFields,
   ...mclProps // Assume anything left over is to directly apply to the MCL
 }) => {
@@ -35,7 +39,7 @@ const ActionList = ({
         enableReinitialize
         initialValues={{ contentData }}
         mutators={arrayMutators}
-        onSubmit={actionCalls.edit}
+        onSubmit={() => null}
         subscription={{ contentData: true }}
       >
         {() => (
@@ -46,8 +50,10 @@ const ActionList = ({
               columnMapping={columnMapping}
               component={ActionListFieldArray}
               creatableFields={creatableFields}
+              createCallback={createCallback}
               editableFields={editableFields}
               fieldComponents={fieldComponents}
+              hideCreateButton={hideCreateButton}
               name="contentData"
               visibleFields={visibleFields}
               {...mclProps}

package/src/lib/ActionList/ActionListFieldArray.js

@@ -16,21 +16,25 @@ const propTypes = {
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   creatableFields: PropTypes.object,
+  createCallback: PropTypes.func,
   editableFields: PropTypes.object,
   fields: PropTypes.object,
   fieldComponents: PropTypes.object,
   formatter: PropTypes.object,
+  hideCreateButton: PropTypes.bool,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
 const ActionListFieldArray = ({
   actionAssigner,
-  actionCalls,
+  actionCalls, // DEPRECATED
   columnMapping,
   creatableFields,
+  createCallback,
   editableFields,
   fields,
   fieldComponents,
+  hideCreateButton = false,
   visibleFields,
   ...mclProps // Assume anything left over is to directly apply to the MCL
 }) => {
@@ -53,15 +57,26 @@ const ActionListFieldArray = ({
     }
   };
 
-
   const handleSave = (index) => {
     const { actionListActions: _a, ...rowData } = fields.value[index];
-    actionCalls.edit(rowData);
+
+    // Find "edit" entry in actionAssigner
+    const editCallback = actionAssigner.find(act => act.name === 'edit')?.callback;
+    if (editCallback) {
+      editCallback(rowData);
+    } else {
+      actionCalls.edit(rowData); // DEPRECATED
+    }
   };
 
   const handleCreate = (index) => {
     const { actionListActions: _a, ...rowData } = fields.value[index];
-    actionCalls.create(rowData);
+
+    if (createCallback) {
+      createCallback(rowData);
+    } else {
+      actionCalls.create(rowData); // DEPRECATED
+    }
   };
 
  const getColumnWidths = () => {
@@ -131,7 +146,15 @@ const ActionListFieldArray = ({
     return (
       <div>
         {actions?.map(action => {
-          let actionFunction = () => actionCalls[action.name](rest);
+          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);
@@ -145,7 +168,8 @@ const ActionListFieldArray = ({
                 disabled={editing}
                 icon={action.icon}
                 marginBottom0
-                onClick={actionFunction}
+                onClick={() => (actionFunction ? actionFunction() : () => null)}
+                to={action.to}
               />
             );
           }
@@ -156,7 +180,8 @@ const ActionListFieldArray = ({
               key={`action-${action.name}[${data.rowIndex}]`}
               disabled={editing}
               marginBottom0
-              onClick={actionFunction}
+              onClick={() => (actionFunction ? actionFunction() : () => null)}
+              to={action.to}
             >
               {action.label ?? action.name}
             </Button>
@@ -242,16 +267,18 @@ const ActionListFieldArray = ({
 
   return (
     <>
-      <Button
-        buttonClass={css.buttonRight}
-        disabled={!actionCalls.create}
-        onClick={() => {
-          toggleEditing('NEW_ROW');
-          fields.push({});
-        }}
-      >
-        <FormattedMessage id="stripes-kint-components.actionList.create" />
-      </Button>
+      {!hideCreateButton &&
+        <Button
+          buttonClass={css.buttonRight}
+          disabled={(!actionCalls.create && !createCallback)} // DEPRECATED actionCalls
+          onClick={() => {
+            toggleEditing('NEW_ROW');
+            fields.push({});
+          }}
+        >
+          <FormattedMessage id="stripes-kint-components.actionList.create" />
+        </Button>
+      }
       <MultiColumnList
         columnMapping={{
           ...columnMapping,

package/src/lib/ActionList/README.md

@@ -23,32 +23,34 @@ const [contentData, setContentData] = useState({
 
 const actionAssigner = () => {
   return [
-    { name: 'edit' },
-    { name: 'delete' }
+    {
+      name: 'edit',
+      callback: (data) => setContentData({
+        ...contentData,
+        data
+      )}
+    },
+    {
+      name: 'delete',
+      callback: (data) => {
+        setContentData(contentData.filter(cd => cd.id !== data.id))
+      }
+    }
   ];
 };
 
-const actionCalls = {
-  create: (data) => setContentData({
-    ...contentData,
-    {
-      id: generateUUID(),
-      ...data
-    }
-  }),
-  edit: (data) => setContentData({
-    ...contentData,
-    data
-  ),
-  delete: (data) => {
-    setContentData(contentData.filter(cd => cd.id !== data.id))
+createCallback = (data) => setContentData({
+  ...contentData,
+  {
+    id: generateUUID(),
+    ...data
   }
-};
+});
 
 <ActionList
   actionAssigner={actionAssigner}
-  actionCalls={actionCalls}
   contentData={contentData}
+  createCallback={createCallback}
   visibleFields={['name', 'occupation']}
 />
 ```
@@ -57,13 +59,15 @@ const actionCalls = {
 
 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' }`. The prop `name` is required, but `label` and `icon` are optional props. | | ✓ |
-actionCalls | 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. | {} | ✕ |
+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 }`. The prop `name` is required, but `label` and `icon` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. If a `to` prop is passed, then the resulting button will be rendered as a <Link/> element, as per Stripes Button/IconButton.| | ✓ |
+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 | | ✓ |
 creatableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is fillable on create or not. | | ✕ |
+createCallback | <function> | A callback to be used for the built in "create" action (ie "save" on a new row). Will be prioritised ahead of a `create` entry in the deprecated actionCalls prop. | {} | ✕ |
 editableFields | object<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is editable or not. No key for a given field will be interpreted as () => true, so a field is editable by default. | | ✕ |
 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 | ✕ |
 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/CustomPropertiesSettings.js

@@ -14,7 +14,7 @@ import { Button, ConfirmationModal, Pane } from '@folio/stripes/components';
 import FormModal from '../../FormModal/FormModal';
 
 import CustomPropertiesLookup from './CustomPropertiesLookup';
-import CustomPropertiesView from './CustomPropertiesView';
+import CustomPropertyView from './CustomPropertyView';
 import CustomPropertiesForm from './CustomPropertyForm';
 import { useMutateCustomProperties, useRefdata } from '../../hooks';
 
@@ -160,7 +160,7 @@ const CustomPropertiesSettings = ({
             renderViewPaneTitle ?? customProperty?.label ?? customProperty?.name
           }
         >
-          <CustomPropertiesView
+          <CustomPropertyView
             customProperty={customProperty}
             labelOverrides={labelOverrides}
           />
@@ -171,6 +171,7 @@ const CustomPropertiesSettings = ({
           {
             weight: 0,
             primary: true,
+            retired: false,
             defaultInternal: true
           } :
           {

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

@@ -12,7 +12,7 @@ import {
   TextArea,
   TextField
 } from '@folio/stripes/components';
-import { requiredValidator } from '@folio/stripes-erm-components';
+import { required as requiredValidator, composeValidators } from '../../utils/validators';
 
 const CustomPropertyForm = ({
   contextFilterOptions,
@@ -43,6 +43,14 @@ const CustomPropertyForm = ({
     }
   };
 
+  const primaryRetiredValidator = (_v, allValues) => {
+    if (allValues.primary && allValues.retired) {
+      return labelOverrides?.primaryRetired ??
+        <FormattedMessage id="stripes-kint-components.errors.primaryRetired" />;
+    }
+    return null;
+  };
+
   return (
     <>
       <Row>
@@ -90,7 +98,7 @@ const CustomPropertyForm = ({
         </Col>
       </Row>
       <Row>
-        <Col xs={12}>
+        <Col xs={9}>
           <Field
             component={TextArea}
             label={labelOverrides?.description ??
@@ -106,6 +114,26 @@ const CustomPropertyForm = ({
             validate={requiredValidator}
           />
         </Col>
+        <Col xs={3}>
+          <Field
+            actions={[{ onSelect: addCtx, render: renderAddCtx }]}
+            component={MultiSelection}
+            dataOptions={contextOptions}
+            emptyMessage={intl.formatMessage({ id: 'stripes-kint-components.customProperties.noCtxFound' })}
+            label={labelOverrides?.ctx ??
+              <FormattedMessage id="stripes-kint-components.customProperties.ctx" />
+            }
+            name="ctx"
+            onChange={(selectedItems) => {
+              if (selectedItems.length) {
+                change('ctx', [selectedItems?.[selectedItems?.length - 1]]);
+              } else {
+                change('ctx', undefined);
+              }
+            }}
+            validate={value => (value?.length > 1 ? <FormattedMessage id="stripes-kint-components.customProperties.ctx.error.moreThanOne" /> : null)}
+          />
+        </Col>
       </Row>
       <Row>
         <Col xs={3}>
@@ -156,7 +184,47 @@ const CustomPropertyForm = ({
                 content={helpPopovers?.primary}
               /> : null
             }
-            validate={requiredValidator}
+            validate={composeValidators(
+              requiredValidator,
+              primaryRetiredValidator
+            )}
+          />
+        </Col>
+        <Col xs={3}>
+          <Field
+            component={Select}
+            dataOptions={[
+              {
+                label: intl.formatMessage({
+                  id: 'stripes-kint-components.yes',
+                }),
+                value: 'true',
+              },
+              {
+                label: intl.formatMessage({
+                  id: 'stripes-kint-components.no',
+                }),
+                value: 'false',
+              },
+            ]}
+            format={booleanToString}
+            label={labelOverrides?.retired ??
+              <FormattedMessage
+                id="stripes-kint-components.customProperties.retired"
+              />
+            }
+            name="retired"
+            parse={stringToBoolean}
+            required
+            startControl={helpPopovers?.primary ?
+              <InfoPopover
+                content={helpPopovers?.primary}
+              /> : null
+            }
+            validate={composeValidators(
+              requiredValidator,
+              primaryRetiredValidator
+            )}
           />
         </Col>
         <Col xs={3}>
@@ -193,26 +261,6 @@ const CustomPropertyForm = ({
             validate={requiredValidator}
           />
         </Col>
-        <Col xs={3}>
-          <Field
-            actions={[{ onSelect: addCtx, render: renderAddCtx }]}
-            component={MultiSelection}
-            dataOptions={contextOptions}
-            emptyMessage={intl.formatMessage({ id: 'stripes-kint-components.customProperties.noCtxFound' })}
-            label={labelOverrides?.ctx ??
-              <FormattedMessage id="stripes-kint-components.customProperties.ctx" />
-            }
-            name="ctx"
-            onChange={(selectedItems) => {
-              if (selectedItems.length) {
-                change('ctx', [selectedItems?.[selectedItems?.length - 1]]);
-              } else {
-                change('ctx', undefined);
-              }
-            }}
-            validate={value => (value?.length > 1 ? <FormattedMessage id="stripes-kint-components.customProperties.ctx.error.moreThanOne" /> : null)}
-          />
-        </Col>
       </Row>
       {/* Users can only configure the type of a custom property when creating it, not when editing it */}
       {!values?.id && (
@@ -246,6 +294,12 @@ const CustomPropertyForm = ({
                   }),
                   value: 'Refdata',
                 },
+                {
+                  label: intl.formatMessage({
+                    id: 'stripes-kint-components.customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyLocalDate',
+                  }),
+                  value: 'LocalDate',
+                },
               ]
               }
               label={labelOverrides?.type ??

package/src/lib/CustomProperties/Config/{CustomPropertiesView.js → CustomPropertyView.js}

@@ -5,7 +5,7 @@ import { Col, KeyValue, NoValue, Row } from '@folio/stripes/components';
 import { REFDATA_CLASS_NAME } from '../../constants/customProperties';
 
 // A default option for CustProp view pane, with the ability to override labels for fields
-const CustomPropertiesView = ({
+const CustomPropertyView = ({
   customProperty,
   labelOverrides
 }) => {
@@ -46,24 +46,34 @@ const CustomPropertiesView = ({
         <Col xs={6}>
           <KeyValue
             label={
-              labelOverrides?.weight ??
-              <FormattedMessage id="stripes-kint-components.customProperties.weight" />
+              labelOverrides?.primary ??
+              <FormattedMessage
+                id="stripes-kint-components.customProperties.primary"
+              />
+            }
+            value={
+              <FormattedMessage
+                id={
+                  customProperty?.primary
+                    ? 'stripes-kint-components.yes'
+                    : 'stripes-kint-components.no'
+                }
+              />
             }
-            value={customProperty?.weight}
           />
         </Col>
         <Col xs={6}>
           <KeyValue
             label={
-              labelOverrides?.primary ??
+              labelOverrides?.retired ??
               <FormattedMessage
-                id="stripes-kint-components.customProperties.primary"
+                id="stripes-kint-components.customProperties.retired"
               />
             }
             value={
               <FormattedMessage
                 id={
-                  customProperty?.primary
+                  customProperty?.retired
                     ? 'stripes-kint-components.yes'
                     : 'stripes-kint-components.no'
                 }
@@ -73,6 +83,15 @@ const CustomPropertiesView = ({
         </Col>
       </Row>
       <Row>
+        <Col xs={6}>
+          <KeyValue
+            label={
+              labelOverrides?.weight ??
+              <FormattedMessage id="stripes-kint-components.customProperties.weight" />
+            }
+            value={customProperty?.weight}
+          />
+        </Col>
         <Col xs={6}>
           <KeyValue
             label={
@@ -90,6 +109,8 @@ const CustomPropertiesView = ({
             }
           />
         </Col>
+      </Row>
+      <Row>
         <Col xs={6}>
           <KeyValue
             label={
@@ -128,7 +149,7 @@ const CustomPropertiesView = ({
   );
 };
 
-CustomPropertiesView.propTypes = {
+CustomPropertyView.propTypes = {
   customProperty: PropTypes.shape({
     id: PropTypes.string,
     label: PropTypes.string,
@@ -136,6 +157,7 @@ CustomPropertiesView.propTypes = {
     description: PropTypes.string,
     weight: PropTypes.number,
     primary: PropTypes.bool,
+    retired: PropTypes.bool,
     defaultInternal: PropTypes.bool,
     ctx: PropTypes.string,
     type: PropTypes.string,
@@ -147,4 +169,4 @@ CustomPropertiesView.propTypes = {
   labelOverrides: PropTypes.object
 };
 
-export default CustomPropertiesView;
+export default CustomPropertyView;

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

@@ -1,4 +1,4 @@
 export { default as CustomPropertiesLookup } from './CustomPropertiesLookup';
-export { default as CustomPropertiesView } from './CustomPropertiesLookup';
+export { default as CustomPropertyView } from './CustomPropertyView';
 export { default as CustomPropertiesSettings } from './CustomPropertiesSettings';
 export { default as CustomPropertyForm } from './CustomPropertyForm';

package/src/lib/CustomProperties/Edit/CustomPropertiesEdit.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import CustomPropertiesEditCtx from './CustomPropertiesEditCtx';
+
+const CustomPropertiesEdit = ({
+  contexts = [],
+  customPropertiesEndpoint,
+  id,
+  labelOverrides = {},
+  nameOverride
+}) => {
+  return (
+    contexts.map(ctx => (
+      <CustomPropertiesEditCtx
+        key={`customPropertiesEdit-${ctx}`}
+        {...{
+          ctx,
+          customPropertiesEndpoint,
+          id,
+          labelOverrides,
+          nameOverride
+        }}
+      />
+    ))
+  );
+};
+
+CustomPropertiesEdit.propTypes = {
+  contexts: PropTypes.arrayOf(PropTypes.string),
+  customPropertiesEndpoint: PropTypes.string,
+  id: PropTypes.string,
+  labelOverrides: PropTypes.object,
+  nameOverride: PropTypes.string
+};
+
+export default CustomPropertiesEdit;