@r0b0t3d/react-native-collapsible 1.2.1 → 1.3.0

package/src/components/header/CollapsibleHeaderContainer.tsx

@@ -1,21 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
-import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
-import {
-  LayoutChangeEvent,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-import Animated, {
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-} from 'react-native-reanimated';
-import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import { ReactNode, useEffect, useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
 
 type Props = {
   children: ReactNode;
@@ -24,76 +10,21 @@ type Props = {
 
 let key = 0;
 
-export default function CollapsibleHeaderContainer({
-  children,
-  containerStyle,
-}: Props) {
+export default function CollapsibleHeaderContainer({ children }: Props) {
   const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
-  const { scrollY } = useCollapsibleContext();
-  const { handleHeaderContainerLayout } = useInternalCollapsibleContext();
-  const headerHeight = useSharedValue(0);
+  const { mount, unmount, update } = useCollapsibleHeaderContext();
 
   useEffect(() => {
-    return () => handleHeaderContainerLayout(contentKey, undefined);
-  }, []);
+    mount(contentKey, children);
 
-  const handleHeaderLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { height },
-      },
-    }: LayoutChangeEvent) => {
-      headerHeight.value = height;
-      handleHeaderContainerLayout(contentKey, height);
-    },
-    [contentKey]
-  );
-
-  const headerTranslate = useDerivedValue(
-    () =>
-      interpolate(
-        scrollY.value,
-        // FIXME: can improve by geting maxY value of header and sticky views
-        [-250, 0, 100000],
-        [250, 0, -100000],
-        Animated.Extrapolate.CLAMP
-      ),
-    []
-  );
-
-  const headerStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: headerTranslate.value }],
-      minHeight: headerHeight.value,
+    return () => {
+      unmount(contentKey);
     };
-  }, [headerHeight, headerTranslate]);
+  }, [contentKey]);
 
-  const internalStyle = useMemo(() => {
-    return {
-      zIndex: 100000 - key,
-    };
-  }, []);
+  useEffect(() => {
+    update(contentKey, children);
+  }, [children]);
 
-  return (
-    <Animated.View
-      style={[headerStyle, internalStyle]}
-      pointerEvents="box-none"
-    >
-      <View
-        key={contentKey}
-        onLayout={handleHeaderLayout}
-        pointerEvents="box-none"
-        style={[styles.container, containerStyle]}
-      >
-        {children}
-      </View>
-    </Animated.View>
-  );
+  return null;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-    marginTop: Platform.OS === 'android' ? -1 : 0,
-  },
-});

package/src/components/header/CollapsibleHeaderProvider.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable no-shadow */
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  CollapsibleHeaderContext,
+  HeaderItem,
+} from '../../hooks/useCollapsibleHeaderContext';
+
+export default function CollapsibleHeaderProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [headers, setHeaders] = useState<HeaderItem[]>([]);
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const mount = useCallback((key: string, children: ReactNode) => {
+    setHeaders((prev) => [...prev, { key, children }]);
+  }, []);
+
+  const unmount = useCallback((key: string) => {
+    setHeaders((prev) => prev.filter((h) => h.key !== key));
+  }, []);
+
+  const update = useCallback((key: string, children: ReactNode) => {
+    if (!mounted.current) {
+      return;
+    }
+    setHeaders((prev) =>
+      prev.map((item) => {
+        if (item.key === key) {
+          return {
+            ...item,
+            children,
+          };
+        }
+        return item;
+      })
+    );
+  }, []);
+
+  const context = useMemo(
+    () => ({
+      headers,
+      mount,
+      unmount,
+      update,
+    }),
+    [headers, mount, unmount, update]
+  );
+
+  return (
+    <CollapsibleHeaderContext.Provider value={context}>
+      {children}
+    </CollapsibleHeaderContext.Provider>
+  );
+}

package/src/components/scrollable/CollapsibleScrollView.tsx

@@ -73,10 +73,4 @@ const styles = StyleSheet.create({
   contentContainer: {
     flexGrow: 1,
   },
-  topView: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-  },
 });

