@abgov/jsonforms-components 1.14.1 → 1.14.3

package/index.esm.js

@@ -3263,6 +3263,48 @@ $({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') },
   }
 });
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const getAxiosInterceptorConfig = axios => {
   const requestId = axios.interceptors.request.use(req => {
     if (req.data === undefined) {
@@ -3272,7 +3314,7 @@ const getAxiosInterceptorConfig = axios => {
   });
   return [requestId, axios];
 };
-function addDataByUrl(key, url, processDataFunction, token) {
+const addDataByUrl = (key, url, processDataFunction, token) => __awaiter(void 0, void 0, void 0, function* () {
   let header = {};
   const [requestId, axiosWithConfig] = getAxiosInterceptorConfig(axios);
   if (token) {
@@ -3280,7 +3322,7 @@ function addDataByUrl(key, url, processDataFunction, token) {
       Authorization: `Bearer ${token}`
     });
   }
-  axiosWithConfig.get(url, header).then(response => {
+  yield axiosWithConfig.get(url, header).then(response => {
     const processedData = processDataFunction(response.data);
     enumValues.set(key, () => processedData);
   }).catch(err => {
@@ -3291,14 +3333,15 @@ function addDataByUrl(key, url, processDataFunction, token) {
     }
   });
   axiosWithConfig.interceptors.request.eject(requestId);
-}
-function addDataByOptions(key, url, location, type, values) {
+});
+function addDataByOptions(key, url, location, type, values = ['']) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const dataFunction = data => {
     let dataLink = data;
     let returnData = [''];
-    const locationArray = location && !Array.isArray(location) ? [location] : location;
-    locationArray === null || locationArray === void 0 ? void 0 : locationArray.forEach(attribute => {
+    const locationArray = location && Array.isArray(location) ? location : [location];
+    const locationArrayTyped = locationArray;
+    locationArrayTyped === null || locationArrayTyped === void 0 ? void 0 : locationArrayTyped.forEach(attribute => {
       dataLink = dataLink[attribute];
     });
     const valuesArray = Array.isArray(values) ? values : [values];
@@ -3341,20 +3384,16 @@ function ContextProvider(props) {
       downloadFile,
       deleteFile
     } = props.fileManagement;
-    /* eslint-disable @typescript-eslint/no-empty-function */
-    const uploadFileFunction = uploadFile ? uploadFile : () => {};
-    const downloadFileFunction = downloadFile ? downloadFile : () => {};
-    const deleteFileFunction = deleteFile ? deleteFile : () => {};
     enumValues.set('file-list', () => fileList);
-    enumFunctions.set('upload-file', () => uploadFileFunction);
-    enumFunctions.set('download-file', () => downloadFileFunction);
-    enumFunctions.set('delete-file', () => deleteFileFunction);
+    enumFunctions.set('upload-file', () => uploadFile);
+    enumFunctions.set('download-file', () => downloadFile);
+    enumFunctions.set('delete-file', () => deleteFile);
   }
   if (props.submit) {
     const {
       submitForm
     } = props.submit;
-    const submitFunction = submitForm ? submitForm : () => {};
+    const submitFunction = submitForm;
     enumSubmitFunctions.set('submit-form', () => submitFunction);
   }
   if (props.data) {
@@ -3936,46 +3975,82 @@ const getFormFieldValue = (scope, data) => {
     return '';
   }
 };
-const renderFormFields = (elements, data,
-// eslint-disable-line @typescript-eslint/no-explicit-any
-requiredFields) => elements.map((element, index) => {
-  var _a;
-  const clonedElement = JSON.parse(JSON.stringify(element));
-  const lastSegment = (_a = clonedElement.scope) === null || _a === void 0 ? void 0 : _a.split('/').pop();
-  if (clonedElement.type === 'Control' && clonedElement.scope) {
-    const label = clonedElement.label ? clonedElement.label : resolveLabelFromScope(clonedElement.scope);
-    if (!label) return null;
-    const value = getFormFieldValue(clonedElement.scope, data ? data : {}).toString();
-    const asterisk = requiredFields.indexOf(lastSegment) !== -1 ? ' *' : '';
-    return jsxs(GridItem, {
-      md: 6,
-      vSpacing: 1,
-      hSpacing: 0.5,
-      children: [jsxs("strong", {
-        children: [label, " ", asterisk + ':']
-      }), ' ', value]
-    }, index);
-  } else if (clonedElement.type !== 'ListWithDetail' && (clonedElement === null || clonedElement === void 0 ? void 0 : clonedElement.elements)) {
-    return jsx(React.Fragment, {
-      children: renderFormFields(clonedElement.elements, data, requiredFields)
-    }, index);
-  } else if (clonedElement.type === 'ListWithDetail' && data && data[lastSegment] && data[lastSegment].length > 0) {
-    const listData = data[lastSegment];
-    return jsxs(ListWithDetail, {
-      children: [jsxs(ListWithDetailHeading, {
-        children: [lastSegment, listData.length > 1 && 's']
-      }), jsx(Grid, {
-        children: listData.map((childData,
-        // eslint-disable-line @typescript-eslint/no-explicit-any
-        childIndex // eslint-disable-line @typescript-eslint/no-explicit-any
-        ) => jsx(React.Fragment, {
-          children: renderFormFields(clonedElement.elements, childData, requiredFields)
-        }, `${index}-${childIndex}`))
-      })]
-    });
-  }
-  return null;
-});
+const RenderFormFields = ({
+  elements,
+  data,
+  requiredFields
+}) => {
+  var _a, _b;
+  const enumerators = useContext(JsonFormContext);
+  const downloadTriggerFunction = (_a = enumerators === null || enumerators === void 0 ? void 0 : enumerators.functions) === null || _a === void 0 ? void 0 : _a.get('download-file');
+  const downloadTrigger = downloadTriggerFunction && downloadTriggerFunction();
+  const fileListValue = (_b = enumerators === null || enumerators === void 0 ? void 0 : enumerators.data) === null || _b === void 0 ? void 0 : _b.get('file-list');
+  // eslint-disable-next-line
+  const fileList = fileListValue && fileListValue();
+  const toCamelCase = input => {
+    const words = input.split(' ');
+    const firstWord = words[0].toLowerCase();
+    const capitalizedWords = words.slice(1).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());
+    return [firstWord, ...capitalizedWords].join('');
+  };
+  const downloadFile = (file, propertyId) => {
+    if (downloadTrigger) {
+      downloadTrigger(file, propertyId);
+    }
+  };
+  return elements.map((element, index) => {
+    var _a;
+    const clonedElement = JSON.parse(JSON.stringify(element));
+    const lastSegment = (_a = clonedElement.scope) === null || _a === void 0 ? void 0 : _a.split('/').pop();
+    if (clonedElement.type === 'Control' && clonedElement.scope) {
+      const label = clonedElement.label ? clonedElement.label : resolveLabelFromScope(clonedElement.scope);
+      if (!label) return null;
+      const isFileUploader = label.toLowerCase().includes('file uploader');
+      const fileUploaderElement = isFileUploader ? fileList && fileList[toCamelCase(label)] : null;
+      const value = getFormFieldValue(clonedElement.scope, data ? data : {}).toString();
+      const isRequired = requiredFields.includes(lastSegment);
+      const asterisk = isRequired ? ' *' : '';
+      return jsxs(GridItem, {
+        md: 6,
+        vSpacing: 1,
+        hSpacing: 0.5,
+        children: [jsxs("strong", {
+          children: [label, " ", asterisk + ': ']
+        }), fileUploaderElement ? jsx("a", {
+          onClick: () => downloadFile(fileUploaderElement, fileUploaderElement === null || fileUploaderElement === void 0 ? void 0 : fileUploaderElement.propertyId),
+          children: fileUploaderElement === null || fileUploaderElement === void 0 ? void 0 : fileUploaderElement.filename
+        }) : value]
+      }, index);
+    } else if (clonedElement.type !== 'ListWithDetail' && (clonedElement === null || clonedElement === void 0 ? void 0 : clonedElement.elements)) {
+      return jsx(React.Fragment, {
+        children: jsx(RenderFormFields, {
+          elements: clonedElement.elements,
+          data: data,
+          requiredFields: requiredFields
+        })
+      }, index);
+    } else if (clonedElement.type === 'ListWithDetail' && data && data[lastSegment] && data[lastSegment].length > 0) {
+      const listData = data[lastSegment];
+      return jsxs(ListWithDetail, {
+        children: [jsxs(ListWithDetailHeading, {
+          children: [lastSegment, listData.length > 1 && 's']
+        }), jsx(Grid, {
+          children: listData.map((childData,
+          // eslint-disable-line @typescript-eslint/no-explicit-any
+          childIndex // eslint-disable-line @typescript-eslint/no-explicit-any
+          ) => jsx(React.Fragment, {
+            children: jsx(RenderFormFields, {
+              elements: clonedElement.elements,
+              data: childData,
+              requiredFields: requiredFields
+            })
+          }, `${index}-${childIndex}`))
+        })]
+      });
+    }
+    return null;
+  });
+};
 
 const RenderStepElements = props => {
   return (
@@ -4017,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 {
@@ -4098,26 +4197,10 @@ 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);
@@ -4207,7 +4290,11 @@ const FormStepper = props => {
                       children: readOnly ? 'View' : 'Edit'
                     })]
                   }), jsx(Grid, {
-                    children: renderFormFields(category.elements, data, requiredFields)
+                    children: jsx(RenderFormFields, {
+                      elements: category.elements,
+                      data: data,
+                      requiredFields: requiredFields
+                    })
                   })]
                 }, index);
               })
