@hh.ru/magritte-ui-tree-selector 1.3.2 → 1.4.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 +2 -1
- package/Item.js +3 -3
- package/Item.js.map +1 -1
- package/ItemContent-f98f0b9a.js +22 -0
- package/ItemContent-f98f0b9a.js.map +1 -0
- package/ItemContent.d.ts +5 -4
- package/ItemContent.js +1 -1
- package/ItemsList.d.ts +1 -0
- package/ItemsList.js +3 -3
- package/ItemsList.js.map +1 -1
- package/MobileItem.d.ts +2 -1
- package/MobileItem.js +2 -2
- package/MobileItem.js.map +1 -1
- package/MobileItemsList.d.ts +1 -0
- package/MobileItemsList.js +3 -3
- package/MobileItemsList.js.map +1 -1
- package/TreeSelector.d.ts +2 -2
- package/TreeSelector.js +41 -108
- package/TreeSelector.js.map +1 -1
- package/TreeSelectorDummy.d.ts +4 -0
- package/TreeSelectorDummy.js +129 -0
- package/TreeSelectorDummy.js.map +1 -0
- package/collection/treeCollectionHelper.d.ts +6 -0
- package/collection/treeCollectionHelper.js +16 -1
- package/collection/treeCollectionHelper.js.map +1 -1
- package/index.css +11 -11
- package/index.d.ts +1 -1
- package/index.js +11 -10
- package/index.js.map +1 -1
- package/package.json +2 -2
- package/types.d.ts +17 -7
- package/useDisabled.d.ts +13 -0
- package/useDisabled.js +20 -0
- package/useDisabled.js.map +1 -0
- package/useExpanded.d.ts +2 -2
- package/useExpanded.js +1 -1
- package/useExpanded.js.map +1 -1
- package/useSelected.d.ts +6 -1
- package/useSelected.js +39 -8
- package/useSelected.js.map +1 -1
- package/ItemContent-1be2cb46.js +0 -22
- package/ItemContent-1be2cb46.js.map +0 -1
- package/UncontrolledTreeSelector.d.ts +0 -7
- package/UncontrolledTreeSelector.js +0 -49
- package/UncontrolledTreeSelector.js.map +0 -1
package/Item.d.ts
CHANGED
|
@@ -9,10 +9,11 @@ interface ItemProps<A extends AdditionalDefault> extends PropsWithChildren {
|
|
|
9
9
|
checkSelectable?: IdCollectionPredicate;
|
|
10
10
|
isExpanded: boolean;
|
|
11
11
|
isSelected: boolean;
|
|
12
|
+
isDisabled: boolean;
|
|
12
13
|
singleChoice?: boolean;
|
|
13
14
|
isIndeterminate: boolean;
|
|
14
15
|
onExpansion: (id: string) => void;
|
|
15
16
|
onChange: (id: string, isSelected: boolean) => void;
|
|
16
17
|
}
|
|
17
|
-
export declare const Item: <A extends AdditionalDefault>({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, leavesOnly, singleChoice, checkSelectable, onExpansion, onChange, children, }: ItemProps<A>) => ReactElement;
|
|
18
|
+
export declare const Item: <A extends AdditionalDefault>({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, isDisabled, leavesOnly, singleChoice, checkSelectable, onExpansion, onChange, children, }: ItemProps<A>) => ReactElement;
|
|
18
19
|
export {};
|
package/Item.js
CHANGED
|
@@ -2,14 +2,14 @@ import './index.css';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
|
-
import { s as styles, I as ItemContent } from './ItemContent-
|
|
5
|
+
import { s as styles, I as ItemContent } from './ItemContent-f98f0b9a.js';
|
|
6
6
|
import '@hh.ru/magritte-ui-cell';
|
|
7
7
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
8
8
|
import './Action.js';
|
|
9
9
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
10
10
|
import '@hh.ru/magritte-ui-typography';
|
|
11
11
|
|
|
12
|
-
const Item = ({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, leavesOnly, singleChoice, checkSelectable, onExpansion, onChange, children, }) => {
|
|
12
|
+
const Item = ({ collection, item, parentId, isExpanded, isSelected, isIndeterminate, isDisabled, leavesOnly, singleChoice, checkSelectable, onExpansion, onChange, children, }) => {
|
|
13
13
|
const modelsOnLevel = useMemo(() => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()), [parentId, collection]);
|
|
14
14
|
const hasLetterOnLevel = useMemo(() => {
|
|
15
15
|
return modelsOnLevel.some((model) => model.additional?.char);
|
|
@@ -38,7 +38,7 @@ const Item = ({ collection, item, parentId, isExpanded, isSelected, isIndetermin
|
|
|
38
38
|
[styles.withThreeBoxes]: allBoxesCount === 3,
|
|
39
39
|
[styles.withShift]: hasShift && parentId,
|
|
40
40
|
[styles.withIndent]: allBoxesCount === 0,
|
|
41
|
-
}), children: [jsx(ItemContent, { item: item, hasChildren: hasChildren, hasAction: !!hasAction, letter: hasLetter,
|
|
41
|
+
}), children: [jsx(ItemContent, { item: item, hasChildren: hasChildren, hasAction: !!hasAction, letter: hasLetter, isExpanded: isExpanded, onExpansion: onExpansion, isSelected: isSelected, onChange: onChange, singleChoice: singleChoice, isIndeterminate: isIndeterminate, isDisabled: isDisabled, hasLetterOnLevel: hasLetterOnLevel, hasDot: hasDot, maxControlsOnLevel: maxControlsOnLevel }), children && jsx("div", { className: styles.children, children: children })] }));
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
export { Item };
|
package/Item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.js","sources":["../src/Item.tsx"],"sourcesContent":["import { PropsWithChildren, ReactElement, useMemo } from 'react';\nimport classnames from 'classnames';\n\nimport { ItemContent } from '@hh.ru/magritte-ui-tree-selector/ItemContent';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemProps<A extends AdditionalDefault> extends PropsWithChildren {\n collection: TreeCollection<A>;\n parentId?: string;\n item: TreeModel<A>;\n leavesOnly?: boolean;\n checkSelectable?: IdCollectionPredicate;\n isExpanded: boolean;\n isSelected: boolean;\n singleChoice?: boolean;\n isIndeterminate: boolean;\n onExpansion: (id: string) => void;\n onChange: (id: string, isSelected: boolean) => void;\n}\n\nexport const Item = <A extends AdditionalDefault>({\n collection,\n item,\n parentId,\n isExpanded,\n isSelected,\n isIndeterminate,\n leavesOnly,\n singleChoice,\n checkSelectable,\n onExpansion,\n onChange,\n children,\n}: ItemProps<A>): ReactElement => {\n const modelsOnLevel = useMemo(\n () => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()),\n [parentId, collection]\n );\n\n const hasLetterOnLevel = useMemo(() => {\n return modelsOnLevel.some((model) => model.additional?.char);\n }, [modelsOnLevel]);\n\n // максимальное кол-во контролов на уровне, максимум может быть 2 - шеврон + чекбокс/радио\n const maxControlsOnLevel = useMemo(() => {\n return modelsOnLevel.reduce((currentMax, model) => {\n const hasChildren = collection.hasChildren(model.id);\n const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(model.id, collection);\n const actionCount = +hasChildren + +!!hasAction;\n return Math.max(currentMax, actionCount);\n }, 0);\n }, [modelsOnLevel, checkSelectable, leavesOnly, collection]);\n\n const hasChildren = collection.hasChildren(item.id);\n const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(item.id, collection);\n const hasLetter = item.additional?.char;\n const realControlsCount = +hasChildren + +!!hasAction;\n\n // точка заменяет недостающий контрол, если их суммарное кол-во на уровне больше суммарного значения на текущем уровне\n const hasDot = realControlsCount < maxControlsOnLevel && (hasAction || hasChildren);\n const hasParentAction = parentId ? !leavesOnly && checkSelectable?.(parentId, collection) : false;\n\n const allBoxesCount = +hasLetterOnLevel + maxControlsOnLevel;\n\n const hasShift =\n allBoxesCount > 1 &&\n ((hasParentAction && (hasLetterOnLevel || hasChildren || hasDot)) || (!hasParentAction && hasLetterOnLevel));\n\n return (\n <div\n className={classnames(styles.item, {\n [styles.withTwoBoxes]: allBoxesCount === 2,\n [styles.withThreeBoxes]: allBoxesCount === 3,\n [styles.withShift]: hasShift && parentId,\n [styles.withIndent]: allBoxesCount === 0,\n })}\n >\n <ItemContent\n item={item}\n hasChildren={hasChildren}\n hasAction={!!hasAction}\n letter={hasLetter}\n
|
|
1
|
+
{"version":3,"file":"Item.js","sources":["../src/Item.tsx"],"sourcesContent":["import { PropsWithChildren, ReactElement, useMemo } from 'react';\nimport classnames from 'classnames';\n\nimport { ItemContent } from '@hh.ru/magritte-ui-tree-selector/ItemContent';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\nimport styles from './tree-selector-item.less';\n\ninterface ItemProps<A extends AdditionalDefault> extends PropsWithChildren {\n collection: TreeCollection<A>;\n parentId?: string;\n item: TreeModel<A>;\n leavesOnly?: boolean;\n checkSelectable?: IdCollectionPredicate;\n isExpanded: boolean;\n isSelected: boolean;\n isDisabled: boolean;\n singleChoice?: boolean;\n isIndeterminate: boolean;\n onExpansion: (id: string) => void;\n onChange: (id: string, isSelected: boolean) => void;\n}\n\nexport const Item = <A extends AdditionalDefault>({\n collection,\n item,\n parentId,\n isExpanded,\n isSelected,\n isIndeterminate,\n isDisabled,\n leavesOnly,\n singleChoice,\n checkSelectable,\n onExpansion,\n onChange,\n children,\n}: ItemProps<A>): ReactElement => {\n const modelsOnLevel = useMemo(\n () => (parentId ? collection.getChildren(parentId) : collection.getTopLevel()),\n [parentId, collection]\n );\n\n const hasLetterOnLevel = useMemo(() => {\n return modelsOnLevel.some((model) => model.additional?.char);\n }, [modelsOnLevel]);\n\n // максимальное кол-во контролов на уровне, максимум может быть 2 - шеврон + чекбокс/радио\n const maxControlsOnLevel = useMemo(() => {\n return modelsOnLevel.reduce((currentMax, model) => {\n const hasChildren = collection.hasChildren(model.id);\n const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(model.id, collection);\n const actionCount = +hasChildren + +!!hasAction;\n return Math.max(currentMax, actionCount);\n }, 0);\n }, [modelsOnLevel, checkSelectable, leavesOnly, collection]);\n\n const hasChildren = collection.hasChildren(item.id);\n const hasAction = !(leavesOnly && hasChildren) && checkSelectable?.(item.id, collection);\n const hasLetter = item.additional?.char;\n const realControlsCount = +hasChildren + +!!hasAction;\n\n // точка заменяет недостающий контрол, если их суммарное кол-во на уровне больше суммарного значения на текущем уровне\n const hasDot = realControlsCount < maxControlsOnLevel && (hasAction || hasChildren);\n const hasParentAction = parentId ? !leavesOnly && checkSelectable?.(parentId, collection) : false;\n\n const allBoxesCount = +hasLetterOnLevel + maxControlsOnLevel;\n\n const hasShift =\n allBoxesCount > 1 &&\n ((hasParentAction && (hasLetterOnLevel || hasChildren || hasDot)) || (!hasParentAction && hasLetterOnLevel));\n\n return (\n <div\n className={classnames(styles.item, {\n [styles.withTwoBoxes]: allBoxesCount === 2,\n [styles.withThreeBoxes]: allBoxesCount === 3,\n [styles.withShift]: hasShift && parentId,\n [styles.withIndent]: allBoxesCount === 0,\n })}\n >\n <ItemContent\n item={item}\n hasChildren={hasChildren}\n hasAction={!!hasAction}\n letter={hasLetter}\n isExpanded={isExpanded}\n onExpansion={onExpansion}\n isSelected={isSelected}\n onChange={onChange}\n singleChoice={singleChoice}\n isIndeterminate={isIndeterminate}\n isDisabled={isDisabled}\n hasLetterOnLevel={hasLetterOnLevel}\n hasDot={hasDot}\n maxControlsOnLevel={maxControlsOnLevel}\n />\n {children && <div className={styles.children}>{children}</div>}\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
|
+
import classnames from 'classnames';
|
|
5
|
+
import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
|
|
6
|
+
import { DotFilledSize24, ChevronDownOutlinedSize24, ChevronUpOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
7
|
+
import { Action } from './Action.js';
|
|
8
|
+
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
9
|
+
|
|
10
|
+
var styles = {"wrapper":"magritte-wrapper___GHKV6_1-4-0","letter":"magritte-letter___yZOCU_1-4-0","icon":"magritte-icon___kO3Fj_1-4-0","space":"magritte-space___xTO79_1-4-0","iconActive":"magritte-iconActive___4yrG5_1-4-0","content":"magritte-content___ZRc6R_1-4-0","with-shift":"magritte-with-shift___ZErxZ_1-4-0","withShift":"magritte-with-shift___ZErxZ_1-4-0","with-indent":"magritte-with-indent___MH9Vy_1-4-0","withIndent":"magritte-with-indent___MH9Vy_1-4-0","item":"magritte-item___2LtOL_1-4-0","children":"magritte-children___kq-eq_1-4-0","with-two-boxes":"magritte-with-two-boxes___LWOy2_1-4-0","withTwoBoxes":"magritte-with-two-boxes___LWOy2_1-4-0","with-three-boxes":"magritte-with-three-boxes___cyVao_1-4-0","withThreeBoxes":"magritte-with-three-boxes___cyVao_1-4-0"};
|
|
11
|
+
|
|
12
|
+
const ItemContent = ({ item, hasAction, hasChildren, letter, isExpanded, isDisabled, onExpansion, hasLetterOnLevel, isSelected, onChange, isIndeterminate, singleChoice, hasDot, maxControlsOnLevel, }) => {
|
|
13
|
+
const handleExpandableClick = useCallback(() => onExpansion && onExpansion(item.id), [item.id, onExpansion]);
|
|
14
|
+
const currentActionCount = +hasDot + +hasAction + +hasChildren;
|
|
15
|
+
const neededSpacesCount = maxControlsOnLevel - currentActionCount;
|
|
16
|
+
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 && (jsxs("div", { className: classnames(styles.icon, {
|
|
17
|
+
[styles.iconActive]: hasChildren,
|
|
18
|
+
}), onClick: handleExpandableClick, children: [isExpanded && jsx(ChevronDownOutlinedSize24, { initial: "tertiary" }), !isExpanded && jsx(ChevronUpOutlinedSize24, { initial: "tertiary" })] })), jsx(Cell, { disabled: isDisabled, left: hasAction ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, indeterminate: isIndeterminate, singleChoice: singleChoice })) : undefined, children: jsx(CellText, { children: item.text }) })] }));
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { ItemContent as I, styles as s };
|
|
22
|
+
//# sourceMappingURL=ItemContent-f98f0b9a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ItemContent-f98f0b9a.js","sources":["../src/ItemContent.tsx"],"sourcesContent":["import { ReactElement, useCallback } from 'react';\nimport classnames from 'classnames';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { ChevronDownOutlinedSize24, ChevronUpOutlinedSize24, DotFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/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 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}\n\nconst ItemContent = <A extends AdditionalDefault>({\n item,\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}: 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 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, {\n [styles.iconActive]: hasChildren,\n })}\n onClick={handleExpandableClick}\n >\n {isExpanded && <ChevronDownOutlinedSize24 initial=\"tertiary\" />}\n {!isExpanded && <ChevronUpOutlinedSize24 initial=\"tertiary\" />}\n </div>\n )}\n\n <Cell\n disabled={isDisabled}\n left={\n hasAction ? (\n <Action\n selected={isSelected}\n onChange={onChange}\n id={item.id}\n indeterminate={isIndeterminate}\n singleChoice={singleChoice}\n />\n ) : undefined\n }\n >\n <CellText>{item.text}</CellText>\n </Cell>\n </div>\n );\n};\n\nexport { ItemContent };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AA4BA,MAAM,WAAW,GAAG,CAA8B,EAC9C,IAAI,EACJ,SAAS,EACT,WAAW,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,MAAM,EACN,kBAAkB,GACL,KAAkB;IAC/B,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;IAC7G,MAAM,kBAAkB,GAAG,CAAC,MAAM,GAAG,CAAC,SAAS,GAAG,CAAC,WAAW,CAAC;AAC/D,IAAA,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;IAElE,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CACzB,CAAC,MAAM,IAAI,gBAAgB,MACxBC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EACxB,MAAM,KACHA,GAAA,CAAC,IAAI,EAAC,EAAA,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAC,MAAM,EAAA,QAAA,EAClE,MAAM,EACJ,CAAA,CACV,EACC,CAAA,CACT,EACA,MAAM,KACHA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,YACvBA,GAAC,CAAA,eAAe,EAAC,EAAA,OAAO,EAAC,UAAU,GAAG,EACpC,CAAA,CACT,EAEA,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAC3CA,GAAA,CAAA,KAAA,EAAA,EAAa,SAAS,EAAE,MAAM,CAAC,KAAK,EAA1B,EAAA,CAAC,CAA6B,CAC3C,CAAC,EAED,WAAW,KACRD,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;AAC/B,oBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,WAAW;AACnC,iBAAA,CAAC,EACF,OAAO,EAAE,qBAAqB,EAAA,QAAA,EAAA,CAE7B,UAAU,IAAIC,GAAA,CAAC,yBAAyB,EAAA,EAAC,OAAO,EAAC,UAAU,GAAG,EAC9D,CAAC,UAAU,IAAIA,GAAA,CAAC,uBAAuB,EAAA,EAAC,OAAO,EAAC,UAAU,GAAG,CAC5D,EAAA,CAAA,CACT,EAEDA,GAAC,CAAA,IAAI,EACD,EAAA,QAAQ,EAAE,UAAU,EACpB,IAAI,EACA,SAAS,IACLA,GAAA,CAAC,MAAM,EACH,EAAA,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,aAAa,EAAE,eAAe,EAC9B,YAAY,EAAE,YAAY,EAC5B,CAAA,IACF,SAAS,EAGjB,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,IAAI,CAAC,IAAI,GAAY,EAC7B,CAAA,CAAA,EAAA,CACL,EACR;AACN;;;;"}
|
package/ItemContent.d.ts
CHANGED
|
@@ -6,14 +6,15 @@ interface ItemContent<A extends AdditionalDefault> {
|
|
|
6
6
|
hasAction: boolean;
|
|
7
7
|
letter?: string;
|
|
8
8
|
onExpansion: (id: string) => void;
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
isExpanded: boolean;
|
|
10
|
+
isSelected: boolean;
|
|
11
|
+
isDisabled: boolean;
|
|
11
12
|
onChange: (id: string, isSelected: boolean) => void;
|
|
12
|
-
|
|
13
|
+
isIndeterminate: boolean;
|
|
13
14
|
singleChoice?: boolean;
|
|
14
15
|
hasLetterOnLevel: boolean;
|
|
15
16
|
hasDot: boolean;
|
|
16
17
|
maxControlsOnLevel: number;
|
|
17
18
|
}
|
|
18
|
-
declare const ItemContent: <A extends AdditionalDefault>({ item, hasAction, hasChildren, letter,
|
|
19
|
+
declare const ItemContent: <A extends AdditionalDefault>({ item, hasAction, hasChildren, letter, isExpanded, isDisabled, onExpansion, hasLetterOnLevel, isSelected, onChange, isIndeterminate, singleChoice, hasDot, maxControlsOnLevel, }: ItemContent<A>) => ReactElement;
|
|
19
20
|
export { ItemContent };
|
package/ItemContent.js
CHANGED
|
@@ -6,6 +6,6 @@ import '@hh.ru/magritte-ui-cell';
|
|
|
6
6
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
7
7
|
import './Action.js';
|
|
8
8
|
import '@hh.ru/magritte-ui-typography';
|
|
9
|
-
export { I as ItemContent } from './ItemContent-
|
|
9
|
+
export { I as ItemContent } from './ItemContent-f98f0b9a.js';
|
|
10
10
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
11
11
|
//# sourceMappingURL=ItemContent.js.map
|
package/ItemsList.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ interface ItemsListProps<A extends AdditionalDefault> {
|
|
|
10
10
|
onExpansion: (id: string) => void;
|
|
11
11
|
expanded: string[];
|
|
12
12
|
selected: string[];
|
|
13
|
+
disabled: string[];
|
|
13
14
|
onChange: (id: string, isSelected: boolean) => void;
|
|
14
15
|
indeterminate: string[];
|
|
15
16
|
singleChoice?: boolean;
|
package/ItemsList.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
|
|
|
3
3
|
import { Item } from './Item.js';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'classnames';
|
|
6
|
-
import './ItemContent-
|
|
6
|
+
import './ItemContent-f98f0b9a.js';
|
|
7
7
|
import '@hh.ru/magritte-ui-cell';
|
|
8
8
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
9
9
|
import './Action.js';
|
|
@@ -11,11 +11,11 @@ import '@hh.ru/magritte-ui-checkbox-radio';
|
|
|
11
11
|
import '@hh.ru/magritte-ui-typography';
|
|
12
12
|
|
|
13
13
|
const ItemsList = (props) => {
|
|
14
|
-
const { items, collection, leavesOnly, checkSelectable, selected, parentId, expanded, onExpansion, indeterminate, onChange, singleChoice, } = props;
|
|
14
|
+
const { items, collection, leavesOnly, checkSelectable, selected, parentId, expanded, disabled, onExpansion, indeterminate, onChange, singleChoice, } = props;
|
|
15
15
|
return (jsx(Fragment, { children: items.map((item) => {
|
|
16
16
|
const isExpanded = expanded.includes(item.id);
|
|
17
17
|
const hasChildren = collection.hasChildren(item.id);
|
|
18
|
-
return (jsx(Item, { collection: collection, checkSelectable: checkSelectable, isSelected: selected.includes(item.id), isExpanded: isExpanded, isIndeterminate: indeterminate.includes(item.id), parentId: parentId, item: item, leavesOnly: leavesOnly, singleChoice: singleChoice, onExpansion: onExpansion, onChange: onChange, children: hasChildren && isExpanded && (jsx(ItemsList, { ...props, items: collection.getChildren(item.id), parentId: item.id })) }, item.id));
|
|
18
|
+
return (jsx(Item, { collection: collection, checkSelectable: checkSelectable, isSelected: selected.includes(item.id), isExpanded: isExpanded, isIndeterminate: indeterminate.includes(item.id), isDisabled: disabled.includes(item.id), parentId: parentId, item: item, leavesOnly: leavesOnly, singleChoice: singleChoice, onExpansion: onExpansion, onChange: onChange, children: hasChildren && isExpanded && (jsx(ItemsList, { ...props, items: collection.getChildren(item.id), parentId: item.id })) }, item.id));
|
|
19
19
|
}) }));
|
|
20
20
|
};
|
|
21
21
|
|
package/ItemsList.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemsList.js","sources":["../src/ItemsList.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { Item } from '@hh.ru/magritte-ui-tree-selector/Item';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\ninterface ItemsListProps<A extends AdditionalDefault> {\n items: TreeModel<A>[];\n collection: TreeCollection<A>;\n leavesOnly?: boolean;\n checkSelectable?: IdCollectionPredicate;\n parentId?: TreeModel<A>['id'];\n onExpansion: (id: string) => void;\n expanded: string[];\n selected: string[];\n onChange: (id: string, isSelected: boolean) => void;\n indeterminate: string[];\n singleChoice?: boolean;\n}\n\nexport const ItemsList = <A extends AdditionalDefault>(props: ItemsListProps<A>): ReactElement => {\n const {\n items,\n collection,\n leavesOnly,\n checkSelectable,\n selected,\n parentId,\n expanded,\n onExpansion,\n indeterminate,\n onChange,\n singleChoice,\n } = props;\n return (\n <>\n {items.map((item) => {\n const isExpanded = expanded.includes(item.id);\n const hasChildren = collection.hasChildren(item.id);\n\n return (\n <Item\n key={item.id}\n collection={collection}\n checkSelectable={checkSelectable}\n isSelected={selected.includes(item.id)}\n isExpanded={isExpanded}\n isIndeterminate={indeterminate.includes(item.id)}\n parentId={parentId}\n item={item}\n leavesOnly={leavesOnly}\n singleChoice={singleChoice}\n onExpansion={onExpansion}\n onChange={onChange}\n >\n {hasChildren && isExpanded && (\n <ItemsList {...props} items={collection.getChildren(item.id)} parentId={item.id} />\n )}\n </Item>\n );\n })}\n </>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ItemsList.js","sources":["../src/ItemsList.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { Item } from '@hh.ru/magritte-ui-tree-selector/Item';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\ninterface ItemsListProps<A extends AdditionalDefault> {\n items: TreeModel<A>[];\n collection: TreeCollection<A>;\n leavesOnly?: boolean;\n checkSelectable?: IdCollectionPredicate;\n parentId?: TreeModel<A>['id'];\n onExpansion: (id: string) => void;\n expanded: string[];\n selected: string[];\n disabled: string[];\n onChange: (id: string, isSelected: boolean) => void;\n indeterminate: string[];\n singleChoice?: boolean;\n}\n\nexport const ItemsList = <A extends AdditionalDefault>(props: ItemsListProps<A>): ReactElement => {\n const {\n items,\n collection,\n leavesOnly,\n checkSelectable,\n selected,\n parentId,\n expanded,\n disabled,\n onExpansion,\n indeterminate,\n onChange,\n singleChoice,\n } = props;\n return (\n <>\n {items.map((item) => {\n const isExpanded = expanded.includes(item.id);\n const hasChildren = collection.hasChildren(item.id);\n\n return (\n <Item\n key={item.id}\n collection={collection}\n checkSelectable={checkSelectable}\n isSelected={selected.includes(item.id)}\n isExpanded={isExpanded}\n isIndeterminate={indeterminate.includes(item.id)}\n isDisabled={disabled.includes(item.id)}\n parentId={parentId}\n item={item}\n leavesOnly={leavesOnly}\n singleChoice={singleChoice}\n onExpansion={onExpansion}\n onChange={onChange}\n >\n {hasChildren && isExpanded && (\n <ItemsList {...props} items={collection.getChildren(item.id)} parentId={item.id} />\n )}\n </Item>\n );\n })}\n </>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAqBa,MAAA,SAAS,GAAG,CAA8B,KAAwB,KAAkB;IAC7F,MAAM,EACF,KAAK,EACL,UAAU,EACV,UAAU,EACV,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,GACf,GAAG,KAAK,CAAC;IACV,QACIA,0BACK,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;YAChB,MAAM,UAAU,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC9C,MAAM,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEpD,QACIA,IAAC,IAAI,EAAA,EAED,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACtC,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAChD,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAEjB,QAAA,EAAA,WAAW,IAAI,UAAU,KACtBA,GAAA,CAAC,SAAS,EAAA,EAAA,GAAK,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAA,CAAI,CACtF,EAAA,EAhBI,IAAI,CAAC,EAAE,CAiBT,EACT;SACL,CAAC,EACH,CAAA,EACL;AACN;;;;"}
|
package/MobileItem.d.ts
CHANGED
|
@@ -5,7 +5,8 @@ interface MobileItemProps<A extends AdditionalDefault> {
|
|
|
5
5
|
singleChoice?: boolean;
|
|
6
6
|
isSelectable?: boolean;
|
|
7
7
|
isSelected: boolean;
|
|
8
|
+
isDisabled: boolean;
|
|
8
9
|
onChange: (id: string, isSelected: boolean) => void;
|
|
9
10
|
}
|
|
10
|
-
export declare const MobileItem: <A extends AdditionalDefault>({ item, isSelected, singleChoice, isSelectable, onChange, }: MobileItemProps<A>) => ReactElement;
|
|
11
|
+
export declare const MobileItem: <A extends AdditionalDefault>({ item, isSelected, singleChoice, isSelectable, isDisabled, onChange, }: MobileItemProps<A>) => ReactElement;
|
|
11
12
|
export {};
|
package/MobileItem.js
CHANGED
|
@@ -6,8 +6,8 @@ import { Action } from './Action.js';
|
|
|
6
6
|
import 'react';
|
|
7
7
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
8
8
|
|
|
9
|
-
const MobileItem = ({ item, isSelected, singleChoice, isSelectable, onChange, }) => {
|
|
10
|
-
return (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", checked: isSelected, children: jsx(Cell, { Element: 'div', right: isSelectable ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, singleChoice: singleChoice })) : undefined, children: jsx(CellText, { children: item.text }) }) }));
|
|
9
|
+
const MobileItem = ({ item, isSelected, singleChoice, isSelectable, isDisabled, onChange, }) => {
|
|
10
|
+
return (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", checked: isSelected, children: jsx(Cell, { Element: 'div', disabled: isDisabled, right: isSelectable ? (jsx(Action, { selected: isSelected, onChange: onChange, id: item.id, singleChoice: singleChoice })) : undefined, children: jsx(CellText, { children: item.text }) }) }));
|
|
11
11
|
};
|
|
12
12
|
|
|
13
13
|
export { MobileItem };
|
package/MobileItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileItem.js","sources":["../src/MobileItem.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\ninterface MobileItemProps<A extends AdditionalDefault> {\n item: TreeModel<A>;\n singleChoice?: boolean;\n isSelectable?: boolean;\n isSelected: boolean;\n onChange: (id: string, isSelected: boolean) => void;\n}\n\nexport const MobileItem = <A extends AdditionalDefault>({\n item,\n isSelected,\n singleChoice,\n isSelectable,\n onChange,\n}: MobileItemProps<A>): ReactElement => {\n return (\n <CheckableCardElement padding={16} borderRadius={12} Element=\"label\" checked={isSelected}>\n <Cell\n Element={'div'}\n right={\n isSelectable ? (\n <Action selected={isSelected} onChange={onChange} id={item.id} singleChoice={singleChoice} />\n ) : undefined\n }\n >\n <CellText>{item.text}</CellText>\n </Cell>\n </CheckableCardElement>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"MobileItem.js","sources":["../src/MobileItem.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { AdditionalDefault, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\n\ninterface MobileItemProps<A extends AdditionalDefault> {\n item: TreeModel<A>;\n singleChoice?: boolean;\n isSelectable?: boolean;\n isSelected: boolean;\n isDisabled: boolean;\n onChange: (id: string, isSelected: boolean) => void;\n}\n\nexport const MobileItem = <A extends AdditionalDefault>({\n item,\n isSelected,\n singleChoice,\n isSelectable,\n isDisabled,\n onChange,\n}: MobileItemProps<A>): ReactElement => {\n return (\n <CheckableCardElement padding={16} borderRadius={12} Element=\"label\" checked={isSelected}>\n <Cell\n Element={'div'}\n disabled={isDisabled}\n right={\n isSelectable ? (\n <Action selected={isSelected} onChange={onChange} id={item.id} singleChoice={singleChoice} />\n ) : undefined\n }\n >\n <CellText>{item.text}</CellText>\n </Cell>\n </CheckableCardElement>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;AAgBa,MAAA,UAAU,GAAG,CAA8B,EACpD,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,QAAQ,GACS,KAAkB;AACnC,IAAA,QACIA,GAAA,CAAC,oBAAoB,EAAA,EAAC,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,UAAU,YACpFA,GAAC,CAAA,IAAI,EACD,EAAA,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,KAAK,EACD,YAAY,IACRA,GAAA,CAAC,MAAM,EAAC,EAAA,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,EAAA,CAAI,IAC7F,SAAS,YAGjBA,GAAC,CAAA,QAAQ,EAAE,EAAA,QAAA,EAAA,IAAI,CAAC,IAAI,EAAA,CAAY,EAC7B,CAAA,EAAA,CACY,EACzB;AACN;;;;"}
|
package/MobileItemsList.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ import { ListControls } from './types';
|
|
|
5
5
|
interface MobileItemsListProps<A extends AdditionalDefault> {
|
|
6
6
|
collection: TreeCollection<A>;
|
|
7
7
|
selected: string[];
|
|
8
|
+
disabled: string[];
|
|
8
9
|
leavesOnly?: boolean;
|
|
9
10
|
singleChoice?: boolean;
|
|
10
11
|
checkSelectable?: IdCollectionPredicate;
|
package/MobileItemsList.js
CHANGED
|
@@ -10,7 +10,7 @@ import '@hh.ru/magritte-ui-checkbox-radio';
|
|
|
10
10
|
import '@hh.ru/magritte-ui-card';
|
|
11
11
|
|
|
12
12
|
const MobileItemsListComponent = (props, ref) => {
|
|
13
|
-
const { collection, selected, leavesOnly, singleChoice, onChange, checkSelectable, getSearchItemOrder, setInputValue, handleChangeInput, contentFilterQuery, } = props;
|
|
13
|
+
const { collection, selected, disabled, leavesOnly, singleChoice, onChange, checkSelectable, getSearchItemOrder, setInputValue, handleChangeInput, contentFilterQuery, } = props;
|
|
14
14
|
const prevParentIds = useRef([]);
|
|
15
15
|
const prevQueries = useRef([]);
|
|
16
16
|
const currentQuery = useRef(contentFilterQuery);
|
|
@@ -46,7 +46,7 @@ const MobileItemsListComponent = (props, ref) => {
|
|
|
46
46
|
}
|
|
47
47
|
},
|
|
48
48
|
}), [handleChangeInput, setInputValue]);
|
|
49
|
-
return (jsxs(Fragment, { children: [isSelectable && (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", checked: selected.includes(currentParentId), children: jsx(Cell, { Element: 'div', right: jsx(Action, { selected: selected.includes(currentParentId), onChange: onChange, id: currentParentId, singleChoice: singleChoice }), children: jsx(CellText, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435" }) }) })), sortedOrders.map((order) => {
|
|
49
|
+
return (jsxs(Fragment, { children: [isSelectable && (jsx(CheckableCardElement, { padding: 16, borderRadius: 12, Element: "label", checked: selected.includes(currentParentId), children: jsx(Cell, { Element: 'div', disabled: disabled.includes(currentParentId), right: jsx(Action, { selected: selected.includes(currentParentId), onChange: onChange, id: currentParentId, singleChoice: singleChoice }), children: jsx(CellText, { children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435" }) }) })), sortedOrders.map((order) => {
|
|
50
50
|
return itemsByOrder[order].map((item) => {
|
|
51
51
|
const hasChildren = collection.hasChildren(item.id);
|
|
52
52
|
return hasChildren ? (jsx(MobileParentItem, { collection: collection, item: item, selected: selected, onClick: () => {
|
|
@@ -55,7 +55,7 @@ const MobileItemsListComponent = (props, ref) => {
|
|
|
55
55
|
setCurrentParentId(item.id);
|
|
56
56
|
setInputValue('');
|
|
57
57
|
currentQuery.current = '';
|
|
58
|
-
} }, item.id)) : (jsx(MobileItem, { item: item, singleChoice: singleChoice, isSelectable: checkSelectable?.(item.id, collection), isSelected: selected.includes(item.id), onChange: onChange }, item.id));
|
|
58
|
+
} }, item.id)) : (jsx(MobileItem, { item: item, singleChoice: singleChoice, isSelectable: checkSelectable?.(item.id, collection), isSelected: selected.includes(item.id), isDisabled: disabled.includes(item.id), onChange: onChange }, item.id));
|
|
59
59
|
});
|
|
60
60
|
})] }));
|
|
61
61
|
};
|
package/MobileItemsList.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileItemsList.js","sources":["../src/MobileItemsList.tsx"],"sourcesContent":["import {\n ReactElement,\n useMemo,\n useState,\n useImperativeHandle,\n forwardRef,\n ForwardedRef,\n useRef,\n useEffect,\n} from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { MobileItem } from '@hh.ru/magritte-ui-tree-selector/MobileItem';\nimport { MobileParentItem } from '@hh.ru/magritte-ui-tree-selector/MobileParentItem';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileItemsListProps<A extends AdditionalDefault> {\n collection: TreeCollection<A>;\n selected: string[];\n leavesOnly?: boolean;\n singleChoice?: boolean;\n checkSelectable?: IdCollectionPredicate;\n onChange: (id: string, isSelected: boolean) => void;\n getSearchItemOrder: (model: TreeModel<A>) => number;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n contentFilterQuery: string;\n}\n\nconst MobileItemsListComponent = <A extends AdditionalDefault>(\n props: MobileItemsListProps<A>,\n ref: ForwardedRef<ListControls>\n): ReactElement => {\n const {\n collection,\n selected,\n leavesOnly,\n singleChoice,\n onChange,\n checkSelectable,\n getSearchItemOrder,\n setInputValue,\n handleChangeInput,\n contentFilterQuery,\n } = props;\n const prevParentIds = useRef<(string | undefined)[]>([]);\n const prevQueries = useRef<string[]>([]);\n const currentQuery = useRef(contentFilterQuery);\n const [currentParentId, setCurrentParentId] = useState<string | undefined>();\n const isSearch = !!contentFilterQuery;\n const items = useMemo(\n () => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()),\n [currentParentId, collection]\n );\n const { itemsByOrder, sortedOrders } = useMemo(() => {\n const orders = new Set<number>();\n const itemsByOrder = items.reduce<Record<number, TreeModel<A>[]>>((acc, item) => {\n const modelOrder = isSearch ? getSearchItemOrder(item) : 0;\n orders.add(modelOrder);\n acc[modelOrder] = acc[modelOrder] || [];\n acc[modelOrder].push(item);\n return acc;\n }, {});\n return { itemsByOrder, sortedOrders: [...orders].sort((a, b) => a - b) };\n }, [items, isSearch, getSearchItemOrder]);\n\n const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n\n useEffect(() => {\n setCurrentParentId(undefined);\n prevParentIds.current = [];\n prevQueries.current = [];\n currentQuery.current = contentFilterQuery;\n }, [contentFilterQuery]);\n\n useImperativeHandle(\n ref,\n () => ({\n back: () => {\n setCurrentParentId(prevParentIds.current.pop());\n if (prevQueries.current.length) {\n setInputValue(prevQueries.current.pop() as string);\n } else {\n handleChangeInput('');\n }\n },\n }),\n [handleChangeInput, setInputValue]\n );\n\n return (\n <>\n {isSelectable && (\n <CheckableCardElement\n padding={16}\n borderRadius={12}\n Element=\"label\"\n checked={selected.includes(currentParentId)}\n >\n <Cell\n Element={'div'}\n right={\n <Action\n selected={selected.includes(currentParentId)}\n onChange={onChange}\n id={currentParentId}\n singleChoice={singleChoice}\n />\n }\n >\n <CellText>Выбрать все</CellText>\n </Cell>\n </CheckableCardElement>\n )}\n {sortedOrders.map((order) => {\n return itemsByOrder[order].map((item) => {\n const hasChildren = collection.hasChildren(item.id);\n\n return hasChildren ? (\n <MobileParentItem\n key={item.id}\n collection={collection}\n item={item}\n selected={selected}\n onClick={() => {\n prevParentIds.current.push(currentParentId);\n prevQueries.current.push(currentQuery.current);\n setCurrentParentId(item.id);\n setInputValue('');\n currentQuery.current = '';\n }}\n />\n ) : (\n <MobileItem\n key={item.id}\n item={item}\n singleChoice={singleChoice}\n isSelectable={checkSelectable?.(item.id, collection)}\n isSelected={selected.includes(item.id)}\n onChange={onChange}\n />\n );\n });\n })}\n </>\n );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"MobileItemsList.js","sources":["../src/MobileItemsList.tsx"],"sourcesContent":["import {\n ReactElement,\n useMemo,\n useState,\n useImperativeHandle,\n forwardRef,\n ForwardedRef,\n useRef,\n useEffect,\n} from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { CheckableCardElement } from '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';\nimport { Action } from '@hh.ru/magritte-ui-tree-selector/Action';\nimport { MobileItem } from '@hh.ru/magritte-ui-tree-selector/MobileItem';\nimport { MobileParentItem } from '@hh.ru/magritte-ui-tree-selector/MobileParentItem';\nimport TreeCollection from '@hh.ru/magritte-ui-tree-selector/collection/treeCollection';\nimport { AdditionalDefault, IdCollectionPredicate, TreeModel } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ListControls } from '@hh.ru/magritte-ui-tree-selector/types';\n\ninterface MobileItemsListProps<A extends AdditionalDefault> {\n collection: TreeCollection<A>;\n selected: string[];\n disabled: string[];\n leavesOnly?: boolean;\n singleChoice?: boolean;\n checkSelectable?: IdCollectionPredicate;\n onChange: (id: string, isSelected: boolean) => void;\n getSearchItemOrder: (model: TreeModel<A>) => number;\n setInputValue: (newValue: string) => void;\n handleChangeInput: (newValue: string) => void;\n contentFilterQuery: string;\n}\n\nconst MobileItemsListComponent = <A extends AdditionalDefault>(\n props: MobileItemsListProps<A>,\n ref: ForwardedRef<ListControls>\n): ReactElement => {\n const {\n collection,\n selected,\n disabled,\n leavesOnly,\n singleChoice,\n onChange,\n checkSelectable,\n getSearchItemOrder,\n setInputValue,\n handleChangeInput,\n contentFilterQuery,\n } = props;\n const prevParentIds = useRef<(string | undefined)[]>([]);\n const prevQueries = useRef<string[]>([]);\n const currentQuery = useRef(contentFilterQuery);\n const [currentParentId, setCurrentParentId] = useState<string | undefined>();\n const isSearch = !!contentFilterQuery;\n const items = useMemo(\n () => (currentParentId ? collection.getChildren(currentParentId) : collection.getTopLevel()),\n [currentParentId, collection]\n );\n const { itemsByOrder, sortedOrders } = useMemo(() => {\n const orders = new Set<number>();\n const itemsByOrder = items.reduce<Record<number, TreeModel<A>[]>>((acc, item) => {\n const modelOrder = isSearch ? getSearchItemOrder(item) : 0;\n orders.add(modelOrder);\n acc[modelOrder] = acc[modelOrder] || [];\n acc[modelOrder].push(item);\n return acc;\n }, {});\n return { itemsByOrder, sortedOrders: [...orders].sort((a, b) => a - b) };\n }, [items, isSearch, getSearchItemOrder]);\n\n const isSelectable = currentParentId && !leavesOnly && checkSelectable?.(currentParentId, collection);\n\n useEffect(() => {\n setCurrentParentId(undefined);\n prevParentIds.current = [];\n prevQueries.current = [];\n currentQuery.current = contentFilterQuery;\n }, [contentFilterQuery]);\n\n useImperativeHandle(\n ref,\n () => ({\n back: () => {\n setCurrentParentId(prevParentIds.current.pop());\n if (prevQueries.current.length) {\n setInputValue(prevQueries.current.pop() as string);\n } else {\n handleChangeInput('');\n }\n },\n }),\n [handleChangeInput, setInputValue]\n );\n\n return (\n <>\n {isSelectable && (\n <CheckableCardElement\n padding={16}\n borderRadius={12}\n Element=\"label\"\n checked={selected.includes(currentParentId)}\n >\n <Cell\n Element={'div'}\n disabled={disabled.includes(currentParentId)}\n right={\n <Action\n selected={selected.includes(currentParentId)}\n onChange={onChange}\n id={currentParentId}\n singleChoice={singleChoice}\n />\n }\n >\n <CellText>Выбрать все</CellText>\n </Cell>\n </CheckableCardElement>\n )}\n {sortedOrders.map((order) => {\n return itemsByOrder[order].map((item) => {\n const hasChildren = collection.hasChildren(item.id);\n\n return hasChildren ? (\n <MobileParentItem\n key={item.id}\n collection={collection}\n item={item}\n selected={selected}\n onClick={() => {\n prevParentIds.current.push(currentParentId);\n prevQueries.current.push(currentQuery.current);\n setCurrentParentId(item.id);\n setInputValue('');\n currentQuery.current = '';\n }}\n />\n ) : (\n <MobileItem\n key={item.id}\n item={item}\n singleChoice={singleChoice}\n isSelectable={checkSelectable?.(item.id, collection)}\n isSelected={selected.includes(item.id)}\n isDisabled={disabled.includes(item.id)}\n onChange={onChange}\n />\n );\n });\n })}\n </>\n );\n};\n\nexport const MobileItemsList = forwardRef(MobileItemsListComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
package/TreeSelector.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { AdditionalDefault } from './collection/types';
|
|
3
|
-
import { ListControls } from './types';
|
|
4
|
-
export declare const TreeSelector: import("react").ForwardRefExoticComponent<
|
|
3
|
+
import { TreeSelectorProps, ListControls } from './types';
|
|
4
|
+
export declare const TreeSelector: import("react").ForwardRefExoticComponent<TreeSelectorProps<AdditionalDefault> & import("react").RefAttributes<ListControls>>;
|
package/TreeSelector.js
CHANGED
|
@@ -1,128 +1,61 @@
|
|
|
1
1
|
import './index.css';
|
|
2
|
-
import { jsx
|
|
3
|
-
import { forwardRef,
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import { useRenderInput } from './useRenderInput.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef, useMemo } from 'react';
|
|
4
|
+
import { TreeSelectorDummy } from './TreeSelectorDummy.js';
|
|
5
|
+
import ImmutableSelectionStrategy from './strategy/immutableSelectionStrategy.js';
|
|
6
|
+
import { useDisabled } from './useDisabled.js';
|
|
7
|
+
import { useSelected } from './useSelected.js';
|
|
8
|
+
import '@hh.ru/magritte-common-fuzzy-search';
|
|
9
|
+
import '@hh.ru/magritte-ui-breakpoint';
|
|
10
|
+
import '@hh.ru/magritte-ui-spacing';
|
|
11
|
+
import './ItemsList.js';
|
|
13
12
|
import './Item.js';
|
|
14
13
|
import 'classnames';
|
|
15
|
-
import './ItemContent-
|
|
14
|
+
import './ItemContent-f98f0b9a.js';
|
|
16
15
|
import '@hh.ru/magritte-ui-cell';
|
|
17
16
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
18
17
|
import './Action.js';
|
|
19
18
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
20
19
|
import '@hh.ru/magritte-ui-typography';
|
|
20
|
+
import './MobileItemsList.js';
|
|
21
21
|
import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
|
22
22
|
import './MobileItem.js';
|
|
23
23
|
import './MobileParentItem.js';
|
|
24
24
|
import '@hh.ru/magritte-ui-card';
|
|
25
|
+
import './collection/treeCollectionHelper.js';
|
|
25
26
|
import './collection/treeCollection.js';
|
|
27
|
+
import './useExpanded.js';
|
|
28
|
+
import './useIndeterminate.js';
|
|
29
|
+
import './useRenderInput.js';
|
|
26
30
|
import '@hh.ru/magritte-ui-input';
|
|
31
|
+
import './strategy/selectionStrategy.js';
|
|
32
|
+
import './strategy/createSingleValueToggler.js';
|
|
33
|
+
import './strategy/createTreeCollectionToggler.js';
|
|
34
|
+
import './strategy/dummyToggle.js';
|
|
27
35
|
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
};
|
|
33
|
-
const TreeSelector = forwardRef(({ collection: initialCollection, checkSelectable = defaultCheckSelectable, initialExpanded = defaultArray, value: selected, leavesOnly, singleChoice, expanded, treeFilter = filterWithParents, suggestedNotFound = defaultArray, constantlySuggested = defaultArray, onExpand, onChange, onChangeFilterQuery, children, }, ref) => {
|
|
34
|
-
const [collection, setCollection] = useState(initialCollection);
|
|
35
|
-
const currentQuery = useRef('');
|
|
36
|
-
const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));
|
|
37
|
-
const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));
|
|
38
|
-
const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });
|
|
39
|
-
const { expanded: currentExpanded, setExpanded, handleExpansion, } = useExpanded({
|
|
40
|
-
initialValue: expanded ? expanded.slice() : initialExpanded.slice(),
|
|
41
|
-
controlledExpanded: expanded,
|
|
42
|
-
onExpand,
|
|
43
|
-
});
|
|
44
|
-
const { isMobile } = useBreakpoint();
|
|
45
|
-
const { contentFilterQuery, setInputValue, handleChangeInput, renderInput } = useRenderInput();
|
|
46
|
-
useEffect(() => {
|
|
47
|
-
const contentFilterQueryTrimmed = contentFilterQuery.trim();
|
|
48
|
-
const queryWasChanged = contentFilterQueryTrimmed !== currentQuery.current.trim();
|
|
49
|
-
if (queryWasChanged && needToApply(contentFilterQueryTrimmed)) {
|
|
50
|
-
const newExpanded = [];
|
|
51
|
-
const newCollection = treeFilter(initialCollection, (item) => match(contentFilterQueryTrimmed, item.text), isMobile);
|
|
52
|
-
newCollection.toList().forEach((item) => {
|
|
53
|
-
if (newCollection.hasChildren(item.id)) {
|
|
54
|
-
// Если есть в отфильтрованной коллекции есть дочерние элементы,
|
|
55
|
-
// значит они заматчились, и нужно открыть родителя.
|
|
56
|
-
newExpanded.push(item.id);
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
// Если заматчился только сам родитель, показываем его
|
|
60
|
-
// схлопнутым => нужно добавить его ветку в коллекцию.
|
|
61
|
-
initialCollection.walkChildren(item.id, (child, parents) => {
|
|
62
|
-
newCollection.addModel({ ...child }, parents[0].id);
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
const filteredIds = newCollection.toList().map((model) => model.id);
|
|
67
|
-
// Если в отфильтрованной коллекции нет моделей, но заданы предложенные,
|
|
68
|
-
// то показываем их
|
|
69
|
-
// Если в отфильтрованной коллекции модели есть, то пробуем добавить к ним
|
|
70
|
-
// всегда показывающиеся модели, если их ещё нет в коллекции
|
|
71
|
-
if (!filteredIds.length && suggestedNotFoundModels.current.length) {
|
|
72
|
-
suggestedNotFoundModels.current.forEach((model) => newCollection.addModel({ ...model }));
|
|
73
|
-
}
|
|
74
|
-
else {
|
|
75
|
-
constantlySuggestedModels.current.forEach((model) => {
|
|
76
|
-
if (!filteredIds.includes(model.id)) {
|
|
77
|
-
newCollection.addModel({ ...model });
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
setCollection(newCollection);
|
|
82
|
-
currentQuery.current = contentFilterQuery;
|
|
83
|
-
onChangeFilterQuery?.(filteredIds, contentFilterQueryTrimmed);
|
|
84
|
-
setExpanded(newExpanded);
|
|
85
|
-
}
|
|
86
|
-
else if (queryWasChanged) {
|
|
87
|
-
// Запрос не годится для поиска.
|
|
88
|
-
const newExpanded = initialExpanded.slice();
|
|
89
|
-
setCollection(initialCollection);
|
|
90
|
-
onChangeFilterQuery?.(initialCollection.toList().map((model) => model.id), contentFilterQueryTrimmed);
|
|
91
|
-
currentQuery.current = contentFilterQuery;
|
|
92
|
-
setExpanded(newExpanded);
|
|
93
|
-
}
|
|
94
|
-
}, [
|
|
95
|
-
initialCollection,
|
|
96
|
-
contentFilterQuery,
|
|
97
|
-
treeFilter,
|
|
98
|
-
selected,
|
|
99
|
-
initialExpanded,
|
|
100
|
-
setExpanded,
|
|
101
|
-
isMobile,
|
|
102
|
-
onChangeFilterQuery,
|
|
103
|
-
]);
|
|
104
|
-
const renderTreeSelector = useCallback(() => {
|
|
105
|
-
return (jsx(VSpacingContainer, { default: 12, gteM: 0, children: isMobile ? (jsx(MobileItemsList, { getSearchItemOrder: (model) => initialCollection.getModelLevel(model.id), collection: collection, selected: selected, onChange: onChange, leavesOnly: leavesOnly, checkSelectable: checkSelectable, singleChoice: singleChoice, ref: ref, setInputValue: setInputValue, handleChangeInput: handleChangeInput, contentFilterQuery: contentFilterQuery.trim() })) : (jsx(ItemsList, { collection: collection, items: collection.getTopLevel(), leavesOnly: leavesOnly, checkSelectable: checkSelectable, expanded: currentExpanded, onExpansion: handleExpansion, selected: selected, onChange: onChange, singleChoice: singleChoice, indeterminate: indeterminate })) }));
|
|
106
|
-
}, [
|
|
107
|
-
isMobile,
|
|
108
|
-
collection,
|
|
109
|
-
selected,
|
|
110
|
-
onChange,
|
|
36
|
+
const TreeSelectorComponent = (props, ref) => {
|
|
37
|
+
const { value, collection, singleChoice, leavesOnly, collapseToParentId, checkSelectable, onChange, initialValue, disabled, maxSelected, ...rest } = props;
|
|
38
|
+
const strategy = useMemo(() => new ImmutableSelectionStrategy(collection, {
|
|
39
|
+
singleChoice,
|
|
111
40
|
leavesOnly,
|
|
112
41
|
checkSelectable,
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
42
|
+
}), [collection, singleChoice, leavesOnly, checkSelectable]);
|
|
43
|
+
if (maxSelected && !collapseToParentId && !leavesOnly) {
|
|
44
|
+
throw new Error(`Magritte component TreeSelector: maxSelected can be used only with collapseToParentId or leavesOnly`);
|
|
45
|
+
}
|
|
46
|
+
const { selected, setSelected } = useSelected({
|
|
47
|
+
value,
|
|
48
|
+
initialValue,
|
|
49
|
+
strategy,
|
|
50
|
+
collection,
|
|
51
|
+
onChange,
|
|
52
|
+
maxSelected,
|
|
53
|
+
collapseToParentId,
|
|
54
|
+
});
|
|
55
|
+
const currentDisabled = useDisabled({ selected, disabled, collection, maxSelected });
|
|
56
|
+
return (jsx(TreeSelectorDummy, { ...rest, value: selected, disabled: currentDisabled, collection: collection, singleChoice: singleChoice, leavesOnly: leavesOnly, checkSelectable: checkSelectable, onChange: setSelected, ref: ref }));
|
|
57
|
+
};
|
|
58
|
+
const TreeSelector = forwardRef(TreeSelectorComponent);
|
|
126
59
|
|
|
127
60
|
export { TreeSelector };
|
|
128
61
|
//# sourceMappingURL=TreeSelector.js.map
|
package/TreeSelector.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeSelector.js","sources":["../src/TreeSelector.tsx"],"sourcesContent":["import { ReactElement, forwardRef, ForwardedRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { match } from '@hh.ru/magritte-common-fuzzy-search';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { VSpacingContainer } from '@hh.ru/magritte-ui-spacing';\nimport { ItemsList } from '@hh.ru/magritte-ui-tree-selector/ItemsList';\nimport { MobileItemsList } from '@hh.ru/magritte-ui-tree-selector/MobileItemsList';\nimport { filterWithParents } from '@hh.ru/magritte-ui-tree-selector/collection/treeCollectionHelper';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport { ControlledTreeSelectorProps, ListControls } from '@hh.ru/magritte-ui-tree-selector/types';\nimport useExpanded from '@hh.ru/magritte-ui-tree-selector/useExpanded';\nimport { useIndeterminate } from '@hh.ru/magritte-ui-tree-selector/useIndeterminate';\nimport { useRenderInput } from '@hh.ru/magritte-ui-tree-selector/useRenderInput';\n\nconst defaultCheckSelectable = () => true;\nconst defaultArray: string[] = [];\n\nconst needToApply = (query: string): boolean => {\n return !!(query && query.length);\n};\n\nexport const TreeSelector = forwardRef(\n <A extends AdditionalDefault>(\n {\n collection: initialCollection,\n checkSelectable = defaultCheckSelectable,\n initialExpanded = defaultArray,\n value: selected,\n leavesOnly,\n singleChoice,\n expanded,\n treeFilter = filterWithParents,\n suggestedNotFound = defaultArray,\n constantlySuggested = defaultArray,\n onExpand,\n onChange,\n onChangeFilterQuery,\n children,\n }: ControlledTreeSelectorProps<A>,\n ref: ForwardedRef<ListControls>\n ): ReactElement => {\n const [collection, setCollection] = useState(initialCollection);\n const currentQuery = useRef('');\n const suggestedNotFoundModels = useRef(initialCollection.getExistModels(suggestedNotFound));\n const constantlySuggestedModels = useRef(initialCollection.getExistModels(constantlySuggested));\n\n const { indeterminate } = useIndeterminate({ collection: initialCollection, selected });\n const {\n expanded: currentExpanded,\n setExpanded,\n handleExpansion,\n } = useExpanded({\n initialValue: expanded ? expanded.slice() : initialExpanded.slice(),\n controlledExpanded: expanded,\n onExpand,\n });\n const { isMobile } = useBreakpoint();\n\n const { contentFilterQuery, setInputValue, handleChangeInput, renderInput } = useRenderInput();\n\n useEffect(() => {\n const contentFilterQueryTrimmed = contentFilterQuery.trim();\n const queryWasChanged = contentFilterQueryTrimmed !== currentQuery.current.trim();\n\n if (queryWasChanged && needToApply(contentFilterQueryTrimmed)) {\n const newExpanded: string[] = [];\n const newCollection = treeFilter(\n initialCollection,\n (item) => match(contentFilterQueryTrimmed, item.text),\n isMobile\n );\n newCollection.toList().forEach((item) => {\n if (newCollection.hasChildren(item.id)) {\n // Если есть в отфильтрованной коллекции есть дочерние элементы,\n // значит они заматчились, и нужно открыть родителя.\n newExpanded.push(item.id);\n } else {\n // Если заматчился только сам родитель, показываем его\n // схлопнутым => нужно добавить его ветку в коллекцию.\n initialCollection.walkChildren(item.id, (child, parents) => {\n newCollection.addModel({ ...child }, parents[0].id);\n });\n }\n });\n\n const filteredIds = newCollection.toList().map((model) => model.id);\n\n // Если в отфильтрованной коллекции нет моделей, но заданы предложенные,\n // то показываем их\n // Если в отфильтрованной коллекции модели есть, то пробуем добавить к ним\n // всегда показывающиеся модели, если их ещё нет в коллекции\n if (!filteredIds.length && suggestedNotFoundModels.current.length) {\n suggestedNotFoundModels.current.forEach((model) => newCollection.addModel({ ...model }));\n } else {\n constantlySuggestedModels.current.forEach((model) => {\n if (!filteredIds.includes(model.id)) {\n newCollection.addModel({ ...model });\n }\n });\n }\n\n setCollection(newCollection);\n currentQuery.current = contentFilterQuery;\n onChangeFilterQuery?.(filteredIds, contentFilterQueryTrimmed);\n setExpanded(newExpanded);\n } else if (queryWasChanged) {\n // Запрос не годится для поиска.\n const newExpanded = initialExpanded.slice();\n setCollection(initialCollection);\n\n onChangeFilterQuery?.(\n initialCollection.toList().map((model) => model.id),\n contentFilterQueryTrimmed\n );\n currentQuery.current = contentFilterQuery;\n setExpanded(newExpanded);\n }\n }, [\n initialCollection,\n contentFilterQuery,\n treeFilter,\n selected,\n initialExpanded,\n setExpanded,\n isMobile,\n onChangeFilterQuery,\n ]);\n\n const renderTreeSelector = useCallback(() => {\n return (\n <VSpacingContainer default={12} gteM={0}>\n {isMobile ? (\n <MobileItemsList\n getSearchItemOrder={(model) => initialCollection.getModelLevel(model.id)}\n collection={collection}\n selected={selected}\n onChange={onChange}\n leavesOnly={leavesOnly}\n checkSelectable={checkSelectable}\n singleChoice={singleChoice}\n ref={ref}\n setInputValue={setInputValue}\n handleChangeInput={handleChangeInput}\n contentFilterQuery={contentFilterQuery.trim()}\n />\n ) : (\n <ItemsList\n collection={collection}\n items={collection.getTopLevel()}\n leavesOnly={leavesOnly}\n checkSelectable={checkSelectable}\n expanded={currentExpanded}\n onExpansion={handleExpansion}\n selected={selected}\n onChange={onChange}\n singleChoice={singleChoice}\n indeterminate={indeterminate}\n />\n )}\n </VSpacingContainer>\n );\n }, [\n isMobile,\n collection,\n selected,\n onChange,\n leavesOnly,\n checkSelectable,\n singleChoice,\n ref,\n setInputValue,\n handleChangeInput,\n contentFilterQuery,\n currentExpanded,\n handleExpansion,\n indeterminate,\n initialCollection,\n ]);\n\n return <>{children({ renderTreeSelector, renderInput })}</>;\n }\n);\n\nTreeSelector.displayName = 'TreeSelector';\n"],"names":["_jsx","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TreeSelector.js","sources":["../src/TreeSelector.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, ReactElement, useMemo } from 'react';\n\nimport { TreeSelectorDummy } from '@hh.ru/magritte-ui-tree-selector/TreeSelectorDummy';\nimport { AdditionalDefault } from '@hh.ru/magritte-ui-tree-selector/collection/types';\nimport ImmutableSelectionStrategy from '@hh.ru/magritte-ui-tree-selector/strategy/immutableSelectionStrategy';\nimport { TreeSelectorProps, ListControls } from '@hh.ru/magritte-ui-tree-selector/types';\nimport { useDisabled } from '@hh.ru/magritte-ui-tree-selector/useDisabled';\nimport { useSelected } from '@hh.ru/magritte-ui-tree-selector/useSelected';\n\nconst TreeSelectorComponent = <A extends AdditionalDefault>(\n props: TreeSelectorProps<A>,\n ref: ForwardedRef<ListControls>\n): ReactElement => {\n const {\n value,\n collection,\n singleChoice,\n leavesOnly,\n collapseToParentId,\n checkSelectable,\n onChange,\n initialValue,\n disabled,\n maxSelected,\n ...rest\n } = props;\n const strategy = useMemo(\n () =>\n new ImmutableSelectionStrategy(collection, {\n singleChoice,\n leavesOnly,\n checkSelectable,\n }),\n [collection, singleChoice, leavesOnly, checkSelectable]\n );\n\n if (maxSelected && !collapseToParentId && !leavesOnly) {\n throw new Error(\n `Magritte component TreeSelector: maxSelected can be used only with collapseToParentId or leavesOnly`\n );\n }\n\n const { selected, setSelected } = useSelected({\n value,\n initialValue,\n strategy,\n collection,\n onChange,\n maxSelected,\n collapseToParentId,\n });\n\n const currentDisabled = useDisabled({ selected, disabled, collection, maxSelected });\n\n return (\n <TreeSelectorDummy\n {...rest}\n value={selected}\n disabled={currentDisabled}\n collection={collection}\n singleChoice={singleChoice}\n leavesOnly={leavesOnly}\n checkSelectable={checkSelectable}\n onChange={setSelected}\n ref={ref}\n ></TreeSelectorDummy>\n );\n};\n\nexport const TreeSelector = forwardRef(TreeSelectorComponent);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,qBAAqB,GAAG,CAC1B,KAA2B,EAC3B,GAA+B,KACjB;IACd,MAAM,EACF,KAAK,EACL,UAAU,EACV,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,GAAG,IAAI,EACV,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,OAAO,CACpB,MACI,IAAI,0BAA0B,CAAC,UAAU,EAAE;QACvC,YAAY;QACZ,UAAU;QACV,eAAe;KAClB,CAAC,EACN,CAAC,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,CAAC,CAC1D,CAAC;AAEF,IAAA,IAAI,WAAW,IAAI,CAAC,kBAAkB,IAAI,CAAC,UAAU,EAAE;AACnD,QAAA,MAAM,IAAI,KAAK,CACX,CAAA,mGAAA,CAAqG,CACxG,CAAC;AACL,KAAA;AAED,IAAA,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC;QAC1C,KAAK;QACL,YAAY;QACZ,QAAQ;QACR,UAAU;QACV,QAAQ;QACR,WAAW;QACX,kBAAkB;AACrB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;AAErF,IAAA,QACIA,GAAC,CAAA,iBAAiB,EACV,EAAA,GAAA,IAAI,EACR,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,eAAe,EACzB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,CACS,EACvB;AACN,CAAC,CAAC;MAEW,YAAY,GAAG,UAAU,CAAC,qBAAqB;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AdditionalDefault } from './collection/types';
|
|
3
|
+
import { ListControls } from './types';
|
|
4
|
+
export declare const TreeSelectorDummy: import("react").ForwardRefExoticComponent<import("./types").BaseTreeSelectorProps<AdditionalDefault> & import("@hh.ru/magritte-ui-tree-selector/types").DummyProps & import("react").RefAttributes<ListControls>>;
|