@impulse-ui-native/flyout 2.4.0 → 2.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/dist/hooks/use-flyout-lifecycle.hook.js +5 -3
- package/dist/hooks/use-flyout-lifecycle.hook.js.map +1 -1
- package/package.json +6 -6
- package/dist/constants/flyout-handle.constants.d.mts +0 -3
- package/dist/constants/flyout-handle.constants.js +0 -5
- package/dist/constants/flyout-handle.constants.js.map +0 -1
- package/dist/constants/index.d.mts +0 -1
- package/dist/constants/index.js +0 -2
- package/dist/constants/index.js.map +0 -1
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
withTiming
|
|
8
8
|
} from "react-native-reanimated";
|
|
9
9
|
import { scheduleOnRN } from "react-native-worklets";
|
|
10
|
-
import {
|
|
10
|
+
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
11
11
|
const EnterAnimationConfig = {
|
|
12
12
|
damping: 50,
|
|
13
13
|
stiffness: 300,
|
|
@@ -31,6 +31,8 @@ function useFlyoutLifecycle(props) {
|
|
|
31
31
|
onOpen,
|
|
32
32
|
onOpenFinished
|
|
33
33
|
} = props;
|
|
34
|
+
const tokens = useComponentsTokens();
|
|
35
|
+
const handleHeight = tokens.flyout.handle.containerHeight;
|
|
34
36
|
const [mounted, setMounted] = useState(open);
|
|
35
37
|
const [measuredHeight, setMeasuredHeight] = useState(null);
|
|
36
38
|
const [isTouchable, setIsTouchable] = useState(false);
|
|
@@ -47,11 +49,11 @@ function useFlyoutLifecycle(props) {
|
|
|
47
49
|
if (measuredHeight !== null) {
|
|
48
50
|
return;
|
|
49
51
|
}
|
|
50
|
-
const height = event.nativeEvent.layout.height + safeAreaInset +
|
|
52
|
+
const height = event.nativeEvent.layout.height + safeAreaInset + handleHeight;
|
|
51
53
|
translateY.value = placement === "top" ? -height : height;
|
|
52
54
|
setMeasuredHeight(height);
|
|
53
55
|
},
|
|
54
|
-
[measuredHeight, placement, safeAreaInset, translateY]
|
|
56
|
+
[handleHeight, measuredHeight, placement, safeAreaInset, translateY]
|
|
55
57
|
);
|
|
56
58
|
const finishClosing = useCallback(
|
|
57
59
|
(finishedTransitionId) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-flyout-lifecycle.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { LayoutChangeEvent } from \"react-native\";\nimport { Gesture } from \"react-native-gesture-handler\";\nimport {\n Easing,\n useSharedValue,\n withSpring,\n withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-flyout-lifecycle.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { LayoutChangeEvent } from \"react-native\";\nimport { Gesture } from \"react-native-gesture-handler\";\nimport {\n Easing,\n useSharedValue,\n withSpring,\n withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { FlyoutProps } from \"../types\";\n\nconst EnterAnimationConfig = {\n damping: 50,\n stiffness: 300,\n mass: 1,\n overshootClamping: true,\n};\n\nconst ExitAnimationConfig = {\n duration: 150,\n easing: Easing.in(Easing.quad),\n};\n\ninterface UseFlyoutLifecycleProps {\n id: FlyoutProps[\"id\"];\n open: FlyoutProps[\"open\"];\n placement: NonNullable<FlyoutProps[\"placement\"]>;\n screenHeight: number;\n safeAreaInset: number;\n overlayVisibleOpacity: number;\n onClose: FlyoutProps[\"onClose\"];\n onCloseFinished: FlyoutProps[\"onCloseFinished\"];\n onOpen: FlyoutProps[\"onOpen\"];\n onOpenFinished: FlyoutProps[\"onOpenFinished\"];\n}\n\nexport function useFlyoutLifecycle(props: UseFlyoutLifecycleProps) {\n const {\n id,\n open,\n placement,\n screenHeight,\n safeAreaInset,\n overlayVisibleOpacity,\n onClose,\n onCloseFinished,\n onOpen,\n onOpenFinished,\n } = props;\n\n const tokens = useComponentsTokens();\n const handleHeight = tokens.flyout.handle.containerHeight;\n\n const [mounted, setMounted] = useState(open);\n const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\n const [isTouchable, setIsTouchable] = useState(false);\n\n const didOpen = useRef(false);\n const isClosing = useRef(false);\n const transitionId = useRef(0);\n\n const translateY = useSharedValue(\n placement === \"top\" ? -screenHeight : screenHeight,\n );\n const opacity = useSharedValue(0);\n\n const hasMeasured = measuredHeight !== null;\n\n const onLayout = useCallback(\n (event: LayoutChangeEvent) => {\n if (measuredHeight !== null) {\n return;\n }\n\n const height =\n event.nativeEvent.layout.height + safeAreaInset + handleHeight;\n\n translateY.value = placement === \"top\" ? -height : height;\n setMeasuredHeight(height);\n },\n [handleHeight, measuredHeight, placement, safeAreaInset, translateY],\n );\n\n const finishClosing = useCallback(\n (finishedTransitionId: number) => {\n if (!isClosing.current || transitionId.current !== finishedTransitionId) {\n return;\n }\n\n isClosing.current = false;\n setMounted(false);\n setMeasuredHeight(null);\n onCloseFinished?.(id);\n },\n [id, onCloseFinished],\n );\n\n const close = useCallback(() => {\n if (measuredHeight === null || isClosing.current) {\n return;\n }\n\n isClosing.current = true;\n transitionId.current += 1;\n setIsTouchable(false);\n onClose?.(id);\n\n const target = placement === \"top\" ? -measuredHeight : measuredHeight;\n const closingTransitionId = transitionId.current;\n\n translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\n if (finished) {\n scheduleOnRN(finishClosing, closingTransitionId);\n }\n });\n opacity.value = withTiming(0, ExitAnimationConfig);\n didOpen.current = false;\n }, [\n finishClosing,\n id,\n measuredHeight,\n onClose,\n opacity,\n placement,\n translateY,\n ]);\n\n const dragGesture = useMemo(\n () =>\n Gesture.Pan()\n .enabled(hasMeasured)\n .onUpdate((event) => {\n if (placement === \"bottom\") {\n translateY.value = Math.max(0, event.translationY);\n return;\n }\n\n translateY.value = Math.min(0, event.translationY);\n })\n .onEnd((event) => {\n if (measuredHeight === null) {\n return;\n }\n\n const shouldClose =\n placement === \"bottom\"\n ? event.translationY > measuredHeight * 0.5 ||\n event.velocityY > 1500\n : event.translationY < -measuredHeight * 0.5 ||\n event.velocityY < -1500;\n\n if (shouldClose) {\n scheduleOnRN(close);\n return;\n }\n\n translateY.value = withSpring(0, EnterAnimationConfig);\n opacity.value = withSpring(\n overlayVisibleOpacity,\n EnterAnimationConfig,\n );\n }),\n [\n close,\n hasMeasured,\n measuredHeight,\n opacity,\n overlayVisibleOpacity,\n placement,\n translateY,\n ],\n );\n\n useEffect(() => {\n if (!open) {\n return;\n }\n\n transitionId.current += 1;\n setIsTouchable(false);\n isClosing.current = false;\n didOpen.current = false;\n\n if (!mounted) {\n setMounted(true);\n setMeasuredHeight(null);\n translateY.value = placement === \"top\" ? -screenHeight : screenHeight;\n opacity.value = 0;\n }\n }, [mounted, open, opacity, placement, screenHeight, translateY]);\n\n useEffect(() => {\n if (!open || measuredHeight === null || didOpen.current) {\n return;\n }\n\n setIsTouchable(true);\n onOpen?.(id);\n\n translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {\n if (finished && onOpenFinished) {\n scheduleOnRN(onOpenFinished, id);\n }\n });\n opacity.value = withSpring(overlayVisibleOpacity, EnterAnimationConfig);\n didOpen.current = true;\n }, [\n id,\n measuredHeight,\n onOpen,\n onOpenFinished,\n opacity,\n open,\n overlayVisibleOpacity,\n translateY,\n ]);\n\n useEffect(() => {\n if (open || !mounted || isClosing.current) {\n return;\n }\n\n if (didOpen.current) {\n close();\n return;\n }\n\n setMounted(false);\n setMeasuredHeight(null);\n }, [close, mounted, open]);\n\n return {\n close,\n dragGesture,\n hasMeasured,\n isTouchable,\n mounted,\n onLayout,\n opacity,\n translateY,\n };\n}\n"],"mappings":"AAAA,SAAS,aAAa,WAAW,SAAS,QAAQ,gBAAgB;AAElE,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,2BAA2B;AAIpC,MAAM,uBAAuB;AAAA,EAC3B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,mBAAmB;AACrB;AAEA,MAAM,sBAAsB;AAAA,EAC1B,UAAU;AAAA,EACV,QAAQ,OAAO,GAAG,OAAO,IAAI;AAC/B;AAeO,SAAS,mBAAmB,OAAgC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,oBAAoB;AACnC,QAAM,eAAe,OAAO,OAAO,OAAO;AAE1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,UAAU,OAAO,KAAK;AAC5B,QAAM,YAAY,OAAO,KAAK;AAC9B,QAAM,eAAe,OAAO,CAAC;AAE7B,QAAM,aAAa;AAAA,IACjB,cAAc,QAAQ,CAAC,eAAe;AAAA,EACxC;AACA,QAAM,UAAU,eAAe,CAAC;AAEhC,QAAM,cAAc,mBAAmB;AAEvC,QAAM,WAAW;AAAA,IACf,CAAC,UAA6B;AAC5B,UAAI,mBAAmB,MAAM;AAC3B;AAAA,MACF;AAEA,YAAM,SACJ,MAAM,YAAY,OAAO,SAAS,gBAAgB;AAEpD,iBAAW,QAAQ,cAAc,QAAQ,CAAC,SAAS;AACnD,wBAAkB,MAAM;AAAA,IAC1B;AAAA,IACA,CAAC,cAAc,gBAAgB,WAAW,eAAe,UAAU;AAAA,EACrE;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,yBAAiC;AAChC,UAAI,CAAC,UAAU,WAAW,aAAa,YAAY,sBAAsB;AACvE;AAAA,MACF;AAEA,gBAAU,UAAU;AACpB,iBAAW,KAAK;AAChB,wBAAkB,IAAI;AACtB,wBAAkB,EAAE;AAAA,IACtB;AAAA,IACA,CAAC,IAAI,eAAe;AAAA,EACtB;AAEA,QAAM,QAAQ,YAAY,MAAM;AAC9B,QAAI,mBAAmB,QAAQ,UAAU,SAAS;AAChD;AAAA,IACF;AAEA,cAAU,UAAU;AACpB,iBAAa,WAAW;AACxB,mBAAe,KAAK;AACpB,cAAU,EAAE;AAEZ,UAAM,SAAS,cAAc,QAAQ,CAAC,iBAAiB;AACvD,UAAM,sBAAsB,aAAa;AAEzC,eAAW,QAAQ,WAAW,QAAQ,qBAAqB,CAAC,aAAa;AACvE,UAAI,UAAU;AACZ,qBAAa,eAAe,mBAAmB;AAAA,MACjD;AAAA,IACF,CAAC;AACD,YAAQ,QAAQ,WAAW,GAAG,mBAAmB;AACjD,YAAQ,UAAU;AAAA,EACpB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc;AAAA,IAClB,MACE,QAAQ,IAAI,EACT,QAAQ,WAAW,EACnB,SAAS,CAAC,UAAU;AACnB,UAAI,cAAc,UAAU;AAC1B,mBAAW,QAAQ,KAAK,IAAI,GAAG,MAAM,YAAY;AACjD;AAAA,MACF;AAEA,iBAAW,QAAQ,KAAK,IAAI,GAAG,MAAM,YAAY;AAAA,IACnD,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,UAAI,mBAAmB,MAAM;AAC3B;AAAA,MACF;AAEA,YAAM,cACJ,cAAc,WACV,MAAM,eAAe,iBAAiB,OACtC,MAAM,YAAY,OAClB,MAAM,eAAe,CAAC,iBAAiB,OACvC,MAAM,YAAY;AAExB,UAAI,aAAa;AACf,qBAAa,KAAK;AAClB;AAAA,MACF;AAEA,iBAAW,QAAQ,WAAW,GAAG,oBAAoB;AACrD,cAAQ,QAAQ;AAAA,QACd;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACL;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,iBAAa,WAAW;AACxB,mBAAe,KAAK;AACpB,cAAU,UAAU;AACpB,YAAQ,UAAU;AAElB,QAAI,CAAC,SAAS;AACZ,iBAAW,IAAI;AACf,wBAAkB,IAAI;AACtB,iBAAW,QAAQ,cAAc,QAAQ,CAAC,eAAe;AACzD,cAAQ,QAAQ;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,SAAS,WAAW,cAAc,UAAU,CAAC;AAEhE,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,mBAAmB,QAAQ,QAAQ,SAAS;AACvD;AAAA,IACF;AAEA,mBAAe,IAAI;AACnB,aAAS,EAAE;AAEX,eAAW,QAAQ,WAAW,GAAG,sBAAsB,CAAC,aAAa;AACnE,UAAI,YAAY,gBAAgB;AAC9B,qBAAa,gBAAgB,EAAE;AAAA,MACjC;AAAA,IACF,CAAC;AACD,YAAQ,QAAQ,WAAW,uBAAuB,oBAAoB;AACtE,YAAQ,UAAU;AAAA,EACpB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,QAAI,QAAQ,CAAC,WAAW,UAAU,SAAS;AACzC;AAAA,IACF;AAEA,QAAI,QAAQ,SAAS;AACnB,YAAM;AACN;AAAA,IACF;AAEA,eAAW,KAAK;AAChB,sBAAkB,IAAI;AAAA,EACxB,GAAG,CAAC,OAAO,SAAS,IAAI,CAAC;AAEzB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/flyout",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"description": "Flyout, popover, and overlay components for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/
|
|
32
|
-
"@impulse-ui-native/primitives": "2.
|
|
33
|
-
"@impulse-ui-native/
|
|
31
|
+
"@impulse-ui-native/theme": "2.6.0",
|
|
32
|
+
"@impulse-ui-native/primitives": "2.6.0",
|
|
33
|
+
"@impulse-ui-native/overlay": "2.6.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "~19.2.14",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"react-native-worklets": "0.10.1",
|
|
45
45
|
"typescript": "~6.0.3",
|
|
46
46
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
47
|
-
"@impulse-ui-native/
|
|
48
|
-
"@impulse-ui-native/
|
|
47
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
48
|
+
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": ">=18",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/constants/flyout-handle.constants.ts"],"sourcesContent":["export const FlyoutHandleHeight = 32;\r\n"],"mappings":"AAAO,MAAM,qBAAqB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { FlyoutHandleHeight } from './flyout-handle.constants.mjs';
|
package/dist/constants/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./flyout-handle.constants\";\r\n"],"mappings":"AAAA,cAAc;","names":[]}
|