@evergis/react 3.1.126 → 3.1.128

package/dist/react.esm.js

@@ -5577,35 +5577,36 @@ const LayerListContainer = styled(Flex) `
 
 const ElementValueWrapper = styled.div `
   transition: background-color ${transition.toggle};
-  
-  ${({ noMargin }) => css `
-    &&&& {
-      margin-bottom: 0;
-    }
-  `};
+
+  ${({ noMargin }) => !!noMargin &&
+    css `
+      &&&& {
+        margin-bottom: 0;
+      }
+    `};
 `;
 const Container = styled(Flex) `
   flex-direction: column;
   width: 100%;
-  
+
   ${({ isColumn }) => isColumn
     ? css `
-      &&& > * {
-        justify-content: flex-start;
-      }
-      > * {
-        width: 100%;
-
-        :not(:last-child) {
-          margin-bottom: 0.5rem;
-        }
-      }
-      `
+          &&& > * {
+            justify-content: flex-start;
+          }
+          > * {
+            width: 100%;
+
+            :not(:last-child) {
+              margin-bottom: 0.5rem;
+            }
+          }
+        `
     : css `
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-      `}
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+        `}
 
   ${({ isTitle }) => isTitle &&
     css `
@@ -5614,12 +5615,13 @@ const Container = styled(Flex) `
       }
     `}
   
-  ${({ noBorders }) => noBorders && css `
-    ${ContainerWrapper} {
-      box-shadow: none;
-      padding: 0;
-    }
-  `}
+  ${({ noBorders }) => noBorders &&
+    css `
+      ${ContainerWrapper} {
+        box-shadow: none;
+        padding: 0;
+      }
+    `}
 `;
 const ContainerWrapper = styled(Flex) `
   position: relative;
@@ -5634,12 +5636,13 @@ const ContainerWrapper = styled(Flex) `
   color: ${({ theme: { palette } }) => palette.textPrimary};
   z-index: ${({ $zIndex }) => $zIndex ?? 1};
   transition: background-color ${transition.toggle};
-  
-  ${({ $noMargin }) => $noMargin && css `
-    &&&& {
-      margin-bottom: 0;
-    }
-  `}
+
+  ${({ $noMargin }) => $noMargin &&
+    css `
+      &&&& {
+        margin-bottom: 0;
+      }
+    `}
 `;
 const DashboardChip = styled(Chip) `
   margin: 0 0.25rem 0.25rem 0;
@@ -5654,7 +5657,7 @@ const DashboardChip = styled(Chip) `
   }
 
   span[kind]:after {
-    color: ${({ $isDefault, $fontColor, theme: { palette } }) => ($isDefault ? palette.icon : $fontColor || "#fff")};
+    color: ${({ $isDefault, $fontColor, theme: { palette } }) => $isDefault ? palette.icon : $fontColor || "#fff"};
   }
 `;
 const DashboardPlaceholderWrap = styled(Flex) `
@@ -5675,7 +5678,7 @@ const DashboardPlaceholder = styled(Flex) `
     css `
       width: 6.25rem;
     `}
-  
+
   &&& > * {
     margin-bottom: 0;
   }
@@ -5842,7 +5845,7 @@ const PresentationPanelContainer = styled.div `
     height: auto;
     margin: 0 -1.125rem -1.5rem;
     padding: 0;
-  
+
     ${LayerGroupList} {
       padding: 0;
     }
@@ -5869,7 +5872,7 @@ const DataSourceErrorContainer = styled(Flex) `
 `;
 const AttributeLabel = styled(Description) `
   margin-top: 0 !important;
-  margin-bottom: ${({ forCheckbox }) => (forCheckbox ? "0.75rem" : "0.25rem")} !important;
+  margin-bottom: ${({ forCheckbox }) => forCheckbox ? "0.75rem" : "0.25rem"} !important;
   padding-left: ${({ isEdit }) => (isEdit ? "0.5rem" : "0")};
 `;
 const FeatureControls = styled(Flex) `
