@chayns-components/core 5.0.0-beta.1308 → 5.0.0-beta.1309
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/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js +6 -5
- package/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js.map +1 -1
- package/lib/esm/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js +6 -5
- package/lib/esm/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js.map +1 -1
- package/package.json +2 -2
package/lib/cjs/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js
CHANGED
|
@@ -24,7 +24,7 @@ const DelayedDropdownContent = ({
|
|
|
24
24
|
transform
|
|
25
25
|
}) => {
|
|
26
26
|
const [animationState, setAnimationState] = (0, _react.useState)(AnimationType.None);
|
|
27
|
-
const ref = (0, _react.useRef)(
|
|
27
|
+
const ref = (0, _react.useRef)();
|
|
28
28
|
const timeoutRef = (0, _react.useRef)();
|
|
29
29
|
const measureElement = (0, _react.useCallback)(() => {
|
|
30
30
|
if (ref.current) {
|
|
@@ -66,9 +66,6 @@ const DelayedDropdownContent = ({
|
|
|
66
66
|
(0, _react.useEffect)(() => {
|
|
67
67
|
if (shouldShowContent) {
|
|
68
68
|
setAnimationState(AnimationType.Hidden);
|
|
69
|
-
window.setTimeout(() => {
|
|
70
|
-
measureElement();
|
|
71
|
-
}, 1);
|
|
72
69
|
} else {
|
|
73
70
|
clearTimeout(timeoutRef.current);
|
|
74
71
|
setAnimationState(prevState => {
|
|
@@ -82,11 +79,15 @@ const DelayedDropdownContent = ({
|
|
|
82
79
|
}, ANIMATION_DELAY_MS);
|
|
83
80
|
}
|
|
84
81
|
}, [measureElement, shouldShowContent]);
|
|
82
|
+
const refCallback = (0, _react.useCallback)(reference => {
|
|
83
|
+
ref.current = reference ?? undefined;
|
|
84
|
+
measureElement();
|
|
85
|
+
}, [measureElement]);
|
|
85
86
|
if (animationState === AnimationType.None) {
|
|
86
87
|
return null;
|
|
87
88
|
}
|
|
88
89
|
return /*#__PURE__*/_react.default.createElement(_DelayedDropdownContent.StyledMotionDelayedDropdownContent, {
|
|
89
|
-
ref:
|
|
90
|
+
ref: refCallback,
|
|
90
91
|
$coordinates: coordinates,
|
|
91
92
|
$transform: transform,
|
|
92
93
|
$shouldHideContent: animationState === AnimationType.Hidden,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DelayedDropdownContent.js","names":["_react","_interopRequireWildcard","require","_DelayedDropdownContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","useState","None","ref","useRef","timeoutRef","measureElement","useCallback","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","useEffect","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","createElement","StyledMotionDelayedDropdownContent","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","displayName","_default","exports"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';\nimport {\n DropdownCoordinates,\n DropdownMeasurements,\n DropdownTransform,\n} from '../../../types/dropdown';\n\nconst ANIMATION_DELAY_MS = 200;\n\nenum AnimationType {\n None,\n Hidden,\n Visible,\n FadeIn,\n FadeOut,\n}\n\nexport type DelayedDropdownContentProps = {\n /**\n * The content to be rendered inside the dropdown.\n */\n children: ReactNode;\n /**\n * The absolute coordinates used to position the dropdown.\n */\n coordinates: DropdownCoordinates;\n /**\n * Callback that returns the dimensions of the dropdown after measuring.\n */\n onMeasure?: (measurements: DropdownMeasurements) => void;\n /**\n * Whether the dropdown should be rendered and animated in.\n */\n shouldShowContent: boolean;\n /**\n * CSS transform data (e.g. translate offsets) to apply for positioning.\n */\n transform: DropdownTransform;\n};\n\nconst DelayedDropdownContent: FC<DelayedDropdownContentProps> = ({\n children,\n shouldShowContent,\n onMeasure,\n coordinates,\n transform,\n}) => {\n const [animationState, setAnimationState] = useState<AnimationType>(AnimationType.None);\n\n const ref = useRef<HTMLDivElement>(
|
|
1
|
+
{"version":3,"file":"DelayedDropdownContent.js","names":["_react","_interopRequireWildcard","require","_DelayedDropdownContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","useState","None","ref","useRef","timeoutRef","measureElement","useCallback","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","useEffect","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","refCallback","reference","undefined","createElement","StyledMotionDelayedDropdownContent","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","displayName","_default","exports"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';\nimport {\n DropdownCoordinates,\n DropdownMeasurements,\n DropdownTransform,\n} from '../../../types/dropdown';\n\nconst ANIMATION_DELAY_MS = 200;\n\nenum AnimationType {\n None,\n Hidden,\n Visible,\n FadeIn,\n FadeOut,\n}\n\nexport type DelayedDropdownContentProps = {\n /**\n * The content to be rendered inside the dropdown.\n */\n children: ReactNode;\n /**\n * The absolute coordinates used to position the dropdown.\n */\n coordinates: DropdownCoordinates;\n /**\n * Callback that returns the dimensions of the dropdown after measuring.\n */\n onMeasure?: (measurements: DropdownMeasurements) => void;\n /**\n * Whether the dropdown should be rendered and animated in.\n */\n shouldShowContent: boolean;\n /**\n * CSS transform data (e.g. translate offsets) to apply for positioning.\n */\n transform: DropdownTransform;\n};\n\nconst DelayedDropdownContent: FC<DelayedDropdownContentProps> = ({\n children,\n shouldShowContent,\n onMeasure,\n coordinates,\n transform,\n}) => {\n const [animationState, setAnimationState] = useState<AnimationType>(AnimationType.None);\n\n const ref = useRef<HTMLDivElement>();\n const timeoutRef = useRef<number>();\n\n const measureElement = useCallback(() => {\n if (ref.current) {\n const { height, width, x, y } = ref.current.getBoundingClientRect();\n const { scrollHeight } = ref.current;\n\n if (typeof onMeasure === 'function') {\n onMeasure({\n x,\n y,\n height,\n scrollHeight,\n width,\n element: ref.current,\n });\n }\n\n setAnimationState(AnimationType.FadeIn);\n\n timeoutRef.current = window.setTimeout(() => {\n setAnimationState(AnimationType.Visible);\n }, ANIMATION_DELAY_MS);\n }\n }, [onMeasure]);\n\n useEffect(() => {\n if (!shouldShowContent) return () => {};\n\n const observer = new ResizeObserver(() => {\n measureElement();\n });\n\n if (ref.current) {\n observer.observe(ref.current);\n }\n\n return () => observer.disconnect();\n }, [measureElement, shouldShowContent]);\n\n useEffect(() => {\n if (shouldShowContent) {\n setAnimationState(AnimationType.Hidden);\n } else {\n clearTimeout(timeoutRef.current);\n\n setAnimationState((prevState) => {\n if (prevState === AnimationType.None) {\n return prevState;\n }\n\n return AnimationType.FadeOut;\n });\n\n window.setTimeout(() => {\n setAnimationState(AnimationType.None);\n }, ANIMATION_DELAY_MS);\n }\n }, [measureElement, shouldShowContent]);\n\n const refCallback = useCallback(\n (reference: HTMLDivElement | null) => {\n ref.current = reference ?? undefined;\n measureElement();\n },\n [measureElement],\n );\n\n if (animationState === AnimationType.None) {\n return null;\n }\n\n return (\n <StyledMotionDelayedDropdownContent\n ref={refCallback}\n $coordinates={coordinates}\n $transform={transform}\n $shouldHideContent={animationState === AnimationType.Hidden}\n animate={{\n opacity: [AnimationType.FadeIn, AnimationType.Visible].includes(animationState)\n ? 1\n : 0,\n }}\n transition={{ duration: ANIMATION_DELAY_MS / 1000, type: 'tween' }}\n >\n {children}\n </StyledMotionDelayedDropdownContent>\n );\n};\n\nDelayedDropdownContent.displayName = 'DelayedDropdownContent';\n\nexport default DelayedDropdownContent;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/esm/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.js
CHANGED
|
@@ -17,7 +17,7 @@ const DelayedDropdownContent = ({
|
|
|
17
17
|
transform
|
|
18
18
|
}) => {
|
|
19
19
|
const [animationState, setAnimationState] = useState(AnimationType.None);
|
|
20
|
-
const ref = useRef(
|
|
20
|
+
const ref = useRef();
|
|
21
21
|
const timeoutRef = useRef();
|
|
22
22
|
const measureElement = useCallback(() => {
|
|
23
23
|
if (ref.current) {
|
|
@@ -59,9 +59,6 @@ const DelayedDropdownContent = ({
|
|
|
59
59
|
useEffect(() => {
|
|
60
60
|
if (shouldShowContent) {
|
|
61
61
|
setAnimationState(AnimationType.Hidden);
|
|
62
|
-
window.setTimeout(() => {
|
|
63
|
-
measureElement();
|
|
64
|
-
}, 1);
|
|
65
62
|
} else {
|
|
66
63
|
clearTimeout(timeoutRef.current);
|
|
67
64
|
setAnimationState(prevState => {
|
|
@@ -75,11 +72,15 @@ const DelayedDropdownContent = ({
|
|
|
75
72
|
}, ANIMATION_DELAY_MS);
|
|
76
73
|
}
|
|
77
74
|
}, [measureElement, shouldShowContent]);
|
|
75
|
+
const refCallback = useCallback(reference => {
|
|
76
|
+
ref.current = reference ?? undefined;
|
|
77
|
+
measureElement();
|
|
78
|
+
}, [measureElement]);
|
|
78
79
|
if (animationState === AnimationType.None) {
|
|
79
80
|
return null;
|
|
80
81
|
}
|
|
81
82
|
return /*#__PURE__*/React.createElement(StyledMotionDelayedDropdownContent, {
|
|
82
|
-
ref:
|
|
83
|
+
ref: refCallback,
|
|
83
84
|
$coordinates: coordinates,
|
|
84
85
|
$transform: transform,
|
|
85
86
|
$shouldHideContent: animationState === AnimationType.Hidden,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DelayedDropdownContent.js","names":["React","useCallback","useEffect","useRef","useState","StyledMotionDelayedDropdownContent","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","None","ref","timeoutRef","measureElement","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","createElement","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","displayName"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';\nimport {\n DropdownCoordinates,\n DropdownMeasurements,\n DropdownTransform,\n} from '../../../types/dropdown';\n\nconst ANIMATION_DELAY_MS = 200;\n\nenum AnimationType {\n None,\n Hidden,\n Visible,\n FadeIn,\n FadeOut,\n}\n\nexport type DelayedDropdownContentProps = {\n /**\n * The content to be rendered inside the dropdown.\n */\n children: ReactNode;\n /**\n * The absolute coordinates used to position the dropdown.\n */\n coordinates: DropdownCoordinates;\n /**\n * Callback that returns the dimensions of the dropdown after measuring.\n */\n onMeasure?: (measurements: DropdownMeasurements) => void;\n /**\n * Whether the dropdown should be rendered and animated in.\n */\n shouldShowContent: boolean;\n /**\n * CSS transform data (e.g. translate offsets) to apply for positioning.\n */\n transform: DropdownTransform;\n};\n\nconst DelayedDropdownContent: FC<DelayedDropdownContentProps> = ({\n children,\n shouldShowContent,\n onMeasure,\n coordinates,\n transform,\n}) => {\n const [animationState, setAnimationState] = useState<AnimationType>(AnimationType.None);\n\n const ref = useRef<HTMLDivElement>(
|
|
1
|
+
{"version":3,"file":"DelayedDropdownContent.js","names":["React","useCallback","useEffect","useRef","useState","StyledMotionDelayedDropdownContent","ANIMATION_DELAY_MS","AnimationType","DelayedDropdownContent","children","shouldShowContent","onMeasure","coordinates","transform","animationState","setAnimationState","None","ref","timeoutRef","measureElement","current","height","width","x","y","getBoundingClientRect","scrollHeight","element","FadeIn","window","setTimeout","Visible","observer","ResizeObserver","observe","disconnect","Hidden","clearTimeout","prevState","FadeOut","refCallback","reference","undefined","createElement","$coordinates","$transform","$shouldHideContent","animate","opacity","includes","transition","duration","type","displayName"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { StyledMotionDelayedDropdownContent } from './DelayedDropdownContent.styles';\nimport {\n DropdownCoordinates,\n DropdownMeasurements,\n DropdownTransform,\n} from '../../../types/dropdown';\n\nconst ANIMATION_DELAY_MS = 200;\n\nenum AnimationType {\n None,\n Hidden,\n Visible,\n FadeIn,\n FadeOut,\n}\n\nexport type DelayedDropdownContentProps = {\n /**\n * The content to be rendered inside the dropdown.\n */\n children: ReactNode;\n /**\n * The absolute coordinates used to position the dropdown.\n */\n coordinates: DropdownCoordinates;\n /**\n * Callback that returns the dimensions of the dropdown after measuring.\n */\n onMeasure?: (measurements: DropdownMeasurements) => void;\n /**\n * Whether the dropdown should be rendered and animated in.\n */\n shouldShowContent: boolean;\n /**\n * CSS transform data (e.g. translate offsets) to apply for positioning.\n */\n transform: DropdownTransform;\n};\n\nconst DelayedDropdownContent: FC<DelayedDropdownContentProps> = ({\n children,\n shouldShowContent,\n onMeasure,\n coordinates,\n transform,\n}) => {\n const [animationState, setAnimationState] = useState<AnimationType>(AnimationType.None);\n\n const ref = useRef<HTMLDivElement>();\n const timeoutRef = useRef<number>();\n\n const measureElement = useCallback(() => {\n if (ref.current) {\n const { height, width, x, y } = ref.current.getBoundingClientRect();\n const { scrollHeight } = ref.current;\n\n if (typeof onMeasure === 'function') {\n onMeasure({\n x,\n y,\n height,\n scrollHeight,\n width,\n element: ref.current,\n });\n }\n\n setAnimationState(AnimationType.FadeIn);\n\n timeoutRef.current = window.setTimeout(() => {\n setAnimationState(AnimationType.Visible);\n }, ANIMATION_DELAY_MS);\n }\n }, [onMeasure]);\n\n useEffect(() => {\n if (!shouldShowContent) return () => {};\n\n const observer = new ResizeObserver(() => {\n measureElement();\n });\n\n if (ref.current) {\n observer.observe(ref.current);\n }\n\n return () => observer.disconnect();\n }, [measureElement, shouldShowContent]);\n\n useEffect(() => {\n if (shouldShowContent) {\n setAnimationState(AnimationType.Hidden);\n } else {\n clearTimeout(timeoutRef.current);\n\n setAnimationState((prevState) => {\n if (prevState === AnimationType.None) {\n return prevState;\n }\n\n return AnimationType.FadeOut;\n });\n\n window.setTimeout(() => {\n setAnimationState(AnimationType.None);\n }, ANIMATION_DELAY_MS);\n }\n }, [measureElement, shouldShowContent]);\n\n const refCallback = useCallback(\n (reference: HTMLDivElement | null) => {\n ref.current = reference ?? undefined;\n measureElement();\n },\n [measureElement],\n );\n\n if (animationState === AnimationType.None) {\n return null;\n }\n\n return (\n <StyledMotionDelayedDropdownContent\n ref={refCallback}\n $coordinates={coordinates}\n $transform={transform}\n $shouldHideContent={animationState === AnimationType.Hidden}\n animate={{\n opacity: [AnimationType.FadeIn, AnimationType.Visible].includes(animationState)\n ? 1\n : 0,\n }}\n transition={{ duration: ANIMATION_DELAY_MS / 1000, type: 'tween' }}\n >\n {children}\n </StyledMotionDelayedDropdownContent>\n );\n};\n\nDelayedDropdownContent.displayName = 'DelayedDropdownContent';\n\nexport default DelayedDropdownContent;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1309",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "8a72164c9de71a1bb735d4fc7814b8010fa241f3"
|
|
90
90
|
}
|