@antscorp/antsomi-ui 1.3.5-beta.702 → 1.3.5-beta.704

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js +51 -87
  2. package/es/components/molecules/MatchAnySelect/types.d.ts +1 -3
  3. package/es/components/molecules/MatchAnySelect/utils.js +13 -5
  4. package/package.json +2 -2
package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js CHANGED
@@ -15,8 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
15
15
  import { ConfigProvider } from 'antd';
16
16
  import clsx from 'clsx';
17
17
  import { isEmpty, uniqBy } from 'lodash';
18
- import React, { useEffect, useState } from 'react';
19
- import deepmerge from 'deepmerge';
18
+ import React, { useCallback, useEffect, useState } from 'react';
20
19
  // Components
21
20
  import { Button, Flex, Icon, Input, Popover, Spin, Tooltip, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
22
21
  import { EmptyData, PopoverSelect, Select } from '@antscorp/antsomi-ui/es/components/molecules';
@@ -36,24 +35,24 @@ import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
36
35
  import { getSelectedTreeData } from './utils';
37
36
  // Icons
38
37
  import { DataIcon, WarningIcon } from '../../icons';
39
- import isEqual from 'react-fast-compare';
40
38
  const initialState = {
41
39
  isOpenPopover: false,
42
40
  };
43
41
  const matchesAnyInitialState = {
44
42
  searchValue: '',
45
43
  selectedItems: [],
44
+ selectedTreeData: [],
46
45
  isShowLoadMoreEl: false,
47
46
  };
48
47
  const { t } = i18nInstance;
49
48
  const { Text } = Typography;
50
49
  export function MatchesAny(props) {
51
50
  // Props
52
- const { objectName, loading = false, showExtendValue = true, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, onSelectedTreeDataChange = () => { }, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "onSelectedTreeDataChange", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
51
+ const { objectName, loading = false, showExtendValue = true, selectedItems: selectedItemsProp, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, selectedTreeData: selectedTreeDataProp, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "selectedItems", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
53
52
  // State
54
53
  const [state, setState] = useState(matchesAnyInitialState);
55
54
  // Variables
56
- const { searchValue, selectedItems, isShowLoadMoreEl } = state;
55
+ const { searchValue, selectedItems, selectedTreeData, isShowLoadMoreEl } = state;
57
56
  const _a = listEmptyProps || {}, { icon: listEmptyIcon, description: listEmptyDescription = t(translations.global.noResultsMatchesKeyWord).toString() } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
58
57
  const _b = selectedListEmptyProps || {}, { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }) } = _b, restSelectedListEmptyProps = __rest(_b, ["description", "icon"]);
59
58
  // Refs
@@ -71,8 +70,8 @@ export function MatchesAny(props) {
71
70
  * Updates the `selectedItems` state when the `selectedItems` prop changes.
72
71
  */
73
72
  useDeepCompareEffect(() => {
74
- setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: props.selectedItems })));
75
- }, [props.selectedItems]);
73
+ setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: selectedItemsProp })));
74
+ }, [selectedItemsProp]);
76
75
  useEffect(() => {
77
76
  // Delay for show load more el
78
77
  setTimeout(() => {
@@ -80,23 +79,11 @@ export function MatchesAny(props) {
80
79
  }, 500);
81
80
  }, []);
82
81
  useDeepCompareEffect(() => {
83
- const selectedTreeData = getSelectedTreeData(items || [], selectedItems || [], selectedTreeDataProp || []);
84
- if (!isEqual(selectedTreeData, selectedTreeDataProp) && !isEmpty(selectedTreeData)) {
85
- onSelectedTreeDataChange(selectedTreeData);
82
+ if (!isEmpty(selectedTreeDataProp)) {
83
+ setState(prev => (Object.assign(Object.assign({}, prev), { selectedTreeData: selectedTreeDataProp })));
86
84
  }
87
- // eslint-disable-next-line react-hooks/exhaustive-deps
88
- }, [items, selectedItems, selectedTreeDataProp]);
85
+ }, [selectedTreeDataProp]);
89
86
  // Handlers
90
- /**
91
- * Adds an item and, if applicable, its leaf descendants to the list of selected items.
92
- *
93
- * If the item has children, the function flattens the tree structure and adds only the leaf nodes
94
- * (nodes without children) to the selected items list. If the item does not have children, it adds
95
- * the item directly to the selected items list.
96
- *
97
- * @param {MatchesAnyItem} item - The item to be added to the selected items list.
98
- * This item can have children.
99
- */
100
87
  const onSelectItem = (item) => {
101
88
  let newSelectedItems = [...(selectedItems || [])];
102
89
  if (item.children) {
@@ -106,7 +93,8 @@ export function MatchesAny(props) {
106
93
  else {
107
94
  newSelectedItems = newSelectedItems.concat(item);
108
95
  }
109
- setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems })));
96
+ const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
97
+ setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
110
98
  };
