@r0b0t3d/react-native-collapsible 1.0.1 → 1.2.0-alpha.0

package/src/components/CollapsibleFlatList.tsx

@@ -1,119 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { FlatListProps, FlatList, View, StyleSheet } from 'react-native';
-import Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';
-import AnimatedTopView from './AnimatedTopView';
-import useAnimatedScroll from '../hooks/useAnimatedScroll';
-import useCollapsibleContext from '../hooks/useCollapsibleContext';
-import type { CollapsibleProps } from '../types';
-import { useInternalCollapsibleContext } from '../hooks/useInternalCollapsibleContext';
-
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
-
-type Props<Data> = Omit<FlatListProps<Data>, 'scrollEnabled'> &
-  CollapsibleProps;
-
-export default function CollapsibleFlatList<Data>({
-  headerSnappable = true,
-  ...props
-}: Props<Data>) {
-  const scrollView = useRef<FlatList>(null);
-  const { headerHeight } = useCollapsibleContext();
-  const { contentMinHeight } = useInternalCollapsibleContext();
-  const mounted = useRef(true);
-  const contentHeight = useRef(0);
-
-  useEffect(() => {
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-
-  const scrollTo = useCallback((yValue: number, animated = true) => {
-    scrollView.current?.scrollToOffset({
-      offset: yValue,
-      animated,
-    });
-  }, []);
-
-  const handleInternalContentHeight = useCallback((value: number) => {
-    if (mounted.current) {
-      setInternalContentMinHeight(value);
-    }
-  }, []);
-
-  const { scrollHandler } = useAnimatedScroll({
-    headerSnappable,
-    scrollTo,
-  });
-
-  const [internalContentMinHeight, setInternalContentMinHeight] = useState(
-    contentMinHeight.value
-  );
-
-  useDerivedValue(() => {
-    if (
-      contentHeight.current < contentMinHeight.value &&
-      contentMinHeight.value !== internalContentMinHeight
-    ) {
-      runOnJS(handleInternalContentHeight)(contentMinHeight.value);
-    }
-  }, [internalContentMinHeight, contentHeight.current]);
-
-  const contentContainerStyle = useMemo(
-    () => [
-      styles.contentContainer,
-      { minHeight: internalContentMinHeight },
-      props.contentContainerStyle,
-    ],
-    [props.contentContainerStyle, internalContentMinHeight]
-  );
-
-  const handleContentSizeChange = useCallback((_, height) => {
-    contentHeight.current = height;
-  }, []);
-
-  const renderListHeader = () => (
-    <View>
-      <AnimatedTopView height={headerHeight} />
-      {props.ListHeaderComponent}
-    </View>
-  );
-
-  return (
-    // @ts-ignore
-    <AnimatedFlatList
-      ref={scrollView}
-      bounces={false}
-      keyboardDismissMode="on-drag"
-      keyboardShouldPersistTaps="handled"
-      scrollEventThrottle={16}
-      {...props}
-      style={[styles.container, props.style]}
-      contentContainerStyle={contentContainerStyle}
-      onScroll={scrollHandler}
-      ListHeaderComponent={renderListHeader()}
-      onContentSizeChange={handleContentSizeChange}
-    />
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  contentContainer: {
-    flexGrow: 1,
-  },
-  topView: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-});

package/src/hooks/withCollapsibleContext.tsx

@@ -1,164 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { FC, useCallback, useMemo, useRef } from 'react';
-import type { CollapsibleHandles, LayoutParams } from '../types';
-import { CollapsibleContext } from './useCollapsibleContext';
-import { InternalCollapsibleContext } from './useInternalCollapsibleContext';
-import { useSharedValue, withTiming } from 'react-native-reanimated';
-import type { View } from 'react-native';
-
-export default function withCollapsibleContext<T>(Component: FC<T>) {
-  return (props: T) => {
-    const collapsibleHandlers = useRef<CollapsibleHandles>();
-    const headerHeight = useSharedValue(0);
-    const scrollY = useSharedValue(0);
-    const headerCollapsed = useSharedValue(false);
-    const contentMinHeight = useSharedValue(0);
-    const stickyViewTops = useSharedValue<Record<string, number>>({});
-    const stickyHeaderHeight = useRef(0);
-    const containerHeight = useRef(0);
-    const firstStickyViewY = useRef(1000000);
-    const fixedHeaderHeight = useRef(0);
-    const headerContainersHeight = useRef<Record<string, number>>({});
-    const stickyViewPositions = useRef<Record<string, LayoutParams>>({});
-    const containerRef = useRef<View>(null);
-
-    const setCollapsibleHandlers = useCallback((handlers) => {
-      collapsibleHandlers.current = handlers;
-    }, []);
-
-    const refreshHeaderCollapsed = useCallback(() => {
-      const maxY = fixedHeaderHeight.current - firstStickyViewY.current;
-      const isCollapsed = scrollY.value >= maxY;
-      headerCollapsed.value = isCollapsed;
-    }, []);
-
-    const refreshMinContentHeight = useCallback(() => {
-      contentMinHeight.value =
-        containerHeight.current +
-        fixedHeaderHeight.current -
-        stickyHeaderHeight.current;
-    }, []);
-
-    const populateData = useCallback(() => {
-      const viewPositions = stickyViewPositions.current;
-      const headerHeight = fixedHeaderHeight.current;
-
-      const sortedKeys = Object.keys(viewPositions).sort(
-        (a, b) => viewPositions[a].top - viewPositions[b].top
-      );
-      let totalTop = 0;
-      const values: any = {};
-      for (let i = 0; i < sortedKeys.length; i++) {
-        values[sortedKeys[i]] = totalTop;
-        // Try minus 1 make it filled when scrolling up.
-        // Otherwise, we can see a small space between the persits views
-        totalTop += viewPositions[sortedKeys[i]].height - 1;
-      }
-      stickyViewTops.value = values;
-      firstStickyViewY.current = viewPositions[sortedKeys[0]]?.top || 0;
-      refreshHeaderCollapsed();
-      const stickyHeader = sortedKeys.reduce((acc, key) => {
-        const data = viewPositions[key];
-        const isInsideHeader = data.top < headerHeight;
-        if (isInsideHeader) {
-          return acc + data.height;
-        }
-        return acc;
-      }, 0);
-      stickyHeaderHeight.current = stickyHeader;
-      refreshMinContentHeight();
-    }, [stickyViewPositions.current, fixedHeaderHeight.current]);
-
-    const handleStickyViewLayout = useCallback(
-      (viewKey: string, layout?: LayoutParams) => {
-        if (!layout) {
-          delete stickyViewPositions.current[viewKey];
-        } else {
-          stickyViewPositions.current = {
-            ...stickyViewPositions.current,
-            [viewKey]: layout,
-          };
-        }
-        populateData();
-      },
-      [populateData, fixedHeaderHeight]
-    );
-
-    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.current === 0 ? 0 : 200,
-        });
-        fixedHeaderHeight.current = totalHeight;
-
-        populateData();
-        refreshHeaderCollapsed();
-        refreshMinContentHeight();
-      },
-      [populateData, refreshHeaderCollapsed, refreshMinContentHeight]
-    );
-
-    const handleContainerHeight = useCallback(
-      (height: number) => {
-        containerHeight.current = height;
-        refreshMinContentHeight();
-      },
-      [refreshMinContentHeight]
-    );
-
-    const context = useMemo(() => {
-      return {
-        collapse: () => collapsibleHandlers.current?.collapse(),
-        expand: () => collapsibleHandlers.current?.expand(),
-        scrollTo: (offset: number, animate?: boolean) =>
-          collapsibleHandlers.current?.scrollTo(offset, animate),
-        headerHeight,
-        scrollY,
-        headerCollapsed,
-      };
-    }, [scrollY, headerHeight, headerCollapsed]);
-
-    const internalContext = useMemo(
-      () => ({
-        containerRef,
-        handleStickyViewLayout,
-        handleHeaderContainerLayout,
-        setCollapsibleHandlers,
-        handleContainerHeight,
-        firstStickyViewY,
-        stickyViewTops,
-        fixedHeaderHeight,
-        stickyHeaderHeight,
-        contentMinHeight,
-      }),
-      [
-        setCollapsibleHandlers,
-        handleStickyViewLayout,
-        handleHeaderContainerLayout,
-        handleContainerHeight,
-        firstStickyViewY,
-        stickyViewTops,
-        fixedHeaderHeight,
-        stickyHeaderHeight,
-        contentMinHeight,
-      ]
-    );
-
-    return (
-      <CollapsibleContext.Provider value={context}>
-        <InternalCollapsibleContext.Provider value={internalContext}>
-          <Component {...props} />
-        </InternalCollapsibleContext.Provider>
-      </CollapsibleContext.Provider>
-    );
-  };
-}