@evergis/react 3.1.82 → 3.1.84

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

@@ -24,3 +24,5 @@ export declare const DEFAULT_ZOOM = 10;
 export declare const NUMERIC_ATTRIBUTE_TYPES: AttributeType[];
 export declare const GEOMETRY_ATTRIBUTE = "geometry";
 export declare const DEFAULT_ID_ATTRIBUTE_NAME = "gid";
+export declare const DEFAULT_DROPDOWN_WIDTH = 312;
+export declare const DEFAULT_FILTER_PADDING = 12;

package/dist/components/Dashboard/hooks/useWidgetContext.d.ts

@@ -13,6 +13,8 @@ export declare const useWidgetContext: (type?: WidgetType) => {
     feature: import('../../..').SelectedFeature;
     closeFeatureCard: VoidFunction;
     containerIds: string[];
+    controls: Record<string, string>;
+    changeControls: (controls: Record<string, string>) => void;
     components: {
         LayerItem?: import('react').FC<import('../..').LayerItemProps>;
         ProjectCatalogMenu?: import('react').FC;

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/contexts/FeatureCardContext/types.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { LayerReferenceConfigurationDc } from '@evergis/api';
-import { LayerInfo, SelectedFeature } from '../../types';
 import { ClientFeatureAttribute, ConfigContainer, SelectedFilters, WidgetDataSource } from '../../components';
+import { LayerInfo, SelectedFeature } from '../../types';
 export type FeatureCardContextSettings = PropsWithChildren<{
     config?: ConfigContainer;
     attributes?: ClientFeatureAttribute[];
@@ -20,6 +20,8 @@ export type FeatureCardContextSettings = PropsWithChildren<{
     loading?: boolean;
     filters?: SelectedFilters;
     changeFilters?: (filters: SelectedFilters) => void;
+    controls?: Record<string, string>;
+    changeControls?: (controls: Record<string, string>) => void;
     expandContainer?: (id: string, expanded?: boolean) => void;
     setSelectedTabId?: (id: string) => void;
     setHandBookReference?: (reference: LayerReferenceConfigurationDc) => void;

package/dist/index.js

@@ -3438,6 +3438,8 @@ const DEFAULT_ZOOM = 10;
 const NUMERIC_ATTRIBUTE_TYPES = [api.AttributeType.Double, api.AttributeType.Int32, api.AttributeType.Int64];
 const GEOMETRY_ATTRIBUTE = "geometry";
 const DEFAULT_ID_ATTRIBUTE_NAME = "gid";
+const DEFAULT_DROPDOWN_WIDTH = 312;
+const DEFAULT_FILTER_PADDING = 12;
 
 const StackBarContainer = styled(uilibGl.Flex) `
   flex-wrap: nowrap;
@@ -4004,7 +4006,7 @@ const ServerNotificationsProvider = ({ url, initialized, children }) => {
 
 const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
     const { projectInfo, updateProject, layerInfos, geometryFilter, dashboardLayers, setDashboardLayer, components: dashboardComponents, config: dashboardConfig, containerIds, pageIndex: projectPageIndex, selectedTabId: projectSelectedTabId, setSelectedTabId: setProjectSelectedTabId, dataSources: projectDataSources, loading: projectLoading, editMode: projectEditMode, filters: projectFilters, changeFilters: projectChangeFilters, expandContainer: projectExpandContainer, expandedContainers: projectExpandedContainers, nextPage: projectNextPage, prevPage: projectPrevPage, changePage: projectChangePage, } = React.useContext(DashboardContext) || {};
-    const { layerInfo, attributes, feature, closeFeatureCard, config: featureConfig, pageIndex: featurePageIndex, selectedTabId: featureSelectedTabId, setSelectedTabId: setFeatureSelectedTabId, dataSources: featureDataSources, loading: featureLoading, editMode: featureEditMode, filters: featureFilters, changeFilters: featureChangeFilters, expandContainer: featureExpandContainer, expandedContainers: featureExpandedContainers, nextPage: featureNextPage, prevPage: featurePrevPage, changePage: featureChangePage, } = React.useContext(FeatureCardContext) || {};
+    const { layerInfo, attributes, feature, controls, changeControls, closeFeatureCard, config: featureConfig, pageIndex: featurePageIndex, selectedTabId: featureSelectedTabId, setSelectedTabId: setFeatureSelectedTabId, dataSources: featureDataSources, loading: featureLoading, editMode: featureEditMode, filters: featureFilters, changeFilters: featureChangeFilters, expandContainer: featureExpandContainer, expandedContainers: featureExpandedContainers, nextPage: featureNextPage, prevPage: featurePrevPage, changePage: featureChangePage, } = React.useContext(FeatureCardContext) || {};
     return {
         projectInfo,
         layerInfos,
@@ -4017,6 +4019,8 @@ const useWidgetContext = (type = exports.WidgetType.Dashboard) => {
         feature,
         closeFeatureCard,
         containerIds,
+        controls,
+        changeControls,
         components: dashboardComponents,
         config: type === exports.WidgetType.Dashboard ? dashboardConfig : featureConfig,
         isEditing: type === exports.WidgetType.Dashboard ? projectEditMode : featureEditMode,
@@ -6010,7 +6014,7 @@ const DEFAULT_BAR_CHART_MARGINS = {
 
 const FiltersContainerWrapper = styled(uilibGl.Flex) `
   flex-direction: column;
-  padding: ${({ $padding }) => $padding ?? "0.75rem"};
+  padding: ${({ $padding }) => $padding ?? `${DEFAULT_FILTER_PADDING}px`};
   background-color: ${({ $bgColor, $fontColor, theme: { palette } }) => $bgColor || ($fontColor ? transparentizeColor($fontColor, 6) : palette.element)};
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
 
@@ -7771,10 +7775,10 @@ const ElementChips = React.memo(({ type, elementConfig }) => {
 
 const ElementControl = ({ elementConfig }) => {
     const { t } = useGlobalContext();
-    const { dataSources, filters, changeFilters } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const { dataSources, controls, changeControls } = useWidgetContext(exports.WidgetType.FeatureCard);
     const [value, setValue] = React.useState();
     const { options, attributeName } = elementConfig || {};
-    const { filterName, relatedDataSource, label, placeholder = t("selectValue", { ns: "dashboard", defaultValue: "Выберите значение" }) } = options || {};
+    const { relatedDataSource, controlName, label, width, placeholder = t("selectValue", { ns: "dashboard", defaultValue: "Выберите значение" }) } = options || {};
     const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [relatedDataSource, dataSources]);
     const items = React.useMemo(() => {
         if (!dataSource?.features?.length || !attributeName) {
@@ -7787,15 +7791,13 @@ const ElementControl = ({ elementConfig }) => {
     }, [dataSource?.features, attributeName]);
     const handleChange = React.useCallback(([option]) => {
         setValue(option?.value);
-        if (filterName) {
-            changeFilters?.({
-                [filterName]: {
-                    value: option?.value,
-                },
+        if (controlName && changeControls) {
+            changeControls({
+                [controlName]: option?.value,
             });
         }
-    }, [changeFilters, filterName]);
-    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: "100%", label: label, options: items, value: filters?.[filterName]?.value ?? value, placeholder: placeholder, onChange: handleChange }));
+    }, [changeControls, controlName]);
+    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, label: label, options: items, value: controls?.[controlName] ?? value, placeholder: placeholder, onChange: handleChange }));
 };
 
 const StyledIconFontSizeMixin = styled.css `
@@ -8716,7 +8718,7 @@ const DropdownFilter = ({ type, filter, elementConfig }) => {
     }, [changeFilters, filterName]);
     if (!configFilter)
         return null;
-    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 100, width: `${width ?? 288}px`, value: value, placeholder: placeholder, options: filterOptions, onChange: onChange }));
+    return (jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 100, width: `${width ?? (DEFAULT_DROPDOWN_WIDTH - DEFAULT_FILTER_PADDING * 2)}px`, value: value, placeholder: placeholder, options: filterOptions, onChange: onChange }));
 };
 
 const CheckboxFilter = ({ type, filter, elementConfig }) => {
@@ -11161,8 +11163,10 @@ exports.DEFAULT_CHART_WIDTH = DEFAULT_CHART_WIDTH;
 exports.DEFAULT_CIRCLE_PAINT = DEFAULT_CIRCLE_PAINT;
 exports.DEFAULT_DASHBOARD_CONFIG = DEFAULT_DASHBOARD_CONFIG;
 exports.DEFAULT_DATA_SOURCE_LIMIT = DEFAULT_DATA_SOURCE_LIMIT;
+exports.DEFAULT_DROPDOWN_WIDTH = DEFAULT_DROPDOWN_WIDTH;
 exports.DEFAULT_FILL_EXTRUSION_PAINT = DEFAULT_FILL_EXTRUSION_PAINT;
 exports.DEFAULT_FILL_PAINT = DEFAULT_FILL_PAINT;
+exports.DEFAULT_FILTER_PADDING = DEFAULT_FILTER_PADDING;
 exports.DEFAULT_ID_ATTRIBUTE_NAME = DEFAULT_ID_ATTRIBUTE_NAME;
 exports.DEFAULT_LAT = DEFAULT_LAT;
 exports.DEFAULT_LINE_PAINT = DEFAULT_LINE_PAINT;