@evergis/react 3.1.110 → 3.1.111

package/dist/react.esm.js

@@ -6070,40 +6070,85 @@ const TwoColumnContainerWrapper = styled(Flex) `
   }
 `;
 
+const useRenderContainerItem = (type, renderElement) => {
+    const { config, layerInfo, selectedTabId, attributes } = useWidgetContext(type);
+    return useCallback((elementConfig, attribute) => {
+        const { id, options, style, children } = elementConfig || {};
+        const { hideEmpty, innerTemplateStyle } = options || {};
+        const hasUnits = children?.some(({ id }) => id === "units");
+        const iconIndex = children?.findIndex(({ id }) => id === "icon");
+        const icon = children?.[iconIndex];
+        const hasIcon = !!icon;
+        const elementChildren = elementConfig?.children?.map(child => ({
+            type: "attributeValue",
+            ...child,
+            attributeName: attribute,
+            options: { noUnits: hasUnits, ...child.options },
+        }));
+        const attr = attribute
+            ? layerInfo?.layerAttributes?.find(({ attributeName }) => attributeName === attribute)
+            : null;
+        if (hasIcon) {
+            elementChildren[iconIndex] = {
+                ...elementChildren[iconIndex],
+                type: attr?.icon?.type?.toLowerCase(),
+                value: attr?.icon?.resourceId || attr?.icon?.url || attr?.icon?.iconName,
+                attributeName: null,
+            };
+        }
+        const render = attribute
+            ? getRenderElement({
+                config,
+                elementConfig: {
+                    ...elementConfig,
+                    children: elementChildren,
+                },
+                selectedTabId,
+                attributes,
+                layerInfo,
+                type,
+            })
+            : renderElement;
+        const value = render({ id: "value" });
+        return {
+            id,
+            value,
+            hideEmpty,
+            style: innerTemplateStyle || style,
+            hasIcon,
+            hasUnits,
+            render,
+        };
+    }, []);
+};
+
 const BASE_STYLE = {
     marginBottom: "1rem",
 };
