@evergis/react 4.0.76 → 4.0.78

package/dist/react.esm.js

@@ -11444,9 +11444,12 @@ function getIconFromAttribute(option, iconAttribute) {
 
 const MAX_ANCESTOR_DEPTH = 50;
 const buildLevelOneCondition = (attributeLevel) => `${attributeLevel} = 1`;
-const buildChildrenCondition = (attributeParentValue, parentId) => `${attributeParentValue} = ${formatConditionValue({ value: parentId })}`;
+const buildChildrenCondition = (attributeParentName, parentName) => `${attributeParentName} = ${formatConditionValue({ value: parentName })}`;
 const buildSearchCondition = (attributeAlias, query) => `${attributeAlias} LIKE '%${query.replace(/'/g, "''")}%'`;
-const buildIdsCondition = (attributeValue, ids) => `${attributeValue} in ${formatConditionValue({ value: ids })}`;
+/** Запрос пачки записей по их именам (`attributeName`) — для достройки предков. */
+const buildNamesCondition = (attributeName, names) => `${attributeName} in ${formatConditionValue({ value: names })}`;
+/** Запрос пачки записей по их значениям (`attributeValue`) — для восстановления `defaultValue`. */
+const buildValuesCondition = (attributeValue, values) => `${attributeValue} in ${formatConditionValue({ value: values })}`;
 /** Группирует выбранные id по уровню в объектное значение фильтра `{ l{N}: [ids] }`. */
 const buildFilterValue = (selected) => {
     const result = {};
@@ -11471,54 +11474,62 @@ const parseFilterValue = (value) => {
     });
     return result;
 };
+/** Стабильная сериализация выбора для сравнения (порядок не важен). */
+const serializeSelection = (selected) => [...selected.entries()]
+    .map(([id, level]) => `${id}:${level}`)
+    .sort()
+    .join(",");
 /**
- * Дозапрашивает цепочку предков вверх по `parentId` уровень за уровнем (батч `id in (...)`),
- * пока не достигнет уровня 1. Возвращает исходные узлы вместе с предками.
+ * Дозапрашивает цепочку предков вверх по `parentName` уровень за уровнем (батч `attributeName in
+ * (...)`), пока не достигнет уровня 1. Связь идёт по именам (`name`/`parentName`), т.к. `node.id`
+ * хранит значение (`attributeValue`). Возвращает исходные узлы вместе с предками.
  */