@@ -4283,38 +4370,6 @@ const categoriesAreValid = uischema => {
 };
 const CategorizationRendererTester = rankWith(2, and(uiTypeIs('Categorization'), categoriesAreValid, optionIs('variant', 'stepper')));
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 let _$3 = t => t,
   _t$3;
 const GoAContextMenuIcon = props => {
@@ -5432,4 +5487,4 @@ const GoARenderers = [...GoABaseRenderers, {
 }];
 const GoACells = [...InputCells];
 
-export { ContextProvider, GoABaseRenderers, GoACells, GoARenderers, JsonFormContext, addData, addDataByOptions, addDataByUrl, ajv, getAllData, getData };
+export { ContextProvider, GoABaseRenderers, GoACells, GoARenderers, JsonFormContext, addData, addDataByOptions, addDataByUrl, ajv, getAllData, getAxiosInterceptorConfig, getData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.14.1",
+  "version": "1.14.3",
   "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/Context/index.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { AxiosStatic } from 'axios';
 export interface AllData {
     [x: string]: any;
 }
-export declare function addDataByUrl(key: string, url: string, processDataFunction: (url: string) => string[], token?: string): void;
-export declare function addDataByOptions(key: string, url: string, location: string[], type: string, values: string[]): void;
+export declare const getAxiosInterceptorConfig: (axios: AxiosStatic) => [number, AxiosStatic];
+export declare const addDataByUrl: (key: string, url: string, processDataFunction: (data: object) => string[], token?: string) => Promise<void>;
+export declare function addDataByOptions(key: string, url: string, location: string[] | string, type: string, values?: string[] | string): void;
 interface FileManagement {
     fileList?: any;
     uploadFile?: (file: File, propertyId: string) => void;
@@ -20,16 +22,16 @@ type Props = {
     data?: any;
 };
 export declare const JsonFormContext: React.Context<{
-    data: Map<string, () => Record<string, any> | string[]>;
-    functions: Map<string, () => (file: File, propertyId: string) => void>;
-    submitFunction: Map<string, () => (data: any) => void>;
+    data: Map<string, () => Record<string, any>>;
+    functions: Map<string, () => ((file: File, propertyId: string) => void) | undefined>;
+    submitFunction: Map<string, () => ((data: any) => void) | undefined>;
 }>;
 export declare function ContextProvider(props: Props): JSX.Element | null;
 /**
  * Grabs data stored under a given key
  *
  */
-export declare function getData(key: string): string[] | Record<string, any> | undefined;
+export declare function getData(key: string): Record<string, any> | undefined;
 /**
  * Grabs all data
  *

package/src/lib/Controls/FormStepper/util/GenerateFormFields.d.ts

@@ -1,4 +1,11 @@
 import { UISchemaElement, Category, Categorization } from '@jsonforms/core';
+import React from 'react';
+interface RenderFormFieldsProps {
+    elements: UISchemaElement[] | (Category | Categorization)[];
+    data: any;
+    requiredFields: string[];
+}
 export declare const resolveLabelFromScope: (scope: string) => string | null;
 export declare const getFormFieldValue: (scope: string, data: object) => any;
-export declare const renderFormFields: (elements: UISchemaElement[] | (Category | Categorization)[], data: any, requiredFields: string[]) => (import("react/jsx-runtime").JSX.Element | null)[];
+export declare const RenderFormFields: React.FC<RenderFormFieldsProps>;
+export {};

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;