@hh.ru/magritte-ui-tree-selector 1.7.3 → 2.1.0
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-CvQf33fs.js +36 -0
- package/ItemContent-CvQf33fs.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 +8 -6
- package/MobileItemsList.js +3 -5
- 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 +26 -11
- 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.d.ts +6 -0
- package/index.js +6 -6
- package/package.json +2 -2
- 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 +52 -18
- package/useAnimationTimeout.js +1 -1
- package/useDisabled.d.ts +3 -3
- package/useDisabled.js.map +1 -1
- package/useExpanded.d.ts +9 -3
- package/useExpanded.js +27 -11
- package/useExpanded.js.map +1 -1
- package/useIndeterminate.d.ts +4 -4
- package/useIndeterminate.js.map +1 -1
- package/useRenderInput.d.ts +2 -1
- package/useRenderInput.js +10 -4
- package/useRenderInput.js.map +1 -1
- package/useSelected.d.ts +4 -4
- package/useSelected.js.map +1 -1
- package/ItemContent-BmLHNw1m.js +0 -36
- package/ItemContent-BmLHNw1m.js.map +0 -1
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.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
+
import { SearchInputProps } from '@hh.ru/magritte-ui-input';
|
|
2
3
|
export interface UseRenderInputHook {
|
|
3
4
|
(): {
|
|
4
5
|
contentFilterQuery: string;
|
|
5
6
|
setInputValue: (newValue: string) => void;
|
|
6
7
|
handleChangeInput: (newValue: string) => void;
|
|
7
|
-
renderInput: () => ReactElement;
|
|
8
|
+
renderInput: (props?: SearchInputProps) => ReactElement;
|
|
8
9
|
};
|
|
9
10
|
}
|
|
10
11
|
export declare const useRenderInput: UseRenderInputHook;
|
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('');
|
|
@@ -25,9 +31,9 @@ const useRenderInput = () => {
|
|
|
25
31
|
const setInputValue = useCallback((newValue) => {
|
|
26
32
|
setValue(newValue);
|
|
27
33
|
}, [setValue]);
|
|
28
|
-
const renderInput = useCallback(() => {
|
|
29
|
-
return jsx(SearchInput, { value: value, onChange: handleChangeInput, "data-qa": "tree-selector-search-input" });
|
|
30
|
-
}, [value, handleChangeInput]);
|
|
34
|
+
const renderInput = useCallback((props) => {
|
|
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 } 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: () => 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
|
|
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-BmLHNw1m.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, ChevronUpOutlinedSize24 } 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_1-7-3","itemAnimationTimeout":"magritte-item-animation-timeout___pbOyZ_1-7-3","wrapper":"magritte-wrapper___GHKV6_1-7-3","letter":"magritte-letter___yZOCU_1-7-3","icon":"magritte-icon___kO3Fj_1-7-3","space":"magritte-space___xTO79_1-7-3","iconActive":"magritte-iconActive___4yrG5_1-7-3","iconUp":"magritte-iconUp___mpXV6_1-7-3","content":"magritte-content___ZRc6R_1-7-3","with-shift":"magritte-with-shift___ZErxZ_1-7-3","withShift":"magritte-with-shift___ZErxZ_1-7-3","with-indent":"magritte-with-indent___MH9Vy_1-7-3","withIndent":"magritte-with-indent___MH9Vy_1-7-3","item":"magritte-item___2LtOL_1-7-3","children":"magritte-children___kq-eq_1-7-3","with-two-boxes":"magritte-with-two-boxes___LWOy2_1-7-3","withTwoBoxes":"magritte-with-two-boxes___LWOy2_1-7-3","with-three-boxes":"magritte-with-three-boxes___cyVao_1-7-3","withThreeBoxes":"magritte-with-three-boxes___cyVao_1-7-3","item-animation-enter":"magritte-item-animation-enter___14KlM_1-7-3","itemAnimationEnter":"magritte-item-animation-enter___14KlM_1-7-3","item-animation-enter-active":"magritte-item-animation-enter-active___oEWbW_1-7-3","itemAnimationEnterActive":"magritte-item-animation-enter-active___oEWbW_1-7-3","item-animation-exit":"magritte-item-animation-exit___a-Low_1-7-3","itemAnimationExit":"magritte-item-animation-exit___a-Low_1-7-3","item-animation-exit-active":"magritte-item-animation-exit-active___MhBnn_1-7-3","itemAnimationExitActive":"magritte-item-animation-exit-active___MhBnn_1-7-3"};
|
|
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(ChevronUpOutlinedSize24, { 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-BmLHNw1m.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ItemContent-BmLHNw1m.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 { ChevronUpOutlinedSize24, 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 <ChevronUpOutlinedSize24 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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"}
|