Navigation

/**
 * Navigation component for page transitions
 * @supported all platforms
 */
const Navigator: ComponentType<NavigatorProps>;

interface NavigatorProps extends StandardProps {
  /** Target page URL or path
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   */
  url?: string;
  /** Navigation open type
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default "navigate"
   */
  openType?: keyof NavigatorProps.OpenType;
  /** Delta for navigateBack
   * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
   * @default 1
   */
  delta?: number;
  /** App ID for mini-program navigation
   * @supported weapp, tt, qq, jd
   */
  appId?: string;
  /** Target path within target mini-program
   * @supported weapp, tt, qq, jd
   */
  path?: string;
  /** Extra data passed to target page
   * @supported weapp, tt, qq, jd
   */
  extraData?: Record<string, any>;
  /** Version type for mini-program navigation
   * @supported weapp, tt, qq, jd
   * @default "release"
   */
  version?: 'develop' | 'trial' | 'release';
  /** Hover class name
   * @supported weapp, alipay, swan, tt, qq, jd
   * @default "navigator-hover"
   */
  hoverClass?: string;
  /** Hover start time in milliseconds
   * @supported weapp, alipay, swan, tt, qq, jd
   * @default 50
   */
  hoverStartTime?: number;
  /** Hover stay time in milliseconds
   * @supported weapp, alipay, swan, tt, qq, jd
   * @default 600
   */
  hoverStayTime?: number;
  /** Navigation success callback */
  onSuccess?: (event: NavigatorSuccessEvent) => void;
  /** Navigation fail callback */
  onFail?: (event: NavigatorFailEvent) => void;
  /** Navigation complete callback */
  onComplete?: (event: TaroEvent) => void;
}

declare namespace NavigatorProps {
  interface OpenType {
    /** Navigate to new page */
    navigate: '';
    /** Redirect to new page */
    redirect: '';
    /** Switch to tabbar page */
    switchTab: '';
    /** Relaunch application */
    reLaunch: '';
    /** Navigate back */
    navigateBack: '';
    /** Exit mini-program */
    exit: '';
    /** Navigate to mini-program */
    navigateToMiniProgram: '';
  }
}

/**
 * Navigation bar component
 * @supported weapp, tt, qq, jd
 */
const NavigationBar: ComponentType<NavigationBarProps>;

interface NavigationBarProps extends StandardProps {
  /** Navigation bar title
   * @supported weapp, tt, qq, jd
   */
  title?: string;
  /** Whether loading is shown
   * @supported weapp, tt, qq, jd
   * @default false
   */
  loading?: boolean;
  /** Front color for status bar and navigation bar
   * @supported weapp, tt, qq, jd
   * @default "#000000"
   */
  frontColor?: '#000000' | '#ffffff';
  /** Background color for navigation bar
   * @supported weapp, tt, qq, jd
   * @default "#ffffff"
   */
  backgroundColor?: string;
  /** Color animation duration in milliseconds
   * @supported weapp, tt, qq, jd
   * @default 0
   */
  colorAnimationDuration?: number;
  /** Color animation timing function
   * @supported weapp, tt, qq, jd
   * @default "linear"
   */
  colorAnimationTimingFunc?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
}

/**
 * Functional page navigation component
 * @supported weapp, tt, qq, jd
 */
const FunctionalPageNavigator: ComponentType<FunctionalPageNavigatorProps>;

interface FunctionalPageNavigatorProps extends StandardProps {
  /** Functional page version
   * @supported weapp, tt, qq, jd
   * @default "release"
   */
  version?: 'develop' | 'trial' | 'release';
  /** Functional page name
   * @supported weapp, tt, qq, jd
   */
  name?: 'loginAndGetUserInfo' | 'requestPayment' | 'chooseAddress';
  /** Arguments passed to functional page
   * @supported weapp, tt, qq, jd
   */
  args?: Record<string, any>;
  /** Navigation success callback */
  onSuccess?: (event: FunctionalPageNavigatorSuccessEvent) => void;
  /** Navigation fail callback */
  onFail?: (event: FunctionalPageNavigatorFailEvent) => void;
  /** Navigation cancel callback */
  onCancel?: (event: TaroEvent) => void;
}

/**
 * Tab navigation component
 * @supported weapp, tt, qq, jd, h5
 */
