|
| 1 | +diff --git a/node_modules/reanimated-collapsible-helpers/lib/typescript/src/AnimatedSection.d.ts b/node_modules/reanimated-collapsible-helpers/lib/typescript/src/AnimatedSection.d.ts |
| 2 | +index 768068e..651f01b 100644 |
| 3 | +--- a/node_modules/reanimated-collapsible-helpers/lib/typescript/src/AnimatedSection.d.ts |
| 4 | ++++ b/node_modules/reanimated-collapsible-helpers/lib/typescript/src/AnimatedSection.d.ts |
| 5 | +@@ -3,11 +3,17 @@ import { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native'; |
| 6 | + import Animated from 'react-native-reanimated'; |
| 7 | + import type { State } from './types'; |
| 8 | + declare type Props = { |
| 9 | +- children: React.ReactNode; |
| 10 | +- onLayout: (event: LayoutChangeEvent) => void; |
| 11 | +- animatedHeight: Animated.Node<number>; |
| 12 | +- state: State; |
| 13 | +- style?: StyleProp<Animated.AnimateStyle<ViewStyle>>; |
| 14 | ++ children: React.ReactNode; |
| 15 | ++ onLayout: (event: LayoutChangeEvent) => void; |
| 16 | ++ animatedHeight: Animated.Node<number>; |
| 17 | ++ state: State; |
| 18 | ++ style?: StyleProp<Animated.AnimateStyle<ViewStyle>>; |
| 19 | + }; |
| 20 | +-export declare function AnimatedSection({ children, onLayout, animatedHeight, state, style, }: Props): JSX.Element; |
| 21 | ++export declare function AnimatedSection({ |
| 22 | ++ children, |
| 23 | ++ onLayout, |
| 24 | ++ animatedHeight, |
| 25 | ++ state, |
| 26 | ++ style, |
| 27 | ++}: Props): JSX.Element; |
| 28 | + export {}; |
| 29 | +diff --git a/node_modules/reanimated-collapsible-helpers/lib/typescript/src/types.d.ts b/node_modules/reanimated-collapsible-helpers/lib/typescript/src/types.d.ts |
| 30 | +index 039c025..3912f9e 100644 |
| 31 | +--- a/node_modules/reanimated-collapsible-helpers/lib/typescript/src/types.d.ts |
| 32 | ++++ b/node_modules/reanimated-collapsible-helpers/lib/typescript/src/types.d.ts |
| 33 | +@@ -2,5 +2,8 @@ import type Animated from 'react-native-reanimated'; |
| 34 | + export declare type State = 'expanded' | 'collapsed'; |
| 35 | + export declare type Config = { |
| 36 | + duration?: number; |
| 37 | +- easing?: Animated.EasingFunction; |
| 38 | ++ easing?: Animated.EasingNodeFunction; |
| 39 | ++ state: string; |
| 40 | ++ show: boolean | null | undefined; |
| 41 | ++ unmountOnCollapse: boolean | null | undefined; |
| 42 | + }; |
| 43 | +diff --git a/node_modules/reanimated-collapsible-helpers/lib/typescript/src/useCollapsible.d.ts b/node_modules/reanimated-collapsible-helpers/lib/typescript/src/useCollapsible.d.ts |
| 44 | +index a76dd60..fa309f4 100644 |
| 45 | +--- a/node_modules/reanimated-collapsible-helpers/lib/typescript/src/useCollapsible.d.ts |
| 46 | ++++ b/node_modules/reanimated-collapsible-helpers/lib/typescript/src/useCollapsible.d.ts |
| 47 | +@@ -2,9 +2,11 @@ import type { LayoutChangeEvent } from 'react-native'; |
| 48 | + import Animated from 'react-native-reanimated'; |
| 49 | + import type { State, Config } from './types'; |
| 50 | + export declare function useCollapsible(config?: Config): { |
| 51 | +- onLayout: (event: LayoutChangeEvent) => void; |
| 52 | +- onPress: () => void; |
| 53 | +- animatedHeight: Animated.Node<number>; |
| 54 | +- height: number; |
| 55 | +- state: State; |
| 56 | ++ onLayout: (event: LayoutChangeEvent) => void; |
| 57 | ++ onPress: () => void; |
| 58 | ++ animatedHeight: Animated.Node<number>; |
| 59 | ++ height: number; |
| 60 | ++ state: State; |
| 61 | ++ setMounted: (mounted: boolean) => void; |
| 62 | ++ mounted: boolean; |
| 63 | + }; |
| 64 | +diff --git a/node_modules/reanimated-collapsible-helpers/src/reanimatedHelpers.ts b/node_modules/reanimated-collapsible-helpers/src/reanimatedHelpers.ts |
| 65 | +index b26a76e..b6a68cb 100644 |
| 66 | +--- a/node_modules/reanimated-collapsible-helpers/src/reanimatedHelpers.ts |
| 67 | ++++ b/node_modules/reanimated-collapsible-helpers/src/reanimatedHelpers.ts |
| 68 | +@@ -1,22 +1,14 @@ |
| 69 | +-import Animated, { Easing } from 'react-native-reanimated'; |
| 70 | ++import Animated, { EasingNode } from 'react-native-reanimated'; |
| 71 | + |
| 72 | +-const { |
| 73 | +- Value, |
| 74 | +- set, |
| 75 | +- cond, |
| 76 | +- startClock, |
| 77 | +- clockRunning, |
| 78 | +- timing, |
| 79 | +- stopClock, |
| 80 | +- block, |
| 81 | +-} = Animated; |
| 82 | ++const { Value, set, cond, startClock, clockRunning, timing, stopClock, block } = |
| 83 | ++ Animated; |
| 84 | + |
| 85 | + export function runTiming( |
| 86 | + clock: Animated.Clock, |
| 87 | + value: Animated.Value<number>, |
| 88 | + dest: Animated.Value<number>, |
| 89 | + duration: number = 250, |
| 90 | +- easing: Animated.EasingFunction = Easing.out(Easing.ease) |
| 91 | ++ easing: Animated.EasingNodeFunction = EasingNode.out(EasingNode.ease) |
| 92 | + ) { |
| 93 | + const state = { |
| 94 | + finished: new Value(0), |
| 95 | +diff --git a/node_modules/reanimated-collapsible-helpers/src/types.ts b/node_modules/reanimated-collapsible-helpers/src/types.ts |
| 96 | +index 63710b0..84b6181 100644 |
| 97 | +--- a/node_modules/reanimated-collapsible-helpers/src/types.ts |
| 98 | ++++ b/node_modules/reanimated-collapsible-helpers/src/types.ts |
| 99 | +@@ -4,5 +4,10 @@ export type State = 'expanded' | 'collapsed'; |
| 100 | + |
| 101 | + export type Config = { |
| 102 | + duration?: number; |
| 103 | +- easing?: Animated.EasingFunction; |
| 104 | ++ easing?: Animated.EasingNodeFunction; |
| 105 | ++ state: string; |
| 106 | ++ show: boolean | null | undefined; |
| 107 | ++ unmountOnCollapse: boolean | null | undefined; |
| 108 | ++ setMounted: () => void; |
| 109 | ++ mounted: boolean; |
| 110 | + }; |
| 111 | +diff --git a/node_modules/reanimated-collapsible-helpers/src/useCollapsible.ts b/node_modules/reanimated-collapsible-helpers/src/useCollapsible.ts |
| 112 | +index 2cea421..3f78337 100644 |
| 113 | +--- a/node_modules/reanimated-collapsible-helpers/src/useCollapsible.ts |
| 114 | ++++ b/node_modules/reanimated-collapsible-helpers/src/useCollapsible.ts |
| 115 | +@@ -1,4 +1,4 @@ |
| 116 | +-import React from 'react'; |
| 117 | ++import React, { useCallback } from 'react'; |
| 118 | + import type { LayoutChangeEvent } from 'react-native'; |
| 119 | + import Animated from 'react-native-reanimated'; |
| 120 | + |
| 121 | +@@ -9,7 +9,9 @@ const { Clock, Value } = Animated; |
| 122 | + |
| 123 | + export function useCollapsible(config?: Config) { |
| 124 | + const [height, setHeight] = React.useState(0); |
| 125 | +- const [state, setState] = React.useState<State>('collapsed'); |
| 126 | ++ const [state, setState] = React.useState<State>( |
| 127 | ++ config?.state === 'expanded' ? 'expanded' : 'collapsed' |
| 128 | ++ ); |
| 129 | + |
| 130 | + const { current: clock } = React.useRef(new Clock()); |
| 131 | + const { current: progress } = React.useRef(new Value<number>(0)); |
| 132 | +@@ -18,11 +20,22 @@ export function useCollapsible(config?: Config) { |
| 133 | + runTiming(clock, progress, animation, config?.duration, config?.easing) |
| 134 | + ); |
| 135 | + |
| 136 | ++ const [mounted, setMounted] = React.useState( |
| 137 | ++ config?.state === 'expanded' ? true : false |
| 138 | ++ ); |
| 139 | ++ |
| 140 | ++ const handleAnimationEnd = () => { |
| 141 | ++ if (config?.unmountOnCollapse && !config?.show) setMounted(false); |
| 142 | ++ }; |
| 143 | ++ |
| 144 | + React.useEffect(() => { |
| 145 | + if (state === 'collapsed') { |
| 146 | + animation.setValue(0); |
| 147 | ++ setMounted(false); |
| 148 | ++ handleAnimationEnd(); |
| 149 | + } else { |
| 150 | + animation.setValue(height); |
| 151 | ++ setMounted(true); |
| 152 | + } |
| 153 | + }, [state, height, animation]); |
| 154 | + |
| 155 | +@@ -47,5 +60,7 @@ export function useCollapsible(config?: Config) { |
| 156 | + animatedHeight, |
| 157 | + height, |
| 158 | + state, |
| 159 | ++ mounted, |
| 160 | ++ setMounted, |
| 161 | + }; |
| 162 | + } |
0 commit comments