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

UI component library by Madeja Studio

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Header=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _cepillo=require("@madeja-studio/cepillo");var _telar=require("@madeja-studio/telar");var _native=require("@react-spring/native");var _react=require("react");var _index=_interopRequireDefault(require("../../tailwind/index.js"));var _index2=_interopRequireDefault(require("../Button/index.js"));var _index3=require("../Separator/index.js");var _index4=require("../Text/index.js");var _jsxRuntime=require("react/jsx-runtime");var _this=void 0,_jsxFileName="/Users/sergio/Development/madeja.studio/telar/src/component/ScrollView/Header.tsx";var AnimatedTextH1=(0,_native.animated)(_index4.H1);var AnimatedSeparator=(0,_native.animated)(_index3.Separator);var MIN_SCALE=0.75;var MAX_SCALE=1;var Header=exports.Header=function Header(_ref){var userButtons=_ref.buttons,onLayout=_ref.onLayout,_onPress=_ref.onPress,userScrollConfig=_ref.scrollConfig,separatorMarginTop=_ref.separatorMarginTop,style=_ref.style,textStyle=_ref.textStyle,title=_ref.title;var buttons=(0,_cepillo.valueToArray)(userButtons);var animatedScale=(0,_native.useSpringValue)(1,{config:{duration:1}});var animatedSeparatorOpacity=(0,_native.useSpringValue)(0,{config:{duration:1}});var buttonsOpacity=(0,_native.useSpringValue)(1,{config:{duration:1}});var scrollConfig=userScrollConfig!=null?userScrollConfig:{ceiling:1,floor:0,offset:1};var _useState=(0,_react.useState)({height:0,width:0}),_useState2=(0,_slicedToArray2.default)(_useState,2),textSize=_useState2[0],setTextSize=_useState2[1];var _useTheme=(0,_telar.useTheme)(),theme=_useTheme.theme;(0,_react.useEffect)(function(){var scale=MIN_SCALE+MAX_SCALE-(0,_cepillo.lerp)(scrollConfig.offset,{max:scrollConfig.ceiling,min:scrollConfig.floor},{max:MAX_SCALE,min:MIN_SCALE});animatedScale.start(scale).then();var separatorOpacity=(0,_cepillo.lerp)(scrollConfig.offset,{max:scrollConfig.ceiling,min:scrollConfig.floor},{max:1,min:0});animatedSeparatorOpacity.start(separatorOpacity).then();buttonsOpacity.start(1-separatorOpacity).then();},[scrollConfig]);return(0,_jsxRuntime.jsxs)(_native.animated.View,{onLayout:onLayout,style:[(0,_index.default)`flex-col absolute top-0 inset-x-0 z-10`,style],children:[(0,_jsxRuntime.jsxs)(_telar.Row,{style:(0,_index.default)`justify-between`,children:[(0,_jsxRuntime.jsx)(AnimatedTextH1,{onLayout:function onLayout(event){setTextSize(event.nativeEvent.layout);},style:[textStyle,{transform:[{translateX:-textSize.width*0.5},{translateY:-textSize.height},{scale:animatedScale},{translateX:textSize.width*0.5},{translateY:textSize.height}]}],children:title}),(0,_jsxRuntime.jsx)(_native.animated.View,{style:[(0,_index.default)`flex-row`,{opacity:buttonsOpacity,transform:[{translateY:-textSize.height},{scale:animatedScale},{translateY:textSize.height}]}],children:buttons.map(function(option,index){return(0,_jsxRuntime.jsx)(_index2.default.Icon,{icon:option.icon,iconTint:theme.core.color.primary,onPress:function onPress(){return _onPress==null?void 0:_onPress(index);},variant:"text"},`${option.icon.family}_${option.icon.name}`);})})]}),(0,_jsxRuntime.jsx)(AnimatedSeparator,{style:[(0,_index.default)`absolute`,{opacity:animatedSeparatorOpacity,top:separatorMarginTop}]})]});};
//# sourceMappingURL=Header.js.map