@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/drawer/index.d.cts

@@ -1,58 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type DrawerPosition = 'top' | 'left' | 'bottom' | 'right';
-type DrawerProps = {
-    /**
-     * Content to render inside the drawer.
-     */
-    children: ReactNode;
-    /**
-     * Whether the drawer is visible.
-     * @default false
-     */
-    isOpen: boolean;
-    /**
-     * Position of the drawer.
-     * @default 'left'
-     */
-    position?: DrawerPosition;
-    /**
-     * The theme color of the drawer.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Width of the drawer (for left/right position).
-     * @default 280
-     */
-    width?: number;
-    /**
-     * Height of the drawer (for top/bottom position).
-     * @default 280
-     */
-    height?: number;
-    /**
-     * Whether to show overlay backdrop.
-     * @default true
-     */
-    showOverlay?: boolean;
-    /**
-     * Callback fired when drawer should close (overlay tap or back button).
-     */
-    onClose?: () => void;
-    /**
-     * Custom styles for the drawer container.
-     */
-    customStyle?: ViewStyle;
-    /**
-     * Disable slide animation.
-     * @default false
-     */
-    disableAnimation?: boolean;
-};
-
-declare const Drawer: React.FC<DrawerProps>;
-
-export { Drawer, type DrawerPosition, type DrawerProps };

package/dist/drawer/index.d.ts

@@ -1,58 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type DrawerPosition = 'top' | 'left' | 'bottom' | 'right';
-type DrawerProps = {
-    /**
-     * Content to render inside the drawer.
-     */
-    children: ReactNode;
-    /**
-     * Whether the drawer is visible.
-     * @default false
-     */
-    isOpen: boolean;
-    /**
-     * Position of the drawer.
-     * @default 'left'
-     */
-    position?: DrawerPosition;
-    /**
-     * The theme color of the drawer.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Width of the drawer (for left/right position).
-     * @default 280
-     */
-    width?: number;
-    /**
-     * Height of the drawer (for top/bottom position).
-     * @default 280
-     */
-    height?: number;
-    /**
-     * Whether to show overlay backdrop.
-     * @default true
-     */
-    showOverlay?: boolean;
-    /**
-     * Callback fired when drawer should close (overlay tap or back button).
-     */
-    onClose?: () => void;
-    /**
-     * Custom styles for the drawer container.
-     */
-    customStyle?: ViewStyle;
-    /**
-     * Disable slide animation.
-     * @default false
-     */
-    disableAnimation?: boolean;
-};
-
-declare const Drawer: React.FC<DrawerProps>;
-
-export { Drawer, type DrawerPosition, type DrawerProps };

package/dist/drawer/index.js