const Tabs: ComponentType<TabsProps>;

interface TabsProps extends StandardProps {
  /** Current active tab index
   * @supported weapp, tt, qq, jd, h5
   * @default 0
   */
  current?: number;
  /** Tab scroll threshold
   * @supported weapp, tt, qq, jd, h5
   * @default 5
   */
  scrollThreshold?: number;
  /** Tab data array
   * @supported weapp, tt, qq, jd, h5
   */
  tabList?: TabItem[];
  /** Tab click callback */
  onTabClick?: (event: TabsTabClickEvent) => void;
}

interface TabItem {
  /** Tab title */
  title: string;
  /** Tab icon URL */
  iconPath?: string;
  /** Selected tab icon URL */
  selectedIconPath?: string;
  /** Tab text */
  text?: string;
  /** Tab badge text */
  badge?: string;
  /** Tab red dot indicator */
  dot?: boolean;
}

import { Navigator, NavigationBar, Tabs } from "@tarojs/components";

// Basic navigation
<Navigator url="/pages/detail/index" openType="navigate">
  Go to Detail Page
</Navigator>

// Tab navigation
const tabList = [
  { title: 'Home', iconPath: '/images/home.png' },
  { title: 'Profile', iconPath: '/images/profile.png' }
];

<Tabs 
  current={0} 
  tabList={tabList} 
  onTabClick={(e) => console.log('Tab clicked:', e.detail.index)}
/>

// Custom navigation bar
<NavigationBar 
  title="My App" 
  frontColor="#ffffff" 
  backgroundColor="#007AFF"
/>

// Navigation with data passing
<Navigator 
  url="/pages/detail/index?id=123&type=product"
  openType="navigate"
  onSuccess={(e) => console.log('Navigation successful')}
  onFail={(e) => console.log('Navigation failed:', e.detail.errMsg)}
>
  View Product Details
</Navigator>

// Tab bar navigation
<Navigator url="/pages/home/index" openType="switchTab">
  Go to Home Tab
</Navigator>

// Back navigation with custom delta
<Navigator openType="navigateBack" delta={2}>
  Go Back 2 Pages
</Navigator>

// Navigate to another mini-program
<Navigator
  openType="navigateToMiniProgram"
  appId="wxABCDEF1234567890"
  path="pages/index/index"
  extraData={{ from: 'myapp' }}
  version="release"
  onSuccess={(e) => console.log('Mini-program opened')}
  onFail={(e) => console.log('Failed to open mini-program')}
>
  Open Other Mini-Program
</Navigator>

// Functional page navigation
<FunctionalPageNavigator
  name="requestPayment"
  args={{
    fee: 100,
    paymentType: 'wechat'
  }}
  onSuccess={(e) => console.log('Payment successful')}
  onFail={(e) => console.log('Payment failed')}
>
  Make Payment
</FunctionalPageNavigator>

// Navigator event interfaces
interface NavigatorSuccessEvent extends TaroEvent {
  detail: {
    errMsg: string;
  };
}

interface NavigatorFailEvent extends TaroEvent {
  detail: {
    errMsg: string;
  };
}

// Functional page navigator event interfaces
interface FunctionalPageNavigatorSuccessEvent extends TaroEvent {
  detail: {
    errMsg: string;
    [key: string]: any;
  };
}

interface FunctionalPageNavigatorFailEvent extends TaroEvent {
  detail: {
    errMsg: string;
  };
}

// Tabs event interfaces
interface TabsTabClickEvent extends TaroEvent {
  detail: {
    index: number;
    title: string;
  };
}

// Navigation types
type NavigationOpenType = 
  | 'navigate' 
  | 'redirect' 
  | 'switchTab' 
  | 'reLaunch' 
  | 'navigateBack' 
  | 'exit' 
  | 'navigateToMiniProgram';

type NavigationBarFrontColor = '#000000' | '#ffffff';

type NavigationBarTimingFunction = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';

type FunctionalPageName = 
  | 'loginAndGetUserInfo' 
  | 'requestPayment' 
  | 'chooseAddress';

// Tab item interface
interface TabConfiguration {
  title: string;
  iconPath?: string;
  selectedIconPath?: string;
  text?: string;
  badge?: string;
  dot?: boolean;
}