@r0b0t3d/react-native-collapsible 1.3.5-beta.2 → 1.3.5-beta.3

package/src/components/header/StickyView.tsx

@@ -1,14 +1,21 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import useCollapsibleContext from '../../hooks/useCollapsibleContext';
-import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
+import {
+  LayoutChangeEvent,
+  LayoutRectangle,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 import Animated, {
   Extrapolate,
   interpolate,
   useAnimatedStyle,
   useDerivedValue,
+  useSharedValue,
 } from 'react-native-reanimated';
+import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
 
 type Props = {
   style?: StyleProp<ViewStyle>;
@@ -20,29 +27,37 @@ let stickyKey = 0;
 export default function StickyView({ children, style }: Props) {
   const key = useMemo(() => `sticky_${stickyKey++}`, []);
   const viewRef = useRef<View>(null);
-  const { handleStickyViewLayout, stickyViewTops, stickyViewPositions } =
-    useInternalCollapsibleContext();
-  const { scrollY } = useCollapsibleContext();
+  const { handleStickyViewLayout, animatedY } = useCollapsibleHeaderContext();
+  const currentLayout = useSharedValue<LayoutRectangle | undefined>(undefined);
 
   useEffect(() => {
     return () => handleStickyViewLayout(key, undefined);
   }, [key]);
 
-  const handleLayout = useCallback(() => {
-    handleStickyViewLayout(key, viewRef);
-  }, [key]);
+  const handleLayout = useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      currentLayout.value = layout;
+      handleStickyViewLayout(key, layout);
+    },
+    [key, handleStickyViewLayout]
+  );
 
   const translateY = useDerivedValue(() => {
-    const top = stickyViewTops.value[key] || 0;
-    const layoutValues = stickyViewPositions.value[key] || { top: 0 };
-    const inputMid = layoutValues.top - top;
+    if (!currentLayout.value) {
+      return 0;
+    }
+    const { height: stickyHeight, y: top } = currentLayout.value;
+    const topValue = top;
+
+    console.log({ key, animatedY: animatedY.value, top, stickyHeight });
+
     return interpolate(
-      scrollY.value,
-      [0, inputMid, inputMid + 100000],
-      [0, 0, 100000],
+      animatedY.value,
+      [0, topValue, topValue + stickyHeight + 100],
+      [0, 0, stickyHeight + 100],
       Extrapolate.CLAMP
     );
-  }, [key]);
+  }, []);
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -60,7 +75,7 @@ export default function StickyView({ children, style }: Props) {
       // @ts-ignore
       ref={viewRef}
       onLayout={handleLayout}
-      style={[styles.container, animatedStyle, style]}
+      style={[styles.container, style, animatedStyle]}
       pointerEvents="box-none"
     >
       {children}

package/src/components/scrollable/useAnimatedScroll.ts

@@ -25,7 +25,7 @@ export default function useAnimatedScroll({
 }: Props) {
   const scrollDirection = useSharedValue('unknown');
   const { scrollY } = useCollapsibleContext();
-  const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =
+  const { setCollapsibleHandlers, fixedHeaderHeight } =
     useInternalCollapsibleContext();
 
   useEffect(() => {
@@ -36,10 +36,7 @@ export default function useAnimatedScroll({
 
   const collapse = useCallback(
     (animated = true) => {
-      scrollTo(
-        Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0),
-        animated
-      );
+      scrollTo(fixedHeaderHeight.value, animated);
     },
     [scrollTo]
   );
@@ -65,10 +62,7 @@ export default function useAnimatedScroll({
       },
       onEndDrag: () => {
         if (!headerSnappable) return;
-        const maxY =
-          firstStickyViewY.value && firstStickyViewY.value > 0
-            ? firstStickyViewY.value
-            : fixedHeaderHeight.value || 0;
+        const maxY = fixedHeaderHeight.value;
 
         if (scrollY.value < maxY) {
           const delta = Math.abs(scrollY.value - maxY);

package/src/hooks/useCollapsibleHeaderContext.ts

@@ -1,12 +1,10 @@
-import { createContext, ReactNode, useContext } from 'react';
+import { createContext, useContext } from 'react';
+import { LayoutRectangle } from 'react-native';
+import Animated from 'react-native-reanimated';
 
-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 type CollapsibleContextHeaderType = {
+  handleStickyViewLayout: (key: string, layout?: LayoutRectangle) => void;
+  animatedY: Animated.SharedValue<number>;
 };
 
 export const CollapsibleHeaderContext =

package/src/types.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { View } from 'react-native';
+import type { LayoutRectangle, View } from 'react-native';
 import type Animated from 'react-native-reanimated';
 
 export type ScrollToIndexParams = {
@@ -33,16 +33,16 @@ export type CollapsibleContextInternalType = {
   scrollViewRef: React.RefObject<any>;
   containerRef: React.RefObject<View>;
   contentMinHeight: Animated.SharedValue<number>;
-  firstStickyViewY: Animated.SharedValue<number>;
-  stickyViewPositions: Animated.SharedValue<Record<string, LayoutParams>>;
-  stickyViewTops: Animated.SharedValue<Record<string, number>>;
+  headerViewPositions: Animated.SharedValue<
+    Record<string, { top: number; stickyHeight: number }>
+  >;
   fixedHeaderHeight: Animated.SharedValue<number>;
   handleContainerHeight: (height: number) => void;
-  handleStickyViewLayout: (
-    viewKey: string,
-    viewRef?: React.RefObject<View>
+  handleHeaderContainerLayout: (
+    key: string,
+    layout?: LayoutRectangle,
+    stickyHeight?: number
   ) => void;
-  handleHeaderContainerLayout: (height: number) => void;
   setCollapsibleHandlers: (handlers: CollapsibleHandles) => void;
 };
 

package/src/utils/useSharedValueRef.ts

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from 'react';
+import Animated, { useSharedValue } from 'react-native-reanimated';
+
+export default function useSharedValueRef<T>(
+  defaultValue: T
+): [Animated.SharedValue<T>, (value: T) => void] {
+  const sharedValue = useSharedValue<T>(defaultValue);
+  const savedValue = useRef<T>(defaultValue);
+
+  const appendValue = useCallback(
+    (value: T) => {
+      savedValue.current = {
+        ...savedValue.current,
+        ...value,
+      };
+      sharedValue.value = savedValue.current;
+    },
+    [sharedValue]
+  );
+
+  return [sharedValue, appendValue];
+}

package/src/withCollapsibleContext.tsx

@@ -1,45 +1,35 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useMemo, useRef, FC } from 'react';
-import type { CollapsibleHandles, LayoutParams } from './types';
+import type { CollapsibleHandles } from './types';
 import { CollapsibleContext } from './hooks/useCollapsibleContext';
 import { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';
 import {
-  useAnimatedReaction,
   useDerivedValue,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import type { View } from 'react-native';
-import { debounce } from './utils/debounce';
-import CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';
+import type { LayoutRectangle, 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 stickyViewRefs = useRef<
-      Record<string, React.RefObject<View> | undefined>
-    >({});
-    const stickyViewTops = useSharedValue<Record<string, number>>({});
-    const stickyViewPositionsRef = useRef<
-      Record<string, LayoutParams | undefined>
-    >({});
-    const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(
-      {}
-    );
     const fixedHeaderHeight = useSharedValue(0);
     const containerHeight = useSharedValue(0);
-    const firstStickyViewY = useSharedValue(1000000);
     const containerRef = useRef<View>(null);
     const scrollViewRef = useRef<View>(null);
+    const headerContainerLayouts = useRef<
+      Record<string, (LayoutRectangle & { stickyHeight?: number }) | undefined>
+    >({});
+    const headerViewPositions = useSharedValue({});
 
     const setCollapsibleHandlers = useCallback((handlers) => {
       collapsibleHandlers.current = handlers;
     }, []);
 
     const headerCollapsed = useDerivedValue(() => {
-      const maxY = fixedHeaderHeight.value - firstStickyViewY.value;
+      const maxY = fixedHeaderHeight.value;
       return scrollY.value >= maxY;
     }, []);
 
@@ -47,97 +37,51 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
       return containerHeight.value + fixedHeaderHeight.value;
     }, []);
 
-    useAnimatedReaction(
-      () => {
-        const totalHeight = Object.keys(stickyViewPositions.value).reduce(
-          (acc, item) => {
-            const value = stickyViewPositions.value[item];
-            if (value) {
-              return acc + value.top;
+    const handleHeaderContainerLayout = useCallback(
+      (key: string, layout?: LayoutRectangle, stickyHeight?: number) => {
+        headerContainerLayouts.current[key] = layout
+          ? {
+              ...layout,
+              stickyHeight,
             }
-            return acc;
-          },
+          : undefined;
+        const headerContainers = Object.keys(
+          headerContainerLayouts.current
+        ).filter((k: string) => !!headerContainerLayouts.current[k]);
+        // Calculate total header height
+        const totalHeight = headerContainers.reduce(
+          (acc, value) =>
+            acc + (headerContainerLayouts.current[value]?.height ?? 0),
           0
         );
-        return totalHeight - fixedHeaderHeight.value;
-      },
-      (result, previous) => {
-        if (result !== previous) {
-          const viewPositions = stickyViewPositions.value;
-          const sortedKeys = Object.keys(viewPositions)
-            .filter((v) => !!viewPositions[v])
-            // @ts-ignore
-            .sort((a, b) => viewPositions[a].top - viewPositions[b].top);
-          let totalTop = 0;
-          const values: any = {};
-          for (let i = 0; i < sortedKeys.length; i++) {
-            // @ts-ignore
-            values[sortedKeys[i]] = totalTop;
-            // Try minus 1 make it filled when scrolling up.
-            // Otherwise, we can see a small space between the persits views
-            // @ts-ignore
-            totalTop += viewPositions[sortedKeys[i]].height - 1;
-          }
-          stickyViewTops.value = values;
-          // @ts-ignore
-          firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;
-        }
-      }
-    );
-
-    const handleStickyViewLayout = useCallback(
-      (viewKey: string, viewRef?: React.RefObject<View>) => {
-        if (viewRef && viewRef.current && containerRef.current) {
-          stickyViewRefs.current[viewKey] = viewRef;
-          viewRef.current.measureLayout(
-            // @ts-ignore
-            containerRef.current,
-            (left, top, width, height) => {
-              stickyViewPositionsRef.current = {
-                ...stickyViewPositionsRef.current,
-                [viewKey]: { left, top, width, height },
-              };
-              // @ts-ignore
-              stickyViewPositions.value = stickyViewPositionsRef.current;
-            },
-            () => {}
+        headerHeight.value = withTiming(totalHeight, {
+          duration: fixedHeaderHeight.value === 0 ? 0 : 10,
+        });
+        fixedHeaderHeight.value = totalHeight;
+        // Calculate header positions
+        const sortedHeaders = headerContainers.sort((a, b) => {
+          return (
+            (headerContainerLayouts.current[a]?.y || 0) -
+            (headerContainerLayouts.current[b]?.y || 0)
           );
-        } else {
-          stickyViewRefs.current = {
-            ...stickyViewRefs.current,
-            [viewKey]: undefined,
-          };
-          stickyViewPositionsRef.current = {
-            ...stickyViewPositionsRef.current,
-            [viewKey]: undefined,
+        });
+        const values: any = {};
+        let aStickyHeight = 0;
+        for (let index = 0; index < sortedHeaders.length; index++) {
+          const headerKey = sortedHeaders[index];
+          const sHeight =
+            headerContainerLayouts.current[headerKey]?.stickyHeight ?? 0;
+          values[headerKey] = {
+            top: aStickyHeight,
+            stickyHeight: sHeight,
           };
-          // @ts-ignore
-          stickyViewPositions.value = stickyViewPositionsRef.current;
+          aStickyHeight += sHeight;
         }
+        headerViewPositions.value = values;
       },
       []
     );
 
-    const debounceRefreshStickyPositions = useMemo(() => {
-      return debounce(() => {
-        Object.keys(stickyViewRefs.current).forEach((key) => {
-          const viewRef = stickyViewRefs.current[key];
-          if (viewRef) {
-            handleStickyViewLayout(key, viewRef);
-          }
-        });
-      }, 200);
-    }, []);
-
-    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;
     }, []);
@@ -161,36 +105,28 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
       () => ({
         scrollViewRef,
         containerRef,
-        handleStickyViewLayout,
         handleHeaderContainerLayout,
         setCollapsibleHandlers,
         handleContainerHeight,
-        firstStickyViewY,
-        stickyViewTops,
-        stickyViewPositions,
         fixedHeaderHeight,
         contentMinHeight,
+        headerViewPositions,
       }),
       [
         setCollapsibleHandlers,
-        handleStickyViewLayout,
         handleHeaderContainerLayout,
         handleContainerHeight,
-        firstStickyViewY,
-        stickyViewTops,
-        stickyViewPositions,
         fixedHeaderHeight,
         contentMinHeight,
+        headerViewPositions,
       ]
     );
 
     return (
       <CollapsibleContext.Provider value={context}>
         <InternalCollapsibleContext.Provider value={internalContext}>
-          <CollapsibleHeaderProvider>
-            {/** @ts-ignore */}
-            <Component {...props} />
-          </CollapsibleHeaderProvider>
+          {/** @ts-ignore */}
+          <Component {...props} />
         </InternalCollapsibleContext.Provider>
       </CollapsibleContext.Provider>
     );

package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CollapsibleHeaderConsumer;
-var _react = _interopRequireWildcard(require("react"));
-var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
-var _useCollapsibleHeaderContext = _interopRequireDefault(require("../../hooks/useCollapsibleHeaderContext"));
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
-var _reactNative = require("react-native");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function CollapsibleHeaderConsumer() {
-  const {
-    headers
-  } = (0, _useCollapsibleHeaderContext.default)();
-  const {
-    handleHeaderContainerLayout
-  } = (0, _useInternalCollapsibleContext.default)();
-  const {
-    scrollY,
-    headerHeight
-  } = (0, _useCollapsibleContext.default)();
-  const headerTranslate = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.interpolate)(scrollY.value,
-  // FIXME: can improve by geting maxY value of header and sticky views
-  [-1000, 0, 100000], [0, 0, -100000], 'clamp'), []);
-  const headerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    return {
-      transform: [{
-        translateY: headerTranslate.value
-      }]
-    };
-  }, [headerHeight, headerTranslate]);
-  const handleHeaderLayout = (0, _react.useCallback)(_ref => {
-    let {
-      nativeEvent: {
-        layout: {
-          height
-        }
-      }
-    } = _ref;
-    handleHeaderContainerLayout(height);
-  }, [handleHeaderContainerLayout]);
-  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    onLayout: handleHeaderLayout,
-    style: [styles.container, headerStyle],
-    pointerEvents: "box-none"
-  }, headers.map(item => item.children));
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    zIndex: 10,
-    backgroundColor: 'white'
-  }
-});
-//# sourceMappingURL=CollapsibleHeaderConsumer.js.map

package/lib/commonjs/components/header/CollapsibleHeaderConsumer.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_useInternalCollapsibleContext","_interopRequireDefault","_useCollapsibleHeaderContext","_reactNativeReanimated","_useCollapsibleContext","_reactNative","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","CollapsibleHeaderConsumer","headers","useCollapsibleHeaderContext","handleHeaderContainerLayout","useInternalCollapsibleContext","scrollY","headerHeight","useCollapsibleContext","headerTranslate","useDerivedValue","interpolate","value","headerStyle","useAnimatedStyle","transform","translateY","handleHeaderLayout","useCallback","_ref","nativeEvent","layout","height","createElement","View","onLayout","style","styles","container","pointerEvents","map","item","children","StyleSheet","create","zIndex","backgroundColor"],"sourceRoot":"../../../../src","sources":["components/header/CollapsibleHeaderConsumer.tsx"],"mappings":"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"}

package/lib/commonjs/components/header/CollapsibleHeaderProvider.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CollapsibleHeaderProvider;
-var _react = _interopRequireWildcard(require("react"));
-var _useCollapsibleHeaderContext = require("../../hooks/useCollapsibleHeaderContext");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable no-shadow */
-
-function CollapsibleHeaderProvider(_ref) {
-  let {
-    children
-  } = _ref;
-  const [headers, setHeaders] = (0, _react.useState)([]);
-  const mounted = (0, _react.useRef)(false);
-  (0, _react.useEffect)(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-  const mount = (0, _react.useCallback)((key, children) => {
-    setHeaders(prev => [...prev, {
-      key,
-      children
-    }]);
-  }, []);
-  const unmount = (0, _react.useCallback)(key => {
-    setHeaders(prev => prev.filter(h => h.key !== key));
-  }, []);
-  const update = (0, _react.useCallback)((key, children) => {
-    if (!mounted.current) {
-      return;
-    }
-    setHeaders(prev => prev.map(item => {
-      if (item.key === key) {
-        return {
-          ...item,
-          children
-        };
-      }
-      return item;
-    }));
-  }, []);
-  const context = (0, _react.useMemo)(() => ({
-    headers,
-    mount,
-    unmount,
-    update
-  }), [headers, mount, unmount, update]);
-  return /*#__PURE__*/_react.default.createElement(_useCollapsibleHeaderContext.CollapsibleHeaderContext.Provider, {
-    value: context
-  }, children);
-}
-//# sourceMappingURL=CollapsibleHeaderProvider.js.map

package/lib/commonjs/components/header/CollapsibleHeaderProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_useCollapsibleHeaderContext","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","CollapsibleHeaderProvider","_ref","children","headers","setHeaders","useState","mounted","useRef","useEffect","current","mount","useCallback","prev","unmount","filter","h","update","map","item","context","useMemo","createElement","CollapsibleHeaderContext","Provider","value"],"sourceRoot":"../../../../src","sources":["components/header/CollapsibleHeaderProvider.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAQA,IAAAC,4BAAA,GAAAD,OAAA;AAGiD,SAAAE,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAJ,wBAAAQ,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAZjD;;AAce,SAASW,yBAAyBA,CAAAC,IAAA,EAI9C;EAAA,IAJ+C;IAChDC;EAGF,CAAC,GAAAD,IAAA;EACC,MAAM,CAACE,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAC,eAAQ,EAAe,EAAE,CAAC;EACxD,MAAMC,OAAO,GAAG,IAAAC,aAAM,EAAC,KAAK,CAAC;EAE7B,IAAAC,gBAAS,EAAC,MAAM;IACdF,OAAO,CAACG,OAAO,GAAG,IAAI;IACtB,OAAO,MAAM;MACXH,OAAO,CAACG,OAAO,GAAG,KAAK;IACzB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,KAAK,GAAG,IAAAC,kBAAW,EAAC,CAACjB,GAAW,EAAEQ,QAAmB,KAAK;IAC9DE,UAAU,CAAEQ,IAAI,IAAK,CAAC,GAAGA,IAAI,EAAE;MAAElB,GAAG;MAAEQ;IAAS,CAAC,CAAC,CAAC;EACpD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMW,OAAO,GAAG,IAAAF,kBAAW,EAAEjB,GAAW,IAAK;IAC3CU,UAAU,CAAEQ,IAAI,IAAKA,IAAI,CAACE,MAAM,CAAEC,CAAC,IAAKA,CAAC,CAACrB,GAAG,KAAKA,GAAG,CAAC,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMsB,MAAM,GAAG,IAAAL,kBAAW,EAAC,CAACjB,GAAW,EAAEQ,QAAmB,KAAK;IAC/D,IAAI,CAACI,OAAO,CAACG,OAAO,EAAE;MACpB;IACF;IACAL,UAAU,CAAEQ,IAAI,IACdA,IAAI,CAACK,GAAG,CAAEC,IAAI,IAAK;MACjB,IAAIA,IAAI,CAACxB,GAAG,KAAKA,GAAG,EAAE;QACpB,OAAO;UACL,GAAGwB,IAAI;UACPhB;QACF,CAAC;MACH;MACA,OAAOgB,IAAI;IACb,CAAC,CACH,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAO,GAAG,IAAAC,cAAO,EACrB,OAAO;IACLjB,OAAO;IACPO,KAAK;IACLG,OAAO;IACPG;EACF,CAAC,CAAC,EACF,CAACb,OAAO,EAAEO,KAAK,EAAEG,OAAO,EAAEG,MAAM,CAClC,CAAC;EAED,oBACE1C,MAAA,CAAAW,OAAA,CAAAoC,aAAA,CAAC5C,4BAAA,CAAA6C,wBAAwB,CAACC,QAAQ;IAACC,KAAK,EAAEL;EAAQ,GAC/CjB,QACgC,CAAC;AAExC"}

package/lib/module/components/header/CollapsibleHeaderConsumer.js

@@ -1,50 +0,0 @@
-import React, { useCallback } from 'react';
-import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
-import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
-import Animated, { interpolate, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
-import useCollapsibleContext from '../../hooks/useCollapsibleContext';
-import { StyleSheet } from 'react-native';
-export default function CollapsibleHeaderConsumer() {
-  const {
-    headers
-  } = useCollapsibleHeaderContext();
-  const {
-    handleHeaderContainerLayout
-  } = useInternalCollapsibleContext();
-  const {
-    scrollY,
-    headerHeight
-  } = useCollapsibleContext();
-  const headerTranslate = useDerivedValue(() => interpolate(scrollY.value,
-  // FIXME: can improve by geting maxY value of header and sticky views
-  [-1000, 0, 100000], [0, 0, -100000], 'clamp'), []);
-  const headerStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{
-        translateY: headerTranslate.value
-      }]
-    };
-  }, [headerHeight, headerTranslate]);
-  const handleHeaderLayout = useCallback(_ref => {
-    let {
-      nativeEvent: {
-        layout: {
-          height
-        }
-      }
-    } = _ref;
-    handleHeaderContainerLayout(height);
-  }, [handleHeaderContainerLayout]);
-  return /*#__PURE__*/React.createElement(Animated.View, {
-    onLayout: handleHeaderLayout,
-    style: [styles.container, headerStyle],
-    pointerEvents: "box-none"
-  }, headers.map(item => item.children));
-}
-const styles = StyleSheet.create({
-  container: {
-    zIndex: 10,
-    backgroundColor: 'white'
-  }
-});
-//# sourceMappingURL=CollapsibleHeaderConsumer.js.map

package/lib/module/components/header/CollapsibleHeaderConsumer.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useCallback","useInternalCollapsibleContext","useCollapsibleHeaderContext","Animated","interpolate","useAnimatedStyle","useDerivedValue","useCollapsibleContext","StyleSheet","CollapsibleHeaderConsumer","headers","handleHeaderContainerLayout","scrollY","headerHeight","headerTranslate","value","headerStyle","transform","translateY","handleHeaderLayout","_ref","nativeEvent","layout","height","createElement","View","onLayout","style","styles","container","pointerEvents","map","item","children","create","zIndex","backgroundColor"],"sourceRoot":"../../../../src","sources":["components/header/CollapsibleHeaderConsumer.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,6BAA6B,MAAM,2CAA2C;AACrF,OAAOC,2BAA2B,MAAM,yCAAyC;AACjF,OAAOC,QAAQ,IACbC,WAAW,EACXC,gBAAgB,EAChBC,eAAe,QACV,yBAAyB;AAChC,OAAOC,qBAAqB,MAAM,mCAAmC;AACrE,SAA4BC,UAAU,QAAQ,cAAc;AAE5D,eAAe,SAASC,yBAAyBA,CAAA,EAAG;EAClD,MAAM;IAAEC;EAAQ,CAAC,GAAGR,2BAA2B,CAAC,CAAC;EACjD,MAAM;IAAES;EAA4B,CAAC,GAAGV,6BAA6B,CAAC,CAAC;EACvE,MAAM;IAAEW,OAAO;IAAEC;EAAa,CAAC,GAAGN,qBAAqB,CAAC,CAAC;EAEzD,MAAMO,eAAe,GAAGR,eAAe,CACrC,MACEF,WAAW,CACTQ,OAAO,CAACG,KAAK;EACb;EACA,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC,EAClB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,EACf,OACF,CAAC,EACH,EACF,CAAC;EAED,MAAMC,WAAW,GAAGX,gBAAgB,CAAC,MAAM;IACzC,OAAO;MACLY,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEJ,eAAe,CAACC;MAAM,CAAC;IACnD,CAAC;EACH,CAAC,EAAE,CAACF,YAAY,EAAEC,eAAe,CAAC,CAAC;EAEnC,MAAMK,kBAAkB,GAAGnB,WAAW,CACpCoB,IAAA,IAIyB;IAAA,IAJxB;MACCC,WAAW,EAAE;QACXC,MAAM,EAAE;UAAEC;QAAO;MACnB;IACiB,CAAC,GAAAH,IAAA;IAClBT,2BAA2B,CAACY,MAAM,CAAC;EACrC,CAAC,EACD,CAACZ,2BAA2B,CAC9B,CAAC;EAED,oBACEZ,KAAA,CAAAyB,aAAA,CAACrB,QAAQ,CAACsB,IAAI;IACZC,QAAQ,EAAEP,kBAAmB;IAC7BQ,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEb,WAAW,CAAE;IACvCc,aAAa,EAAC;EAAU,GAEvBpB,OAAO,CAACqB,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,QAAQ,CACvB,CAAC;AAEpB;AAEA,MAAML,MAAM,GAAGpB,UAAU,CAAC0B,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,MAAM,EAAE,EAAE;IACVC,eAAe,EAAE;EACnB;AACF,CAAC,CAAC"}

package/lib/module/components/header/CollapsibleHeaderProvider.js

@@ -1,49 +0,0 @@
-/* eslint-disable no-shadow */
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { CollapsibleHeaderContext } from '../../hooks/useCollapsibleHeaderContext';
-export default function CollapsibleHeaderProvider(_ref) {
-  let {
-    children
-  } = _ref;
-  const [headers, setHeaders] = useState([]);
-  const mounted = useRef(false);
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-  const mount = useCallback((key, children) => {
-    setHeaders(prev => [...prev, {
-      key,
-      children
-    }]);
-  }, []);
-  const unmount = useCallback(key => {
-    setHeaders(prev => prev.filter(h => h.key !== key));
-  }, []);
-  const update = useCallback((key, children) => {
-    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 /*#__PURE__*/React.createElement(CollapsibleHeaderContext.Provider, {
-    value: context
-  }, children);
-}
-//# sourceMappingURL=CollapsibleHeaderProvider.js.map