-const collectAncestors = async (nodes, loadByIds) => {
-    const byId = new Map();
-    nodes.forEach(node => byId.set(node.id, node));
+const collectAncestors = async (nodes, loadByNames) => {
+    const byName = new Map();
+    nodes.forEach(node => byName.set(node.data.name, node));
     let frontier = nodes;
     for (let depth = 0; depth < MAX_ANCESTOR_DEPTH; depth++) {
         const missingParents = new Set();
         frontier.forEach(node => {
-            const { parentId, level } = node.data ?? {};
-            if (parentId != null && level > 1 && !byId.has(parentId)) {
-                missingParents.add(parentId);
+            const { parentName, level } = node.data ?? {};
+            if (parentName != null && level > 1 && !byName.has(parentName)) {
+                missingParents.add(parentName);
             }
         });
         if (!missingParents.size) {
             break;
         }
-        const parents = await loadByIds([...missingParents]);
+        const parents = await loadByNames([...missingParents]);
         if (!parents.length) {
             break;
         }
-        parents.forEach(parent => byId.set(parent.id, parent));
+        parents.forEach(parent => byName.set(parent.data.name, parent));
         frontier = parents;
     }
-    return [...byId.values()];
+    return [...byName.values()];
 };
 /**
- * Собирает плоский набор узлов в дерево по `parentId`. Узлы с подгруженными потомками
- * раскрываются; листья-папки без потомков получают `children = null` (ленивая подгрузка).
+ * Собирает плоский набор узлов в дерево по связи `parentName` ↔ `name`. Узлы с подгруженными
+ * потомками раскрываются (`expanded` хранит `node.id` = значение); листья-папки без потомков
+ * получают `children = null` (ленивая подгрузка).
  */
 const assembleTree = (nodes) => {
-    const nodesById = new Map();
-    nodes.forEach(node => nodesById.set(node.id, node));
+    const nodesByName = new Map();
+    nodes.forEach(node => nodesByName.set(node.data.name, node));
     const childrenMap = new Map();
-    nodesById.forEach(node => {
-        const parentId = node.data?.parentId;
-        if (parentId != null && nodesById.has(parentId)) {
-            const siblings = childrenMap.get(parentId) ?? [];
+    nodesByName.forEach(node => {
+        const parentName = node.data?.parentName;
+        if (parentName != null && nodesByName.has(parentName)) {
+            const siblings = childrenMap.get(parentName) ?? [];
             siblings.push(node);
-            childrenMap.set(parentId, siblings);
+            childrenMap.set(parentName, siblings);
         }
     });
     const roots = [];
     const expanded = [];
-    nodesById.forEach(node => {
-        const kids = childrenMap.get(node.id);
+    nodesByName.forEach(node => {
+        const { name, parentName } = node.data;
+        const kids = childrenMap.get(name);
         if (kids?.length) {
             node.children = kids;
             expanded.push(node.id);
@@ -11526,8 +11537,7 @@ const assembleTree = (nodes) => {
         else if (node.isLeaf) {
             node.children = null;
         }
-        const parentId = node.data?.parentId;
-        if (parentId == null || !nodesById.has(parentId)) {
+        if (parentName == null || !nodesByName.has(parentName)) {
             roots.push(node);
         }
     });
@@ -11538,22 +11548,24 @@ const useTreeFilterData = (type, filterName) => {
     const { api } = useGlobalContext();
     const { currentPage } = useWidgetPage(type);
     const configFilter = useMemo(() => getConfigFilter(filterName, currentPage?.filters), [filterName, currentPage?.filters]);
-    const { relatedDataSource, attributeValue = DEFAULT_ATTRIBUTE_NAME, attributeAlias = DEFAULT_ATTRIBUTE_NAME, attributeParentValue, attributeLevel, attributeHasChildren, limit = DEFAULT_DATA_SOURCE_LIMIT, } = configFilter ?? {};
+    const { relatedDataSource, attributeName = DEFAULT_ATTRIBUTE_NAME, attributeValue, attributeAlias = DEFAULT_ATTRIBUTE_NAME, attributeParentName, attributeLevel, attributeHasChildren, limit = DEFAULT_DATA_SOURCE_LIMIT, } = configFilter ?? {};
+    const valueAttribute = attributeValue ?? attributeName;
     const layerName = useMemo(() => currentPage?.dataSources?.find(({ name }) => name === relatedDataSource)?.layerName, [currentPage?.dataSources, relatedDataSource]);
     const mapNode = useCallback(({ properties }) => {
         const hasChildren = attributeHasChildren ? !!properties[attributeHasChildren] : false;
         const data = {
-            parentId: attributeParentValue ? properties[attributeParentValue] ?? null : null,
+            name: properties[attributeName],
+            parentName: attributeParentName ? properties[attributeParentName] ?? null : null,
             level: attributeLevel ? Number(properties[attributeLevel]) : 1,
         };
         return {
-            id: properties[attributeValue],
+            id: properties[valueAttribute],
             text: String(properties[attributeAlias] ?? ""),
             isLeaf: hasChildren,
             children: hasChildren ? null : undefined,
             data,
         };
-    }, [attributeValue, attributeAlias, attributeParentValue, attributeLevel, attributeHasChildren]);
+    }, [valueAttribute, attributeName, attributeAlias, attributeParentName, attributeLevel, attributeHasChildren]);
     const runQuery = useCallback(async (condition) => {
         if (!layerName) {
             return [];
@@ -11569,29 +11581,36 @@ const useTreeFilterData = (type, filterName) => {
         return features.map(mapNode);
     }, [attributeLevel, runQuery, mapNode]);
     const loadChildren = useCallback(async (item) => {
-        if (!attributeParentValue) {
+        if (!attributeParentName) {
             return { children: [] };
         }
-        const features = await runQuery(buildChildrenCondition(attributeParentValue, item.id));
+        const features = await runQuery(buildChildrenCondition(attributeParentName, item.data.name));
         return { children: features.map(mapNode) };
-    }, [attributeParentValue, runQuery, mapNode]);
+    }, [attributeParentName, runQuery, mapNode]);
     const searchNodes = useCallback(async (query) => {
         const features = await runQuery(buildSearchCondition(attributeAlias, query));
         return features.map(mapNode);
     }, [attributeAlias, runQuery, mapNode]);
-    const loadByIds = useCallback(async (ids) => {
-        if (!ids.length) {
+    const loadByNames = useCallback(async (names) => {
+        if (!names.length) {
             return [];
         }
-        const features = await runQuery(buildIdsCondition(attributeValue, ids));
+        const features = await runQuery(buildNamesCondition(attributeName, names));
         return features.map(mapNode);
-    }, [attributeValue, runQuery, mapNode]);
-    return { configFilter, layerName, loadLevelOne, loadChildren, searchNodes, loadByIds };
+    }, [attributeName, runQuery, mapNode]);
+    const loadByValues = useCallback(async (values) => {
+        if (!values.length) {
+            return [];
+        }
+        const features = await runQuery(buildValuesCondition(valueAttribute, values));
+        return features.map(mapNode);
+    }, [valueAttribute, runQuery, mapNode]);
+    return { configFilter, layerName, loadLevelOne, loadChildren, searchNodes, loadByNames, loadByValues };
 };
 
 const SEARCH_MIN_LENGTH = 3;
 const SEARCH_DEBOUNCE = 300;
-const useTreeFilterSearch = ({ searchNodes, loadByIds }) => {
+const useTreeFilterSearch = ({ searchNodes, loadByNames }) => {
     const [searchValue, setSearchValue] = useState("");
     const [searchData, setSearchData] = useState([]);
     const [searchExpanded, setSearchExpanded] = useState([]);
@@ -11604,7 +11623,7 @@ const useTreeFilterSearch = ({ searchNodes, loadByIds }) => {
         setSearching(true);
         try {
             const results = await searchNodes(query);
-            const withAncestors = await collectAncestors(results, loadByIds);
+            const withAncestors = await collectAncestors(results, loadByNames);
             const { roots, expanded } = assembleTree(withAncestors);
             if (id !== requestId.current) {
                 return;
@@ -11617,7 +11636,7 @@ const useTreeFilterSearch = ({ searchNodes, loadByIds }) => {
                 setSearching(false);
             }
         }
-    }, [searchNodes, loadByIds]);
+    }, [searchNodes, loadByNames]);
     const clearSearchState = useCallback(() => {
         requestId.current++;
         setSearchData([]);
@@ -11661,6 +11680,9 @@ const useTreeFilterSelection = (type, filterName, configFilter) => {
     const [selected, setSelected] = useState(() => parseFilterValue(configFilter?.defaultValue));
     const [selectedLabel, setSelectedLabel] = useState();
     const selectedIds = useMemo(() => new Set(selected.keys()), [selected]);
+    /** Уже применённый (в redux) выбор — база для `dirty`. */
+    const committed = useMemo(() => parseFilterValue((filters[filterName]?.value ?? configFilter?.defaultValue)), [filters, filterName, configFilter?.defaultValue]);
+    const dirty = useMemo(() => serializeSelection(selected) !== serializeSelection(committed), [selected, committed]);
     const commit = useCallback((next) => {
         setSelected(next);
         changeFilters({ [filterName]: { value: buildFilterValue(next) } }, configFilter?.resetFilters);
@@ -11681,8 +11703,17 @@ const useTreeFilterSelection = (type, filterName, configFilter) => {
             }
             next.set(item.id, level);
         }
-        commit(next);
+        // Мультивыбор не коммитит в redux — сохранение по кнопке (onSave). Single — сразу.
+        if (multiSelect) {
+            setSelected(next);
+        }
+        else {
+            commit(next);
+        }
     }, [selected, commit]);
+    const onSave = useCallback(() => {
+        changeFilters({ [filterName]: { value: buildFilterValue(selected) } }, configFilter?.resetFilters);
+    }, [changeFilters, filterName, selected, configFilter?.resetFilters]);
     const onReset = useCallback(() => {
         setSelectedLabel(undefined);
         commit(new Map());
@@ -11697,10 +11728,10 @@ const useTreeFilterSelection = (type, filterName, configFilter) => {
             changeFilters({ [filterName]: { value: buildFilterValue(selected) } });
         }
     }, [filters, filterName, changeFilters, selected]);
-    return { selected, selectedIds, selectedLabel, onToggleSelect, onReset };
+    return { selected, selectedIds, selectedLabel, dirty, onToggleSelect, onReset, onSave };
 };
 
-const useTreeFilterTree = ({ selected, loadLevelOne, loadByIds }) => {
+const useTreeFilterTree = ({ selected, loadLevelOne, loadByValues, loadByNames }) => {
     const [treeData, setTreeData] = useState([]);
     const [treeExpanded, setTreeExpanded] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -11720,8 +11751,8 @@ const useTreeFilterTree = ({ selected, loadLevelOne, loadByIds }) => {
                 setTreeData(roots);
                 return;
             }
-            const selectedNodes = await loadByIds(preselected);
-            const withAncestors = await collectAncestors([...roots, ...selectedNodes], loadByIds);
+            const selectedNodes = await loadByValues(preselected);
+            const withAncestors = await collectAncestors([...roots, ...selectedNodes], loadByNames);
             const { roots: assembled, expanded } = assembleTree(withAncestors);
             setTreeData(assembled);
             setTreeExpanded(expanded);
@@ -11729,20 +11760,21 @@ const useTreeFilterTree = ({ selected, loadLevelOne, loadByIds }) => {
         finally {
             setLoading(false);
         }
-    }, [loadLevelOne, loadByIds]);
+    }, [loadLevelOne, loadByValues, loadByNames]);
     return { treeData, setTreeData, treeExpanded, setTreeExpanded, loading, onOpen };
 };
 
 const useTreeFilter = (type, filter) => {
     const { filterName, multiSelect, placeholder, width } = filter.options ?? {};
-    const { configFilter, loadLevelOne, loadChildren, searchNodes, loadByIds } = useTreeFilterData(type, filterName ?? "");
-    const { selected, selectedIds, selectedLabel, onToggleSelect: toggleSelect, onReset } = useTreeFilterSelection(type, filterName ?? "", configFilter);
+    const { configFilter, loadLevelOne, loadChildren, searchNodes, loadByNames, loadByValues } = useTreeFilterData(type, filterName ?? "");
+    const { selected, selectedIds, selectedLabel, dirty, onToggleSelect: toggleSelect, onReset, onSave, } = useTreeFilterSelection(type, filterName ?? "", configFilter);
     const { treeData, setTreeData, treeExpanded, setTreeExpanded, loading, onOpen } = useTreeFilterTree({
         selected,
         loadLevelOne,
-        loadByIds,
+        loadByValues,
+        loadByNames,
     });
-    const search = useTreeFilterSearch({ searchNodes, loadByIds });
+    const search = useTreeFilterSearch({ searchNodes, loadByNames });
     const onToggleSelect = useCallback(item => toggleSelect(item, multiSelect), [toggleSelect, multiSelect]);
     const onClose = useCallback(() => search.resetSearch(), [search]);
     const view = useMemo(() => search.isSearchActive
@@ -11767,12 +11799,14 @@ const useTreeFilter = (type, filter) => {
         onClose,
         onToggleSelect,
         onReset,
+        onSave,
+        dirty,
     };
 };
 
 const TreeFilter = ({ type, filter }) => {
-    const { width, placeholder, multiSelect, loading, data, setData, expanded, setExpanded, onLoadChildren, selectedIds, selectedCount, selectedLabel, searchValue, onSearchChange, onOpen, onClose, onToggleSelect, onReset, } = useTreeFilter(type, filter);
-    return (jsx(TreeDropdown, { width: width, placeholder: placeholder, multiSelect: multiSelect, loading: loading, data: data, setData: setData, expanded: expanded, setExpanded: setExpanded, onLoadChildren: onLoadChildren, selectedIds: selectedIds, selectedCount: selectedCount, selectedLabel: selectedLabel, searchValue: searchValue, onSearchChange: onSearchChange, onOpen: onOpen, onClose: onClose, onToggleSelect: onToggleSelect, onReset: onReset }));
+    const { width, placeholder, multiSelect, loading, data, setData, expanded, setExpanded, onLoadChildren, selectedIds, selectedCount, selectedLabel, searchValue, onSearchChange, onOpen, onClose, onToggleSelect, onReset, onSave, dirty, } = useTreeFilter(type, filter);
+    return (jsx(TreeDropdown, { zIndex: 100, width: width, placeholder: placeholder, multiSelect: multiSelect, loading: loading, data: data, setData: setData, expanded: expanded, setExpanded: setExpanded, onLoadChildren: onLoadChildren, selectedIds: selectedIds, selectedCount: selectedCount, selectedLabel: selectedLabel, searchValue: searchValue, onSearchChange: onSearchChange, onOpen: onOpen, onClose: onClose, onToggleSelect: onToggleSelect, onReset: onReset, onSave: onSave, dirty: dirty }));
 };
 
 const getFilterComponent = (filterType) => {