taro-uno-ui 1.0.0 → 1.0.2

package/src/hooks/useLifecycle.ts

@@ -1,399 +0,0 @@
-/**
- * 生命周期管理相关的自定义hooks
- * 提供通用的生命周期管理逻辑，包括组件挂载、卸载、副作用处理等
- */
-
-import { useEffect, useRef, useCallback, useState } from 'react';
-
-// ==================== 组件挂载状态 ====================
-
-/** 组件挂载状态hook */
-export function useMounted() {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    return () => {
-      setMounted(false);
-    };
-  }, []);
-
-  return mounted;
-}
-
-// ==================== 组件挂载和卸载事件 ====================
-
-interface LifecycleOptions {
-  onMount?: () => void | (() => void);
-  onUnmount?: () => void;
-}
-
-/** 组件生命周期hook */
-export function useLifecycle(options: LifecycleOptions = {}) {
-  const { onMount, onUnmount } = options;
-  const cleanupRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    if (onMount) {
-      const cleanup = onMount();
-      if (typeof cleanup === 'function') {
-        cleanupRef.current = cleanup;
-      }
-    }
-
-    return () => {
-      cleanupRef.current?.();
-      onUnmount?.();
-    };
-  }, [onMount, onUnmount]);
-}
-
-// ==================== 一次性执行 ====================
-
-/** 一次性执行hook */
-export function useOnce(callback: () => void | (() => void), dependencies: unknown[] = []) {
-  const executedRef = useRef(false);
-  const cleanupRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    if (!executedRef.current) {
-      executedRef.current = true;
-      const cleanup = callback();
-      if (typeof cleanup === 'function') {
-        cleanupRef.current = cleanup;
-      }
-    }
-
-    return () => {
-      cleanupRef.current?.();
-    };
-  }, dependencies);
-}
-
-// ==================== 条件执行 ====================
-
-/** 条件执行hook */
-export function useConditionalEffect(
-  callback: () => void | (() => void),
-  condition: boolean,
-  dependencies: unknown[] = [],
-) {
-  const cleanupRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    if (condition) {
-      const cleanup = callback();
-      if (typeof cleanup === 'function') {
-        cleanupRef.current = cleanup;
-      }
-    }
-
-    return () => {
-      cleanupRef.current?.();
-    };
-  }, [condition, ...dependencies]);
-}
-
-// ==================== 异步副作用管理 ====================
-
-interface AsyncEffectOptions<T> {
-  onError?: (error: Error) => void;
-  onSuccess?: (result: T) => void;
-}
-
-/** 异步副作用hook */
-export function useAsyncEffect<T>(
-  asyncCallback: () => Promise<T> | (() => Promise<T>),
-  options: AsyncEffectOptions<T> = {},
-  dependencies: unknown[] = [],
-) {
-  const { onError, onSuccess } = options;
-  const mountedRef = useRef(true);
-
-  useEffect(() => {
-    mountedRef.current = true;
-
-    const executeAsync = async () => {
-      try {
-        const res = asyncCallback();
-        const result = typeof res === 'function' ? await (res as () => Promise<T>)() : await res;
-        if (mountedRef.current) {
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (mountedRef.current) {
-          onError?.(error as Error);
-        }
-      }
-    };
-
-    executeAsync();
-
-    return () => {
-      mountedRef.current = false;
-    };
-  }, dependencies);
-}
-
-// ==================== 定时器管理 ====================
-
-interface TimerOptions {
-  immediate?: boolean;
-}
-
-/** 定时器hook */
-export function useTimer(callback: () => void, delay: number, options: TimerOptions = {}) {
-  const { immediate = false } = options;
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-  const [isActive, setIsActive] = useState(false);
-
-  const start = useCallback(() => {
-    if (timerRef.current) return;
-
-    if (immediate) {
-      callback();
-    }
-
-    timerRef.current = setInterval(callback, delay);
-    setIsActive(true);
-  }, [callback, delay, immediate]);
-
-  const stop = useCallback(() => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-      setIsActive(false);
-    }
-  }, []);
-
-  const reset = useCallback(() => {
-    stop();
-    start();
-  }, [stop, start]);
-
-  useEffect(() => {
-    return () => {
-      stop();
-    };
-  }, [stop]);
-
-  return {
-    start,
-    stop,
-    reset,
-    isActive,
-  };
-}
-
-// ==================== 延迟执行 ====================
-
-/** 延迟执行hook */
-export function useDelay<T>(callback: () => T, delay: number, dependencies: any[] = []) {
-  const [result, setResult] = useState<T | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    setLoading(true);
-    const timer = setTimeout(() => {
-      const callbackResult = callback();
-      setResult(callbackResult);
-      setLoading(false);
-    }, delay);
-
-    return () => clearTimeout(timer);
-  }, dependencies);
-
-  return { result, loading };
-}
-
-// ==================== 网络状态监听 ====================
-
-interface NetworkState {
-  online: boolean;
-  offline: boolean;
-  effectiveType?: string;
-  downlink?: number;
-  rtt?: number;
-}
-
-/** 网络状态监听hook */
-export function useNetworkState(): NetworkState {
-  const [networkState, setNetworkState] = useState<NetworkState>({
-    online: typeof navigator !== 'undefined' ? navigator.onLine : true,
-    offline: typeof navigator !== 'undefined' ? !navigator.onLine : false,
-  });
-
-  useEffect(() => {
-    const handleOnline = () => {
-      setNetworkState((prev) => ({ ...prev, online: true, offline: false }));
-    };
-
-    const handleOffline = () => {
-      setNetworkState((prev) => ({ ...prev, online: false, offline: true }));
-    };
-
-    const handleConnectionChange = () => {
-      type NavigatorConnection = {
-        effectiveType?: string;
-        downlink?: number;
-        rtt?: number;
-        addEventListener?: (event: string, handler: () => void) => void;
-        removeEventListener?: (event: string, handler: () => void) => void;
-      };
-      const connection = (navigator as Navigator & { connection?: NavigatorConnection }).connection;
-      if (connection) {
-        setNetworkState((prev) => ({
-          ...prev,
-          effectiveType: connection.effectiveType,
-          downlink: connection.downlink,
-          rtt: connection.rtt,
-        }));
-      }
-    };
-
-    window.addEventListener('online', handleOnline);
-    window.addEventListener('offline', handleOffline);
-
-    const connection = (navigator as Navigator & { connection?: NavigatorConnection }).connection;
-    if (connection && typeof connection.addEventListener === 'function') {
-      connection.addEventListener('change', handleConnectionChange);
-      handleConnectionChange();
-    }
-
-    return () => {
-      window.removeEventListener('online', handleOnline);
-      window.removeEventListener('offline', handleOffline);
-
-      if (connection && typeof connection.removeEventListener === 'function') {
-        connection.removeEventListener('change', handleConnectionChange);
-      }
-    };
-  }, []);
-
-  return networkState;
-}
-
-// ==================== 页面可见性监听 ====================
-
-/** 页面可见性监听hook */
-export function usePageVisibility() {
-  const [isVisible, setIsVisible] = useState(true);
-
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      setIsVisible(!document.hidden);
-    };
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, []);
-
-  return isVisible;
-}
-
-// ==================== 窗口大小监听 ====================
-
-interface WindowSize {
-  width: number;
-  height: number;
-}
-
-/** 窗口大小监听hook */
-export function useWindowSize(): WindowSize {
-  const [windowSize, setWindowSize] = useState<WindowSize>({
-    width: typeof window !== 'undefined' ? window.innerWidth : 0,
-    height: typeof window !== 'undefined' ? window.innerHeight : 0,
-  });
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    };
-
-    window.addEventListener('resize', handleResize);
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  return windowSize;
-}
-
-// ==================== 滚动位置监听 ====================
-
-interface ScrollPosition {
-  x: number;
-  y: number;
-}
-
-/** 滚动位置监听hook */
-export function useScrollPosition(): ScrollPosition {
-  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({
-    x: 0,
-    y: 0,
-  });
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setScrollPosition({
-        x: window.pageXOffset,
-        y: window.pageYOffset,
-      });
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    handleScroll();
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
-  return scrollPosition;
-}
-
-// ==================== 媒体查询监听 ====================
-
-interface MediaQueryOptions {
-  defaultMatches?: boolean;
-}
-
-/** 媒体查询监听hook */
-export function useMediaQuery(query: string, options: MediaQueryOptions = {}): boolean {
-  const { defaultMatches = false } = options;
-  const [matches, setMatches] = useState(defaultMatches);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const mediaQuery = window.matchMedia(query);
-    setMatches(mediaQuery.matches);
-
-    const handleChange = (event: MediaQueryListEvent) => {
-      setMatches(event.matches);
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener('change', handleChange);
-    };
-  }, [query]);
-
-  return matches;
-}
-type NavigatorConnection = {
-  effectiveType?: string;
-  downlink?: number;
-  rtt?: number;
-  addEventListener?: (event: string, handler: () => void) => void;
-  removeEventListener?: (event: string, handler: () => void) => void;
-};

