@abgov/jsonforms-components 1.20.1 → 1.21.1

package/index.esm.js

@@ -4,7 +4,7 @@ import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputD
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
-import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl as isControl$1, isCategorization, isLayout as isLayout$1 } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import merge from 'lodash/merge';
 import isEmpty$1 from 'lodash/isEmpty';
@@ -4595,7 +4595,6 @@ const flatten = arr => {
       const flatter = flatten(val[1]);
       return acc.concat(flatter);
     }
-    // If the current value is a string, add it to the accumulator
     if (isNameValuePair(val)) {
       return acc.concat([[String(val[0]), getValue(val[1]) || '']]);
     }
@@ -4613,7 +4612,7 @@ const flatten = arr => {
  * However, we need to decide how to handle these sorts of nested data in the summary
  * page before messing with it.
  */
-const getFormFieldValue = (scope, data) => {
+const getFormFieldValue = (schema, scope, data) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let currentValue = data;
   if (scope) {
@@ -4660,7 +4659,7 @@ const renderFileLink = (fileUploaderElement, downloadFile) => {
     children: fileUploaderElement === null || fileUploaderElement === void 0 ? void 0 : fileUploaderElement.filename
   });
 };
-const renderReviewControl = (data, element, requiredFields, index,
+const renderReviewControl = (schema, data, element, requiredFields, index,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 fileList, downloadFile) => {
   const fieldName = element.scope.split('/').pop() || '';
@@ -4668,21 +4667,21 @@ fileList, downloadFile) => {
   if (!fieldName || !label) return null;
   const isFileUploader = element.scope.includes('fileUploader');
   const fileUploaderElement = isFileUploader ? fileList && fileList[fieldName] : null;
-  const fieldValues = getFormFieldValue(element.scope, data ? data : {});
+  const fieldValues = getFormFieldValue(schema, element.scope, data ? data : {});
   const isRequired = requiredFields.includes(fieldName);
   const asterisk = isRequired ? ' *' : '';
   const values = fieldValues.value;
   return jsxs(React.Fragment, {
     children: [fieldValues.type === 'primitive' && renderValue(`${label}${asterisk}: `, `${index}`, fieldValues.value, fileUploaderElement, downloadFile), fieldValues.type === 'object' && values && values.length > 0 && values.map((v, i) => {
       return renderValue(`${v[0]}: `, `${index}:${i}`, v[1]);
-    }), fieldValues.type === 'array' && values && values.length > 0 && renderListDetails(values)]
+    }), fieldValues.type === 'array' && values && values.length > 0 && renderList(values)]
   }, index);
 };
