@madeja-studio/telar/lib/module/component/ScrollView/CollapsibleHeaderScrollView.js

UI component library by Madeja Studio

"use strict";

import { Column } from '@madeja-studio/telar';
import { useCallback, useState } from 'react';
import { ScrollView } from 'react-native';
import { Header } from "./Header.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const INITIAL_HEADER_HEIGHT = 80; // This value is recalculated with onLayout so no need to be exact
const SCROLLING_CEILING = 60; // The higher, the slower the scrolling transition will be
const SCROLL_VIEW_MARGIN_TOP = 40; // This has been visually tested and corresponds ~ to the height of the header when it's reduced

export const CollapsibleHeaderScrollView = ({
  children,
  ...headerProps
}) => {
  const [headerHeight, setHeaderHeight] = useState(INITIAL_HEADER_HEIGHT);
  const [scrollOffset, setScrollOffset] = useState(0);
  const onScroll = useCallback(({
    nativeEvent
  }) => {
    setScrollOffset(nativeEvent.contentOffset.y);
  }, []);
  return /*#__PURE__*/_jsxs(Column, {
    children: [/*#__PURE__*/_jsx(Header, {
      ...headerProps,
      onLayout: event => setHeaderHeight(event.nativeEvent.layout.height),
      scrollConfig: {
        ceiling: SCROLLING_CEILING,
        floor: 0,
        offset: scrollOffset
      },
      separatorMarginTop: SCROLL_VIEW_MARGIN_TOP
    }), /*#__PURE__*/_jsx(ScrollView, {
      contentContainerStyle: {
        paddingTop: headerHeight - 34
      },
      onScroll: onScroll,
      scrollEventThrottle: 16,
      style: {
        marginTop: SCROLL_VIEW_MARGIN_TOP
      },
      children: children
    })]
  });
};
//# sourceMappingURL=CollapsibleHeaderScrollView.js.map