@abgov/jsonforms-components 1.21.1 → 1.22.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 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, scopeEndsWith, 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';
@@ -2871,6 +2871,20 @@ const fetchRegister = props => __awaiter(void 0, void 0, void 0, function* () {
   }
   return undefined;
 });
+const validateUrl = props => __awaiter(void 0, void 0, void 0, function* () {
+  const {
+    url
+  } = props;
+  if (url) {
+    try {
+      yield axios.get(url);
+      return true;
+    } catch (err) {
+      console.warn(`Error in fetching data from remote: ${err}`);
+      return false;
+    }
+  } else return false;
+});
 
 const JsonFormsRegisterContext = /*#__PURE__*/createContext(undefined);
 const JsonFormRegisterProvider = ({
@@ -5749,6 +5763,72 @@ 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);
@@ -5910,7 +5990,7 @@ const HelpContentDiv = styled.div(_t || (_t = _`
 `));
 
 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;
   var {
       isParent = true
     } = _a,
@@ -5934,6 +6014,19 @@ 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, {
@@ -5944,14 +6037,14 @@ const HelpContentComponent = _a => {
           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, {
+        }), ((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.img) && ((_f = uischema.options) === null || _f === void 0 ? void 0 : _f.img) !== '' && renderImage(uischema.options), (!((_g = uischema.options) === null || _g === void 0 ? void 0 : _g.variant) || ((_h = uischema.options) === null || _h === void 0 ? void 0 : _h.variant) !== 'details') && renderHelp(), ((_j = uischema.options) === null || _j === void 0 ? void 0 : _j.variant) && ((_k = uischema.options) === null || _k === void 0 ? void 0 : _k.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) && ((_l = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _l === void 0 ? void 0 : _l.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 && ((_m = uischema.options) === null || _m === void 0 ? void 0 : _m.variant) !== 'details' && jsx(HelpContents, {
           elements: uischema.elements,
           isParent: false
         })]
@@ -5983,24 +6076,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;
 };
@@ -6027,7 +6102,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');
@@ -6180,6 +6255,9 @@ const GoABaseRenderers = [
 {
   tester: GoAEnumControlTester,
   renderer: GoAEnumControl
+}, {
+  tester: GoALinkControlTester,
+  renderer: linkControl
 }, {
   tester: GoAIntegerControlTester,
   renderer: GoAInputIntegerControl
@@ -6238,9 +6316,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.21.1",
+  "version": "1.22.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/HelpContent.d.ts

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

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

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

package/src/lib/Context/register/util.d.ts

@@ -1,2 +1,7 @@
 import { RegisterConfig } from './actions';
 export declare const fetchRegister: (props: RegisterConfig) => Promise<any[] | undefined>;
+interface Validate {
+    url?: string;
+}
+export declare const validateUrl: (props: Validate) => Promise<boolean>;
+export {};

package/src/lib/Controls/Link/LinkControl.d.ts

@@ -0,0 +1,9 @@
+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;

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 {};