@@ -1,237 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/drawer/drawer.tsx
-import React, { useEffect, useMemo as useMemo2, useRef, useState } from "react";
-import { Animated, Easing, Modal, Pressable, View } from "react-native";
-
-// src/components/drawer/drawer.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
-var useDrawerStyles = (themeColor, position, width, height) => {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    const safeThemeColor = getSafeThemeColor(themeColor);
-    const colorScheme = theme.colors[safeThemeColor];
-    const isDefaultThemeColor = safeThemeColor === "default";
-    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.container : "#FFFFFF";
-    const backgroundColor = isDefaultThemeColor ? defaultBackgroundColor : colorScheme.container;
-    const sizeStyle = position === "left" || position === "right" ? { width } : { height };
-    return {
-      backgroundColor,
-      ...sizeStyle
-    };
-  }, [height, position, theme, themeColor, width]);
-};
-var getTranslateValue = (position, size) => {
-  switch (position) {
-    case "left":
-      return { x: -size, y: 0 };
-    case "right":
-      return { x: size, y: 0 };
-    case "top":
-      return { x: 0, y: -size };
-    case "bottom":
-      return { x: 0, y: size };
-    default:
-      return { x: -size, y: 0 };
-  }
-};
-
-// src/components/drawer/drawer.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  overlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.5)"
-  },
-  drawerContainer: {
-    position: "absolute",
-    backgroundColor: "#ffffff"
-  },
-  drawerLeft: {
-    top: 0,
-    left: 0,
-    bottom: 0
-  },
-  drawerRight: {
-    top: 0,
-    right: 0,
-    bottom: 0
-  },
-  drawerTop: {
-    top: 0,
-    left: 0,
-    right: 0
-  },
-  drawerBottom: {
-    bottom: 0,
-    left: 0,
-    right: 0
-  }
-});
-
-// src/components/drawer/drawer.tsx
-var Drawer = ({
-  children,
-  isOpen,
-  position = "left",
-  themeColor = "default",
-  width = 280,
-  height = 280,
-  showOverlay = true,
-  onClose,
-  customStyle,
-  disableAnimation = false
-}) => {
-  const DRAWER_ANIMATION_DURATION = 250;
-  const [isModalMounted, setIsModalMounted] = useState(false);
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const isModalMountedRef = useRef(false);
-  const animationRef = useRef(null);
-  const size = position === "left" || position === "right" ? width : height;
-  const initialTranslateValues = useMemo2(
-    () => getTranslateValue(position, size),
-    [position, size]
-  );
-  const translateX = useRef(new Animated.Value(initialTranslateValues.x)).current;
-  const translateY = useRef(new Animated.Value(initialTranslateValues.y)).current;
-  const overlayOpacity = useRef(new Animated.Value(0)).current;
-  const containerStyle = useDrawerStyles(themeColor, position, width, height);
-  const positionStyle = position === "left" ? styles.drawerLeft : position === "right" ? styles.drawerRight : position === "top" ? styles.drawerTop : styles.drawerBottom;
-  useEffect(() => {
-    const translateValues = getTranslateValue(position, size);
-    if (animationRef.current) {
-      animationRef.current.stop();
-      animationRef.current = null;
-    }
-    if (isOpen) {
-      if (!isModalMountedRef.current) {
-        translateX.setValue(translateValues.x);
-        translateY.setValue(translateValues.y);
-        overlayOpacity.setValue(0);
-        isModalMountedRef.current = true;
-        setIsModalMounted(true);
-        setIsModalVisible(true);
-      }
-      if (disableAnimation) {
-        translateX.setValue(0);
-        translateY.setValue(0);
-        overlayOpacity.setValue(1);
-        return;
-      }
-      const animation2 = Animated.parallel([
-        Animated.timing(translateX, {
-          toValue: 0,
-          duration: DRAWER_ANIMATION_DURATION,
-          easing: Easing.out(Easing.cubic),
-          useNativeDriver: true
-        }),
-        Animated.timing(translateY, {
-          toValue: 0,
-          duration: DRAWER_ANIMATION_DURATION,
-          easing: Easing.out(Easing.cubic),
-          useNativeDriver: true
-        }),
-        Animated.timing(overlayOpacity, {
-          toValue: 1,
-          duration: DRAWER_ANIMATION_DURATION,
-          useNativeDriver: true
-        })
-      ]);
-      animationRef.current = animation2;
-      animation2.start(() => {
-        if (animationRef.current === animation2) {
-          animationRef.current = null;
-        }
-      });
-      return;
-    }
-    if (!isModalMountedRef.current) {
-      return;
-    }
-    if (disableAnimation) {
-      translateX.setValue(translateValues.x);
-      translateY.setValue(translateValues.y);
-      overlayOpacity.setValue(0);
-      isModalMountedRef.current = false;
-      setIsModalVisible(false);
-      setIsModalMounted(false);
-      return;
-    }
-    const animation = Animated.parallel([
-      Animated.timing(translateX, {
-        toValue: translateValues.x,
-        duration: DRAWER_ANIMATION_DURATION,
-        easing: Easing.in(Easing.cubic),
-        useNativeDriver: true
-      }),
-      Animated.timing(translateY, {
-        toValue: translateValues.y,
-        duration: DRAWER_ANIMATION_DURATION,
-        easing: Easing.in(Easing.cubic),
-        useNativeDriver: true
-      }),
-      Animated.timing(overlayOpacity, {
-        toValue: 0,
-        duration: DRAWER_ANIMATION_DURATION,
-        useNativeDriver: true
-      })
-    ]);
-    animationRef.current = animation;
-    animation.start(({ finished }) => {
-      if (animationRef.current === animation) {
-        animationRef.current = null;
-      }
-      if (finished) {
-        isModalMountedRef.current = false;
-        setIsModalVisible(false);
-        setIsModalMounted(false);
-      }
-    });
-  }, [
-    isOpen,
-    position,
-    size,
-    disableAnimation,
-    translateX,
-    translateY,
-    overlayOpacity
-  ]);
-  if (!isModalMounted) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(
-    Modal,
-    {
-      transparent: true,
-      visible: isModalVisible,
-      animationType: "none",
-      onRequestClose: onClose
-    },
-    /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }, showOverlay && /* @__PURE__ */ React.createElement(Pressable, { onPress: onClose, style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.overlay, { opacity: overlayOpacity }] })), /* @__PURE__ */ React.createElement(
-      Animated.View,
-      {
-        style: [
-          styles.drawerContainer,
-          positionStyle,
-          containerStyle,
-          {
-            transform: [{ translateX }, { translateY }]
-          },
-          customStyle
-        ]
-      },
-      children
-    ))
-  );
-};
-export {
-  Drawer
-};