@evergis/react 4.0.36 → 4.0.37

package/dist/components/Dashboard/headers/FeatureCardIconHeader/styled.d.ts

@@ -1,3 +1,4 @@
+export declare const LayerIconClickable: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const HeaderIcon: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
 export declare const IconHeaderWrapper: import('styled-components').StyledComponent<"div", any, {
     $fontColor?: string;

package/dist/index.js

@@ -9,9 +9,9 @@ var api = require('@evergis/api');
 var Gradient = require('javascript-color-gradient');
 var color$1 = require('@evergis/color');
 var dateFns = require('date-fns');
+var lodash = require('lodash');
 var ru = require('date-fns/locale/ru');
 var enUS = require('date-fns/locale/en-US');
-var lodash = require('lodash');
 var signalr = require('@microsoft/signalr');
 var findAnd = require('find-and');
 var jspdf = require('jspdf');
@@ -3829,15 +3829,16 @@ const formatNumberValue = (stringFormat, value, type, noUnits = false) => {
     return currentValue?.toString() || "";
 };
 const formatAttributeValue = ({ t, type, value, stringFormat, noUnits = false }) => {
+    const isNilValue = lodash.isNil(value);
     if (type === api.AttributeType.Point) {
-        if (!stringFormat?.format || !value) {
+        if (!stringFormat?.format || isNilValue) {
             return null;
         }
         const { coordinates } = value;
         return formatPointValue({ t, stringFormat, value: coordinates });
     }
     if (type === api.AttributeType.DateTime) {
-        if (!stringFormat?.format || !value)
+        if (!stringFormat?.format || isNilValue)
             return null;
         return formatDateValue(stringFormat, value);
     }
@@ -3858,12 +3859,12 @@ const formatAttributeValue = ({ t, type, value, stringFormat, noUnits = false })
         return formatNumberValue(stringFormat, value, type, noUnits);
     }
     if (type === api.AttributeType.Json) {
-        if (!value || value?.length === 0) {
+        if (isNilValue || value?.length === 0) {
             return "";
         }
         return `${t("total", { ns: "table" })} ${value.length}`;
     }
-    return value ? value.toString() : "";
+    return !isNilValue ? value.toString() : "";
 };
 const formatNumber = (number) => {
     let result = "";
@@ -6344,18 +6345,7 @@ const DataSourceInnerContainer = React.memo(({ config, elementConfig, feature, m
         setSelectedTabId,
         pageIndex,
         type,
-    }), [
-        getRenderElement,
-        config,
-        elementConfig,
-        attributes,
-        layerInfo,
-        expandedContainers,
-        selectedTabId,
-        setSelectedTabId,
-        pageIndex,
-        type,
-    ]);
+    }), [config, elementConfig, attributes, layerInfo, expandedContainers, selectedTabId, setSelectedTabId, pageIndex, type]);
     if (!InnerContainer) {
         return null;
     }
@@ -8150,6 +8140,11 @@ const FeatureCardGradientHeader = ({ isRow }) => {
                                     }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
 };
 
+const LayerIconClickable = styled.div `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
 const HeaderFontColorMixin = styled.css `
   ${HeaderTitleContainer}, ${HeaderTitleContainer} *, ${LayerDescription} {
     color: ${({ $fontColor }) => $fontColor};
@@ -8227,13 +8222,16 @@ const IconHeaderWrapper = styled.div `
 `;
 
 const FeatureCardIconHeader = ({ isRow }) => {
-    const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const { t } = useGlobalContext();
+    const { layerInfo, feature } = useWidgetContext(exports.WidgetType.FeatureCard);
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
+    const zoomToFeatures = useZoomToFeatures();
     const { header } = config || {};
     const { options } = header || {};
     const { fontColor, bgColor, bigIcon } = options || {};
     const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(IconHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$bigIcon": bigIcon, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    const handleIconClick = React.useCallback(() => zoomToFeatures([feature]), [zoomToFeatures, feature]);
+    return (jsxRuntime.jsx(IconHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$bigIcon": bigIcon, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(LayerIconClickable, { ref: ref, onClick: handleIconClick, children: jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }) })) }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -9535,7 +9533,7 @@ function getFeatureAttributes(feature = {}, layer, dataSource) {
                 readOnly: true,
             }
             : {
-                value: currentAttributes?.[attributeName] || dataSource?.features?.[0]?.properties?.[attributeName],
+                value: currentAttributes?.[attributeName] ?? dataSource?.features?.[0]?.properties?.[attributeName],
                 readOnly: attributeConfigurationType === api.AttributeConfigurationType.Calculated || !isEditable,
             };
         const clientData = layer?.configuration?.attributesConfiguration?.attributes?.find(layerAttribute => layerAttribute.attributeName === attributeName)?.clientData;