@hh.ru/magritte-ui-tree-selector 4.5.8 → 4.6.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.js +1 -1
- package/ItemContent.js +1 -1
- package/ItemsList.js +1 -1
- package/MobileItemsList.js +1 -1
- package/TreeSelector.js +1 -1
- package/TreeSelectorDummy.js +1 -1
- package/TreeSelectorWrapper.js +14 -3
- package/TreeSelectorWrapper.js.map +1 -1
- package/index.css +1095 -1095
- package/index.js +1 -1
- package/package.json +13 -13
- package/tree-selector-item-DYywb3wv.js +5 -0
- package/tree-selector-item-DYywb3wv.js.map +1 -0
- package/useAnimationTimeout.js +1 -1
- package/tree-selector-item-D6t6hrax.js +0 -5
- package/tree-selector-item-D6t6hrax.js.map +0 -1
package/Item.js
CHANGED
|
@@ -10,7 +10,7 @@ import '@hh.ru/magritte-ui-checkbox-radio';
|
|
|
10
10
|
import './TreeSelectorItemBase.js';
|
|
11
11
|
import '@hh.ru/magritte-ui-cell';
|
|
12
12
|
import '@hh.ru/magritte-ui-typography';
|
|
13
|
-
import './tree-selector-item-
|
|
13
|
+
import './tree-selector-item-DYywb3wv.js';
|
|
14
14
|
|
|
15
15
|
const ONE_BOX_MARGIN = 36;
|
|
16
16
|
const getMargin = (allBoxesCount, hasShift, hasIndent) => {
|
package/ItemContent.js
CHANGED
|
@@ -7,7 +7,7 @@ import { DotFilledSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-
|
|
|
7
7
|
import { Action } from './Action.js';
|
|
8
8
|
import { TreeSelectorItemBase } from './TreeSelectorItemBase.js';
|
|
9
9
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
10
|
-
import { s as styles } from './tree-selector-item-
|
|
10
|
+
import { s as styles } from './tree-selector-item-DYywb3wv.js';
|
|
11
11
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
12
12
|
import '@hh.ru/magritte-ui-cell';
|
|
13
13
|
|
package/ItemsList.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useRef, useMemo, useCallback, useEffect } from 'react';
|
|
4
4
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
5
5
|
import { Item } from './Item.js';
|
|
6
|
-
import { s as styles } from './tree-selector-item-
|
|
6
|
+
import { s as styles } from './tree-selector-item-DYywb3wv.js';
|
|
7
7
|
import 'classnames';
|
|
8
8
|
import './ItemContent.js';
|
|
9
9
|
import '@hh.ru/magritte-common-keyboard';
|
package/MobileItemsList.js
CHANGED
|
@@ -10,7 +10,7 @@ import { Action } from './Action.js';
|
|
|
10
10
|
import { MobileDelimiter } from './MobileDelimiter.js';
|
|
11
11
|
import { MobileItem } from './MobileItem.js';
|
|
12
12
|
import { MobileParentItem } from './MobileParentItem.js';
|
|
13
|
-
import { s as styles } from './tree-selector-item-
|
|
13
|
+
import { s as styles } from './tree-selector-item-DYywb3wv.js';
|
|
14
14
|
import '@hh.ru/magritte-ui-checkbox-radio';
|
|
15
15
|
import '@hh.ru/magritte-ui-card';
|
|
16
16
|
import '@hh.ru/magritte-ui-typography';
|
package/TreeSelector.js
CHANGED
|
@@ -19,7 +19,7 @@ import '@hh.ru/magritte-ui-checkbox-radio';
|
|
|
19
19
|
import './TreeSelectorItemBase.js';
|
|
20
20
|
import '@hh.ru/magritte-ui-cell';
|
|
21
21
|
import '@hh.ru/magritte-ui-typography';
|
|
22
|
-
import './tree-selector-item-
|
|
22
|
+
import './tree-selector-item-DYywb3wv.js';
|
|
23
23
|
import './MobileItemsList.js';
|
|
24
24
|
import '@hh.ru/magritte-common-func-utils';
|
|
25
25
|
import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
package/TreeSelectorDummy.js
CHANGED
|
@@ -21,7 +21,7 @@ import '@hh.ru/magritte-ui-checkbox-radio';
|
|
|
21
21
|
import './TreeSelectorItemBase.js';
|
|
22
22
|
import '@hh.ru/magritte-ui-cell';
|
|
23
23
|
import '@hh.ru/magritte-ui-typography';
|
|
24
|
-
import './tree-selector-item-
|
|
24
|
+
import './tree-selector-item-DYywb3wv.js';
|
|
25
25
|
import '@hh.ru/magritte-common-func-utils';
|
|
26
26
|
import '@hh.ru/magritte-ui-checkable-card/CheckableCardElement';
|
|
27
27
|
import './MobileDelimiter.js';
|
package/TreeSelectorWrapper.js
CHANGED
|
@@ -5,6 +5,10 @@ import { useResize } from '@hh.ru/magritte-common-resize';
|
|
|
5
5
|
import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
|
|
6
6
|
import { CustomScrollContext } from '@hh.ru/magritte-internal-custom-scroll';
|
|
7
7
|
|
|
8
|
+
const toNumber = (value) => {
|
|
9
|
+
const result = parseFloat(value);
|
|
10
|
+
return !Number.isNaN(result) ? result : 0;
|
|
11
|
+
};
|
|
8
12
|
const TreeSelectorWrapper = ({ forwardRef, ...props }) => {
|
|
9
13
|
const [height, setHeight] = useState(0);
|
|
10
14
|
const wrapperRef = useRef(null);
|
|
@@ -13,9 +17,16 @@ const TreeSelectorWrapper = ({ forwardRef, ...props }) => {
|
|
|
13
17
|
const calcHeight = useCallback(() => {
|
|
14
18
|
if (wrapperRef.current?.parentElement) {
|
|
15
19
|
const style = window.getComputedStyle(wrapperRef.current.parentElement) || {};
|
|
16
|
-
const paddingTop =
|
|
17
|
-
const paddingBottom =
|
|
18
|
-
const
|
|
20
|
+
const paddingTop = toNumber(style.paddingTop || '0');
|
|
21
|
+
const paddingBottom = toNumber(style.paddingBottom || '0');
|
|
22
|
+
const borderTop = toNumber(style.borderTop || '0');
|
|
23
|
+
const borderBottom = toNumber(style.borderBottom || '0');
|
|
24
|
+
// срабатывает до старта анимации модала, поэтому можно использовать getBoundingClientRect
|
|
25
|
+
const height = wrapperRef.current.parentElement.getBoundingClientRect().height -
|
|
26
|
+
paddingTop -
|
|
27
|
+
paddingBottom -
|
|
28
|
+
borderTop -
|
|
29
|
+
borderBottom;
|
|
19
30
|
setHeight(height);
|
|
20
31
|
}
|
|
21
32
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeSelectorWrapper.js","sources":["../src/TreeSelectorWrapper.tsx"],"sourcesContent":["import {\n ReactNode,\n PropsWithChildren,\n useRef,\n useState,\n useLayoutEffect,\n useCallback,\n useEffect,\n useContext,\n ForwardedRef,\n ReactElement,\n isValidElement,\n} from 'react';\n\nimport { useResize } from '@hh.ru/magritte-common-resize';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { CustomScrollContext } from '@hh.ru/magritte-internal-custom-scroll';\nimport { FcWithFlag } from '@hh.ru/magritte-types';\n\ninterface TreeSelectorWrapperProps extends PropsWithChildren {\n forwardRef: ForwardedRef<HTMLDivElement>;\n}\n\nexport const TreeSelectorWrapper: FcWithFlag<TreeSelectorWrapperProps, 'isTreeSelectorWrapper'> = ({\n forwardRef,\n ...props\n}) => {\n const [height, setHeight] = useState(0);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const wrapperMultiRef = useMultipleRefs(wrapperRef, forwardRef);\n const scrollContext = useContext(CustomScrollContext);\n\n const calcHeight = useCallback(() => {\n if (wrapperRef.current?.parentElement) {\n const style = window.getComputedStyle(wrapperRef.current.parentElement) || {};\n const paddingTop =
|
|
1
|
+
{"version":3,"file":"TreeSelectorWrapper.js","sources":["../src/TreeSelectorWrapper.tsx"],"sourcesContent":["import {\n ReactNode,\n PropsWithChildren,\n useRef,\n useState,\n useLayoutEffect,\n useCallback,\n useEffect,\n useContext,\n ForwardedRef,\n ReactElement,\n isValidElement,\n} from 'react';\n\nimport { useResize } from '@hh.ru/magritte-common-resize';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { CustomScrollContext } from '@hh.ru/magritte-internal-custom-scroll';\nimport { FcWithFlag } from '@hh.ru/magritte-types';\n\ninterface TreeSelectorWrapperProps extends PropsWithChildren {\n forwardRef: ForwardedRef<HTMLDivElement>;\n}\n\nconst toNumber = (value: string) => {\n const result = parseFloat(value);\n return !Number.isNaN(result) ? result : 0;\n};\n\nexport const TreeSelectorWrapper: FcWithFlag<TreeSelectorWrapperProps, 'isTreeSelectorWrapper'> = ({\n forwardRef,\n ...props\n}) => {\n const [height, setHeight] = useState(0);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const wrapperMultiRef = useMultipleRefs(wrapperRef, forwardRef);\n const scrollContext = useContext(CustomScrollContext);\n\n const calcHeight = useCallback(() => {\n if (wrapperRef.current?.parentElement) {\n const style = window.getComputedStyle(wrapperRef.current.parentElement) || {};\n const paddingTop = toNumber(style.paddingTop || '0');\n const paddingBottom = toNumber(style.paddingBottom || '0');\n const borderTop = toNumber(style.borderTop || '0');\n const borderBottom = toNumber(style.borderBottom || '0');\n // срабатывает до старта анимации модала, поэтому можно использовать getBoundingClientRect\n const height =\n wrapperRef.current.parentElement.getBoundingClientRect().height -\n paddingTop -\n paddingBottom -\n borderTop -\n borderBottom;\n setHeight(height);\n }\n }, []);\n\n useLayoutEffect(() => {\n calcHeight();\n }, [calcHeight]);\n\n useEffect(() => {\n const wrapperElement = wrapperRef.current;\n if (!wrapperElement || !scrollContext) {\n return void 0;\n }\n\n const handleTouchMove = (event: TouchEvent) => {\n event.stopPropagation();\n };\n\n wrapperElement.addEventListener('touchmove', handleTouchMove);\n return () => wrapperElement.removeEventListener('touchmove', handleTouchMove);\n }, [scrollContext]);\n\n useResize(calcHeight);\n\n return (\n <div style={{ height, overflow: 'auto' }} ref={wrapperMultiRef} data-qa=\"tree-selector-container\" {...props} />\n );\n};\n\nTreeSelectorWrapper.isTreeSelectorWrapper = true;\n\nexport const isValidTreeSelectorWrapper = (\n component: ReactNode\n): component is ReactElement<TreeSelectorWrapperProps> => {\n return (\n isValidElement(component) && typeof component.type === 'function' && 'isTreeSelectorWrapper' in component.type\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAuBA,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAI;AAC/B,IAAA,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;AACjC,IAAA,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEK,MAAM,mBAAmB,GAAkE,CAAC,EAC/F,UAAU,EACV,GAAG,KAAK,EACX,KAAI;IACD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACxC,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,eAAe,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAChE,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;AAEtD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAChC,QAAA,IAAI,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE;AACnC,YAAA,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC9E,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAU,IAAI,GAAG,CAAC,CAAC;YACrD,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,IAAI,GAAG,CAAC,CAAC;YAC3D,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,IAAI,GAAG,CAAC,CAAC;YACnD,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,GAAG,CAAC,CAAC;;YAEzD,MAAM,MAAM,GACR,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,MAAM;gBAC/D,UAAU;gBACV,aAAa;gBACb,SAAS;AACT,gBAAA,YAAY,CAAC;YACjB,SAAS,CAAC,MAAM,CAAC,CAAC;SACrB;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,eAAe,CAAC,MAAK;AACjB,QAAA,UAAU,EAAE,CAAC;AACjB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAC;AAC1C,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,aAAa,EAAE;YACnC,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,MAAM,eAAe,GAAG,CAAC,KAAiB,KAAI;YAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;AAC5B,SAAC,CAAC;AAEF,QAAA,cAAc,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QAC9D,OAAO,MAAM,cAAc,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAClF,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,SAAS,CAAC,UAAU,CAAC,CAAC;IAEtB,QACIA,aAAK,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,eAAe,EAAA,SAAA,EAAU,yBAAyB,EAAK,GAAA,KAAK,EAAI,CAAA,EACjH;AACN,EAAE;AAEF,mBAAmB,CAAC,qBAAqB,GAAG,IAAI,CAAC;AAEpC,MAAA,0BAA0B,GAAG,CACtC,SAAoB,KACiC;AACrD,IAAA,QACI,cAAc,CAAC,SAAS,CAAC,IAAI,OAAO,SAAS,CAAC,IAAI,KAAK,UAAU,IAAI,uBAAuB,IAAI,SAAS,CAAC,IAAI,EAChH;AACN;;;;"}
|