111
99
  /**
112
100
  * Removes an item and its descendants from the list of selected items.
@@ -116,38 +104,38 @@ export function MatchesAny(props) {
116
104
  *
117
105
  */
118
106
  const onRemoveItem = (item) => {
119
- setState(prev => {
120
- var _a;
121
- return (Object.assign(Object.assign({}, prev), { selectedItems: (_a = prev.selectedItems) === null || _a === void 0 ? void 0 : _a.filter(selectedItem => {
122
- if (item.children) {
123
- const flattenChild = flatTree(item.children, 'children');
124
- return (selectedItem.key !== item.key &&
125
- !(flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.some(item => item.key === selectedItem.key)));
126
- }
127
- return selectedItem.key !== item.key;
128
- }) }));
107
+ const newSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(selectedItem => {
108
+ if (item.children) {
109
+ const flattenChild = flatTree(item.children, 'children');
110
+ return (selectedItem.key !== item.key &&
111
+ !(flattenChild === null || flattenChild === void 0 ? void 0 : flattenChild.some(item => item.key === selectedItem.key)));
112
+ }
113
+ return selectedItem.key !== item.key;
129
114
  });
115
+ const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
116
+ setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
130
117
  };
131
118
  const onSelectAll = () => {
132
119
  const flattenTreeData = flatTree(items, 'children').filter(item => !item.children &&
133
120
  !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key || selectedItem.title === item.title)));
134
- setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: uniqBy([...(prev.selectedItems || []), ...flattenTreeData], 'key') })));
121
+ const newSelectedItems = uniqBy([...(state.selectedItems || []), ...flattenTreeData], 'key');
122
+ const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData);
123
+ setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
135
124
  };
136
125
  const onRemoveAll = () => {
137
- setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [] })));
126
+ setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [], selectedTreeData: [] })));
138
127
  };
139
128
  const onClickApply = () => {
140
- const selectedTreeData = getSelectedTreeData(items || [], selectedItems || [], selectedTreeDataProp || []);
141
- onApply(selectedItems || [], selectedTreeData);
129
+ onApply(selectedItems || [], selectedTreeData || []);
142
130
  };
143
- const renderItemError = (item) => {
131
+ const renderItemError = useCallback((item) => {
144
132
  if (customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.error) {
145
133
  return customItemRenders === null || customItemRenders === void 0 ? void 0 : customItemRenders.error(item);
146
134
  }
147
135
  return item.error ? (React.createElement(Tooltip, { title: item.error },
148
136
  React.createElement(WarningIcon, { size: 16 }))) : null;
149
- };
150
- const renderItemNodeTitle = ({ item, mode = 'unselect', onSelectItem, onRemoveItem, }) => {
137
+ }, [customItemRenders]);
138
+ const renderItemNodeTitle = useCallback(({ item, mode = 'unselect', onSelectItem, onRemoveItem, }) => {
151
139
  var _a, _b;
152
140
  const { isExtendValue, title, subTitle } = item; // Destructure properties from item
153
141
  return (React.createElement(React.Fragment, null,
@@ -177,7 +165,7 @@ export function MatchesAny(props) {
177
165
  }
178
166
  } },
179
167
  React.createElement(Icon, { type: `icon-ants-${onSelectItem ? 'double-arrow-up' : 'remove-slim'}`, size: 11 })))));
180
- };
168
+ }, [customItemRenders, renderExtraValues, renderItemError]);
181
169
  // Memos
182
170
  const { treeData, matchedParents } = useDeepCompareMemo(() => {
183
171
  var _a;
@@ -202,10 +190,7 @@ export function MatchesAny(props) {
202
190
  (selectedItem.isExtendValue && selectedItem.title === item.title)))
203
191
  : selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(selectedItem => selectedItem.key === item.key ||
204
192
  (selectedItem.isExtendValue && selectedItem.title === item.title));
205
- return Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({
206
- item,
207
- onSelectItem,
208
- }), disabled: isSelected }), (item.children && {
193
+ return Object.assign(Object.assign(Object.assign({}, item), { disabled: isSelected }), (item.children && {
209
194
  children: serializeTreeData(item.children),
210
195
  }));
211
196
  });