-const renderListDetails = items => {
+const renderList = items => {
   return jsx(React.Fragment, {
     children: items.map((item, itemIndex) => {
       const details = Array.isArray(item) ? item : [undefined, [undefined, undefined]];
-      return jsxs(Fragment, {
+      return jsxs("div", {
         children: [jsx(Grid, {
           children: details[1].map((detail, detailIndex) => {
             const safeDetail = Array.isArray(detail) ? detail : [undefined, undefined];
@@ -4696,32 +4695,44 @@ const renderListDetails = items => {
   });
 };
 
-const renderReviewListWithDetail = (element,
+const renderReviewListWithDetail = (schema, elements,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 data, field, index, requiredFields) => {
   const listData = data[field];
+  const detailData = [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  listData.forEach((elementData, i) => {
+    const itemData = [];
+    elements.forEach((element, j) => {
+      const fieldName = element.scope.split('/').pop() || '';
+      const label = resolveLabelFromScope(element.scope);
+      const value = String(elementData[fieldName]);
+      itemData.push([label, value]);
+    });
+    detailData.push([`${i}`, itemData]);
+  });
   return jsxs(ListWithDetail, {
     children: [jsxs(ListWithDetailHeading, {
       children: [field, listData.length > 1 && 's']
-    }), jsx(Grid, {
-      children: listData.map((childData, childIndex) => {
-        var _a, _b;
-        return jsx(React.Fragment, {
-          children: jsx(RenderFormReviewFields, {
-            elements: ((_b = (_a = element === null || element === void 0 ? void 0 : element.options) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.elements) || [],
-            data: childData,
-            requiredFields: requiredFields
-          })
-        }, `${index}-${childIndex}`);
-      })
-    })]
+    }), renderList(detailData)]
   }, `${index}-${field}`);
 };
 
+const isControl = type => {
+  return type === 'Control';
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isListWithDetail$1 = (type, data, fieldName) => {
+  return type === 'ListWithDetail' && typeof data === 'object' && data !== null && fieldName in data && Array.isArray(data[fieldName]) && data[fieldName].length > 0;
+};
+const isLayout = schema => {
+  return typeof schema === 'object' && schema !== null && 'elements' in schema;
+};
 const RenderFormReviewFields = ({
   elements,
   data,
-  requiredFields
+  requiredFields,
+  schema
 }) => {
   var _a, _b;
   const enumerators = useContext(JsonFormContext);
@@ -4736,25 +4747,38 @@ const RenderFormReviewFields = ({
     }
   };
   return elements.map((element, index) => {
-    var _a;
+    var _a, _b, _c;
     const clonedElement = JSON.parse(JSON.stringify(element));
     const fieldName = (_a = clonedElement.scope) === null || _a === void 0 ? void 0 : _a.split('/').pop();
-    if (clonedElement.type === 'Control' && clonedElement.scope) {
-      return renderReviewControl(data, clonedElement, requiredFields, index, fileList, downloadFile);
-    } else if (clonedElement.type !== 'ListWithDetail' && (clonedElement === null || clonedElement === void 0 ? void 0 : clonedElement.elements)) {
+    if (isControl(clonedElement.type)) {
+      return renderReviewControl(schema, data, clonedElement, requiredFields, index, fileList, downloadFile);
+    } else if (isListWithDetail$1(clonedElement.type, data, fieldName)) {
+      const elements = removeLayouts((_c = (_b = clonedElement === null || clonedElement === void 0 ? void 0 : clonedElement.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) || [];
+      return renderReviewListWithDetail(schema, elements, data, fieldName, index);
+    } else if (isLayout(clonedElement)) {
       return jsx(React.Fragment, {
         children: jsx(RenderFormReviewFields, {
           elements: clonedElement.elements,
           data: data,
-          requiredFields: requiredFields
+          requiredFields: requiredFields,
+          schema: schema
         })
       }, index);
-    } else if (clonedElement.type === 'ListWithDetail' && data && data[fieldName] && data[fieldName].length > 0) {
-      return renderReviewListWithDetail(clonedElement, data, fieldName, index, requiredFields);
     }
     return null;
   });
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const removeLayouts = elements => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return elements.reduce((acc, item) => {
+    if (isLayout(item)) {
+      return acc.concat(removeLayouts(item.elements));
+    } else {
+      return acc.concat(item);
+    }
+  }, []);
+};
 
 const RenderStepElements = props => {
   return (
@@ -5001,7 +5025,8 @@ const FormStepper = props => {
                     children: jsx(RenderFormReviewFields, {
                       elements: category === null || category === void 0 ? void 0 : category.elements,
                       data: data,
-                      requiredFields: requiredFields
+                      requiredFields: requiredFields,
+                      schema: schema
                     })
                   })]
                 }, index);
@@ -5958,6 +5983,24 @@ const HelpContents = ({
 const HelpContentTester = rankWith(1, uiTypeIs('HelpContent'));
 const HelpContent = withJsonFormsControlProps(HelpContentComponent);
 
+const ImageComponent = ({
+  uischema
+}) => {
+  var _a, _b, _c, _d;
+  const url = ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.url) || '';
+  const width = ((_b = uischema.options) === null || _b === void 0 ? void 0 : _b.width) || '';
+  const height = ((_c = uischema.options) === null || _c === void 0 ? void 0 : _c.height) || '';
+  const alt = ((_d = uischema.options) === null || _d === void 0 ? void 0 : _d.alt) || '';
+  return jsx("img", {
+    src: url,
+    width: width,
+    height: height,
+    alt: alt
+  });
+};
+const ImageControlTester = rankWith(1, uiTypeIs('ImageContent'));
+const ImageControl = withJsonFormsControlProps(ImageComponent);
+
 const isNullSchema = schema => {
   return schema === undefined || schema === null;
 };
@@ -5984,7 +6027,7 @@ const isLayoutType = schema => {
   return hasType(schema, 'VerticalLayout') || hasType(schema, 'HorizontalLayout') || hasType(schema, 'Categorization') || hasType(schema, 'Group');
 };
 const isKnownType = schema => {
-  return hasType(schema, 'Control') || isLayoutType(schema) || hasType(schema, 'HelpContent') || isListWithDetail(schema) || hasType(schema, 'Callout');
+  return hasType(schema, 'Control') || isLayoutType(schema) || hasType(schema, 'HelpContent') || hasType(schema, 'ImageContent') || isListWithDetail(schema) || hasType(schema, 'Callout');
 };
 const isListWithDetail = schema => {
   return hasType(schema, 'ListWithDetail');
@@ -6028,7 +6071,7 @@ const getUISchemaErrors = (uiSchema, schema) => {
     return '';
   }
   // Check control elements
-  if (isControl(uiSchema) && hasType(uiSchema, 'Control')) {
+  if (isControl$1(uiSchema) && hasType(uiSchema, 'Control')) {
     if (!isScopedPrefixed(uiSchema.scope)) {
       return errMalformedScope(uiSchema.scope);
     }
@@ -6062,7 +6105,7 @@ const getUISchemaErrors = (uiSchema, schema) => {
     }
     // ensure each element has type Category, and that each category
     // has elements
-    if (isLayout(uiSchema)) {
+    if (isLayout$1(uiSchema)) {
       const invalidCategorizations = [];
       const invalidCategories = [];
       uiSchema.elements.forEach(e => {
@@ -6195,6 +6238,9 @@ const GoABaseRenderers = [
 }, {
   tester: HelpContentTester,
   renderer: HelpContent
+}, {
+  tester: ImageControlTester,
+  renderer: ImageControl
 }];
 const GoARenderers = [...GoABaseRenderers, {
   tester: CategorizationRendererTester,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.20.1",
+  "version": "1.21.1",
   "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/Additional/ImageControl.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ControlElement, ControlProps, RankedTester } from '@jsonforms/core';
+interface OptionProps {
+    url?: string;
+    width?: string;
+    height?: string;
+    alt?: string;
+}
+interface ImageCustomControlElement extends ControlElement {
+    options?: OptionProps;
+}
+interface ImageCustomControlProps extends ControlProps {
+    uischema: ImageCustomControlElement;
+}
+export declare const ImageComponent: ({ uischema }: ImageCustomControlProps) => JSX.Element;
+export declare const ImageControlTester: RankedTester;
+export declare const ImageControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export {};

package/src/lib/Additional/index.d.ts

@@ -1 +1,2 @@
 export * from './HelpContent';
+export * from './ImageControl';

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

@@ -1,10 +1,11 @@
-import { LabelDescription } from '@jsonforms/core';
+import { JsonSchema, LabelDescription } from '@jsonforms/core';
 type jsonformsLabel = string | boolean | LabelDescription | undefined;
 export declare const labelToString: (label: jsonformsLabel, scope: string) => string;
+export declare const resolveLabelFromScope: (scope: string) => string;
 export interface InputValue {
     type: 'primitive' | 'object' | 'array';
     value?: string | NestedStringArray;
 }
 export type NestedStringArray = (string | undefined | NestedStringArray)[];
-export declare const getFormFieldValue: (scope: string, data: unknown) => InputValue;
+export declare const getFormFieldValue: (schema: JsonSchema, scope: string, data: unknown) => InputValue;
 export {};

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Categorization, Category, UISchemaElement } from '@jsonforms/core';
+import { Categorization, Category, JsonSchema, UISchemaElement } from '@jsonforms/core';
 interface RenderFormReviewFieldsProps {
     elements: UISchemaElement[] | (Category | Categorization)[];
     data: any;
     requiredFields: string[];
+    schema: JsonSchema;
 }
 export declare const RenderFormReviewFields: React.FC<RenderFormReviewFieldsProps>;
 export {};

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

@@ -1,6 +1,8 @@
-import { ControlElement } from '@jsonforms/core';
+import { ControlElement, JsonSchema } from '@jsonforms/core';
+import { NestedStringArray } from './GenerateFormFields';
 export interface FileElement extends File {
     filename: string;
     propertyId: string;
 }
-export declare const renderReviewControl: (data: unknown, element: ControlElement, requiredFields: string[], index: number, fileList: Record<string, any>, downloadFile: (file: File, propertyId: string) => void) => JSX.Element | null;
+export declare const renderReviewControl: (schema: JsonSchema, data: unknown, element: ControlElement, requiredFields: string[], index: number, fileList: Record<string, any>, downloadFile: (file: File, propertyId: string) => void) => JSX.Element | null;
+export declare const renderList: (items: NestedStringArray) => JSX.Element;

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

@@ -1,2 +1,2 @@
-import { ControlElement } from '@jsonforms/core';
-export declare const renderReviewListWithDetail: (element: ControlElement, data: any, field: string, index: number, requiredFields: string[]) => JSX.Element;
+import { ControlElement, JsonSchema } from '@jsonforms/core';
+export declare const renderReviewListWithDetail: (schema: JsonSchema, elements: ControlElement[], data: any, field: string, index: number, requiredFields: string[]) => JSX.Element;