@madeja-studio/telar/lib/commonjs/component/Dialog/Dialog.js

UI component library by Madeja Studio

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Dialog=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _native=require("@react-spring/native");var _react=require("react");var _reactNative=require("react-native");var _index=require("../../animation/index.js");var _index2=_interopRequireDefault(require("../../tailwind/index.js"));var _ThemeContextProvider=require("../../theme/ThemeContextProvider.js");var _index3=require("../Blur/index.js");var _index4=_interopRequireDefault(require("../Button/index.js"));var _index5=require("../Portal/index.js");var _jsxRuntime=require("react/jsx-runtime");var _excluded=["children","contentStyle","isVisible","onClose","style"];var _this=void 0,_jsxFileName="/Users/sergio/Development/madeja.studio/telar/src/component/Dialog/Dialog.tsx";var Dialog=exports.Dialog=function Dialog(_ref){var children=_ref.children,contentStyle=_ref.contentStyle,isVisible=_ref.isVisible,onClose=_ref.onClose,style=_ref.style,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useTheme=(0,_ThemeContextProvider.useTheme)(),theme=_useTheme.theme;var _useState=(0,_react.useState)(isVisible),_useState2=(0,_slicedToArray2.default)(_useState,2),isDisplayed=_useState2[0],setIsDisplayed=_useState2[1];var _useAnimation=(0,_index.useAnimation)([(0,_index.fade)({from:0,to:1})]),blurAnimatedStyle=_useAnimation.animatedStyle,blurAnimationStart=_useAnimation.animationStart,blurAnimationStop=_useAnimation.animationStop;var _useAnimation2=(0,_index.useAnimation)([(0,_index.fade)({from:0,to:1}),(0,_index.scale)({from:0.75,to:1})],{springConfig:{friction:40,tension:1000}}),contentAnimatedStyle=_useAnimation2.animatedStyle,contentAnimationStart=_useAnimation2.animationStart,contentAnimationStop=_useAnimation2.animationStop;(0,_react.useEffect)(function(){if(isVisible){setIsDisplayed(true);contentAnimationStart();blurAnimationStart();}else{contentAnimationStop();blurAnimationStop({onResolve:function onResolve(){return setIsDisplayed(false);}});}},[isVisible,blurAnimationStart,blurAnimationStop,contentAnimationStart,contentAnimationStop]);if(!isDisplayed)return null;return(0,_jsxRuntime.jsx)(_index5.Portal,{hostName:_index5.TOP_PORTAL_KEY,children:(0,_jsxRuntime.jsxs)(_reactNative.View,Object.assign({style:[(0,_index2.default)`absolute fill flex center z-10`,style]},props,{children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:onClose,style:(0,_index2.default)`absolute fill`,children:(0,_jsxRuntime.jsx)(_index3.AnimatedBlurView,{intensity:20,style:[(0,_index2.default)`absolute fill`,blurAnimatedStyle],tint:"dark"})}),(0,_jsxRuntime.jsxs)(_native.animated.View,{style:_reactNative.StyleSheet.flatten([(0,_index2.default)`px-8 py-6 rounded-3xl max-w-[90%]`,{backgroundColor:theme.core.color.background.default},theme.dialog.defaults.style.content,contentStyle,contentAnimatedStyle]),children:[children,(0,_jsxRuntime.jsx)(_index4.default.Icon,{color:"secondary",hasHapticFeedback:true,icon:{family:'Feather',name:'x'},onPress:onClose,style:(0,_index2.default)`absolute right-4 top-4`,variant:"text"})]})]}))});};
//# sourceMappingURL=Dialog.js.map