package/src/hooks/useCollapsibleHeaderContext.ts

@@ -0,0 +1,22 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+export type HeaderItem = { key: string; children: ReactNode };
+
+type CollapsibleContextHeaderType = {
+  headers: HeaderItem[];
+  mount: (key: string, header: ReactNode) => void;
+  update: (key: string, header: ReactNode) => void;
+  unmount: (key: string) => void;
+};
+
+export const CollapsibleHeaderContext =
+  // @ts-ignore
+  createContext<CollapsibleContextHeaderType>({});
+
+export default function useCollapsibleHeaderContext() {
+  const ctx = useContext(CollapsibleHeaderContext);
+  if (!ctx) {
+    throw new Error('Component should be wrapped CollapsibleHeaderProvider');
+  }
+  return ctx;
+}

package/src/types.ts

@@ -42,7 +42,7 @@ export type CollapsibleContextInternalType = {
     viewKey: string,
     viewRef?: React.RefObject<View>
   ) => void;
-  handleHeaderContainerLayout: (viewKey: string, height?: number) => void;
+  handleHeaderContainerLayout: (height: number) => void;
   setCollapsibleHandlers: (handlers: CollapsibleHandles) => void;
 };
 

package/src/withCollapsibleContext.tsx

@@ -13,6 +13,7 @@ import {
 import type { View } from 'react-native';
 import { debounce } from './utils/debounce';
 import PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';
+import CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';
 
 export default function withCollapsibleContext<T>(Component: FC<T>) {
   return (props: T) => {
@@ -29,13 +30,10 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
     const stickyHeaderHeight = useSharedValue(0);
     const containerHeight = useSharedValue(0);
     const firstStickyViewY = useSharedValue(1000000);
-    const headerContainersHeight = useRef<Record<string, number>>({});
     const containerRef = useRef<View>(null);
     const scrollViewRef = useRef<View>(null);
 
     const setCollapsibleHandlers = useCallback((handlers) => {
-      console.log({ handlers });
-
       collapsibleHandlers.current = handlers;
     }, []);
 
@@ -128,26 +126,14 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
       }, 200);
     }, []);
 
-    const handleHeaderContainerLayout = useCallback(
-      (viewKey: string, height?: number) => {
-        if (!height) {
-          delete headerContainersHeight.current[viewKey];
-        } else {
-          headerContainersHeight.current[viewKey] = height;
-        }
-        const totalHeight = Object.keys(headerContainersHeight.current).reduce(
-          (acc, key) => headerContainersHeight.current[key] + acc,
-          0
-        );
-        headerHeight.value = withTiming(totalHeight, {
-          duration: fixedHeaderHeight.value === 0 ? 0 : 10,
-        });
-        fixedHeaderHeight.value = totalHeight;
-        // Try refresh sticky positions
-        debounceRefreshStickyPositions();
-      },
-      []
-    );
+    const handleHeaderContainerLayout = useCallback((height: number) => {
+      headerHeight.value = withTiming(height, {
+        duration: fixedHeaderHeight.value === 0 ? 0 : 10,
+      });
+      fixedHeaderHeight.value = height;
+      // Try refresh sticky positions
+      debounceRefreshStickyPositions();
+    }, []);
 
     const handleContainerHeight = useCallback((height: number) => {
       containerHeight.value = height;
@@ -198,9 +184,12 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
     return (
       <CollapsibleContext.Provider value={context}>
         <InternalCollapsibleContext.Provider value={internalContext}>
-          <PullToRefreshProvider>
-            <Component {...props} />
-          </PullToRefreshProvider>
+          <CollapsibleHeaderProvider>
+            <PullToRefreshProvider>
+              {/** @ts-ignore */}
+              <Component {...props} />
+            </PullToRefreshProvider>
+          </CollapsibleHeaderProvider>
         </InternalCollapsibleContext.Provider>
       </CollapsibleContext.Provider>
     );