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

UI component library by Madeja Studio

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CollapsibleHeaderScrollView=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _telar=require("@madeja-studio/telar");var _react=require("react");var _reactNative=require("react-native");var _Header=require("./Header.js");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["children"];var _this=void 0,_jsxFileName="/Users/sergio/Development/madeja.studio/telar/src/component/ScrollView/CollapsibleHeaderScrollView.tsx";var INITIAL_HEADER_HEIGHT=80;var SCROLLING_CEILING=60;var SCROLL_VIEW_MARGIN_TOP=40;var CollapsibleHeaderScrollView=exports.CollapsibleHeaderScrollView=function CollapsibleHeaderScrollView(_ref){var children=_ref.children,headerProps=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(INITIAL_HEADER_HEIGHT),_useState2=(0,_slicedToArray2.default)(_useState,2),headerHeight=_useState2[0],setHeaderHeight=_useState2[1];var _useState3=(0,_react.useState)(0),_useState4=(0,_slicedToArray2.default)(_useState3,2),scrollOffset=_useState4[0],setScrollOffset=_useState4[1];var onScroll=(0,_react.useCallback)(function(_ref2){var nativeEvent=_ref2.nativeEvent;setScrollOffset(nativeEvent.contentOffset.y);},[]);return(0,_jsxRuntime.jsxs)(_telar.Column,{children:[(0,_jsxRuntime.jsx)(_Header.Header,Object.assign({},headerProps,{onLayout:function onLayout(event){return setHeaderHeight(event.nativeEvent.layout.height);},scrollConfig:{ceiling:SCROLLING_CEILING,floor:0,offset:scrollOffset},separatorMarginTop:SCROLL_VIEW_MARGIN_TOP})),(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{contentContainerStyle:{paddingTop:headerHeight-34},onScroll:onScroll,scrollEventThrottle:16,style:{marginTop:SCROLL_VIEW_MARGIN_TOP},children:children})]});};
//# sourceMappingURL=CollapsibleHeaderScrollView.js.map