@@ -217,38 +202,6 @@ export function MatchesAny(props) {
217
202
  return { treeData, matchedParents };
218
203
  // eslint-disable-next-line react-hooks/exhaustive-deps
219
204
  }, [items, searchValue, selectedItems, groupSelectProps, onChangeSearch]);
220
- // const selectedTreeData = useDeepCompareMemo(() => [], [items, selectedItems]);
221
- const selectedTreeData = useDeepCompareMemo(() => {
222
- var _a;
223
- const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
224
- const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
225
- const serializeTreeData = (list) => {
226
- var _a;
227
- return ((_a = list
228
- .filter(item => {
229
- /**
230
- * Checks if the given item or any of its descendants are selected.
231
- *
232
- * If the item has children, it flattens the children tree structure and checks if any node is selected.
233
- * If the item does not have children, it directly checks if the item is in the selected items list.
234
- *
235
- */
236
- const isSelected = item.children
237
- ? flatTree(item.children, 'children').some(item => notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key))
238
- : notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.some(selectedItem => selectedItem.key === item.key);
239
- return isSelected;
240
- })) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign(Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) }), (item.children && {
241
- children: serializeTreeData(item.children),
242
- })), (!!item.error && { className: 'error-node' }))))) || [];
243
- };
244
- const mergeItems = deepmerge(selectedTreeDataProp || [], items || [], {
245
- arrayMerge(target, source) {
246
- return uniqBy([...target, ...source], 'key');
247
- },
248
- });
249
- return serializeTreeData(mergeItems).concat(((_a = [...extendValueSelectedItems]) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { title: renderItemNodeTitle({ item, mode: 'select', onRemoveItem }) })))) || []);
250
- // eslint-disable-next-line react-hooks/exhaustive-deps
251
- }, [items, selectedItems, selectedTreeDataProp]);
252
205
  const isDisableRemoveAll = useDeepCompareMemo(() => !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length), [selectedTreeData]);
253
206
  const isDisableSelectAll = useDeepCompareMemo(() => {
254
207
  const flattenTreeData = flatTree(treeData, 'children');
@@ -291,14 +244,21 @@ export function MatchesAny(props) {
291
244
  : items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
292
245
  transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
293
246
  transition: 'transform 0.3s ease',
294
- }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), height: 396 }),
247
+ }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), titleRender: item => renderItemNodeTitle({
248
+ item: item,
249
+ onSelectItem,
250
+ }), height: 396 }),
295
251
  isShowLoadMoreEl && React.createElement("div", { ref: loadMoreRef }))) : (React.createElement(EmptyData, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps)))))));
296
252
  };
297
253
  const renderSelectedList = () => (React.createElement("div", { className: "matches-any__section" },
298
254
  React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
299
255
  React.createElement(Text, { strong: true }, `${t(translations.global.selected)} (${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0})`),
300
256
  React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
301
- React.createElement("div", { className: "matches-any__body" }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, { defaultExpandedKeys: selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.map(item => item.key), selectable: false, treeData: selectedTreeData, height: 420, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
257
+ React.createElement("div", { className: "matches-any__body" }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, { defaultExpandedKeys: selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.map(item => item.key), selectable: false, treeData: selectedTreeData, titleRender: item => renderItemNodeTitle({
258
+ item: item,
259
+ mode: 'select',
260
+ onRemoveItem,
261
+ }), height: 420, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
302
262
  transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
303
263
  transition: 'transform 0.3s ease',
304
264
  }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) })))));
@@ -309,12 +269,16 @@ export function MatchesAny(props) {
309
269
  // If there are available values to add
310
270
  if (availableExtendValues) {
311
271
  // Create new items in the format required (MatchesAnyItem)
312
- const newSelectedItems = availableExtendValues.map(value => ({
313
- key: value,
314
- title: value,
315
- isExtendValue: true, // Flag to indicate that this item is an extend value
316
- }));
317
- setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: [...(selectedItems || []), ...newSelectedItems] })));
272
+ const newSelectedItems = [
273
+ ...(selectedItems || []),
274
+ ...availableExtendValues.map(value => ({
275
+ key: value,
276
+ title: value,
277
+ isExtendValue: true, // Flag to indicate that this item is an extend value
278
+ })),
279
+ ];
280
+ const newSelectedTreeData = getSelectedTreeData(items || [], newSelectedItems || [], selectedTreeData || []);
281
+ setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: newSelectedItems, selectedTreeData: newSelectedTreeData })));
318
282
  }
319
283
  };
