@k-int/stripes-kint-components 2.1.1 → 2.2.0

package/src/index.js

@@ -22,6 +22,14 @@ export {
   selectorSafe
 } 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,

package/src/lib/ActionList/ActionList.js

@@ -15,6 +15,7 @@ const propTypes = {
   creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
   fieldComponents: PropTypes.object,
+  hideCreateButton: PropTypes.bool,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
@@ -26,6 +27,7 @@ const ActionList = ({
   creatableFields = {},
   editableFields = {},
   fieldComponents = {},
+  hideCreateButton,
   visibleFields,
   ...mclProps // Assume anything left over is to directly apply to the MCL
 }) => {
@@ -48,6 +50,7 @@ const ActionList = ({
               creatableFields={creatableFields}
               editableFields={editableFields}
               fieldComponents={fieldComponents}
+              hideCreateButton={hideCreateButton}
               name="contentData"
               visibleFields={visibleFields}
               {...mclProps}

package/src/lib/ActionList/ActionListFieldArray.js

@@ -20,6 +20,7 @@ const propTypes = {
   fields: PropTypes.object,
   fieldComponents: PropTypes.object,
   formatter: PropTypes.object,
+  hideCreateButton: PropTypes.bool,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 
@@ -31,6 +32,7 @@ const ActionListFieldArray = ({
   editableFields,
   fields,
   fieldComponents,
+  hideCreateButton = false,
   visibleFields,
   ...mclProps // Assume anything left over is to directly apply to the MCL
 }) => {
@@ -242,16 +244,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}
+          onClick={() => {
+            toggleEditing('NEW_ROW');
+            fields.push({});
+          }}
+        >
+          <FormattedMessage id="stripes-kint-components.actionList.create" />
+        </Button>
+      }
       <MultiColumnList
         columnMapping={{
           ...columnMapping,

package/src/lib/ActionList/README.md

@@ -65,5 +65,6 @@ creatableFields | object<function> | An object with keys from the `visibleFields
 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

@@ -171,6 +171,7 @@ const CustomPropertiesSettings = ({
           {
             weight: 0,
             primary: true,
+            retired: false,
             defaultInternal: true
           } :
           {

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

@@ -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={
@@ -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,

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/FormModal/FormModal.js

@@ -16,16 +16,11 @@ const FormModal = ({ children, modalProps: { onClose, ...modalProps }, onSubmit,
           restart();
         };
 
-        const handleSubmitAndClear = () => {
-          handleSubmit();
-          restart();
-        };
-
         const renderFooter = () => (
           <ModalFooter>
             <Button
               buttonStyle="primary"
-              onClick={handleSubmitAndClear}
+              onClick={handleSubmit}
             >
               <FormattedMessage id="stripes-kint-components.save" />
             </Button>
@@ -39,7 +34,7 @@ const FormModal = ({ children, modalProps: { onClose, ...modalProps }, onSubmit,
 
         return (
           <form
-            onSubmit={handleSubmitAndClear}
+            onSubmit={handleSubmit}
           >
             <Modal
               enforceFocus={false}

package/src/lib/utils/generateKiwtQueryParams.js

@@ -61,7 +61,7 @@ const generateKiwtQueryParams = (options, nsValues) => {
       }
     });
   }
-  
+
   if (filters) {
     const filterMap = {};
     filters.split(',').forEach(filter => {
@@ -95,7 +95,7 @@ const generateKiwtQueryParams = (options, nsValues) => {
       }
     });
   }
-  
+
   if (sort) {
     paramsArray.push(...sort.trim()?.split(',').map(sortKey => {
       const descending = sortKey.startsWith('-');

package/src/lib/utils/validators.js

@@ -0,0 +1,39 @@
+// This is a copy of stripes-erm-components, to avoid necessitating that as a dependency
+import { FormattedMessage } from 'react-intl';
+
+const invalidNumber = value => (
+  (value || value === 0) ? undefined : <FormattedMessage id="stripes-kint-components.errors.invalidNumber" />
+);
+
+const required = value => {
+  const blankString = /^\s+$/;
+  if ((value && !blankString.test(value)) || value === false || value === 0) {
+    return undefined;
+  }
+  return <FormattedMessage id="stripes-core.label.missingRequiredField" />;
+};
+
+const requiredObject = (formValue = {}) => {
+  // withKiwtFieldArray sets the _delete property on new objects by default
+  // eslint-disable-next-line no-unused-vars
+  const { _delete, ...value } = formValue;
+  if (Object.keys(value).length === 0) {
+    return <FormattedMessage id="stripes-core.label.missingRequiredField" />;
+  }
+  return undefined;
+};
+
+const composeValidators = (...validators) => (
+  (value, allValues, meta) => (
+    validators.reduce((error, validator) => (
+      error || validator(value, allValues, meta)
+    ), undefined)
+  )
+);
+
+export {
+  composeValidators,
+  invalidNumber,
+  required,
+  requiredObject,
+};

package/translations/stripes-kint-components/en.json

@@ -36,6 +36,7 @@
 
   "customProperties.label": "Label",
   "customProperties.primary": "Primary",
+  "customProperties.retired": "Retired",
   "customProperties.ctx": "Context",
   "customProperties.ctx.addContext": "Add context {value}",
   "customProperties.weight": "Order weight",
@@ -59,6 +60,7 @@
   "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata": "Refdata",
   "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyRefdataDefinition": "Refdata definition",
   "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyText": "Text",
+  "customProperties.type.com.k_int.web.toolkit.custprops.types.CustomPropertyLocalDate": "Date",
 
   "customProperties.delete.confirmLabel": "Delete",
   "customProperties.delete.confirmHeading": "Delete custom property",
@@ -66,5 +68,8 @@
 
   "search": "Search",
   "yes": "Yes",
-  "no": "No"
+  "no": "No",
+
+  "errors.invalidNumber": "Please enter a valid number to continue",
+  "errors.primaryRetired": "A custom property cannot be both primary and retired"
 }