@madeja-studio/telar
Version:
UI component library by Madeja Studio
2 lines • 4.33 kB
JavaScript
;var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Toast=void 0;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _native=require("@react-spring/native");var Haptics=_interopRequireWildcard(require("expo-haptics"));var _react=require("react");var _reactNative=require("react-native");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _index=require("../../animation/index.js");var _index2=_interopRequireDefault(require("../../tailwind/index.js"));var _ThemeContextProvider=require("../../theme/ThemeContextProvider.js");var _index3=_interopRequireDefault(require("../Button/index.js"));var _index4=require("../layout/index.js");var _jsxRuntime=require("react/jsx-runtime");var _this=void 0,_jsxFileName="/Users/sergio/Development/madeja.studio/telar/src/component/Toast/Toast.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var SWIPE_OUT_THRESHOLD=-20;var OUT_OF_SCREEN_POSITION=-200;var Toast=exports.Toast=(0,_react.forwardRef)(function(_ref,ref){var onClose=_ref.onClose,subtitle=_ref.subtitle,title=_ref.title,variant=_ref.variant;var _useSafeAreaInsets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),top=_useSafeAreaInsets.top;var _useTheme=(0,_ThemeContextProvider.useTheme)(),theme=_useTheme.theme;var _useAnimation=(0,_index.useAnimation)([(0,_index.fade)({from:0,to:1}),(0,_index.push)({from:OUT_OF_SCREEN_POSITION,to:0})],{hasEnterTransition:true}),animatedStyle=_useAnimation.animatedStyle,animationStop=_useAnimation.animationStop,api=_useAnimation.api;(0,_react.useImperativeHandle)(ref,function(){return{close:function close(){return new Promise(function(resolve){animationStop({onResolve:function onResolve(){return resolve();}});});}};});var panResponder=(0,_react.useRef)(_reactNative.PanResponder.create({onMoveShouldSetPanResponder:function onMoveShouldSetPanResponder(){return true;},onPanResponderGrant:function(){var _onPanResponderGrant=(0,_asyncToGenerator2.default)(function*(_ev,state){yield Haptics.impactAsync();api.start({to:{translationY:Math.round(state.dy)}});});function onPanResponderGrant(_x,_x2){return _onPanResponderGrant.apply(this,arguments);}return onPanResponderGrant;}(),onPanResponderMove:function onPanResponderMove(_ev,state){api.set({translationY:(0,_index.withDrag)({threshold:50,value:Math.round(state.dy)})});},onPanResponderRelease:function onPanResponderRelease(_ev,state){if(state.dy<SWIPE_OUT_THRESHOLD){api.start({onResolve:onClose,to:{translationY:OUT_OF_SCREEN_POSITION}});}else{api.start({to:{translationY:0}});}}})).current;return(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"box-none",style:[(0,_index2.default)`absolute top-0 right-0 left-0 bottom-0 flex-1 z-20`,{top:top}],children:(0,_jsxRuntime.jsx)(_reactNative.View,Object.assign({},panResponder.panHandlers,{children:(0,_jsxRuntime.jsxs)(_native.animated.View,{style:[(0,_index2.default)`flex flex-row p-4 rounded-2xl mx-4`,{backgroundColor:theme.toast.color[variant].background},animatedStyle],children:[(0,_jsxRuntime.jsxs)(_index4.Column,{style:(0,_index2.default)`flex-1 mr-2`,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[(0,_index2.default)`font-bold`,{color:theme.toast.color[variant].text}],children:title}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[(0,_index2.default)`mt-2`,{color:theme.toast.color[variant].text}],children:subtitle})]}),(0,_jsxRuntime.jsx)(_index3.default.Icon,{icon:{family:'Feather',name:'x'},iconTint:theme.toast.color[variant].text,onPress:onClose,variant:"text"})]})}))});});
//# sourceMappingURL=Toast.js.map