@abgov/jsonforms-components 1.14.2 → 1.14.4

package/index.esm.js

@@ -4092,6 +4092,30 @@ const validateData = (jsonSchema, data, ajv) => {
   }
 };
 
+/**
+ * Steps can be hidden:
+ * When the user clicks on a step in the stepper function, it returns
+ * a step number relative to all steps.  Map to the step number relative
+ * to the visible steps.
+ */
+const mapToVisibleStep = (step, allSteps, visibleSteps) => {
+  if (visibleSteps.length < 1) return 0;
+  if (step < 1) return 1;
+  if (allSteps.length !== visibleSteps.length) {
+    const stepIndex = step - 1;
+    if (step > 1 && step <= allSteps.length) {
+      // Check to see if the the step is visible
+      const selectedLabel = allSteps[stepIndex];
+      const selectedIndex = visibleSteps.indexOf(selectedLabel);
+      step = selectedIndex !== -1 ? selectedIndex + 1 : 1;
+    }
+    if (step > allSteps.length) {
+      step = visibleSteps.length;
+    }
+  }
+  return step;
+};
+
 const FormStepper = props => {
   var _a, _b, _c, _d;
   const {
@@ -4173,35 +4197,16 @@ const FormStepper = props => {
     }
     setPage(page);
   }
-  const getNextStep = step => {
-    const rawCategoryLabels = rawCategories.elements.map(category => category.label);
-    if (rawCategoryLabels.length !== CategoryLabels.length) {
-      if (step > 1 && step <= rawCategoryLabels.length) {
-        const selectedTabLabel = rawCategoryLabels[step - 1];
-        const selectedTab = CategoryLabels.indexOf(selectedTabLabel);
-        const newStep = selectedTab !== -1 ? selectedTab + 1 : step;
-        return newStep;
-      }
-      if (step > rawCategoryLabels.length) {
-        return step - 1;
-      }
-    }
-    return step;
-  };
   function setTab(page) {
-    page = getNextStep(page);
-    setStep(page);
-    if (page < 1 || page > categories.length + 1) return;
-    setShowNextBtn(categories.length + 1 !== page);
+    const rawCategoryLabels = rawCategories.elements.map(category => category.label);
+    page = mapToVisibleStep(page, rawCategoryLabels, CategoryLabels);
+    setPage(page);
   }
   function setPage(page) {
     setStep(page);
     if (page < 1 || page > categories.length + 1) return;
     setShowNextBtn(categories.length + 1 !== page);
   }
-  const changePage = index => {
-    setPage(index + 1);
-  };
   const updateInputStatus = inputStatus => {
     inputStatuses[inputStatus.id] = inputStatus;
     setInputStatuses(Object.assign({}, inputStatuses));
@@ -4273,12 +4278,14 @@ const FormStepper = props => {
               children: categories.map((category, index) => {
                 const categoryLabel = category.label || category.i18n || 'Unknown Category';
                 const requiredFields = getAllRequiredFields(schema);
+                const testId = `${categoryLabel}-review-link`;
                 return jsxs(ReviewItemSection, {
                   children: [jsxs(ReviewItemHeader, {
                     children: [jsx(ReviewItemTitle, {
                       children: categoryLabel
                     }), jsx(Anchor, {
-                      onClick: () => changePage(index),
+                      onClick: () => setPage(index + 1),
+                      "data-testid": testId,
                       children: readOnly ? 'View' : 'Edit'
                     })]
                   }), jsx(Grid, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.14.2",
+  "version": "1.14.4",
   "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/FormStepper/util/stepNavigation.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Steps can be hidden:
+ * When the user clicks on a step in the stepper function, it returns
+ * a step number relative to all steps.  Map to the step number relative
+ * to the visible steps.
+ */
+export declare const mapToVisibleStep: (step: number, allSteps: string[], visibleSteps: (string | undefined)[]) => number;