@hh.ru/magritte-ui-tree-selector 2.0.0 → 2.1.1
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/Item.d.ts +6 -6
- package/Item.js +1 -1
- package/Item.js.map +1 -1
- package/ItemContent-DFiwnDM5.js +36 -0
- package/ItemContent-DFiwnDM5.js.map +1 -0
- package/ItemContent.d.ts +5 -5
- package/ItemContent.js +1 -1
- package/ItemsList.d.ts +6 -6
- package/ItemsList.js +1 -1
- package/ItemsList.js.map +1 -1
- package/MobileItem.d.ts +4 -4
- package/MobileItem.js.map +1 -1
- package/MobileItemsList.d.ts +6 -6
- package/MobileItemsList.js.map +1 -1
- package/MobileParentItem.d.ts +5 -5
- package/MobileParentItem.js.map +1 -1
- package/TreeSelector.d.ts +1 -1
- package/TreeSelector.js +1 -1
- package/TreeSelector.js.map +1 -1
- package/TreeSelectorDummy.d.ts +2 -2
- package/TreeSelectorDummy.js +19 -10
- package/TreeSelectorDummy.js.map +1 -1
- package/TreeSelectorItemBase.d.ts +1 -1
- package/TreeSelectorItemBase.js +1 -1
- package/TreeSelectorItemBase.js.map +1 -1
- package/collection/treeCollection.d.ts +17 -17
- package/collection/treeCollection.js.map +1 -1
- package/collection/treeCollectionHelper.d.ts +5 -5
- package/collection/treeCollectionHelper.js.map +1 -1
- package/collection/types.d.ts +10 -10
- package/index.css +24 -24
- package/index.js +1 -1
- package/package.json +4 -4
- package/strategy/createTreeCollectionToggler.d.ts +1 -1
- package/strategy/createTreeCollectionToggler.js.map +1 -1
- package/strategy/immutableSelectionStrategy.d.ts +2 -2
- package/strategy/immutableSelectionStrategy.js.map +1 -1
- package/strategy/selectionStrategy.d.ts +2 -2
- package/strategy/selectionStrategy.js.map +1 -1
- package/types.d.ts +18 -16
- package/useAnimationTimeout.js +1 -1
- package/useDisabled.d.ts +3 -3
- package/useDisabled.js.map +1 -1
- package/useExpanded.d.ts +9 -2
- package/useExpanded.js +27 -6
- package/useExpanded.js.map +1 -1
- package/useIndeterminate.d.ts +4 -4
- package/useIndeterminate.js.map +1 -1
- package/useRenderInput.js +9 -3
- package/useRenderInput.js.map +1 -1
- package/useSelected.d.ts +4 -4
- package/useSelected.js.map +1 -1
- package/ItemContent-CKb4RKWy.js +0 -36
- package/ItemContent-CKb4RKWy.js.map +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';
|
|
2
2
|
import { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';
|
|
3
3
|
import { StrategyOptions } from '@hh.ru/magritte-ui-tree-selector/strategy/types';
|
|
4
|
-
declare class ImmutableSelectionStrategy<
|
|
4
|
+
declare class ImmutableSelectionStrategy<Additional extends AdditionalDefault = never> {
|
|
5
5
|
private strategy;
|
|
6
|
-
constructor(collection: TreeCollection<
|
|
6
|
+
constructor(collection: TreeCollection<Additional>, options: StrategyOptions);
|
|
7
7
|
/**
|
|
8
8
|
* Возвращает новый набор, в котором к `items` добавлены `addedItems`.
|
|
9
9
|
* @param items Текущий набор.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"immutableSelectionStrategy.js","sources":["../../src/strategy/immutableSelectionStrategy.ts"],"sourcesContent":["import TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport SelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/selectionStrategy';\nimport { StrategyOptions } from '@hh.ru/magritte-ui-tree-selector/strategy/types';\n\nclass ImmutableSelectionStrategy<
|
|
1
|
+
{"version":3,"file":"immutableSelectionStrategy.js","sources":["../../src/strategy/immutableSelectionStrategy.ts"],"sourcesContent":["import TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport SelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/selectionStrategy';\nimport { StrategyOptions } from '@hh.ru/magritte-ui-tree-selector/strategy/types';\n\nclass ImmutableSelectionStrategy<Additional extends AdditionalDefault = never> {\n private strategy: SelectionStrategy<Additional>;\n\n constructor(collection: TreeCollection<Additional>, options: StrategyOptions) {\n this.strategy = new SelectionStrategy<Additional>(collection, options);\n }\n\n /**\n * Возвращает новый набор, в котором к `items` добавлены `addedItems`.\n * @param items Текущий набор.\n * @param addedItems Добавляемые элементы.\n */\n add(items: string[], addedItems: string[]): string[] {\n const result = new Set(items);\n this.strategy.add(result, addedItems);\n return [...result];\n }\n\n /**\n * Возвращает новый набор, в котором из `items` удалены `removedItems`.\n * @param items Текущий набор.\n * @param removedItems Удаляемые элементы.\n */\n remove(items: string[], removedItems: string[]): string[] {\n const result = new Set(items);\n this.strategy.remove(result, removedItems);\n return [...result];\n }\n}\n\nexport default ImmutableSelectionStrategy;\n"],"names":[],"mappings":";;;;;;;AAKA,MAAM,0BAA0B,CAAA;AACpB,IAAA,QAAQ,CAAgC;IAEhD,WAAY,CAAA,UAAsC,EAAE,OAAwB,EAAA;QACxE,IAAI,CAAC,QAAQ,GAAG,IAAI,iBAAiB,CAAa,UAAU,EAAE,OAAO,CAAC,CAAC;KAC1E;AAED;;;;AAIG;IACH,GAAG,CAAC,KAAe,EAAE,UAAoB,EAAA;AACrC,QAAA,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AACtC,QAAA,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC;KACtB;AAED;;;;AAIG;IACH,MAAM,CAAC,KAAe,EAAE,YAAsB,EAAA;AAC1C,QAAA,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAC3C,QAAA,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC;KACtB;AACJ;;;;"}
|
|
@@ -4,12 +4,12 @@ import { StrategyOptions } from '@hh.ru/magritte-ui-tree-selector/strategy/types
|
|
|
4
4
|
/**
|
|
5
5
|
* Стратегия переключения флага `selected` для иерархической коллекции.
|
|
6
6
|
*/
|
|
7
|
-
declare class SelectionStrategy<
|
|
7
|
+
declare class SelectionStrategy<Additional extends AdditionalDefault = never> {
|
|
8
8
|
private collection;
|
|
9
9
|
private options;
|
|
10
10
|
private checkSelectable;
|
|
11
11
|
private toggle;
|
|
12
|
-
constructor(collection: TreeCollection<
|
|
12
|
+
constructor(collection: TreeCollection<Additional>, options: StrategyOptions);
|
|
13
13
|
add(items: Set<string>, ids: string[]): void;
|
|
14
14
|
remove(items: Set<string>, ids: string[]): void;
|
|
15
15
|
set(items: Set<string>, ids: string[]): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectionStrategy.js","sources":["../../src/strategy/selectionStrategy.ts"],"sourcesContent":["import TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { filterMissingIds, filterParents } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault, IdCollectionPredicate } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport createSingleValueToggler from '@hh.ru/magritte-ui-tree-selector/strategy/createSingleValueToggler';\nimport createTreeCollectionToggler from '@hh.ru/magritte-ui-tree-selector/strategy/createTreeCollectionToggler';\nimport dummyToggle from '@hh.ru/magritte-ui-tree-selector/strategy/dummyToggle';\nimport { StrategyOptions, Toggler } from '@hh.ru/magritte-ui-tree-selector/strategy/types';\n\nconst _filterSelectable = <
|
|
1
|
+
{"version":3,"file":"selectionStrategy.js","sources":["../../src/strategy/selectionStrategy.ts"],"sourcesContent":["import TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { filterMissingIds, filterParents } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault, IdCollectionPredicate } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport createSingleValueToggler from '@hh.ru/magritte-ui-tree-selector/strategy/createSingleValueToggler';\nimport createTreeCollectionToggler from '@hh.ru/magritte-ui-tree-selector/strategy/createTreeCollectionToggler';\nimport dummyToggle from '@hh.ru/magritte-ui-tree-selector/strategy/dummyToggle';\nimport { StrategyOptions, Toggler } from '@hh.ru/magritte-ui-tree-selector/strategy/types';\n\nconst _filterSelectable = <Additional extends AdditionalDefault>(\n collection: TreeCollection<Additional>,\n ids: string[],\n checkSelectable: IdCollectionPredicate\n) => {\n return ids.filter((id) => checkSelectable(id, collection));\n};\n\nconst defaultCheckSelectable = () => true;\n\n/**\n * Оставляет в массиве только последний ID\n */\nconst _filterMultipleIds = (ids: string[]) => {\n if (ids.length > 1) {\n return [ids[ids.length - 1]];\n }\n return ids;\n};\n\n/**\n * Стратегия переключения флага `selected` для иерархической коллекции.\n */\nclass SelectionStrategy<Additional extends AdditionalDefault = never> {\n private collection: TreeCollection<Additional>;\n private options: StrategyOptions;\n private checkSelectable: IdCollectionPredicate;\n private toggle: Toggler;\n\n constructor(collection: TreeCollection<Additional>, options: StrategyOptions) {\n this.collection = collection;\n this.options = options;\n this.checkSelectable = options.checkSelectable || defaultCheckSelectable;\n this.toggle = options.singleChoice\n ? createSingleValueToggler()\n : createTreeCollectionToggler(collection, this.checkSelectable);\n }\n\n add(items: Set<string>, ids: string[]): void {\n let filteredIds = filterMissingIds(this.collection, ids);\n\n if (this.options.singleChoice) {\n filteredIds = _filterMultipleIds(filteredIds);\n }\n if (this.options.leavesOnly) {\n filteredIds = filterParents(this.collection, filteredIds);\n }\n if (this.options.checkSelectable) {\n filteredIds = _filterSelectable(this.collection, filteredIds, this.options.checkSelectable);\n }\n\n if (this.options.leavesOnly && !this.options.singleChoice) {\n // Тут не нужно выбирать или сбрасывать родителей\n filteredIds.forEach((id) => {\n dummyToggle(items, id, true);\n });\n } else {\n filteredIds.forEach((id) => {\n this.toggle(items, id, true);\n });\n }\n }\n\n remove(items: Set<string>, ids: string[]): void {\n const filteredIds = filterMissingIds(this.collection, ids);\n\n filteredIds.forEach((id) => {\n this.toggle(items, id, false);\n });\n }\n\n set(items: Set<string>, ids: string[]): void {\n items.clear();\n this.add(items, ids);\n }\n}\n\nexport default SelectionStrategy;\n"],"names":["dummyToggle"],"mappings":"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"}
|
package/types.d.ts
CHANGED
|
@@ -9,8 +9,8 @@ interface ChildrenProps {
|
|
|
9
9
|
interface Children {
|
|
10
10
|
(props: ChildrenProps): ReactNode;
|
|
11
11
|
}
|
|
12
|
-
export interface RenderItemProps<
|
|
13
|
-
item: TreeModel<
|
|
12
|
+
export interface RenderItemProps<Additional extends AdditionalDefault> {
|
|
13
|
+
item: TreeModel<Additional>;
|
|
14
14
|
isSearch: boolean;
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
input?: ReactElement;
|
|
@@ -19,24 +19,24 @@ export interface RenderItemProps<A extends AdditionalDefault> {
|
|
|
19
19
|
labelRight?: ReactElement;
|
|
20
20
|
childrenSelectedCount?: number;
|
|
21
21
|
}
|
|
22
|
-
export interface RenderItem<
|
|
23
|
-
(props: RenderItemProps<
|
|
22
|
+
export interface RenderItem<Additional extends AdditionalDefault> {
|
|
23
|
+
(props: RenderItemProps<Additional>): ReactNode;
|
|
24
24
|
}
|
|
25
|
-
export interface RenderMobileDelimiterProps<
|
|
26
|
-
item: TreeModel<
|
|
25
|
+
export interface RenderMobileDelimiterProps<Additional extends AdditionalDefault> {
|
|
26
|
+
item: TreeModel<Additional>;
|
|
27
27
|
order: number;
|
|
28
28
|
isSearch: boolean;
|
|
29
29
|
index: number;
|
|
30
30
|
isTopLevel: boolean;
|
|
31
31
|
}
|
|
32
|
-
export interface RenderMobileDelimiter<
|
|
33
|
-
(props: RenderMobileDelimiterProps<
|
|
32
|
+
export interface RenderMobileDelimiter<Additional extends AdditionalDefault> {
|
|
33
|
+
(props: RenderMobileDelimiterProps<Additional>): ReactNode;
|
|
34
34
|
}
|
|
35
|
-
export interface BaseTreeSelectorProps<
|
|
35
|
+
export interface BaseTreeSelectorProps<Additional extends AdditionalDefault> {
|
|
36
36
|
/** Текущее значение */
|
|
37
37
|
value: string[];
|
|
38
38
|
/** Коллекция */
|
|
39
|
-
collection: TreeCollection<
|
|
39
|
+
collection: TreeCollection<Additional>;
|
|
40
40
|
/** Можно выбрать только один элемент */
|
|
41
41
|
singleChoice?: boolean;
|
|
42
42
|
/** Разрешает выбор только элементов без потомков */
|
|
@@ -46,6 +46,8 @@ export interface BaseTreeSelectorProps<A extends AdditionalDefault> {
|
|
|
46
46
|
checkSelectable?: IdCollectionPredicate;
|
|
47
47
|
/** Изначально открытые ID. Применяются только при инициализации */
|
|
48
48
|
initialExpanded?: string[];
|
|
49
|
+
/** Раскрывать ли категории с выбранными элементами в дереве при первом открытии */
|
|
50
|
+
expandTreeOnSelected?: boolean;
|
|
49
51
|
/** Запрещённые ID */
|
|
50
52
|
disabled?: string[];
|
|
51
53
|
/** Обработчик изменения состояния раскрытия элементов
|
|
@@ -63,18 +65,18 @@ export interface BaseTreeSelectorProps<A extends AdditionalDefault> {
|
|
|
63
65
|
* В аргументах получает список подходящих под запрос id и сам запрос */
|
|
64
66
|
onChangeFilterQuery?: (ids: string[], query: string) => void;
|
|
65
67
|
/** Render функция для десктопного варианта item */
|
|
66
|
-
renderItemForDesktop?: RenderItem<
|
|
68
|
+
renderItemForDesktop?: RenderItem<Additional>;
|
|
67
69
|
/** Render функция для мобильного варианта item */
|
|
68
|
-
renderItem?: RenderItem<
|
|
70
|
+
renderItem?: RenderItem<Additional>;
|
|
69
71
|
/** Render функция для мобильного варианта разделителя */
|
|
70
|
-
renderMobileDelimiter?: RenderMobileDelimiter<
|
|
72
|
+
renderMobileDelimiter?: RenderMobileDelimiter<Additional>;
|
|
71
73
|
/** Контент, который выводится, если не нашлось ни одной модели при поиске */
|
|
72
74
|
contentNotFound?: ReactNode;
|
|
73
75
|
/** Обработчик изменения навигации в мобильном варианте
|
|
74
76
|
* В аргументах получает id модели, в которую перешли */
|
|
75
77
|
onMobileNavigationChange?: (currentId?: string) => void;
|
|
76
78
|
/** Функция для получения порядка очередности для модели при поиске в мобиле */
|
|
77
|
-
getMobileSearchItemOrder?: (item: TreeModel<
|
|
79
|
+
getMobileSearchItemOrder?: (item: TreeModel<Additional>) => number;
|
|
78
80
|
/** Перевод для item выбрать родителя в мобильном варианте */
|
|
79
81
|
trls: {
|
|
80
82
|
selectAllParent: ReactNode;
|
|
@@ -97,8 +99,8 @@ type NonDummyProps = {
|
|
|
97
99
|
* Используется либо с collapseToParentId, либо leavesOnly */
|
|
98
100
|
maxSelected?: number;
|
|
99
101
|
};
|
|
100
|
-
export type TreeSelectorDummyProps<
|
|
101
|
-
export type TreeSelectorProps<
|
|
102
|
+
export type TreeSelectorDummyProps<Additional extends AdditionalDefault> = BaseTreeSelectorProps<Additional> & DummyProps;
|
|
103
|
+
export type TreeSelectorProps<Additional extends AdditionalDefault> = BaseTreeSelectorProps<Additional> & NonDummyProps;
|
|
102
104
|
export interface ListControls {
|
|
103
105
|
/** Метод, возвращающий навигацию на шаг назад в мобильном варианте */
|
|
104
106
|
back: () => void;
|
package/useAnimationTimeout.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { useState, useLayoutEffect } from 'react';
|
|
3
3
|
|
|
4
|
-
var styles = {"item-animation-timeout":"magritte-item-animation-timeout___Pdli9_2-
|
|
4
|
+
var styles = {"item-animation-timeout":"magritte-item-animation-timeout___Pdli9_2-1-1","itemAnimationTimeout":"magritte-item-animation-timeout___Pdli9_2-1-1"};
|
|
5
5
|
|
|
6
6
|
const useAnimationTimeout = () => {
|
|
7
7
|
const [animationTimeout, setAnimationTimeout] = useState(0);
|
package/useDisabled.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';
|
|
2
2
|
import { TreeSelectorProps } from '@hh.ru/magritte-ui-tree-selector/types';
|
|
3
|
-
type UseDisabledHookProps<
|
|
3
|
+
type UseDisabledHookProps<Additional extends AdditionalDefault> = {
|
|
4
4
|
selected: string[];
|
|
5
|
-
} & Pick<TreeSelectorProps<
|
|
5
|
+
} & Pick<TreeSelectorProps<Additional>, 'disabled' | 'collection' | 'maxSelected'>;
|
|
6
6
|
interface UseDisabledHook {
|
|
7
|
-
<
|
|
7
|
+
<Additional extends AdditionalDefault>(props: UseDisabledHookProps<Additional>): string[] | undefined;
|
|
8
8
|
}
|
|
9
9
|
export declare const useDisabled: UseDisabledHook;
|
|
10
10
|
export {};
|
package/useDisabled.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDisabled.js","sources":["../src/useDisabled.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { getIdsWithNoParentsInSameList } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { TreeSelectorProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\ntype UseDisabledHookProps<
|
|
1
|
+
{"version":3,"file":"useDisabled.js","sources":["../src/useDisabled.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { getIdsWithNoParentsInSameList } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { TreeSelectorProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\ntype UseDisabledHookProps<Additional extends AdditionalDefault> = {\n selected: string[];\n} & Pick<TreeSelectorProps<Additional>, 'disabled' | 'collection' | 'maxSelected'>;\ninterface UseDisabledHook {\n <Additional extends AdditionalDefault>(props: UseDisabledHookProps<Additional>): string[] | undefined;\n}\n\nexport const useDisabled: UseDisabledHook = ({ selected, disabled, collection, maxSelected }) => {\n return useMemo(() => {\n const valueIds = getIdsWithNoParentsInSameList(collection, selected);\n if (maxSelected && valueIds.length >= maxSelected) {\n return collection\n .toList()\n .map(({ id }) => id)\n .filter((id) => !selected.includes(id));\n }\n return disabled;\n }, [selected, collection, disabled, maxSelected]);\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,WAAW,GAAoB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,KAAI;IAC5F,OAAO,OAAO,CAAC,MAAK;QAChB,MAAM,QAAQ,GAAG,6BAA6B,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACrE,QAAA,IAAI,WAAW,IAAI,QAAQ,CAAC,MAAM,IAAI,WAAW,EAAE;AAC/C,YAAA,OAAO,UAAU;AACZ,iBAAA,MAAM,EAAE;iBACR,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;AACnB,iBAAA,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/C,SAAA;AACD,QAAA,OAAO,QAAQ,CAAC;KACnB,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;AACtD;;;;"}
|
package/useExpanded.d.ts
CHANGED
|
@@ -1,15 +1,22 @@
|
|
|
1
|
+
import TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';
|
|
2
|
+
import { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';
|
|
1
3
|
export declare const areEqualArrays: (arr1: string[], arr2: string[]) => boolean;
|
|
2
|
-
|
|
4
|
+
export declare const calculateInitialExpanded: <Additional extends AdditionalDefault>(initialExpanded: string[], selected: string[], expandTreeOnSelected: boolean, collection: TreeCollection<Additional>) => string[];
|
|
5
|
+
interface UseExpandedHookProps<Additional extends AdditionalDefault> {
|
|
3
6
|
initialValue: string[];
|
|
4
7
|
onExpand?: (expanded: string[]) => void;
|
|
8
|
+
expandTreeOnSelected: boolean;
|
|
9
|
+
selected: string[];
|
|
10
|
+
collection: TreeCollection<Additional>;
|
|
5
11
|
}
|
|
6
12
|
interface UseExpandedHookReturn {
|
|
7
13
|
expanded: string[];
|
|
8
14
|
setExpanded: (expanded: string[]) => void;
|
|
9
15
|
handleExpansion: (id: string) => void;
|
|
16
|
+
handleResetExpanded: () => void;
|
|
10
17
|
}
|
|
11
18
|
interface UseExpandedHook {
|
|
12
|
-
(props: UseExpandedHookProps): UseExpandedHookReturn;
|
|
19
|
+
<Additional extends AdditionalDefault>(props: UseExpandedHookProps<Additional>): UseExpandedHookReturn;
|
|
13
20
|
}
|
|
14
21
|
export declare const useExpanded: UseExpandedHook;
|
|
15
22
|
export {};
|
package/useExpanded.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './index.css';
|
|
2
|
-
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
2
|
+
import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
|
|
3
3
|
|
|
4
4
|
const areEqualArrays = (arr1, arr2) => {
|
|
5
5
|
if (arr1.length !== arr2.length) {
|
|
@@ -11,9 +11,23 @@ const areEqualArrays = (arr1, arr2) => {
|
|
|
11
11
|
.sort()
|
|
12
12
|
.every((item, index) => item === sortArr2[index]);
|
|
13
13
|
};
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
const calculateInitialExpanded = (initialExpanded, selected, expandTreeOnSelected, collection) => {
|
|
15
|
+
let expanded = initialExpanded.slice();
|
|
16
|
+
if (expandTreeOnSelected) {
|
|
17
|
+
expanded = selected.reduce((acc, id) => {
|
|
18
|
+
return acc.concat(collection.getParentIds(id));
|
|
19
|
+
}, expanded);
|
|
20
|
+
}
|
|
21
|
+
return [...new Set(expanded)];
|
|
22
|
+
};
|
|
23
|
+
const useExpanded = ({ initialValue, selected, expandTreeOnSelected, collection, onExpand, }) => {
|
|
24
|
+
const calculatedInitialValue = useMemo(() => calculateInitialExpanded(initialValue, selected, expandTreeOnSelected, collection),
|
|
25
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
|
+
[]);
|
|
27
|
+
const [expanded, setExpanded] = useState(calculatedInitialValue);
|
|
28
|
+
const expandedRef = useRef(calculatedInitialValue);
|
|
29
|
+
const selectedRef = useRef(selected);
|
|
30
|
+
selectedRef.current = selected;
|
|
17
31
|
const handlerRef = useRef(onExpand);
|
|
18
32
|
const handleSetExpanded = useCallback((updatedExpanded) => {
|
|
19
33
|
handlerRef.current?.(updatedExpanded.slice());
|
|
@@ -32,14 +46,21 @@ const useExpanded = ({ initialValue, onExpand }) => {
|
|
|
32
46
|
}
|
|
33
47
|
handleSetExpanded(updatedExpanded);
|
|
34
48
|
}, [handleSetExpanded]);
|
|
49
|
+
const handleResetExpanded = useCallback(() => {
|
|
50
|
+
const calculatedResetValue = calculateInitialExpanded(initialValue, selectedRef.current, expandTreeOnSelected, collection);
|
|
51
|
+
if (!areEqualArrays(expandedRef.current, calculatedResetValue)) {
|
|
52
|
+
setExpanded(calculatedResetValue);
|
|
53
|
+
}
|
|
54
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
55
|
+
}, []);
|
|
35
56
|
useEffect(() => {
|
|
36
57
|
handlerRef.current = onExpand;
|
|
37
58
|
}, [onExpand]);
|
|
38
59
|
useEffect(() => {
|
|
39
60
|
expandedRef.current = expanded;
|
|
40
61
|
}, [expanded]);
|
|
41
|
-
return { expanded, setExpanded: handleSetExpanded, handleExpansion };
|
|
62
|
+
return { expanded, setExpanded: handleSetExpanded, handleExpansion, handleResetExpanded };
|
|
42
63
|
};
|
|
43
64
|
|
|
44
|
-
export { areEqualArrays, useExpanded };
|
|
65
|
+
export { areEqualArrays, calculateInitialExpanded, useExpanded };
|
|
45
66
|
//# sourceMappingURL=useExpanded.js.map
|
package/useExpanded.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpanded.js","sources":["../src/useExpanded.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const areEqualArrays = (arr1: string[], arr2: string[]): boolean => {\n if (arr1.length !== arr2.length) {\n return false;\n }\n const sortArr2 = arr2.slice().sort();\n return arr1\n .slice()\n .sort()\n .every((item, index) => item === sortArr2[index]);\n};\n\ninterface UseExpandedHookProps {\n initialValue: string[];\n onExpand?: (expanded: string[]) => void;\n}\n\ninterface UseExpandedHookReturn {\n expanded: string[];\n setExpanded: (expanded: string[]) => void;\n handleExpansion: (id: string) => void;\n}\ninterface UseExpandedHook {\n (props: UseExpandedHookProps): UseExpandedHookReturn;\n}\n\nexport const useExpanded: UseExpandedHook = ({
|
|
1
|
+
{"version":3,"file":"useExpanded.js","sources":["../src/useExpanded.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, useMemo } from 'react';\n\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\nexport const areEqualArrays = (arr1: string[], arr2: string[]): boolean => {\n if (arr1.length !== arr2.length) {\n return false;\n }\n const sortArr2 = arr2.slice().sort();\n return arr1\n .slice()\n .sort()\n .every((item, index) => item === sortArr2[index]);\n};\n\nexport const calculateInitialExpanded = <Additional extends AdditionalDefault>(\n initialExpanded: string[],\n selected: string[],\n expandTreeOnSelected: boolean,\n collection: TreeCollection<Additional>\n): string[] => {\n let expanded: string[] = initialExpanded.slice();\n if (expandTreeOnSelected) {\n expanded = selected.reduce<string[]>((acc, id) => {\n return acc.concat(collection.getParentIds(id));\n }, expanded);\n }\n return [...new Set(expanded)];\n};\n\ninterface UseExpandedHookProps<Additional extends AdditionalDefault> {\n initialValue: string[];\n onExpand?: (expanded: string[]) => void;\n expandTreeOnSelected: boolean;\n selected: string[];\n collection: TreeCollection<Additional>;\n}\n\ninterface UseExpandedHookReturn {\n expanded: string[];\n setExpanded: (expanded: string[]) => void;\n handleExpansion: (id: string) => void;\n handleResetExpanded: () => void;\n}\ninterface UseExpandedHook {\n <Additional extends AdditionalDefault>(props: UseExpandedHookProps<Additional>): UseExpandedHookReturn;\n}\n\nexport const useExpanded: UseExpandedHook = ({\n initialValue,\n selected,\n expandTreeOnSelected,\n collection,\n onExpand,\n}) => {\n const calculatedInitialValue = useMemo(\n () => calculateInitialExpanded(initialValue, selected, expandTreeOnSelected, collection),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n const [expanded, setExpanded] = useState(calculatedInitialValue);\n const expandedRef = useRef(calculatedInitialValue);\n const selectedRef = useRef(selected);\n selectedRef.current = selected;\n const handlerRef = useRef(onExpand);\n\n const handleSetExpanded = useCallback((updatedExpanded: string[]) => {\n handlerRef.current?.(updatedExpanded.slice());\n\n if (!areEqualArrays(expandedRef.current, updatedExpanded)) {\n setExpanded(updatedExpanded);\n }\n }, []);\n\n const handleExpansion = useCallback(\n (id: string): void => {\n let updatedExpanded;\n if (expandedRef.current.includes(id)) {\n updatedExpanded = expandedRef.current.filter((itemId) => itemId !== id);\n } else {\n updatedExpanded = expandedRef.current.slice();\n updatedExpanded.push(id);\n }\n handleSetExpanded(updatedExpanded);\n },\n [handleSetExpanded]\n );\n\n const handleResetExpanded = useCallback(() => {\n const calculatedResetValue = calculateInitialExpanded(\n initialValue,\n selectedRef.current,\n expandTreeOnSelected,\n collection\n );\n if (!areEqualArrays(expandedRef.current, calculatedResetValue)) {\n setExpanded(calculatedResetValue);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n handlerRef.current = onExpand;\n }, [onExpand]);\n\n useEffect(() => {\n expandedRef.current = expanded;\n }, [expanded]);\n\n return { expanded, setExpanded: handleSetExpanded, handleExpansion, handleResetExpanded };\n};\n"],"names":[],"mappings":"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"}
|
package/useIndeterminate.d.ts
CHANGED
|
@@ -3,13 +3,13 @@ import { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/t
|
|
|
3
3
|
/**
|
|
4
4
|
* Возвращает массив ID элементов дерева, у которых есть и выбранные, и невыбранные потомки.
|
|
5
5
|
*/
|
|
6
|
-
export declare function getIndeterminateParentIds<
|
|
7
|
-
interface UseIndeterminateHookProps<
|
|
8
|
-
collection: TreeCollection<
|
|
6
|
+
export declare function getIndeterminateParentIds<Additional extends AdditionalDefault>(collection: TreeCollection<Additional>, selected: string[]): string[];
|
|
7
|
+
interface UseIndeterminateHookProps<Additional extends AdditionalDefault> {
|
|
8
|
+
collection: TreeCollection<Additional>;
|
|
9
9
|
selected: string[];
|
|
10
10
|
}
|
|
11
11
|
interface UseIndeterminateHook {
|
|
12
|
-
<
|
|
12
|
+
<Additional extends AdditionalDefault>(props: UseIndeterminateHookProps<Additional>): {
|
|
13
13
|
indeterminate: string[];
|
|
14
14
|
};
|
|
15
15
|
}
|
package/useIndeterminate.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useIndeterminate.js","sources":["../src/useIndeterminate.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { areEqualArrays } from '@hh.ru/magritte-ui-tree-selector/useExpanded';\n\n/**\n * Возвращает массив ID элементов дерева, у которых есть и выбранные, и невыбранные потомки.\n */\nexport function getIndeterminateParentIds<
|
|
1
|
+
{"version":3,"file":"useIndeterminate.js","sources":["../src/useIndeterminate.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { areEqualArrays } from '@hh.ru/magritte-ui-tree-selector/useExpanded';\n\n/**\n * Возвращает массив ID элементов дерева, у которых есть и выбранные, и невыбранные потомки.\n */\nexport function getIndeterminateParentIds<Additional extends AdditionalDefault>(\n collection: TreeCollection<Additional>,\n selected: string[]\n): string[] {\n const result = selected.reduce((currentResult, id) => {\n collection.getParentIds(id).forEach((parentId) => {\n if (!selected.includes(parentId)) {\n currentResult.add(parentId);\n }\n });\n return currentResult;\n }, new Set<string>());\n return [...result];\n}\n\ninterface UseIndeterminateHookProps<Additional extends AdditionalDefault> {\n collection: TreeCollection<Additional>;\n selected: string[];\n}\ninterface UseIndeterminateHook {\n <Additional extends AdditionalDefault>(props: UseIndeterminateHookProps<Additional>): { indeterminate: string[] };\n}\n\nexport const useIndeterminate: UseIndeterminateHook = ({ collection, selected }) => {\n const [indeterminate, setIndeterminate] = useState<string[]>([]);\n\n useEffect(() => {\n const updatedIndeterminateIds = getIndeterminateParentIds(collection, selected);\n setIndeterminate((current) =>\n areEqualArrays(current, updatedIndeterminateIds) ? current : updatedIndeterminateIds\n );\n }, [selected, collection]);\n return { indeterminate };\n};\n"],"names":[],"mappings":";;;AAMA;;AAEG;AACa,SAAA,yBAAyB,CACrC,UAAsC,EACtC,QAAkB,EAAA;IAElB,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,aAAa,EAAE,EAAE,KAAI;QACjD,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;AAC7C,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;AAC9B,gBAAA,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC/B,aAAA;AACL,SAAC,CAAC,CAAC;AACH,QAAA,OAAO,aAAa,CAAC;AACzB,KAAC,EAAE,IAAI,GAAG,EAAU,CAAC,CAAC;AACtB,IAAA,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC;AACvB,CAAC;AAUY,MAAA,gBAAgB,GAAyB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAI;IAC/E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAEjE,SAAS,CAAC,MAAK;QACX,MAAM,uBAAuB,GAAG,yBAAyB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAChF,gBAAgB,CAAC,CAAC,OAAO,KACrB,cAAc,CAAC,OAAO,EAAE,uBAAuB,CAAC,GAAG,OAAO,GAAG,uBAAuB,CACvF,CAAC;AACN,KAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAC3B,OAAO,EAAE,aAAa,EAAE,CAAC;AAC7B;;;;"}
|
package/useRenderInput.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { useState,
|
|
3
|
+
import { useState, useCallback, useEffect } from 'react';
|
|
4
4
|
import { useDebounce } from '@hh.ru/magritte-common-func-utils';
|
|
5
5
|
import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
6
6
|
import { SearchInput } from '@hh.ru/magritte-ui-input';
|
|
@@ -11,6 +11,12 @@ const useRenderInput = () => {
|
|
|
11
11
|
const { animationTimeout } = useAnimationTimeout();
|
|
12
12
|
const [value, setValue] = useState('');
|
|
13
13
|
const { isMobile } = useBreakpoint();
|
|
14
|
+
const inputRefCallback = useCallback((node) => {
|
|
15
|
+
if (!node) {
|
|
16
|
+
setValue('');
|
|
17
|
+
setContentFilterQuery('');
|
|
18
|
+
}
|
|
19
|
+
}, []);
|
|
14
20
|
useEffect(() => {
|
|
15
21
|
setValue('');
|
|
16
22
|
setContentFilterQuery('');
|
|
@@ -26,8 +32,8 @@ const useRenderInput = () => {
|
|
|
26
32
|
setValue(newValue);
|
|
27
33
|
}, [setValue]);
|
|
28
34
|
const renderInput = useCallback((props) => {
|
|
29
|
-
return (jsx(SearchInput, { ...props, value: value, onChange: handleChangeInput, "data-qa": "tree-selector-search-input" }));
|
|
30
|
-
}, [value, handleChangeInput]);
|
|
35
|
+
return (jsx(SearchInput, { ...props, ref: inputRefCallback, value: value, onChange: handleChangeInput, "data-qa": "tree-selector-search-input" }));
|
|
36
|
+
}, [inputRefCallback, value, handleChangeInput]);
|
|
31
37
|
return { contentFilterQuery, setInputValue, handleChangeInput, renderInput };
|
|
32
38
|
};
|
|
33
39
|
|
package/useRenderInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRenderInput.js","sources":["../src/useRenderInput.tsx"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\n\nimport { useDebounce } from '@hh.ru/magritte-common-func-utils';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SearchInput, SearchInputProps } from '@hh.ru/magritte-ui-input';\nimport { useAnimationTimeout } from '@hh.ru/magritte-ui-tree-selector/useAnimationTimeout';\n\nexport interface UseRenderInputHook {\n (): {\n contentFilterQuery: string;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n renderInput: (props?: SearchInputProps) => ReactElement;\n };\n}\n\nexport const useRenderInput: UseRenderInputHook = () => {\n const [contentFilterQuery, setContentFilterQuery] = useState('');\n const { animationTimeout } = useAnimationTimeout();\n const [value, setValue] = useState('');\n const { isMobile } = useBreakpoint();\n\n useEffect(() => {\n setValue('');\n setContentFilterQuery('');\n }, [isMobile]);\n\n const debouncedContentFilterQuery = useDebounce(\n useCallback((newValue: string) => {\n setContentFilterQuery(newValue);\n }, []),\n animationTimeout\n );\n\n const handleChangeInput = useCallback(\n (newValue: string) => {\n debouncedContentFilterQuery(newValue);\n setValue(newValue);\n },\n [debouncedContentFilterQuery]\n );\n\n const setInputValue = useCallback(\n (newValue: string) => {\n setValue(newValue);\n },\n [setValue]\n );\n\n const renderInput = useCallback(\n (props?: SearchInputProps) => {\n return (\n <SearchInput\n {...props}\n value={value}\n onChange={handleChangeInput}\n data-qa=\"tree-selector-search-input\"\n />\n );\n },\n [value, handleChangeInput]\n );\n\n return { contentFilterQuery, setInputValue, handleChangeInput, renderInput };\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAgBO,MAAM,cAAc,GAAuB,MAAK;IACnD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACjE,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"useRenderInput.js","sources":["../src/useRenderInput.tsx"],"sourcesContent":["import { ReactElement, RefCallback, useCallback, useEffect, useState } from 'react';\n\nimport { useDebounce } from '@hh.ru/magritte-common-func-utils';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SearchInput, SearchInputProps } from '@hh.ru/magritte-ui-input';\nimport { useAnimationTimeout } from '@hh.ru/magritte-ui-tree-selector/useAnimationTimeout';\n\nexport interface UseRenderInputHook {\n (): {\n contentFilterQuery: string;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n renderInput: (props?: SearchInputProps) => ReactElement;\n };\n}\n\nexport const useRenderInput: UseRenderInputHook = () => {\n const [contentFilterQuery, setContentFilterQuery] = useState('');\n const { animationTimeout } = useAnimationTimeout();\n const [value, setValue] = useState('');\n const { isMobile } = useBreakpoint();\n\n const inputRefCallback: RefCallback<HTMLInputElement> = useCallback((node) => {\n if (!node) {\n setValue('');\n setContentFilterQuery('');\n }\n }, []);\n\n useEffect(() => {\n setValue('');\n setContentFilterQuery('');\n }, [isMobile]);\n\n const debouncedContentFilterQuery = useDebounce(\n useCallback((newValue: string) => {\n setContentFilterQuery(newValue);\n }, []),\n animationTimeout\n );\n\n const handleChangeInput = useCallback(\n (newValue: string) => {\n debouncedContentFilterQuery(newValue);\n setValue(newValue);\n },\n [debouncedContentFilterQuery]\n );\n\n const setInputValue = useCallback(\n (newValue: string) => {\n setValue(newValue);\n },\n [setValue]\n );\n\n const renderInput = useCallback(\n (props?: SearchInputProps) => {\n return (\n <SearchInput\n {...props}\n ref={inputRefCallback}\n value={value}\n onChange={handleChangeInput}\n data-qa=\"tree-selector-search-input\"\n />\n );\n },\n [inputRefCallback, value, handleChangeInput]\n );\n\n return { contentFilterQuery, setInputValue, handleChangeInput, renderInput };\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAgBO,MAAM,cAAc,GAAuB,MAAK;IACnD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACjE,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AACvC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;AAErC,IAAA,MAAM,gBAAgB,GAAkC,WAAW,CAAC,CAAC,IAAI,KAAI;QACzE,IAAI,CAAC,IAAI,EAAE;YACP,QAAQ,CAAC,EAAE,CAAC,CAAC;YACb,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAC7B,SAAA;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAC9B,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,2BAA2B,GAAG,WAAW,CAC3C,WAAW,CAAC,CAAC,QAAgB,KAAI;QAC7B,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AACpC,KAAC,EAAE,EAAE,CAAC,EACN,gBAAgB,CACnB,CAAC;AAEF,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,QAAgB,KAAI;QACjB,2BAA2B,CAAC,QAAQ,CAAC,CAAC;QACtC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,2BAA2B,CAAC,CAChC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,QAAgB,KAAI;QACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACvB,KAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAwB,KAAI;QACzB,QACIA,IAAC,WAAW,EAAA,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EACnB,SAAA,EAAA,4BAA4B,EACtC,CAAA,EACJ;KACL,EACD,CAAC,gBAAgB,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAC/C,CAAC;IAEF,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC;AACjF;;;;"}
|
package/useSelected.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';
|
|
2
2
|
import ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';
|
|
3
3
|
import { TreeSelectorProps } from '@hh.ru/magritte-ui-tree-selector/types';
|
|
4
|
-
type UseSelectedHookProps<
|
|
5
|
-
strategy: ImmutableSelectionStrategy<
|
|
6
|
-
} & Pick<TreeSelectorProps<
|
|
4
|
+
type UseSelectedHookProps<Additional extends AdditionalDefault> = {
|
|
5
|
+
strategy: ImmutableSelectionStrategy<Additional>;
|
|
6
|
+
} & Pick<TreeSelectorProps<Additional>, 'value' | 'onChange' | 'collapseToParentId' | 'maxSelected' | 'collection'>;
|
|
7
7
|
type UseSelectedHookReturn = {
|
|
8
8
|
selected: string[];
|
|
9
9
|
setSelected: (id: string, isSelected: boolean) => void;
|
|
10
10
|
};
|
|
11
11
|
interface UseSelectedHook {
|
|
12
|
-
<
|
|
12
|
+
<Additional extends AdditionalDefault>(props: UseSelectedHookProps<Additional>): UseSelectedHookReturn;
|
|
13
13
|
}
|
|
14
14
|
export declare const useSelected: UseSelectedHook;
|
|
15
15
|
export {};
|
package/useSelected.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelected.js","sources":["../src/useSelected.ts"],"sourcesContent":["import { useState, useCallback, useRef, useEffect } from 'react';\n\nimport { getIdsWithNoParentsInSameList } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';\nimport { TreeSelectorProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\ntype UseSelectedHookProps<
|
|
1
|
+
{"version":3,"file":"useSelected.js","sources":["../src/useSelected.ts"],"sourcesContent":["import { useState, useCallback, useRef, useEffect } from 'react';\n\nimport { getIdsWithNoParentsInSameList } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';\nimport { TreeSelectorProps } from '@hh.ru/magritte-ui-tree-selector/types';\n\ntype UseSelectedHookProps<Additional extends AdditionalDefault> = {\n strategy: ImmutableSelectionStrategy<Additional>;\n} & Pick<TreeSelectorProps<Additional>, 'value' | 'onChange' | 'collapseToParentId' | 'maxSelected' | 'collection'>;\n\ntype UseSelectedHookReturn = {\n selected: string[];\n setSelected: (id: string, isSelected: boolean) => void;\n};\n\ninterface UseSelectedHook {\n <Additional extends AdditionalDefault>(props: UseSelectedHookProps<Additional>): UseSelectedHookReturn;\n}\n\nexport const useSelected: UseSelectedHook = ({\n value,\n maxSelected,\n strategy,\n collection,\n collapseToParentId,\n onChange,\n}) => {\n const getSelectedFromValue = useCallback((): string[] => {\n let newValue = value.slice();\n if (maxSelected && newValue && newValue.length > maxSelected) {\n newValue = newValue.slice(0, maxSelected);\n }\n return strategy.add([], newValue);\n }, [value, maxSelected, strategy]);\n\n const [selected, setSelectedState] = useState(getSelectedFromValue);\n const firstRender = useRef(true);\n\n const setSelected = useCallback(\n (id: string, isSelected: boolean) => {\n const ids = [id];\n const updatedSelected = isSelected ? strategy.add(selected, ids) : strategy.remove(selected, ids);\n const filteredUpdatedSelected = collapseToParentId\n ? getIdsWithNoParentsInSameList(collection, updatedSelected)\n : updatedSelected;\n if (maxSelected && filteredUpdatedSelected.length > maxSelected) {\n filteredUpdatedSelected.length = maxSelected;\n }\n\n onChange(filteredUpdatedSelected, id, isSelected);\n },\n [strategy, selected, collection, collapseToParentId, onChange, maxSelected]\n );\n\n useEffect(() => {\n if (firstRender.current) {\n firstRender.current = false;\n return;\n }\n\n const selected = getSelectedFromValue();\n\n setSelectedState(selected);\n }, [getSelectedFromValue, firstRender]);\n\n return {\n selected,\n setSelected,\n };\n};\n"],"names":[],"mappings":";;;;AAoBa,MAAA,WAAW,GAAoB,CAAC,EACzC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,QAAQ,GACX,KAAI;AACD,IAAA,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAe;AACpD,QAAA,IAAI,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;QAC7B,IAAI,WAAW,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,WAAW,EAAE;YAC1D,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AAC7C,SAAA;QACD,OAAO,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;KACrC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnC,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AACpE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEjC,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,EAAU,EAAE,UAAmB,KAAI;AAChC,QAAA,MAAM,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;QACjB,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAClG,MAAM,uBAAuB,GAAG,kBAAkB;AAC9C,cAAE,6BAA6B,CAAC,UAAU,EAAE,eAAe,CAAC;cAC1D,eAAe,CAAC;AACtB,QAAA,IAAI,WAAW,IAAI,uBAAuB,CAAC,MAAM,GAAG,WAAW,EAAE;AAC7D,YAAA,uBAAuB,CAAC,MAAM,GAAG,WAAW,CAAC;AAChD,SAAA;AAED,QAAA,QAAQ,CAAC,uBAAuB,EAAE,EAAE,EAAE,UAAU,CAAC,CAAC;AACtD,KAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,WAAW,CAAC,CAC9E,CAAC;IAEF,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,CAAC,OAAO,EAAE;AACrB,YAAA,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5B,OAAO;AACV,SAAA;AAED,QAAA,MAAM,QAAQ,GAAG,oBAAoB,EAAE,CAAC;QAExC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAC/B,KAAC,EAAE,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC,CAAC;IAExC,OAAO;QACH,QAAQ;QACR,WAAW;KACd,CAAC;AACN;;;;"}
|
package/ItemContent-CKb4RKWy.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
-
import { memo, useCallback } from 'react';
|
|
4
|
-
import classnames from 'classnames';
|
|
5
|
-
import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
|
|
6
|
-
import { DotFilledSize24, ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
7
|
-
import { Action } from './Action.js';
|
|
8
|
-
import { TreeSelectorItemBase } from './TreeSelectorItemBase.js';
|
|
9
|
-
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
10
|
-
|
|
11
|
-
var styles = {"item-animation-timeout":"magritte-item-animation-timeout___pbOyZ_2-0-0","itemAnimationTimeout":"magritte-item-animation-timeout___pbOyZ_2-0-0","wrapper":"magritte-wrapper___GHKV6_2-0-0","letter":"magritte-letter___yZOCU_2-0-0","icon":"magritte-icon___kO3Fj_2-0-0","space":"magritte-space___xTO79_2-0-0","iconActive":"magritte-iconActive___4yrG5_2-0-0","iconUp":"magritte-iconUp___mpXV6_2-0-0","content":"magritte-content___ZRc6R_2-0-0","with-shift":"magritte-with-shift___ZErxZ_2-0-0","withShift":"magritte-with-shift___ZErxZ_2-0-0","with-indent":"magritte-with-indent___MH9Vy_2-0-0","withIndent":"magritte-with-indent___MH9Vy_2-0-0","item":"magritte-item___2LtOL_2-0-0","children":"magritte-children___kq-eq_2-0-0","with-two-boxes":"magritte-with-two-boxes___LWOy2_2-0-0","withTwoBoxes":"magritte-with-two-boxes___LWOy2_2-0-0","with-three-boxes":"magritte-with-three-boxes___cyVao_2-0-0","withThreeBoxes":"magritte-with-three-boxes___cyVao_2-0-0","item-animation-enter":"magritte-item-animation-enter___14KlM_2-0-0","itemAnimationEnter":"magritte-item-animation-enter___14KlM_2-0-0","item-animation-enter-active":"magritte-item-animation-enter-active___oEWbW_2-0-0","itemAnimationEnterActive":"magritte-item-animation-enter-active___oEWbW_2-0-0","item-animation-exit":"magritte-item-animation-exit___a-Low_2-0-0","itemAnimationExit":"magritte-item-animation-exit___a-Low_2-0-0","item-animation-exit-active":"magritte-item-animation-exit-active___MhBnn_2-0-0","itemAnimationExitActive":"magritte-item-animation-exit-active___MhBnn_2-0-0"};
|
|
12
|
-
|
|
13
|
-
const ItemContentComponent = ({ item, parentId, hasAction, hasChildren, letter, isExpanded, isDisabled, onExpansion, hasLetterOnLevel, isSelected, onChange, isIndeterminate, singleChoice, hasDot, maxControlsOnLevel, isSearch, renderItemForDesktop = TreeSelectorItemBase, }) => {
|
|
14
|
-
const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);
|
|
15
|
-
const currentActionCount = +hasDot + +hasAction + +hasChildren;
|
|
16
|
-
const neededSpacesCount = maxControlsOnLevel - currentActionCount;
|
|
17
|
-
const handleExpandableKeyDown = useCallback((event) => {
|
|
18
|
-
if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {
|
|
19
|
-
isExpanded && onExpansion(item.id);
|
|
20
|
-
event.preventDefault();
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowRight)) {
|
|
24
|
-
!isExpanded && onExpansion(item.id);
|
|
25
|
-
event.preventDefault();
|
|
26
|
-
}
|
|
27
|
-
}, [isExpanded, onExpansion, item.id]);
|
|
28
|
-
const input = hasAction ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, onKeyDown: handleExpandableKeyDown, indeterminate: isIndeterminate, singleChoice: singleChoice, name: `tree-selector-item-${parentId || 'top'}-${item.id}` })) : undefined;
|
|
29
|
-
return (jsxs("div", { className: styles.wrapper, children: [(letter || hasLetterOnLevel) && (jsx("div", { className: styles.letter, children: letter && (jsx(Text, { typography: "subtitle-1-semibold", style: "secondary", Element: "span", children: letter })) })), hasDot && (jsx("div", { className: styles.icon, children: jsx(DotFilledSize24, { initial: "tertiary" }) })), [...Array(neededSpacesCount).keys()].map((_, i) => (jsx("div", { className: styles.space }, i))), hasChildren && (jsx("div", { className: classnames(styles.icon, styles.iconActive, {
|
|
30
|
-
[styles.iconUp]: isExpanded,
|
|
31
|
-
}), "data-qa": `tree-selector-chevron-${item.id}`, onClick: handleExpandableClick, children: jsx(ChevronDownOutlinedSize24, { initial: "tertiary" }) })), renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })] }));
|
|
32
|
-
};
|
|
33
|
-
const ItemContent = memo(ItemContentComponent);
|
|
34
|
-
|
|
35
|
-
export { ItemContent as I, styles as s };
|
|
36
|
-
//# sourceMappingURL=ItemContent-CKb4RKWy.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ItemContent-CKb4RKWy.js","sources":["../src/ItemContent.tsx"],"sourcesContent":["import { ReactElement, useCallback, memo, KeyboardEventHandler } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { ChevronDownOutlinedSize24, DotFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { TreeSelectorItemBase } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorItemBase';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { RenderItem } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemContent<A extends AdditionalDefault> {\n item: TreeModel<A>;\n parentId?: TreeModel<A>['id'];\n hasChildren: boolean;\n hasAction: boolean;\n letter?: string;\n onExpansion: (id: string) => void;\n isExpanded: boolean;\n isSelected: boolean;\n isDisabled: boolean;\n onChange: (id: string, isSelected: boolean) => void;\n isIndeterminate: boolean;\n singleChoice?: boolean;\n hasLetterOnLevel: boolean;\n hasDot: boolean;\n maxControlsOnLevel: number;\n renderItemForDesktop?: RenderItem<A>;\n isSearch: boolean;\n}\n\nconst ItemContentComponent = <A extends AdditionalDefault>({\n item,\n parentId,\n hasAction,\n hasChildren,\n letter,\n isExpanded,\n isDisabled,\n onExpansion,\n hasLetterOnLevel,\n isSelected,\n onChange,\n isIndeterminate,\n singleChoice,\n hasDot,\n maxControlsOnLevel,\n isSearch,\n renderItemForDesktop = TreeSelectorItemBase,\n}: ItemContent<A>): ReactElement => {\n const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);\n const currentActionCount = +hasDot + +hasAction + +hasChildren;\n const neededSpacesCount = maxControlsOnLevel - currentActionCount;\n\n const handleExpandableKeyDown = useCallback<KeyboardEventHandler>(\n (event) => {\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n isExpanded && onExpansion(item.id);\n event.preventDefault();\n return;\n }\n if (keyboardMatch(event.nativeEvent, keyboardKeys.ArrowRight)) {\n !isExpanded && onExpansion(item.id);\n event.preventDefault();\n }\n },\n [isExpanded, onExpansion, item.id]\n );\n\n const input = hasAction ? (\n <Action\n selected={isSelected}\n onChange={onChange}\n id={item.id}\n onKeyDown={handleExpandableKeyDown}\n indeterminate={isIndeterminate}\n singleChoice={singleChoice}\n name={`tree-selector-item-${parentId || 'top'}-${item.id}`}\n />\n ) : undefined;\n\n return (\n <div className={styles.wrapper}>\n {(letter || hasLetterOnLevel) && (\n <div className={styles.letter}>\n {letter && (\n <Text typography=\"subtitle-1-semibold\" style=\"secondary\" Element=\"span\">\n {letter}\n </Text>\n )}\n </div>\n )}\n {hasDot && (\n <div className={styles.icon}>\n <DotFilledSize24 initial=\"tertiary\" />\n </div>\n )}\n\n {[...Array(neededSpacesCount).keys()].map((_, i) => (\n <div key={i} className={styles.space} />\n ))}\n\n {hasChildren && (\n <div\n className={classnames(styles.icon, styles.iconActive, {\n [styles.iconUp]: isExpanded,\n })}\n data-qa={`tree-selector-chevron-${item.id}`}\n onClick={handleExpandableClick}\n >\n <ChevronDownOutlinedSize24 initial=\"tertiary\" />\n </div>\n )}\n {renderItemForDesktop({ disabled: isDisabled, input, item, isSearch, isParent: hasChildren })}\n </div>\n );\n};\n\nexport const ItemContent = memo(ItemContentComponent) as <A extends AdditionalDefault>(\n props: ItemContent<A>\n) => ReactElement;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|