-const OneColumnContainer = memo(({ config, elementConfig, type, renderElement }) => {
-    const { getAttributesToRender, renderContainer } = useMultipleAttributesRender(config, elementConfig, type, renderElement);
-    const attributesToRender = getAttributesToRender();
-    if (!attributesToRender.length) {
-        const { id, options, style } = elementConfig || {};
-        const { innerTemplateStyle, hideEmpty } = options || {};
-        const value = renderElement({ id: "value" });
-        const hasUnits = elementConfig?.children?.some(({ id }) => id === "units");
+const OneColumnContainer = memo(({ type, elementConfig, renderElement }) => {
+    const getRenderContainerItem = useRenderContainerItem(type, renderElement);
+    const { options } = elementConfig || {};
+    const { attributes: renderAttributes, innerTemplateStyle } = options || {};
+    const renderContainer = useCallback((attribute) => {
+        const { id, value, hideEmpty, style, hasUnits, render } = getRenderContainerItem(elementConfig, attribute);
         if (!value && hideEmpty)
             return null;
-        return (jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE, ...(innerTemplateStyle || style) }, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [value, hasUnits && jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
-    }
-    return (jsx(Fragment$1, { children: attributesToRender.map(attribute => {
-            const containerData = renderContainer(attribute);
-            if (!containerData)
-                return null;
-            const { render, hasUnits, id, style } = containerData;
-            return (jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE, ...(elementConfig?.options?.innerTemplateStyle || style) }, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [render({ id: "value" }), hasUnits && jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
-        }) }));
+        return (jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE, ...(innerTemplateStyle || style) }, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [value, hasUnits && jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }));
+    }, [getRenderContainerItem, elementConfig, innerTemplateStyle]);
+    return renderAttributes?.length ? (jsx(Fragment$1, { children: renderAttributes.map(attribute => renderContainer(attribute)) })) : (renderContainer());
 });
 
-const TwoColumnContainer = memo(({ config, elementConfig, type, renderElement }) => {
-    const { getAttributesToRender, renderContainer } = useMultipleAttributesRender(config, elementConfig, type, renderElement);
-    const attributesToRender = getAttributesToRender();
-    return (jsx(Fragment$1, { children: attributesToRender.map(attribute => {
-            const containerData = renderContainer(attribute);
-            if (!containerData)
-                return null;
-            const { render, hasUnits, id, style, hasIcon } = containerData;
-            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: [render({ id: "value" }), hasUnits && jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
-        }) }));
+const TwoColumnContainer = memo(({ elementConfig, type, renderElement }) => {
+    const getRenderContainerItem = useRenderContainerItem(type, renderElement);
+    const { options } = elementConfig || {};
+    const { attributes: renderAttributes, innerTemplateStyle } = options || {};
+    const renderContainer = useCallback((attribute) => {
+        const { id, value, hideEmpty, style, hasIcon, hasUnits, render } = getRenderContainerItem(elementConfig, attribute);
+        if (!value && hideEmpty)
+            return null;
+        return (jsxs(TwoColumnContainerWrapper, { id: id, style: innerTemplateStyle || 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));
+    }, [getRenderContainerItem, elementConfig]);
+    return renderAttributes?.length ? (jsx(Fragment$1, { children: renderAttributes.map(attribute => renderContainer(attribute)) })) : (renderContainer());
 });
 
 const InnerContainerWrapper = styled.div `
@@ -6610,7 +6655,6 @@ const PagesContainer = memo(({ type = WidgetType.Dashboard, noBorders }) => {
         setSelectedTabId,
         type,
     ]);
-    console.info("PagesContainer", config, filteredChildren);
     return (jsx(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, children: jsx(ContainerChildren, { type: type, items: filteredChildren, isMain: true, renderElement: renderElement }) }));
 });
 
@@ -7658,9 +7702,9 @@ var img$1 = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32
 
 var img = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='32' height='32' fill='transparent'/%3e %3crect x='8' y='8' width='16' height='16' rx='2' fill='url(%23paint0_linear_6459_10399)'/%3e %3cdefs%3e %3clinearGradient id='paint0_linear_6459_10399' x1='8' y1='8' x2='24' y2='24' gradientUnits='userSpaceOnUse'%3e %3cstop stop-color='%230084D6'/%3e %3cstop offset='0.489583' stop-color='%230084D6'/%3e %3cstop offset='0.489683' stop-color='%2305A9FF'/%3e %3cstop offset='0.921875' stop-color='%2305A9FF'/%3e %3c/linearGradient%3e %3c/defs%3e%3c/svg%3e";
 
-const LayerIcon = ({ layerInfo }) => {
+const LayerIcon = ({ layerInfo, error }) => {
     const renderSymbol = useMemo(() => {
-        if (!layerInfo.geometryType) {
+        if (!layerInfo.geometryType || error) {
             return (jsx(AlertIconContainer, { children: jsx(Icon, { kind: "warning" }) }));
         }
         switch (layerInfo.geometryType) {
@@ -10744,14 +10788,14 @@ const useMultipleAttributesRender = (config, elementConfig, type, renderElement)
     const { selectedTabId, layerInfo, attributes } = useWidgetContext(type);
     const { attributes: renderAttributes, attributesExclude } = elementConfig?.options || {};
     const getAttributesToRender = useCallback(() => {
-        if (renderAttributes && renderAttributes.length > 0) {
+        if (renderAttributes) {
             return renderAttributes;
         }
-        const allAttributes = attributes?.map(attr => attr.name) || [];
-        if (attributesExclude && attributesExclude.length > 0) {
+        if (attributesExclude) {
+            const allAttributes = attributes?.map(attr => attr.name) || [];
             return allAttributes.filter(attr => !attributesExclude.includes(attr));
         }
-        return allAttributes;
+        return null;
     }, [renderAttributes, attributesExclude, attributes]);
     const renderContainer = useCallback((attribute) => {
         const { id, options, style, children } = elementConfig || {};