package/src/hooks/useMediaQuery.ts

@@ -1,75 +0,0 @@
-/**
- * useMediaQuery Hook
- * Track media query matches for responsive design
- *
- * @example
- * ```typescript
- * const isMobile = useMediaQuery('(max-width: 768px)');
- * const isDark = useMediaQuery('(prefers-color-scheme: dark)');
- * ```
- */
-
-import { useState, useEffect } from 'react';
-
-/**
- * Hook for tracking media query matches
- */
-export function useMediaQuery(query: string): boolean {
-  // Initialize with false for SSR
-  const [matches, setMatches] = useState(false);
-
-  useEffect(() => {
-    // Check if window is defined (client-side)
-    if (typeof window === 'undefined' || !window.matchMedia) {
-      return () => {};
-    }
-
-    const mediaQuery = window.matchMedia(query);
-
-    // Set initial value
-    setMatches(mediaQuery.matches);
-
-    // Create event listener
-    const handler = (event: MediaQueryListEvent) => {
-      setMatches(event.matches);
-    };
-
-    // Modern browsers
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener('change', handler);
-      return () => mediaQuery.removeEventListener('change', handler);
-    }
-    // Legacy browsers
-    else if (mediaQuery.addListener) {
-      mediaQuery.addListener(handler);
-      return () => mediaQuery.removeListener(handler);
-    }
-
-    return () => {};
-  }, [query]);
-
-  return matches;
-}
-
-/**
- * Predefined breakpoint hooks
- */
-export function useIsMobile(): boolean {
-  return useMediaQuery('(max-width: 768px)');
-}
-
-export function useIsTablet(): boolean {
-  return useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
-}
-
-export function useIsDesktop(): boolean {
-  return useMediaQuery('(min-width: 1025px)');
-}
-
-export function usePrefersDarkMode(): boolean {
-  return useMediaQuery('(prefers-color-scheme: dark)');
-}
-
-export function usePrefersReducedMotion(): boolean {
-  return useMediaQuery('(prefers-reduced-motion: reduce)');
-}