320
284
  return (React.createElement(ConfigProvider, { theme: MATCHES_ANY_THEME },
@@ -331,7 +295,7 @@ export function MatchesAny(props) {
331
295
  }
332
296
  export function MatchesAnySelect(props) {
333
297
  var _a, _b, _c;
334
- const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, onChangeSearch, onChange = () => { }, onSelectedTreeDataChange, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "renderExtraValues", "customItemRenders", "popoverProps", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "onChangeSearch", "onChange", "onSelectedTreeDataChange", "onLoadMore"]);
298
+ const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, onChangeSearch, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "renderExtraValues", "customItemRenders", "popoverProps", "listEmptyProps", "selectedListEmptyProps", "selectedTreeData", "onChangeSearch", "onChange", "onLoadMore"]);
335
299
  // State
336
300
  const [state, setState] = useState(initialState);
337
301
  // Variables
@@ -344,7 +308,7 @@ export function MatchesAnySelect(props) {
344
308
  onChange(selectedItems, selectedTreeData);
345
309
  setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
346
310
  };
347
- return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore, onSelectedTreeDataChange: onSelectedTreeDataChange }), align: {
311
+ return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, selectedTreeData: selectedTreeData, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
348
312
  overflow: {
349
313
  shiftY: 0,
350
314
  shiftX: 0,
package/es/components/molecules/MatchAnySelect/types.d.ts CHANGED
@@ -50,8 +50,6 @@ export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'o
50
50
  listEmptyProps?: EmptyDataProps;
51
51
  /** Empty UI for selected list items */
52
52
  selectedListEmptyProps?: EmptyDataProps;
53
- /** Callback function when selectedTreeData change */
54
- onSelectedTreeDataChange?: (selectedTreeData: MatchesAnyItem<TItem>[]) => void;
55
53
  /** Callback function that is called when the selected items change. */
56
54
  onChange?: (selectedItems: MatchesAnyItem<TItem>[], selectedTreeData?: MatchesAnyItem<TItem>[]) => void;
57
55
  /** Callback function that is called when the search value changes */
@@ -59,7 +57,7 @@ export interface MatchesAnySelectProps<TItem = any> extends Omit<SelectProps, 'o
59
57
  /** Callback function that is called when the user scroll */
60
58
  onLoadMore?: () => void;
61
59
  }
62
- export interface MatchesAnyProps<TItem = any> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps' | 'selectedTreeData' | 'onSelectedTreeDataChange'> {
60
+ export interface MatchesAnyProps<TItem = any> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps' | 'selectedTreeData'> {
63
61
  /**
64
62
  * Callback function that is called when the apply action is triggered.
65
63
  *
package/es/components/molecules/MatchAnySelect/utils.js CHANGED
@@ -1,8 +1,18 @@
1
- // Types
1
+ // Libraries
2
2
  import deepmerge from 'deepmerge';
3
3
  // Utils
4
4
  import { flatTree } from '@antscorp/antsomi-ui/es/utils';
5
- import { uniqBy } from 'lodash';
5
+ const customMergeTreeData = (key) => (target, source) => {
6
+ const merged = target.map(item => {
7
+ const found = source.find(s => s[key] === item[key]);
8
+ if (found) {
9
+ return deepmerge(found, item, { arrayMerge: customMergeTreeData(key) });
10
+ }
11
+ return item;
12
+ });
13
+ const newItems = source.filter(s => !target.some(t => t[key] === s[key]));
14
+ return [...merged, ...newItems];
15
+ };
6
16
  export const getSelectedTreeData = (items, selectedItems, selectedTreeData = []) => {
7
17
  const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
8
18
  const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
@@ -26,9 +36,7 @@ export const getSelectedTreeData = (items, selectedItems, selectedTreeData = [])
26
36
  }))))) || [];
27
37
  };
28
38
  const mergeItems = deepmerge(selectedTreeData || [], items || [], {
29
- arrayMerge(target, source) {
30
- return uniqBy([...target, ...source], 'key');
31
- },
39
+ arrayMerge: customMergeTreeData('key'),
32
40
  });
33
41
  return serializeTreeData(mergeItems).concat(extendValueSelectedItems);
34
42
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.702",
3
+ "version": "1.3.5-beta.704",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",
@@ -135,7 +135,7 @@
135
135
  "uniqid": "^5.4.0",
136
136
  "use-context-selector": "^1.4.4",
137
137
  "use-image": "^1.1.1",
138
- "use-immer": "^0.9.0",
138
+ "use-immer": "^0.4.1",
139
139
  "zustand": "^4.5.2"
140
140
  },
141
141
  "devDependencies": {