@abgov/jsonforms-components 1.22.0 → 1.22.2

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, scopeEndsWith, withIncreasedRank, hasType, isControl as isControl$1, isCategorization, isLayout as isLayout$1 } 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';
@@ -5763,72 +5763,6 @@ const GoAArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveAr
 const GoAArrayControlRenderer = withJsonFormsArrayLayoutProps(ArrayControl);
 const GoAListWithDetailsTester = rankWith(3, and(uiTypeIs('ListWithDetail')));
 
-const linkLength = 40;
-const invalidExtensions = ['exe'];
-const LinkSelect = props => {
-  var _a, _b;
-  const componentProps = (_b = (_a = props === null || props === void 0 ? void 0 : props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.componentProps;
-  const {
-    link,
-    label,
-    heading,
-    description
-  } = componentProps;
-  const [linkValid, setLinkValid] = useState(null);
-  let error = undefined;
-  let linkLabel = (link === null || link === void 0 ? void 0 : link.length) > linkLength ? `${link === null || link === void 0 ? void 0 : link.slice(0, linkLength)}...` : link;
-  let linkUrl = link;
-  if (label) {
-    linkLabel = label;
-  }
-  const count = link === null || link === void 0 ? void 0 : link.split('.').length;
-  const extension = link === null || link === void 0 ? void 0 : link.split('.')[count - 1];
-  if (invalidExtensions.includes(extension)) {
-    linkUrl = null;
-    linkLabel = '';
-    error = `Invalid extension: ${extension}`;
-  }
-  useEffect(() => {
-    function validateLink(linkUrl) {
-      return __awaiter(this, void 0, void 0, function* () {
-        if (linkUrl) {
-          const response = yield validateUrl({
-            url: linkUrl
-          });
-          setLinkValid(response);
-        }
-      });
-    }
-    validateLink(linkUrl);
-  }, [linkUrl]);
-  if (!linkLabel && !error) {
-    linkLabel = 'Link';
-  }
-  if (linkValid === false) {
-    linkLabel = '';
-    error = 'Invalid Link';
-  }
-  return jsx(GoAFormItem, {
-    error: error,
-    label: heading,
-    children: jsxs("div", {
-      "data-testid": "link-jsonform",
-      children: [description && jsx("div", {
-        children: description
-      }), linkUrl && linkValid ? jsx("a", {
-        href: link,
-        target: "_blank",
-        rel: "noreferrer",
-        children: linkLabel
-      }) : linkLabel]
-    })
-  });
-};
-const linkControl = props => {
-  return jsx(LinkSelect, Object.assign({}, props));
-};
-const GoALinkControlTester = rankWith(2, scopeEndsWith('link'));
-
 const GoATextCell = props => jsx(GoAInputText, Object.assign({}, props));
 const GoATextCellTester = rankWith(1, isStringControl);
 withJsonFormsCellProps(GoATextCell);
@@ -5989,8 +5923,65 @@ const HelpContentDiv = styled.div(_t || (_t = _`
   }
 `));
 
+const linkLength = 40;
+const invalidExtensions = ['exe'];
+const RenderLink = props => {
+  var _a;
+  const {
+    link,
+    help
+  } = props;
+  const [linkValid, setLinkValid] = useState(null);
+  let error = undefined;
+  let linkLabel = link && (link === null || link === void 0 ? void 0 : link.length) > linkLength ? `${link === null || link === void 0 ? void 0 : link.slice(0, linkLength)}...` : link;
+  let linkUrl = link;
+  if (help) {
+    linkLabel = help;
+  }
+  const count = ((_a = link === null || link === void 0 ? void 0 : link.split('.')) === null || _a === void 0 ? void 0 : _a.length) || 0;
+  const extension = link === null || link === void 0 ? void 0 : link.split('.')[count - 1];
+  if (invalidExtensions.includes(extension || '')) {
+    linkUrl = '';
+    linkLabel = '';
+    error = `Invalid extension: ${extension}`;
+  }
+  useEffect(() => {
+    function validateLink(linkUrl) {
+      return __awaiter(this, void 0, void 0, function* () {
+        if (linkUrl) {
+          const response = yield validateUrl({
+            url: linkUrl
+          });
+          setLinkValid(response);
+        }
+      });
+    }
+    validateLink(linkUrl);
+  }, [linkUrl]);
+  if (!linkLabel && !error) {
+    linkLabel = 'Link';
+  }
+  if (linkValid === false) {
+    linkLabel = '';
+    error = 'Invalid Link';
+  }
+  return jsx(GoAFormItem, {
+    error: error,
+    label: "",
+    children: jsx("div", {
+      "data-testid": "link-jsonform",
+      children: linkUrl && linkValid ? jsx("a", {
+        href: link,
+        target: "_blank",
+        rel: "noreferrer",
+        children: linkLabel
+      }) : linkLabel
+    })
+  });
+};
+
 const HelpContentComponent = _a => {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
   var {
       isParent = true
     } = _a,
@@ -6003,6 +5994,7 @@ const HelpContentComponent = _a => {
     visible,
     label
   } = props;
+  const link = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.link;
   const renderHelp = () => {
     var _a, _b, _c;
     return Array.isArray((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) ? jsx("ul", {
@@ -6014,24 +6006,37 @@ const HelpContentComponent = _a => {
       children: (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help
     });
   };
+  const renderImage = ({
+    height,
+    width,
+    alt,
+    img
+  }) => {
+    return jsx("img", {
+      src: img,
+      width: width,
+      height: height,
+      alt: alt
+    });
+  };
   return jsx(Visible, {
     visible: visible,
     children: jsx(HelpContentDiv, {
-      "aria-label": (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.ariaLabel,
+      "aria-label": (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.ariaLabel,
       children: jsxs("div", {
         className: marginClass,
-        children: [label && !((_c = uischema.options) === null || _c === void 0 ? void 0 : _c.variant) && ((_d = uischema.options) === null || _d === void 0 ? void 0 : _d.variant) !== 'details' && jsxs("div", {
+        children: [label && !((_d = uischema.options) === null || _d === void 0 ? void 0 : _d.variant) && ((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.variant) !== 'details' && jsxs("div", {
           className: labelClass,
           "data-testid": label,
           children: [label, jsx("br", {})]
-        }), (!((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.variant) || ((_f = uischema.options) === null || _f === void 0 ? void 0 : _f.variant) !== 'details') && renderHelp(), ((_g = uischema.options) === null || _g === void 0 ? void 0 : _g.variant) && ((_h = uischema.options) === null || _h === void 0 ? void 0 : _h.variant) === 'details' && jsxs(GoADetails, {
+        }), ((_f = uischema.options) === null || _f === void 0 ? void 0 : _f.img) && ((_g = uischema.options) === null || _g === void 0 ? void 0 : _g.img) !== '' && renderImage(uischema.options), ((_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.link) && link !== '' && RenderLink(uischema === null || uischema === void 0 ? void 0 : uischema.options), (!((_j = uischema.options) === null || _j === void 0 ? void 0 : _j.variant) || ((_k = uischema.options) === null || _k === void 0 ? void 0 : _k.variant) !== 'details') && !link && renderHelp(), ((_l = uischema.options) === null || _l === void 0 ? void 0 : _l.variant) && ((_m = uischema.options) === null || _m === void 0 ? void 0 : _m.variant) === 'details' && jsxs(GoADetails, {
           heading: label ? label : '',
           mt: "3xs",
           mb: "none",
-          children: [renderHelp(), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && ((_j = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _j === void 0 ? void 0 : _j.length) > 0 && jsx(HelpContents, {
+          children: [renderHelp(), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && ((_o = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _o === void 0 ? void 0 : _o.length) > 0 && jsx(HelpContents, {
             elements: uischema === null || uischema === void 0 ? void 0 : uischema.elements
           })]
-        }), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && (uischema === null || uischema === void 0 ? void 0 : uischema.elements.length) > 0 && ((_k = uischema.options) === null || _k === void 0 ? void 0 : _k.variant) !== 'details' && jsx(HelpContents, {
+        }), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && (uischema === null || uischema === void 0 ? void 0 : uischema.elements.length) > 0 && ((_p = uischema.options) === null || _p === void 0 ? void 0 : _p.variant) !== 'details' && jsx(HelpContents, {
           elements: uischema.elements,
           isParent: false
         })]
@@ -6063,24 +6068,6 @@ 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;
 };
@@ -6107,7 +6094,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') || hasType(schema, 'ImageContent') || isListWithDetail(schema) || hasType(schema, 'Callout');
+  return hasType(schema, 'Control') || isLayoutType(schema) || hasType(schema, 'HelpContent') || isListWithDetail(schema) || hasType(schema, 'Callout');
 };
 const isListWithDetail = schema => {
   return hasType(schema, 'ListWithDetail');
@@ -6260,9 +6247,6 @@ const GoABaseRenderers = [
 {
   tester: GoAEnumControlTester,
   renderer: GoAEnumControl
-}, {
-  tester: GoALinkControlTester,
-  renderer: linkControl
 }, {
   tester: GoAIntegerControlTester,
   renderer: GoAInputIntegerControl
@@ -6321,9 +6305,6 @@ 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.22.0",
+  "version": "1.22.2",
   "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/HelpContent.d.ts

@@ -5,6 +5,11 @@ interface OptionProps {
     ariaLabel?: string;
     help?: string | string[];
     variant?: string;
+    img?: string;
+    alt?: string;
+    height?: string;
+    width?: string;
+    link?: string;
 }
 interface CustomControlElement extends ControlElement {
     options?: OptionProps;

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

@@ -0,0 +1,11 @@
+export interface OptionProps {
+    ariaLabel?: string;
+    help?: string | string[];
+    variant?: string;
+    img?: string;
+    alt?: string;
+    height?: string;
+    width?: string;
+    link?: string;
+}
+export declare const RenderLink: (props: OptionProps) => JSX.Element;

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

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

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

@@ -1,18 +0,0 @@
-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/Controls/Link/LinkControl.d.ts

@@ -1,9 +0,0 @@
-import { ControlProps, RankedTester } from '@jsonforms/core';
-import { TranslateProps } from '@jsonforms/react';
-import { WithInputProps } from '../Inputs/type';
-import { WithOptionLabel } from '../../util';
-import { WithClassname } from '@jsonforms/core';
-export type LinkSelectProps = WithClassname & TranslateProps & WithInputProps & ControlProps;
-export declare const LinkSelect: (props: LinkSelectProps) => JSX.Element;
-export declare const linkControl: (props: ControlProps & WithOptionLabel & TranslateProps) => import("react/jsx-runtime").JSX.Element;
-export declare const GoALinkControlTester: RankedTester;