package/src/hooks/useMutation.ts

@@ -1,233 +0,0 @@
-/**
- * useMutation Hook
- * React hook for data mutation operations (POST, PUT, DELETE, PATCH)
- *
- * @example
- * ```typescript
- * const { mutate, loading, error } = useMutation<User, CreateUserInput>({
- *   url: '/api/users',
- *   method: 'POST',
- *   onSuccess: (data) => {
- *     console.log('User created:', data);
- *   },
- * });
- *
- * // Trigger mutation
- * await mutate({ name: 'John Doe', email: 'john@example.com' });
- * ```
- */
-
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { Request } from '../utils/http/request';
-import type { RequestOptions, UseMutationOptions, MutationState } from '../utils/http/types';
-
-export interface UseMutationResult<T, V = any> extends MutationState<T, V> {
-  /** Execute mutation */
-  mutate: (variables: V, options?: Partial<RequestOptions>) => Promise<T | undefined>;
-  /** Execute mutation (async version) */
-  mutateAsync: (variables: V, options?: Partial<RequestOptions>) => Promise<T>;
-  /** Reset mutation state */
-  reset: () => void;
-}
-
-/**
- * Hook for mutation operations (POST, PUT, DELETE, PATCH)
- */
-export function useMutation<T = any, V = any>(
-  options: RequestOptions & UseMutationOptions<T, V>,
-): UseMutationResult<T, V> {
-  const {
-    optimisticData,
-    rollbackOnError = false,
-    onError,
-    onSuccess,
-    onMutate,
-    onCompleted,
-    ...requestOptions
-  } = options;
-
-  const [state, setState] = useState<MutationState<T, V>>({
-    data: null,
-    error: null,
-    loading: false,
-    variables: null,
-  });
-
-  const clientRef = useRef<Request>(new Request());
-  const previousDataRef = useRef<T | null>(null);
-  const mountedRef = useRef(true);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  /**
-   * Execute mutation
-   */
-  const mutateAsync = useCallback(
-    async (variables: V, overrideOptions?: Partial<RequestOptions>): Promise<T> => {
-      const mergedOptions = {
-        ...requestOptions,
-        ...overrideOptions,
-        data: variables,
-      };
-
-      // Store previous data for potential rollback
-      previousDataRef.current = state.data;
-
-      // Call onMutate hook
-      if (onMutate) {
-        await onMutate(variables);
-      }
-
-      // Apply optimistic update
-      if (optimisticData) {
-        const optimisticResult = optimisticData(variables);
-        setState({
-          data: optimisticResult,
-          error: null,
-          loading: true,
-          variables,
-        });
-      } else {
-        setState((prev) => ({
-          ...prev,
-          loading: true,
-          error: null,
-          variables,
-        }));
-      }
-
-      try {
-        const result = await clientRef.current.request<T>(mergedOptions);
-
-        if (mountedRef.current) {
-          setState({
-            data: result,
-            error: null,
-            loading: false,
-            variables,
-          });
-
-          onSuccess?.(result, variables);
-          onCompleted?.(result, null, variables);
-        }
-
-        return result;
-      } catch (error) {
-        const err = error as Error;
-
-        if (mountedRef.current) {
-          // Rollback optimistic update if enabled
-          const finalData = rollbackOnError ? previousDataRef.current : state.data;
-
-          setState({
-            data: finalData,
-            error: err,
-            loading: false,
-            variables,
-          });
-
-          onError?.(err, variables);
-          onCompleted?.(null, err, variables);
-        }
-
-        throw err;
-      }
-    },
-    [requestOptions, optimisticData, rollbackOnError, onMutate, onError, onSuccess, onCompleted, state.data],
-  );
-
-  /**
-   * Execute mutation (returns undefined on error for compatibility)
-   */
-  const mutate = useCallback(
-    async (variables: V, overrideOptions?: Partial<RequestOptions>): Promise<T | undefined> => {
-      try {
-        return await mutateAsync(variables, overrideOptions);
-      } catch {
-        return undefined;
-      }
-    },
-    [mutateAsync],
-  );
-
-  /**
-   * Reset mutation state
-   */
-  const reset = useCallback(() => {
-    setState({
-      data: null,
-      error: null,
-      loading: false,
-      variables: null,
-    });
-    previousDataRef.current = null;
-  }, []);
-
-  return {
-    ...state,
-    mutate,
-    mutateAsync,
-    reset,
-  };
-}
-
-/**
- * Hook for POST mutations
- */
-export function usePost<T = any, V = any>(
-  url: string,
-  options: Omit<UseMutationOptions<T, V>, 'url' | 'method'> = {},
-): UseMutationResult<T, V> {
-  return useMutation<T, V>({
-    ...options,
-    url,
-    method: 'POST',
-  });
-}
-
-/**
- * Hook for PUT mutations
- */
-export function usePut<T = any, V = any>(
-  url: string,
-  options: Omit<UseMutationOptions<T, V>, 'url' | 'method'> = {},
-): UseMutationResult<T, V> {
-  return useMutation<T, V>({
-    ...options,
-    url,
-    method: 'PUT',
-  });
-}
-
-/**
- * Hook for PATCH mutations
- */
-export function usePatch<T = any, V = any>(
-  url: string,
-  options: Omit<UseMutationOptions<T, V>, 'url' | 'method'> = {},
-): UseMutationResult<T, V> {
-  return useMutation<T, V>({
-    ...options,
-    url,
-    method: 'PATCH',
-  });
-}
-
-/**
- * Hook for DELETE mutations
- */
-export function useDelete<T = any, V = any>(
-  url: string,
-  options: Omit<UseMutationOptions<T, V>, 'url' | 'method'> = {},
-): UseMutationResult<T, V> {
-  return useMutation<T, V>({
-    ...options,
-    url,
-    method: 'DELETE',
-  });
-}