@synerise/ds-item-picker 1.17.0 → 1.17.2
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.
- package/CHANGELOG.md +8 -0
- package/dist/ItemPicker.d.ts +5 -5
- package/dist/ItemPicker.js +13 -17
- package/dist/ItemPicker.styles.d.ts +1 -1
- package/dist/ItemPicker.styles.js +6 -3
- package/dist/components/ItemPickerDropdown/ItemPickerDropdown.d.ts +2 -2
- package/dist/components/ItemPickerDropdown/ItemPickerDropdown.js +58 -99
- package/dist/components/ItemPickerDropdown/ItemPickerDropdown.style.d.ts +7 -7
- package/dist/components/ItemPickerDropdown/ItemPickerDropdown.style.js +22 -19
- package/dist/components/ItemPickerDropdown/ItemPickerDropdown.types.d.ts +4 -4
- package/dist/components/ItemPickerDropdown/ItemPickerDropdown.types.js +1 -1
- package/dist/components/ItemPickerLegacy/ItemPickerLegacy.d.ts +2 -2
- package/dist/components/ItemPickerLegacy/ItemPickerLegacy.js +89 -152
- package/dist/components/ItemPickerLegacy/ItemPickerLegacy.types.d.ts +8 -8
- package/dist/components/ItemPickerLegacy/ItemPickerLegacy.types.js +1 -1
- package/dist/components/ItemPickerList/ItemPickerList.d.ts +4 -4
- package/dist/components/ItemPickerList/ItemPickerList.js +199 -267
- package/dist/components/ItemPickerList/ItemPickerList.styles.d.ts +18 -18
- package/dist/components/ItemPickerList/ItemPickerList.styles.js +55 -64
- package/dist/components/ItemPickerList/ItemPickerList.types.d.ts +3 -3
- package/dist/components/ItemPickerList/ItemPickerList.types.js +1 -1
- package/dist/components/ItemPickerList/components/EmptyListMessage.d.ts +3 -3
- package/dist/components/ItemPickerList/components/EmptyListMessage.js +27 -40
- package/dist/components/ItemPickerList/components/ErrorItem.d.ts +1 -1
- package/dist/components/ItemPickerList/components/ErrorItem.js +10 -9
- package/dist/components/ItemPickerList/components/ErrorMessage.d.ts +2 -2
- package/dist/components/ItemPickerList/components/ErrorMessage.js +12 -15
- package/dist/components/ItemPickerList/components/InfiniteLoaderItem.d.ts +2 -2
- package/dist/components/ItemPickerList/components/InfiniteLoaderItem.js +19 -17
- package/dist/components/ItemPickerList/components/ItemPickerListFooter.d.ts +3 -3
- package/dist/components/ItemPickerList/components/ItemPickerListFooter.js +21 -20
- package/dist/components/ItemPickerList/components/ItemPickerListRow.d.ts +4 -4
- package/dist/components/ItemPickerList/components/ItemPickerListRow.js +42 -43
- package/dist/components/ItemPickerList/components/ItemPickerListSkeleton.d.ts +1 -1
- package/dist/components/ItemPickerList/components/ItemPickerListSkeleton.js +16 -23
- package/dist/components/ItemPickerList/components/ListSearchInput.d.ts +4 -4
- package/dist/components/ItemPickerList/components/ListSearchInput.js +36 -51
- package/dist/components/ItemPickerList/components/LoadingItem.d.ts +1 -1
- package/dist/components/ItemPickerList/components/LoadingItem.js +10 -9
- package/dist/components/ItemPickerList/components/NoMoreItem.d.ts +1 -1
- package/dist/components/ItemPickerList/components/NoMoreItem.js +10 -9
- package/dist/components/ItemPickerList/components/index.js +14 -6
- package/dist/components/ItemPickerList/constants.d.ts +2 -2
- package/dist/components/ItemPickerList/constants.js +47 -26
- package/dist/components/ItemPickerList/hooks/index.js +8 -3
- package/dist/components/ItemPickerList/hooks/useFlattenFolders.d.ts +2 -2
- package/dist/components/ItemPickerList/hooks/useFlattenFolders.js +40 -61
- package/dist/components/ItemPickerList/hooks/useItemsInSections.d.ts +7 -7
- package/dist/components/ItemPickerList/hooks/useItemsInSections.js +342 -443
- package/dist/components/ItemPickerList/hooks/useItemsInSections.utils.d.ts +5 -5
- package/dist/components/ItemPickerList/hooks/useItemsInSections.utils.js +77 -74
- package/dist/components/ItemPickerList/hooks/useListHeight.d.ts +2 -2
- package/dist/components/ItemPickerList/hooks/useListHeight.js +37 -41
- package/dist/components/ItemPickerList/types/renderMode.js +8 -5
- package/dist/components/ItemPickerList/utils/actionItemsUtils.d.ts +4 -4
- package/dist/components/ItemPickerList/utils/actionItemsUtils.js +92 -92
- package/dist/components/ItemPickerList/utils/createTitleFromTitlePath.d.ts +2 -2
- package/dist/components/ItemPickerList/utils/createTitleFromTitlePath.js +7 -4
- package/dist/components/ItemPickerList/utils/findSectionById.d.ts +1 -1
- package/dist/components/ItemPickerList/utils/findSectionById.js +10 -12
- package/dist/components/ItemPickerList/utils/getContextAwareActions.d.ts +1 -1
- package/dist/components/ItemPickerList/utils/getContextAwareActions.js +19 -15
- package/dist/components/ItemPickerList/utils/getSearchByActionItems.d.ts +2 -2
- package/dist/components/ItemPickerList/utils/getSearchByActionItems.js +28 -29
- package/dist/components/ItemPickerList/utils/index.js +16 -4
- package/dist/components/ItemPickerList/utils/isNavKey.d.ts +1 -1
- package/dist/components/ItemPickerList/utils/isNavKey.js +6 -3
- package/dist/components/ItemPickerList/utils/resolveSectionId.d.ts +2 -2
- package/dist/components/ItemPickerList/utils/resolveSectionId.js +15 -9
- package/dist/components/ItemPickerList/utils/typeguards.utils.d.ts +5 -5
- package/dist/components/ItemPickerList/utils/typeguards.utils.js +23 -14
- package/dist/components/ItemPickerNew/ItemPickerNew.d.ts +4 -4
- package/dist/components/ItemPickerNew/ItemPickerNew.js +55 -100
- package/dist/components/ItemPickerNew/ItemPickerNew.types.d.ts +13 -13
- package/dist/components/ItemPickerNew/ItemPickerNew.types.js +1 -1
- package/dist/components/ItemPickerNew/types/actions.types.d.ts +2 -2
- package/dist/components/ItemPickerNew/types/actions.types.js +10 -6
- package/dist/components/ItemPickerNew/types/baseItemSectionType.types.d.ts +3 -3
- package/dist/components/ItemPickerNew/types/baseItemSectionType.types.js +1 -1
- package/dist/components/ItemPickerNew/types/itemPickerListTexts.types.d.ts +1 -1
- package/dist/components/ItemPickerNew/types/itemPickerListTexts.types.js +1 -1
- package/dist/components/ItemPickerTrigger/Trigger.d.ts +5 -5
- package/dist/components/ItemPickerTrigger/Trigger.js +71 -111
- package/dist/components/ItemPickerTrigger/Trigger.styles.d.ts +12 -12
- package/dist/components/ItemPickerTrigger/Trigger.styles.js +70 -93
- package/dist/components/ItemPickerTrigger/Trigger.types.d.ts +3 -3
- package/dist/components/ItemPickerTrigger/Trigger.types.js +1 -1
- package/dist/hooks/useDefaultTexts.d.ts +1 -1
- package/dist/hooks/useDefaultTexts.js +116 -121
- package/dist/index.js +14 -6
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +25 -25
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ListItemProps } from '@synerise/ds-list-item';
|
|
3
|
+
import { BaseItemType, BaseSectionType, BaseSectionTypeWithFolders } from '../../ItemPickerNew/types/baseItemSectionType.types';
|
|
4
|
+
import { ItemPickerListTexts } from '../../ItemPickerNew/types/itemPickerListTexts.types';
|
|
5
|
+
import { TitleListItemProps } from '../ItemPickerList.types';
|
|
6
6
|
export declare const getFolderItem: (item: ListItemProps, onClick: ListItemProps["onClick"]) => ListItemProps;
|
|
7
7
|
export declare const getShowMoreItem: (label: ReactNode, onClick: ListItemProps["onClick"]) => ListItemProps;
|
|
8
8
|
export declare const getTitleItem: (titleText: ReactNode) => TitleListItemProps;
|
|
@@ -1,106 +1,109 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { createTitleFromTitlePath } from
|
|
6
|
-
|
|
7
|
-
return
|
|
8
|
-
prefixel:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
onClick: onClick
|
|
13
|
-
});
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import Icon, { FolderM, ArrowRightCircleM } from "@synerise/ds-icon";
|
|
3
|
+
import InformationCard from "@synerise/ds-information-card";
|
|
4
|
+
import "../../ItemPickerNew/types/actions.types.js";
|
|
5
|
+
import { createTitleFromTitlePath } from "../utils/createTitleFromTitlePath.js";
|
|
6
|
+
const getFolderItem = (item, onClick) => {
|
|
7
|
+
return {
|
|
8
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(FolderM, {}) }),
|
|
9
|
+
...item,
|
|
10
|
+
onClick
|
|
11
|
+
};
|
|
14
12
|
};
|
|
15
|
-
|
|
13
|
+
const getShowMoreItem = (label, onClick) => {
|
|
16
14
|
return {
|
|
17
15
|
text: label,
|
|
18
|
-
prefixel:
|
|
19
|
-
|
|
20
|
-
}),
|
|
21
|
-
onClick: onClick
|
|
16
|
+
prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ArrowRightCircleM, {}) }),
|
|
17
|
+
onClick
|
|
22
18
|
};
|
|
23
19
|
};
|
|
24
|
-
|
|
20
|
+
const getTitleItem = (titleText) => {
|
|
25
21
|
return {
|
|
26
|
-
type:
|
|
22
|
+
type: "title",
|
|
27
23
|
text: titleText
|
|
28
24
|
};
|
|
29
25
|
};
|
|
30
|
-
|
|
31
|
-
return
|
|
32
|
-
|
|
26
|
+
const getListItem = (item, isSelected, searchQuery, onItemSelect, renderHoverTooltip, isSearchParam) => {
|
|
27
|
+
return {
|
|
28
|
+
...item,
|
|
29
|
+
highlight: !isSearchParam ? searchQuery : void 0,
|
|
33
30
|
selected: isSelected(item),
|
|
34
|
-
renderHoverTooltip
|
|
35
|
-
onClick: onItemSelect ?
|
|
36
|
-
|
|
37
|
-
} : undefined
|
|
38
|
-
});
|
|
31
|
+
renderHoverTooltip,
|
|
32
|
+
onClick: onItemSelect ? () => onItemSelect(item) : void 0
|
|
33
|
+
};
|
|
39
34
|
};
|
|
40
|
-
|
|
35
|
+
const matchesSearchQuery = (text, searchQuery) => {
|
|
41
36
|
return String(text).toLowerCase().includes(searchQuery.toLowerCase());
|
|
42
37
|
};
|
|
43
|
-
|
|
38
|
+
const getItemsSectionTitle = (texts, showItemsSectionLabel, searchQuery) => {
|
|
44
39
|
if (searchQuery) {
|
|
45
40
|
return [getTitleItem(texts.resultsSectionLabel)];
|
|
46
41
|
}
|
|
47
42
|
return showItemsSectionLabel ? [getTitleItem(texts.itemsSectionLabel)] : [];
|
|
48
43
|
};
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
})) : [];
|
|
44
|
+
const getRecentItems = ({
|
|
45
|
+
recents,
|
|
46
|
+
texts,
|
|
47
|
+
isSelected,
|
|
48
|
+
handleItemSelect,
|
|
49
|
+
searchQuery,
|
|
50
|
+
isSearchParam
|
|
51
|
+
}) => {
|
|
52
|
+
return recents?.length && !searchQuery ? [getTitleItem(texts.recentsSectionLabel), ...recents.map((item) => getListItem(item, isSelected, searchQuery, handleItemSelect, getInformationCardTooltip(item), isSearchParam))] : [];
|
|
59
53
|
};
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
})) : [];
|
|
54
|
+
const getItems = ({
|
|
55
|
+
items,
|
|
56
|
+
texts,
|
|
57
|
+
titlePath,
|
|
58
|
+
searchQuery,
|
|
59
|
+
isSelected,
|
|
60
|
+
handleItemSelect,
|
|
61
|
+
showItemsSectionLabel,
|
|
62
|
+
showMoreOnClick,
|
|
63
|
+
maxItems,
|
|
64
|
+
isSearchParam
|
|
65
|
+
}) => {
|
|
66
|
+
const sectionTitle = titlePath ? [getTitleItem(createTitleFromTitlePath(titlePath))] : getItemsSectionTitle(texts, showItemsSectionLabel, searchQuery);
|
|
67
|
+
const results = items?.length ? [...sectionTitle, ...items.map((item) => getListItem(item, isSelected, searchQuery, handleItemSelect, getInformationCardTooltip(item), isSearchParam))] : [];
|
|
75
68
|
if (maxItems) {
|
|
76
|
-
|
|
77
|
-
|
|
69
|
+
const maxItemsWithTitle = maxItems + (sectionTitle.length ? 1 : 0);
|
|
70
|
+
const hasMore = results.splice(maxItemsWithTitle, Infinity);
|
|
78
71
|
if (hasMore.length) {
|
|
79
72
|
results.push(getShowMoreItem(texts.showMoreResultsLabel, showMoreOnClick));
|
|
80
73
|
}
|
|
81
74
|
}
|
|
82
75
|
return results;
|
|
83
76
|
};
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
return handleSectionChange(folder);
|
|
92
|
-
});
|
|
93
|
-
})) : [];
|
|
94
|
-
return [].concat(itemsArray, folderItemsWithTitle);
|
|
77
|
+
const getFolderItems = ({
|
|
78
|
+
handleSectionChange,
|
|
79
|
+
sections
|
|
80
|
+
}) => {
|
|
81
|
+
return sections ? sections.reduce((itemsArray, section) => {
|
|
82
|
+
const folderItemsWithTitle = section.folders?.length ? [getTitleItem(section.text), ...section.folders.map((folder) => getFolderItem(folder, () => handleSectionChange(folder)))] : [];
|
|
83
|
+
return [...itemsArray, ...folderItemsWithTitle];
|
|
95
84
|
}, []) : [];
|
|
96
85
|
};
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
86
|
+
const getInformationCardTooltip = (item) => {
|
|
87
|
+
const {
|
|
88
|
+
informationCardProps,
|
|
89
|
+
renderHoverTooltip
|
|
90
|
+
} = item;
|
|
100
91
|
if (informationCardProps) {
|
|
101
|
-
return
|
|
102
|
-
return
|
|
92
|
+
return () => {
|
|
93
|
+
return /* @__PURE__ */ jsx(InformationCard, { ...informationCardProps });
|
|
103
94
|
};
|
|
104
95
|
}
|
|
105
96
|
return renderHoverTooltip;
|
|
106
|
-
};
|
|
97
|
+
};
|
|
98
|
+
export {
|
|
99
|
+
getFolderItem,
|
|
100
|
+
getFolderItems,
|
|
101
|
+
getInformationCardTooltip,
|
|
102
|
+
getItems,
|
|
103
|
+
getItemsSectionTitle,
|
|
104
|
+
getListItem,
|
|
105
|
+
getRecentItems,
|
|
106
|
+
getShowMoreItem,
|
|
107
|
+
getTitleItem,
|
|
108
|
+
matchesSearchQuery
|
|
109
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import { ContainerHeightType } from '../../ItemPickerNew/ItemPickerNew.types';
|
|
3
3
|
type UseListHeightType = {
|
|
4
4
|
heightConfig?: ContainerHeightType;
|
|
5
5
|
calculatedContentHeight?: number;
|
|
@@ -1,55 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
includeFooter = _ref$includeFooter === void 0 ? true : _ref$includeFooter;
|
|
13
|
-
var dimensionsConfig = _extends({
|
|
1
|
+
import { useState, useEffect } from "react";
|
|
2
|
+
import { useResizeObserver } from "@synerise/ds-utils";
|
|
3
|
+
import { DEFAULT_HEIGHT, DEFAULT_HEIGHT_BELOW_THRESHOLD, DEFAULT_HEIGHT_THRESHOLD, SEARCH_BAR_HEIGHT, FOOTER_HEIGHT, LIST_INNER_PADDING } from "../constants.js";
|
|
4
|
+
const useListHeight = ({
|
|
5
|
+
heightConfig,
|
|
6
|
+
calculatedContentHeight,
|
|
7
|
+
containerRef,
|
|
8
|
+
includeSearchBar = true,
|
|
9
|
+
includeFooter = true
|
|
10
|
+
}) => {
|
|
11
|
+
const dimensionsConfig = {
|
|
14
12
|
defaultHeight: DEFAULT_HEIGHT,
|
|
15
13
|
belowThresholdHeight: DEFAULT_HEIGHT_BELOW_THRESHOLD,
|
|
16
|
-
viewportHeightThreshold: DEFAULT_HEIGHT_THRESHOLD
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var checkViewportHeight = function checkViewportHeight() {
|
|
23
|
-
return setOuterHeight(window.innerHeight < dimensionsConfig.viewportHeightThreshold ? dimensionsConfig.belowThresholdHeight : dimensionsConfig.defaultHeight);
|
|
24
|
-
};
|
|
14
|
+
viewportHeightThreshold: DEFAULT_HEIGHT_THRESHOLD,
|
|
15
|
+
...typeof heightConfig === "object" ? heightConfig : {}
|
|
16
|
+
};
|
|
17
|
+
const [outerHeight, setOuterHeight] = useState(dimensionsConfig.defaultHeight);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
const checkViewportHeight = () => setOuterHeight(window.innerHeight < dimensionsConfig.viewportHeightThreshold ? dimensionsConfig.belowThresholdHeight : dimensionsConfig.defaultHeight);
|
|
25
20
|
checkViewportHeight();
|
|
26
|
-
window.addEventListener(
|
|
27
|
-
return
|
|
28
|
-
window.removeEventListener(
|
|
21
|
+
window.addEventListener("resize", checkViewportHeight);
|
|
22
|
+
return () => {
|
|
23
|
+
window.removeEventListener("resize", checkViewportHeight);
|
|
29
24
|
};
|
|
30
25
|
}, [dimensionsConfig.defaultHeight, dimensionsConfig.belowThresholdHeight, dimensionsConfig.viewportHeightThreshold]);
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
setMeasuredHeight = _useState2[1];
|
|
34
|
-
useResizeObserver(containerRef, function (dimensions) {
|
|
26
|
+
const [measuredHeight, setMeasuredHeight] = useState();
|
|
27
|
+
useResizeObserver(containerRef, (dimensions) => {
|
|
35
28
|
setMeasuredHeight(dimensions.height);
|
|
36
29
|
});
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
if (heightConfig ===
|
|
41
|
-
outerWrapperHeight =
|
|
30
|
+
const offsetSpace = (includeSearchBar ? SEARCH_BAR_HEIGHT : 0) + (includeFooter ? FOOTER_HEIGHT : 0);
|
|
31
|
+
let outerWrapperHeight = "0px";
|
|
32
|
+
let listWrapperHeight = 0;
|
|
33
|
+
if (heightConfig === "fillSpace" && measuredHeight !== void 0) {
|
|
34
|
+
outerWrapperHeight = "100%";
|
|
42
35
|
listWrapperHeight = Math.max(measuredHeight - offsetSpace, 0);
|
|
43
|
-
} else if (heightConfig ===
|
|
36
|
+
} else if (heightConfig === "fitContent" && calculatedContentHeight) {
|
|
44
37
|
listWrapperHeight = calculatedContentHeight + 2 * LIST_INNER_PADDING;
|
|
45
|
-
outerWrapperHeight = listWrapperHeight + offsetSpace
|
|
38
|
+
outerWrapperHeight = `${listWrapperHeight + offsetSpace}px`;
|
|
46
39
|
} else {
|
|
47
40
|
listWrapperHeight = outerHeight - offsetSpace;
|
|
48
|
-
outerWrapperHeight = outerHeight
|
|
41
|
+
outerWrapperHeight = `${outerHeight}px`;
|
|
49
42
|
}
|
|
50
43
|
return {
|
|
51
|
-
listWrapperHeight
|
|
52
|
-
outerWrapperHeight
|
|
53
|
-
offsetSpace
|
|
44
|
+
listWrapperHeight,
|
|
45
|
+
outerWrapperHeight,
|
|
46
|
+
offsetSpace
|
|
54
47
|
};
|
|
55
|
-
};
|
|
48
|
+
};
|
|
49
|
+
export {
|
|
50
|
+
useListHeight
|
|
51
|
+
};
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
LIST_ITEMS_IN_SECTIONS:
|
|
3
|
-
LIST_FOLDERS_IN_SECTIONS:
|
|
4
|
-
LIST_ITEMS:
|
|
5
|
-
};
|
|
1
|
+
const RENDER_MODES = {
|
|
2
|
+
LIST_ITEMS_IN_SECTIONS: "ITEMS_IN_SECTIONS",
|
|
3
|
+
LIST_FOLDERS_IN_SECTIONS: "LIST_FOLDERS_IN_SECTION",
|
|
4
|
+
LIST_ITEMS: "LIST_ITEMS"
|
|
5
|
+
};
|
|
6
|
+
export {
|
|
7
|
+
RENDER_MODES
|
|
8
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { ListItemProps } from '@synerise/ds-list-item';
|
|
2
|
+
import { Action, SearchByAction, SearchByParamConfig, SearchInAction } from '../../ItemPickerNew/types/actions.types';
|
|
3
|
+
import { ItemPickerListTexts } from '../../ItemPickerNew/types/itemPickerListTexts.types';
|
|
4
|
+
import { TitleListItemProps } from '../ItemPickerList.types';
|
|
5
5
|
export declare const getActionItem: (action: Action & {
|
|
6
6
|
onClick?: (action: Action) => void;
|
|
7
7
|
}, searchQuery?: string) => ListItemProps;
|
|
@@ -1,115 +1,115 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import { getContextAwareActions } from
|
|
6
|
-
|
|
7
|
-
return
|
|
1
|
+
import { ACTION_TYPES } from "../../ItemPickerNew/types/actions.types.js";
|
|
2
|
+
import { getTitleItem, matchesSearchQuery } from "../hooks/useItemsInSections.utils.js";
|
|
3
|
+
import { isSearchInAction, isSearchByAction, isTruthy } from "./typeguards.utils.js";
|
|
4
|
+
import "../constants.js";
|
|
5
|
+
import { getContextAwareActions } from "./getContextAwareActions.js";
|
|
6
|
+
const getActionItem = (action, searchQuery) => {
|
|
7
|
+
return {
|
|
8
|
+
...action,
|
|
8
9
|
highlight: searchQuery,
|
|
9
|
-
onClick:
|
|
10
|
-
|
|
11
|
-
} : undefined
|
|
12
|
-
});
|
|
10
|
+
onClick: "onClick" in action && action.onClick ? () => action.onClick?.(action) : void 0
|
|
11
|
+
};
|
|
13
12
|
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
13
|
+
const getActionItems = ({
|
|
14
|
+
actions,
|
|
15
|
+
texts,
|
|
16
|
+
searchQuery,
|
|
17
|
+
sectionId,
|
|
18
|
+
setSearchByAction,
|
|
19
|
+
setSearchInAction,
|
|
20
|
+
changeSearchQuery,
|
|
21
|
+
isSearchInItemActive,
|
|
22
|
+
searchByParamConfig,
|
|
23
|
+
setSearchByParamConfig
|
|
24
|
+
}) => {
|
|
25
|
+
if (!actions?.length) {
|
|
26
26
|
return [];
|
|
27
27
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}) : actions;
|
|
31
|
-
if (!(filteredActions != null && filteredActions.length)) {
|
|
28
|
+
const filteredActions = searchByParamConfig ? actions.filter((action) => action.actionType === ACTION_TYPES.searchIn) : actions;
|
|
29
|
+
if (!filteredActions?.length) {
|
|
32
30
|
return [];
|
|
33
31
|
}
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
const contextAwareActions = getContextAwareActions(filteredActions, sectionId);
|
|
33
|
+
const isRenderedSingleAction = {
|
|
36
34
|
searchBy: false,
|
|
37
35
|
searchIn: false
|
|
38
36
|
};
|
|
39
|
-
|
|
37
|
+
const renderedActions = filteredActions.map((action) => {
|
|
40
38
|
switch (action.actionType) {
|
|
41
|
-
case ACTION_TYPES.searchBy:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
if (isRenderedSingleAction.searchBy) {
|
|
46
|
-
return undefined;
|
|
47
|
-
}
|
|
48
|
-
if (!searchByAction || !((_searchByAction$searc = searchByAction.searchParams) != null && _searchByAction$searc.length)) {
|
|
49
|
-
return undefined;
|
|
50
|
-
}
|
|
51
|
-
isRenderedSingleAction.searchBy = true;
|
|
52
|
-
return getActionItem(_extends({}, searchByAction, {
|
|
53
|
-
onClick: function onClick() {
|
|
54
|
-
changeSearchQuery('');
|
|
55
|
-
setSearchByAction(searchByAction);
|
|
56
|
-
}
|
|
57
|
-
}), searchQuery);
|
|
39
|
+
case ACTION_TYPES.searchBy: {
|
|
40
|
+
const searchByAction = isSearchByAction(contextAwareActions.searchBy) && contextAwareActions.searchBy;
|
|
41
|
+
if (isRenderedSingleAction.searchBy) {
|
|
42
|
+
return void 0;
|
|
58
43
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
44
|
+
if (!searchByAction || !searchByAction.searchParams?.length) {
|
|
45
|
+
return void 0;
|
|
46
|
+
}
|
|
47
|
+
isRenderedSingleAction.searchBy = true;
|
|
48
|
+
return getActionItem({
|
|
49
|
+
...searchByAction,
|
|
50
|
+
onClick: () => {
|
|
51
|
+
changeSearchQuery("");
|
|
52
|
+
setSearchByAction(searchByAction);
|
|
67
53
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
setSearchInAction(searchInAction);
|
|
74
|
-
}
|
|
75
|
-
}), searchQuery);
|
|
54
|
+
}, searchQuery);
|
|
55
|
+
}
|
|
56
|
+
case ACTION_TYPES.searchIn: {
|
|
57
|
+
if (isRenderedSingleAction.searchIn) {
|
|
58
|
+
return void 0;
|
|
76
59
|
}
|
|
77
|
-
|
|
78
|
-
{
|
|
79
|
-
return
|
|
60
|
+
const searchInAction = isSearchInAction(contextAwareActions.searchIn) && contextAwareActions.searchIn;
|
|
61
|
+
if (!searchInAction || !searchInAction.loadItemsSectionId || isSearchInItemActive) {
|
|
62
|
+
return void 0;
|
|
80
63
|
}
|
|
64
|
+
isRenderedSingleAction.searchIn = true;
|
|
65
|
+
return getActionItem({
|
|
66
|
+
...searchInAction,
|
|
67
|
+
onClick: () => {
|
|
68
|
+
changeSearchQuery("");
|
|
69
|
+
setSearchByParamConfig(void 0);
|
|
70
|
+
setSearchInAction(searchInAction);
|
|
71
|
+
}
|
|
72
|
+
}, searchQuery);
|
|
73
|
+
}
|
|
74
|
+
default: {
|
|
75
|
+
return getActionItem(action, searchQuery);
|
|
76
|
+
}
|
|
81
77
|
}
|
|
82
78
|
});
|
|
83
|
-
|
|
79
|
+
const validRenderedActions = renderedActions.filter(isTruthy);
|
|
84
80
|
if (!validRenderedActions.length) {
|
|
85
81
|
return [];
|
|
86
82
|
}
|
|
87
|
-
return [getTitleItem(texts.actionsSectionLabel)]
|
|
83
|
+
return [getTitleItem(texts.actionsSectionLabel), ...validRenderedActions];
|
|
88
84
|
};
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
});
|
|
85
|
+
const getSectionActionItems = ({
|
|
86
|
+
actions,
|
|
87
|
+
texts,
|
|
88
|
+
sectionId,
|
|
89
|
+
searchQuery,
|
|
90
|
+
setSearchByAction,
|
|
91
|
+
setSearchInAction,
|
|
92
|
+
changeSearchQuery,
|
|
93
|
+
isSearchInItemActive,
|
|
94
|
+
searchByParamConfig,
|
|
95
|
+
setSearchByParamConfig
|
|
96
|
+
}) => {
|
|
97
|
+
const filteredActions = actions?.filter((action) => (action.actionType === ACTION_TYPES.searchBy || action.actionType === ACTION_TYPES.searchIn || action.sectionId === sectionId) && (!searchQuery || matchesSearchQuery(action.text, searchQuery)));
|
|
103
98
|
return getActionItems({
|
|
104
99
|
actions: filteredActions,
|
|
105
|
-
texts
|
|
106
|
-
searchQuery
|
|
107
|
-
sectionId
|
|
108
|
-
setSearchByAction
|
|
109
|
-
setSearchInAction
|
|
110
|
-
changeSearchQuery
|
|
111
|
-
isSearchInItemActive
|
|
112
|
-
searchByParamConfig
|
|
113
|
-
setSearchByParamConfig
|
|
100
|
+
texts,
|
|
101
|
+
searchQuery,
|
|
102
|
+
sectionId,
|
|
103
|
+
setSearchByAction,
|
|
104
|
+
setSearchInAction,
|
|
105
|
+
changeSearchQuery,
|
|
106
|
+
isSearchInItemActive,
|
|
107
|
+
searchByParamConfig,
|
|
108
|
+
setSearchByParamConfig
|
|
114
109
|
});
|
|
115
|
-
};
|
|
110
|
+
};
|
|
111
|
+
export {
|
|
112
|
+
getActionItem,
|
|
113
|
+
getActionItems,
|
|
114
|
+
getSectionActionItems
|
|
115
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare const createTitleFromTitlePath: (titlePath: ReactNode[]) => (string | number | boolean | import(
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export declare const createTitleFromTitlePath: (titlePath: ReactNode[]) => (string | number | boolean | import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | import('react').ReactPortal | null | undefined)[];
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { TITLE_PATH_SEPARATOR } from
|
|
2
|
-
|
|
3
|
-
return titlePath.flatMap(
|
|
1
|
+
import { TITLE_PATH_SEPARATOR } from "../constants.js";
|
|
2
|
+
const createTitleFromTitlePath = (titlePath) => {
|
|
3
|
+
return titlePath.flatMap((pathItem, index) => {
|
|
4
4
|
return index !== 0 ? [TITLE_PATH_SEPARATOR, pathItem] : pathItem;
|
|
5
5
|
});
|
|
6
|
-
};
|
|
6
|
+
};
|
|
7
|
+
export {
|
|
8
|
+
createTitleFromTitlePath
|
|
9
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { BaseSectionType, BaseSectionTypeWithFolders } from '../../ItemPickerNew/types/baseItemSectionType.types';
|
|
2
2
|
export declare const findSectionById: <SectionType extends BaseSectionType>(nestedFolders?: BaseSectionTypeWithFolders<SectionType>[], sectionId?: string | number) => BaseSectionTypeWithFolders<SectionType> | undefined;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
if (nestedFolders
|
|
3
|
-
|
|
4
|
-
return folders.flatMap(
|
|
5
|
-
var _folder$folders;
|
|
6
|
-
return (_folder$folders = folder.folders) != null && _folder$folders.length ? _flattenFolders(folder.folders) : folder;
|
|
7
|
-
});
|
|
1
|
+
const findSectionById = (nestedFolders, sectionId) => {
|
|
2
|
+
if (nestedFolders?.length && sectionId !== void 0) {
|
|
3
|
+
const flattenFolders = (folders) => {
|
|
4
|
+
return folders.flatMap((folder) => folder.folders?.length ? flattenFolders(folder.folders) : folder);
|
|
8
5
|
};
|
|
9
|
-
return
|
|
10
|
-
return folder.id === sectionId;
|
|
11
|
-
});
|
|
6
|
+
return flattenFolders(nestedFolders).find((folder) => folder.id === sectionId);
|
|
12
7
|
}
|
|
13
|
-
return
|
|
14
|
-
};
|
|
8
|
+
return void 0;
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
findSectionById
|
|
12
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Action, ContextAwareAction } from '../../ItemPickerNew/types/actions.types';
|
|
2
2
|
export declare const getContextAwareActions: (actions: Action[], sectionId: string | undefined) => Partial<Record<"searchBy" | "searchIn", ContextAwareAction>>;
|