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

UI component library by Madeja Studio

"use strict";

import { animated } from '@react-spring/native';
import { useEffect, useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { fade, scale, useAnimation } from "../../animation/index.js";
import tw from "../../tailwind/index.js";
import { useTheme } from "../../theme/ThemeContextProvider.js";
import { AnimatedBlurView } from "../Blur/index.js";
import Button from "../Button/index.js";
import { Portal, TOP_PORTAL_KEY } from "../Portal/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const Dialog = ({
  children,
  contentStyle,
  isVisible,
  onClose,
  style,
  ...props
}) => {
  const {
    theme
  } = useTheme();
  const [isDisplayed, setIsDisplayed] = useState(isVisible);
  const {
    animatedStyle: blurAnimatedStyle,
    animationStart: blurAnimationStart,
    animationStop: blurAnimationStop
  } = useAnimation([fade({
    from: 0,
    to: 1
  })]);
  const {
    animatedStyle: contentAnimatedStyle,
    animationStart: contentAnimationStart,
    animationStop: contentAnimationStop
  } = useAnimation([fade({
    from: 0,
    to: 1
  }), scale({
    from: 0.75,
    to: 1
  })], {
    springConfig: {
      friction: 40,
      tension: 1000
    }
  });
  useEffect(() => {
    if (isVisible) {
      setIsDisplayed(true);
      contentAnimationStart();
      blurAnimationStart();
    } else {
      contentAnimationStop();
      blurAnimationStop({
        onResolve: () => setIsDisplayed(false)
      });
    }
  }, [isVisible, blurAnimationStart, blurAnimationStop, contentAnimationStart, contentAnimationStop]);
  if (!isDisplayed) return null;
  return /*#__PURE__*/_jsx(Portal, {
    hostName: TOP_PORTAL_KEY,
    children: /*#__PURE__*/_jsxs(View, {
      style: [tw`absolute fill flex center z-10`, style],
      ...props,
      children: [/*#__PURE__*/_jsx(Pressable, {
        onPress: onClose,
        style: tw`absolute fill`,
        children: /*#__PURE__*/_jsx(AnimatedBlurView, {
          intensity: 20,
          style: [tw`absolute fill`, blurAnimatedStyle],
          tint: "dark"
        })
      }), /*#__PURE__*/_jsxs(animated.View, {
        style: StyleSheet.flatten([tw`px-8 py-6 rounded-3xl max-w-[90%]`, {
          backgroundColor: theme.core.color.background.default
        }, theme.dialog.defaults.style.content, contentStyle, contentAnimatedStyle]),
        children: [children, /*#__PURE__*/_jsx(Button.Icon, {
          color: "secondary",
          hasHapticFeedback: true,
          icon: {
            family: 'Feather',
            name: 'x'
          },
          onPress: onClose,
          style: tw`absolute right-4 top-4`,
          variant: "text"
        })]
      })]
    })
  });
};
//# sourceMappingURL=Dialog.js.map