@@ -5894,9 +5897,11 @@ const getAttributeByName = (attributeName, attributes) => {
 };
 
 const formatElementValue = ({ t, value, elementConfig, attributes, wrap, }) => {
-    const { id, type, defaultValue, options, style, attributeName, templateName } = elementConfig || {};
-    const attribute = attributeName ? getAttributeByName(attributeName, attributes) : null;
-    const { fontColor, fontSize, noUnits, tagView, bgColor, withDivider, radius, noMargin } = options || {};
+    const { id, type, defaultValue, options, style, attributeName, templateName, } = elementConfig || {};
+    const attribute = attributeName
+        ? getAttributeByName(attributeName, attributes)
+        : null;
+    const { fontColor, fontSize, noUnits, tagView, bgColor, withDivider, radius, noMargin, } = options || {};
     const valueOrDefault = value || defaultValue;
     const resultValue = type === "attributeValue" && attribute?.type && attribute?.stringFormat
         ? formatAttributeValue({
@@ -6167,7 +6172,7 @@ const OneColumnContainer = memo(({ type, elementConfig, renderElement }) => {
         const { id, value, hideEmpty, style, hasUnits, render } = getRenderContainerItem(elementConfig, attribute);
         if (!value && hideEmpty)
             return null;
-        return (jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [value, hasUnits && (jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] }));
+        return (jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxs(ContainerValue, { children: [value, hasUnits && (jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] }));
     }, [getRenderContainerItem, elementConfig]);
     return renderAttributes?.length ? (jsx(Fragment$1, { children: renderAttributes.map(renderContainer) })) : (renderContainer());
 });
@@ -6180,7 +6185,7 @@ const TwoColumnContainer = memo(({ elementConfig, type, renderElement }) => {
         const { id, value, hideEmpty, style, hasIcon, hasUnits, render } = getRenderContainerItem(elementConfig, attribute);
         if (!value && hideEmpty)
             return null;
-        return (jsxs(TwoColumnContainerWrapper, { id: id, style: style, children: [jsxs(ContainerAlias, { children: [hasIcon && jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
+        return (jsxs(TwoColumnContainerWrapper, { id: id, style: style, children: [jsxs(ContainerAlias, { children: [hasIcon && (jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] }, attribute));
     }, [getRenderContainerItem, elementConfig]);
     return renderAttributes?.length ? (jsx(Fragment$1, { children: renderAttributes.map(attribute => renderContainer(attribute)) })) : (renderContainer());
 });
@@ -9127,6 +9132,131 @@ const ElementUploader = memo(({ elementConfig, type }) => {
     return (jsx(UploaderContainer, { id: id, style: style, children: jsx("div", { children: jsx(Uploader, { currentRef: refInput, title: renderTitle, accept: fileExtensions, width: "100%", fileItems: files, isMultiple: multiSelect, onUpload: onUpload, onDelete: onDelete }) }) }));
 });
 
+const ModalIcon = styled(Icon) `
+  &&& {
+    cursor: pointer;
+
+    :after {
+      font-size: 0.75rem;
+      color: ${({ theme: { palette } }) => palette.iconDisabled};
+      transition: color ${transition.hover};
+    }
+
+    :hover:after {
+      color: ${({ theme: { palette } }) => palette.icon};
+    }
+  }
+`;
+
+const isEmptyElementValue = (value) => value === "" || value === null || value === undefined;
+
+const isHiddenEmptyValue = ({ value, children, hideEmpty, renderElement, }) => {
+    const valueElement = children?.find(item => item.id === "value");
+    const renderedValue = valueElement ? renderElement({ id: "value" }) : null;
+    const isEmpty = isEmptyElementValue(value) || (valueElement && (renderedValue === null || renderedValue === ""));
+    return isEmpty && hideEmpty;
+};
+
+const isNotValidSelectedTab = (tabId, selectedTabId) => {
+    if (!tabId || !selectedTabId)
+        return false;
+    return Array.isArray(tabId) ? !tabId.includes(selectedTabId) : tabId !== selectedTabId;
+};
+
+const isVisibleContainer = (id, expandable, expanded, expandedContainers) => !expandable || (expandedContainers?.[id] !== undefined ? expandedContainers[id] : expanded) || false;
+
+const isContainerRef = (element) => "containerId" in element &&
+    !("templateName" in element) &&
+    !("type" in element) &&
+    !("children" in element);
+const getRenderElement = ({ t, config, elementConfig, attributes = [], layerInfo, selectedTabId, setSelectedTabId, pageIndex, expandedContainers, type = WidgetType.FeatureCard, }) => (props) => {
+    const { id, index, wrap = true } = props;
+    const currentConfig = elementConfig || config;
+    let element = id
+        ? returnFound(currentConfig?.children, { id })
+        : index !== undefined
+            ? currentConfig?.children[index]
+            : null;
+    if (Array.isArray(element)) {
+        element = element[0];
+    }
+    if (element && isContainerRef(element)) {
+        let container = returnFound(config, { id: element.containerId });
+        if (Array.isArray(container))
+            container = container[0];
+        element = container || undefined;
+    }
+    const { options, children, templateName } = element || {};
+    const { tabId, hideEmpty, expandable, expanded, innerTemplateName } = options || {};
+    if (isNotValidSelectedTab(tabId, selectedTabId))
+        return null;
+    const renderElement = getRenderElement({
+        t,
+        config,
+        elementConfig: element,
+        attributes,
+        layerInfo,
+        expandedContainers,
+        selectedTabId,
+        setSelectedTabId,
+        pageIndex,
+        type,
+    });
+    const value = getElementValue({
+        type,
+        element: currentConfig,
+        elementConfig: element,
+        config,
+        attributes,
+        layerInfo,
+        renderElement,
+        getDefaultContainer: () => {
+            if (!templateName) {
+                return null;
+            }
+            const ContainerTemplateValue = getContainerComponent(templateName);
+            if (!ContainerTemplateValue) {
+                return null;
+            }
+            return (jsx(ContainerTemplateValue, { id: id, type: type, config: config, elementConfig: element, layerInfo: layerInfo, attributes: attributes, innerComponent: getContainerComponent(innerTemplateName), isVisible: isVisibleContainer(id, expandable, expanded, expandedContainers), renderElement: renderElement }, id));
+        },
+    });
+    if (isHiddenEmptyValue({ value, children, hideEmpty, renderElement }))
+        return null;
+    return formatElementValue({
+        t,
+        value,
+        elementConfig: element,
+        attributes,
+        wrap,
+    });
+};
+
+const ElementModal = memo(({ type = WidgetType.Dashboard, elementConfig }) => {
+    const { config } = useWidgetConfig(type);
+    const { expandedContainers, attributes, isLoading } = useWidgetContext(type);
+    const [isOpen, setIsOpen] = useState(false);
+    const { options } = elementConfig || {};
+    const { modalId, icon } = options || {};
+    const modalConfig = useMemo(() => (config?.modals ?? []).find(({ id }) => id === modalId) ?? null, [config?.modals, modalId]);
+    const modalContent = useMemo(() => (modalConfig?.children ?? []), [modalConfig]);
+    const renderElementConfig = useMemo(() => ({ children: modalContent }), [modalContent]);
+    const renderElement = useMemo(() => getRenderElement({
+        type,
+        config,
+        elementConfig: renderElementConfig,
+        attributes,
+        expandedContainers,
+    }), [type, config, renderElementConfig, attributes, expandedContainers]);
+    const handleOpen = useCallback(() => setIsOpen(true), []);
+    const handleClose = useCallback(() => setIsOpen(false), []);
+    if (!modalConfig)
+        return null;
+    const { options: modalOptions } = modalConfig;
+    const { title, maxWidth, minWidth, minHeight } = modalOptions || {};
+    return (jsxs(Fragment$1, { children: [jsx(ModalIcon, { kind: icon || "new_window", onClick: handleOpen }), jsxs(Dialog, { isOpen: isOpen, onCloseRequest: handleClose, modal: true, maxWidth: maxWidth, minWidth: minWidth, minHeight: minHeight, style: { paddingBottom: "2rem" }, children: [jsx(DialogTitle, { children: jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [!!title && jsx("span", { children: title }), jsx(IconButton, { kind: "close", onClick: handleClose })] }) }), jsx(DialogContent, { children: isLoading ? (jsx(DashboardLoading, {})) : (jsx(Container, { isColumn: true, noBorders: true, children: jsx(ContainerChildren, { type: type, items: modalContent, isMain: true, renderElement: renderElement }) })) })] })] }));
+});
+
 const elementComponents = {
     control: ElementControl,
     image: ElementImage,
@@ -9142,6 +9272,7 @@ const elementComponents = {
     legend: ElementLegend,
     markdown: ElementMarkdown,
     uploader: ElementUploader,
+    modal: ElementModal,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -9170,10 +9301,13 @@ const getElementValue = ({ getDefaultContainer, ...props }) => {
     }
     if (type === "attributeDescription") {
         const attribute = getAttributeByName(attributeName, attributes);
-        return attribute?.name ? layerInfo.layerDefinition.attributes[attribute.name]?.description || null : null;
+        return attribute?.name
+            ? layerInfo.layerDefinition.attributes[attribute.name]?.description ||
+                null
+            : null;
     }
     const ElementComponent = type ? elementComponents[type] : null;
-    return ElementComponent ? jsx(ElementComponent, { ...props }) : getDefaultContainer?.();
+    return ElementComponent ? (jsx(ElementComponent, { ...props })) : (getDefaultContainer?.());
 };
 
 const getLayerAttributes = (layerDefinition) => {
@@ -10142,69 +10276,6 @@ const getRelatedAttribute = (layerInfo, sourceAttributeName, relatedLayerName) =
     return attributeConfig?.options?.relatedAttributes?.find(({ layerName }) => layerName === relatedLayerName);
 };
 
-const isEmptyElementValue = (value) => value === "" || value === null || value === undefined;
-
-const isHiddenEmptyValue = ({ value, children, hideEmpty, renderElement, }) => {
-    const valueElement = children?.find(item => item.id === "value");
-    const renderedValue = valueElement ? renderElement({ id: "value" }) : null;
-    const isEmpty = isEmptyElementValue(value) || (valueElement && (renderedValue === null || renderedValue === ""));
-    return isEmpty && hideEmpty;
-};
-
-const isNotValidSelectedTab = (tabId, selectedTabId) => {
-    if (!tabId || !selectedTabId)
-        return false;
-    return Array.isArray(tabId) ? !tabId.includes(selectedTabId) : tabId !== selectedTabId;
-};
-
-const isVisibleContainer = (id, expandable, expanded, expandedContainers) => !expandable || (expandedContainers?.[id] !== undefined ? expandedContainers[id] : expanded) || false;
-
-const getRenderElement = ({ t, config, elementConfig, attributes = [], layerInfo, selectedTabId, setSelectedTabId, pageIndex, expandedContainers, type = WidgetType.FeatureCard, }) => (props) => {
-    const { id, index, wrap = true } = props;
-    const currentConfig = elementConfig || config;
-    let element = id ? returnFound(currentConfig?.children, { id }) : index ? currentConfig?.children[index] : null;
-    if (Array.isArray(element)) {
-        element = element[0];
-    }
-    const { options, children, templateName } = element || {};
-    const { tabId, hideEmpty, expandable, expanded, innerTemplateName } = options || {};
-    if (isNotValidSelectedTab(tabId, selectedTabId))
-        return null;
-    const renderElement = getRenderElement({
-        t,
-        config,
-        elementConfig: element,
-        attributes,
-        layerInfo,
-        expandedContainers,
-        selectedTabId,
-        setSelectedTabId,
-        pageIndex,
-        type,
-    });
-    const value = getElementValue({
-        type,
-        element: currentConfig,
-        elementConfig: element,
-        attributes,
-        layerInfo,
-        renderElement,
-        getDefaultContainer: () => {
-            if (!templateName) {
-                return null;
-            }
-            const ContainerTemplateValue = getContainerComponent(templateName);
-            if (!ContainerTemplateValue) {
-                return null;
-            }
-            return (jsx(ContainerTemplateValue, { id: id, type: type, config: config, elementConfig: element, layerInfo: layerInfo, attributes: attributes, innerComponent: getContainerComponent(innerTemplateName), isVisible: isVisibleContainer(id, expandable, expanded, expandedContainers), renderElement: renderElement }, id));
-        },
-    });
-    if (isHiddenEmptyValue({ value, children, hideEmpty, renderElement }))
-        return null;
-    return formatElementValue({ t, value, elementConfig: element, attributes, wrap });
-};
-
 const getResourceUrl = (url) => {
     return url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
 };