@abgov/jsonforms-components 2.3.9 → 2.4.0

package/index.esm.js

@@ -6516,6 +6516,8 @@ const FormStepperReviewer = props => {
 };
 const FormStepperReviewControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperReviewer)));
 
+const TABLE_CONTEXT_ID = 100001;
+
 const isErrorPathIncluded = (errorPaths, path) => {
   return errorPaths.some(ePath => {
     /**
@@ -6608,7 +6610,10 @@ const stepperReducer = (state, action) => {
           id
         } = action.payload;
         state.activeId = id;
-        if (id > lastId) {
+        if (id === TABLE_CONTEXT_ID) {
+          return Object.assign({}, state);
+        }
+        if (id === lastId + 1) {
           state.isOnReview = true;
           state.hasNextButton = false;
           state.hasPrevButton = true;
@@ -6629,7 +6634,7 @@ const stepperReducer = (state, action) => {
           ajv,
           errors
         } = action.payload;
-        if (id === state.categories.length) {
+        if (id === state.categories.length || id === TABLE_CONTEXT_ID) {
           return Object.assign({}, state);
         }
         /*
@@ -6664,7 +6669,7 @@ const stepperReducer = (state, action) => {
 };
 
 const createStepperContextInitData = props => {
-  var _a;
+  var _a, _b;
   const {
     uischema,
     data,
@@ -6676,7 +6681,8 @@ const createStepperContextInitData = props => {
   } = props;
   const categorization = uischema;
   const valid = ajv.validate(schema, data || {});
-  const categories = (_a = categorization.elements) === null || _a === void 0 ? void 0 : _a.map((c, id) => {
+  const isPage = ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.variant) === 'pages';
+  const categories = (_b = categorization.elements) === null || _b === void 0 ? void 0 : _b.map((c, id) => {
     const scopes = pickPropertyValues(c, 'scope', 'ListWithDetail');
     const incompletePaths = getIncompletePaths(ajv, scopes);
     return {
@@ -6692,7 +6698,7 @@ const createStepperContextInitData = props => {
       visible
     };
   });
-  const activeId = (props === null || props === void 0 ? void 0 : props.activeId) || 0;
+  const activeId = (props === null || props === void 0 ? void 0 : props.activeId) || (isPage ? TABLE_CONTEXT_ID : 0);
   return {
     categories: categories,
     activeId,
@@ -6738,6 +6744,14 @@ const JsonFormsStepperContextProvider = ({
       selectCategory: id => {
         return stepperState.categories[id];
       },
+      goToTableOfContext: () => {
+        stepperDispatch({
+          type: 'page/to/index',
+          payload: {
+            id: TABLE_CONTEXT_ID
+          }
+        });
+      },
       validatePage: id => {
         var _a;
         stepperDispatch({
@@ -6749,7 +6763,7 @@ const JsonFormsStepperContextProvider = ({
           }
         });
       },
-      goToPage: (id, updateCategoryId) => {
+      goToPage: id => {
         var _a, _b, _c;
         ajv.validate(schema, ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.data) || {});
         if (stepperState.isOnReview !== true) {
@@ -6798,8 +6812,10 @@ const JsonFormsStepperContextProvider = ({
           }))
         }
       });
-      context.goToPage(stepperState.maxReachedStep);
-      context.goToPage(stepperState.activeId);
+      if (stepperState.activeId != TABLE_CONTEXT_ID) {
+        context.goToPage(stepperState.maxReachedStep);
+        context.goToPage(stepperState.activeId);
+      }
     }
   }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema)]);
   return jsx(JsonFormsStepperContext.Provider, {
@@ -6990,56 +7006,6 @@ const FormStepperView = props => {
 };
 const FormStepperControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepper)));
 
-let _$5 = t => t,
-  _t$5;
-const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$5`
-  .back-link::before {
-    content: '';
-    display: inline-block;
-    width: 42px;
-    height: 24px;
-    vertical-align: middle;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
-      center center no-repeat;
-  }
-
-  .back-link:visited::before,
-  .back-link:hover::before {
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
-      center center no-repeat;
-  }
-
-  .back-link {
-    margin-top: var(--goa-space-m);
-  }
-  display: inline-block;
-  color: #0070c4;
-  cursor: pointer;
-
-  on .goa-icon {
-    display: inline-block !important;
-    position: relative;
-    top: 3px;
-    right: 2px;
-    color: #0070c4;
-    margin-left: 4px;
-  }
-`));
-const BackButton = ({
-  text,
-  testId,
-  link
-}) => {
-  return jsx(BackButtonWrapper, {
-    "data-testid": "back-button-click",
-    onClick: link,
-    children: jsx("div", {
-      className: "back-link",
-      children: text
-    })
-  });
-};
-
 var aCallable$6 = aCallable$g;
 var toObject = toObject$8;
 var IndexedObject = indexedObject;
@@ -7341,6 +7307,56 @@ const FormStepperPageReviewer = props => {
 };
 withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
 
+let _$5 = t => t,
+  _t$5;
+const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$5`
+  .back-link::before {
+    content: '';
+    display: inline-block;
+    width: 42px;
+    height: 24px;
+    vertical-align: middle;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
+      center center no-repeat;
+  }
+
+  .back-link:visited::before,
+  .back-link:hover::before {
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
+      center center no-repeat;
+  }
+
+  .back-link {
+    margin-top: var(--goa-space-m);
+  }
+  display: inline-block;
+  color: #0070c4;
+  cursor: pointer;
+
+  on .goa-icon {
+    display: inline-block !important;
+    position: relative;
+    top: 3px;
+    right: 2px;
+    color: #0070c4;
+    margin-left: 4px;
+  }
+`));
+const BackButton = ({
+  text,
+  testId,
+  link
+}) => {
+  return jsx(BackButtonWrapper, {
+    "data-testid": "back-button-click",
+    onClick: link,
+    children: jsx("div", {
+      className: "back-link",
+      children: text
+    })
+  });
+};
+
 const RenderPages = props => {
   const {
     data,
@@ -7354,7 +7370,8 @@ const RenderPages = props => {
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const {
     goToPage,
-    toggleShowReviewLink
+    toggleShowReviewLink,
+    goToTableOfContext
   } = formStepperCtx;
   const {
     categories,
@@ -7400,7 +7417,11 @@ const RenderPages = props => {
                 style: {
                   marginTop: '1.5rem'
                 },
-                children: [props.renderBackButton(index, activeId), jsxs(PageRenderPadding, {
+                children: [jsx(BackButton, {
+                  testId: "back-button",
+                  link: () => goToTableOfContext(),
+                  text: "Back"
+                }), jsxs(PageRenderPadding, {
                   children: [jsxs("h3", {
                     children: ["Step ", index + 1, " of ", categories.length]
                   }), jsx(RenderStepElements, Object.assign({}, categoryProps))]
@@ -7496,27 +7517,10 @@ const FormPagesView = props => {
   useEffect(() => {
     validatePage(activeId);
   }, [data]);
-  const [showTOC, setShowTOC] = useState(true);
   const handleGoToPage = index => {
-    setShowTOC(false);
     goToPage(index);
   };
-  // Make sure the back button on the first page takes us to the Table of Contents.
-  const renderBackButton = (index, activeId) => {
-    if (index > 0) {
-      return jsx(BackButton, {
-        testId: "back-button",
-        link: () => goToPage(activeId - 1),
-        text: "Back"
-      });
-    }
-    return jsx(BackButton, {
-      testId: "back-button",
-      link: () => setShowTOC(true),
-      text: "Back"
-    });
-  };
-  if (showTOC) {
+  if (TABLE_CONTEXT_ID === activeId) {
     const tocProps = {
       categories,
       onClick: handleGoToPage,
@@ -7527,8 +7531,7 @@ const FormPagesView = props => {
     return jsx(TableOfContents, Object.assign({}, tocProps));
   } else {
     return jsx(RenderPages, {
-      categoryProps: props,
-      renderBackButton: renderBackButton
+      categoryProps: props
     });
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.3.9",
+  "version": "2.4.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/FormStepper/RenderPages.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="react" />
 import { CategorizationStepperLayoutRendererProps } from './types';
 export interface PageRenderingProps {
     categoryProps: CategorizationStepperLayoutRendererProps;
-    renderBackButton: (index: number, activeId: number) => JSX.Element;
 }
 export declare const RenderPages: (props: PageRenderingProps) => JSX.Element;

package/src/lib/Controls/FormStepper/context/StepperContext.d.ts

@@ -20,6 +20,7 @@ export interface JsonFormsStepperContextProps {
     selectPath: () => string;
     selectCategory: (id: number) => CategoryState;
     goToPage: (id: number, updateCategoryId?: number) => void;
+    goToTableOfContext: () => void;
     toggleShowReviewLink: (id: number) => void;
     validatePage: (id: number) => void;
     isProvided?: boolean;

package/src/lib/Controls/FormStepper/context/types.d.ts

@@ -27,3 +27,4 @@ export interface StepperContextDataType {
     maxReachedStep: number;
 }
 export type CategorizationElement = Category | Categorization;
+export declare const TABLE_CONTEXT_ID = 100001;