@abgov/jsonforms-components 2.9.1 → 2.10.0

package/index.esm.js

@@ -3050,6 +3050,7 @@ $$l({ target: 'Iterator', proto: true, real: true, forced: IS_PURE$1 }, {
 
 const sinTitle = 'Social insurance number';
 const invalidSin = 'Social insurance number is invalid';
+const DEFAULT_MAX_ITEMS = 50;
 
 /**
  * Sets the first word to be capitalized so that it is sentence cased.
@@ -9582,6 +9583,7 @@ const ObjectArrayControl = props => {
   const [registers, dispatch] = useReducer(objectListReducer, initialState);
   const [open, setOpen] = useState(false);
   const [rowData, setRowData] = useState(0);
+  const [maxItemsError, setMaxItemsError] = useState('');
   const {
       label,
       path,
@@ -9612,11 +9614,23 @@ const ObjectArrayControl = props => {
   };
   //  eslint-disable-next-line
   const addItem = (path, value) => {
-    dispatch({
-      type: INCREMENT_ACTION,
-      payload: path
-    });
-    return () => props.addItem(path, value);
+    var _a, _b, _c, _d;
+    const maxItems = ((_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.maxItems) ? (_d = (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.detail) === null || _d === void 0 ? void 0 : _d.maxItems : DEFAULT_MAX_ITEMS;
+    const categories = registers.categories;
+    const currentCategory = categories[path];
+    const count = (currentCategory === null || currentCategory === void 0 ? void 0 : currentCategory.count) !== undefined ? currentCategory === null || currentCategory === void 0 ? void 0 : currentCategory.count : 0;
+    if (count < maxItems) {
+      dispatch({
+        type: INCREMENT_ACTION,
+        payload: path
+      });
+      return () => props.addItem(path, value);
+    } else {
+      setMaxItemsError(`Maximum ${maxItems} items allowed.`);
+      setTimeout(() => {
+        setMaxItemsError('');
+      }, 3000);
+    }
   };
   // eslint-disable-next-line
   const deleteItem = (path, value) => {
@@ -9637,6 +9651,7 @@ const ObjectArrayControl = props => {
     if (handleChangeData.length === 0) {
       handleChangeData = null;
     }
+    setMaxItemsError('');
     props.handleChange(path, handleChangeData);
     dispatch({
       type: DELETE_ACTION,
@@ -9718,6 +9733,12 @@ const ObjectArrayControl = props => {
       }) : jsxs("b", {
         children: [listTitle, " ", jsx("span", {
           children: additionalProps.required && '(required)'
+        }), maxItemsError && jsx("span", {
+          style: {
+            color: 'red',
+            marginLeft: '1rem'
+          },
+          children: maxItemsError
         })]
       }), !isInReview && listTitle && jsxs(ObjectArrayTitle, {
         children: [listTitle, " ", jsx("span", {
@@ -10155,20 +10176,37 @@ const ObjectArrayList = ({
 class ListWithDetailControl extends React.Component {
   constructor() {
     super(...arguments);
+    this.state = {
+      maxItemsError: ''
+    };
     // eslint-disable-next-line
     this.addItem = (path, value) => {
+      var _a, _b, _c;
       const {
         data,
         addItem,
-        setCurrentTab
+        setCurrentTab,
+        uischema
       } = this.props;
       const isNonEmpty = data !== undefined && data !== null;
       const newIndex = isNonEmpty ? data !== null && data !== void 0 ? data : 0 : 0;
-      if (addItem) {
-        addItem(path, value)();
-      }
-      if (typeof setCurrentTab === 'function') {
-        setCurrentTab(newIndex);
+      const maxItems = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.maxItems) !== null && _c !== void 0 ? _c : DEFAULT_MAX_ITEMS;
+      if (data < maxItems) {
+        if (addItem) {
+          addItem(path, value)();
+        }
+        if (typeof setCurrentTab === 'function') {
+          setCurrentTab(newIndex);
+        }
+      } else {
+        this.setState({
+          maxItemsError: `Maximum ${maxItems} items allowed.`
+        });
+        setTimeout(() => {
+          this.setState({
+            maxItemsError: ''
+          });
+        }, 3000);
       }
     };
   }
@@ -10201,6 +10239,12 @@ class ListWithDetailControl extends React.Component {
         children: [listTitle && jsxs(ObjectArrayTitle, {
           children: [listTitle, " ", jsx("span", {
             children: additionalProps.required && '(required)'
+          }), this.state.maxItemsError && jsx("span", {
+            style: {
+              color: 'red',
+              marginLeft: '1rem'
+            },
+            children: this.state.maxItemsError
           })]
         }), jsx(ObjectArrayToolBar, {
           errors: errors,
@@ -11803,7 +11847,10 @@ const GoAHorizontalLayoutComponent = ({
     enabled,
     direction: 'row',
     visible,
-    width: '10ch'
+    width: '10ch',
+    option: {
+      space: 'xl'
+    }
   };
   return jsx(LayoutRenderer, Object.assign({}, childProps, {
     renderers: renderers,
@@ -11828,7 +11875,10 @@ const GoAHorizontalReviewLayoutComponent = ({
     enabled,
     direction: 'row',
     visible,
-    width: ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.review) === null || _b === void 0 ? void 0 : _b.width) || '30ch'
+    width: ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.review) === null || _b === void 0 ? void 0 : _b.width) || '30ch',
+    option: {
+      space: 'xl'
+    }
   };
   return jsx(ReviewLayoutRenderer, Object.assign({}, childProps, {
     renderers: renderers,
@@ -11847,14 +11897,19 @@ const GoAVerticalLayoutComponent = ({
   cells,
   visible
 }) => {
+  var _a;
   const verticalLayout = uischema;
+  ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.spacing) || 's';
   const childProps = {
     elements: verticalLayout.elements,
     schema,
     path,
     enabled,
     direction: 'column',
-    visible
+    visible,
+    option: {
+      space: 'xl'
+    }
   };
   return jsx(LayoutRenderer, Object.assign({}, childProps, {
     renderers: renderers,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/ObjectArray/ListWithDetailControl.d.ts

@@ -37,6 +37,9 @@ interface ListWithDetailControlProps extends ObjectArrayControlProps {
     setCurrentTab: (index: number) => void;
 }
 export declare class ListWithDetailControl extends React.Component<ListWithDetailControlProps, any> {
+    state: {
+        maxItemsError: string;
+    };
     addItem: (path: string, value: any) => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/src/lib/common/Constants.d.ts

@@ -1,2 +1,3 @@
 export declare const sinTitle = "Social insurance number";
 export declare const invalidSin = "Social insurance number is invalid";
+export declare const DEFAULT_MAX_ITEMS = 50;

package/src/lib/util/layout.d.ts

@@ -8,6 +8,9 @@ export interface LayoutRendererProps extends OwnPropsOfRenderer {
     elements: UISchemaElement[];
     direction: 'row' | 'column';
     width?: string;
+    option: {
+        space?: string;
+    };
 }
 export interface AjvProps {
     ajv: Ajv;