@evergis/react 3.1.85 → 3.1.87

package/dist/components/Dashboard/types.d.ts

@@ -128,6 +128,7 @@ export interface ConfigOptions {
     tabId?: string;
     column?: boolean;
     relatedDataSource?: string;
+    controlName?: string;
     filterName?: string;
     searchFilterName?: string;
     colorAttribute?: string;

package/dist/index.js

@@ -5573,10 +5573,13 @@ const ChartLegendName = styled.div `
 const ContainerAlias = styled(uilibGl.Flex) `
   align-items: center;
   flex-wrap: nowrap;
-  margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? 0.25 : 0)}rem;
   font-size: 0.75rem;
   color: ${({ theme: { palette } }) => palette.textSecondary};
 
+  &&& {
+    margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? 0.25 : 0)}rem;
+  }
+  
   span[kind] {
     margin-right: 0.5rem;
 
@@ -7775,29 +7778,34 @@ const ElementChips = React.memo(({ type, elementConfig }) => {
 
 const ElementControl = ({ elementConfig }) => {
     const { t } = useGlobalContext();
-    const { dataSources, controls, changeControls } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const { attributes, layerInfo, dataSources, controls, changeControls } = useWidgetContext(exports.WidgetType.FeatureCard);
     const [value, setValue] = React.useState();
     const { options, attributeName } = elementConfig || {};
-    const { relatedDataSource, label, width, placeholder = t("selectValue", { ns: "dashboard", defaultValue: "Выберите значение" }) } = options || {};
+    const { relatedDataSource, label, width, controlName, placeholder = t("selectValue", { ns: "dashboard", defaultValue: "Выберите значение" }) } = options || {};
+    const attrName = controlName || attributeName;
     const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [relatedDataSource, dataSources]);
     const items = React.useMemo(() => {
-        if (!dataSource?.features?.length || !attributeName) {
+        if (!dataSource?.features?.length || !attrName) {
             return [];
         }
         return dataSource.features.map(({ attributes }) => ({
-            value: attributes?.[attributeName] || "",
-            text: attributes?.[attributeName] || "",
+            value: attributes?.[attrName] || "",
+            text: attributes?.[attrName] || "",
         }));
-    }, [dataSource?.features, attributeName]);
+    }, [dataSource?.features, attrName]);
+    const isDisabled = React.useMemo(() => {
+        const attr = layerInfo?.configuration?.attributesConfiguration?.attributes?.find(({ attributeName }) => attributeName === attrName);
+        return !attr?.isEditable;
+    }, [attrName, layerInfo?.configuration?.attributesConfiguration?.attributes]);
     const handleChange = React.useCallback(([option]) => {
         setValue(option?.value);
-        if (attributeName && changeControls) {
+        if (attrName && changeControls) {
             changeControls({
-                [attributeName]: option?.value,
+                [attrName]: option?.value,
             });
         }
-    }, [changeControls, attributeName]);
-    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, label: label, options: items, value: controls?.[attributeName] ?? value, placeholder: placeholder, onChange: handleChange }));
+    }, [changeControls, attrName]);
+    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, label: label, options: items, value: controls?.[attrName] ?? value, placeholder: placeholder, disabled: isDisabled, onChange: handleChange }));
 };
 
 const StyledIconFontSizeMixin = styled.css `