one 1.2.6 → 1.2.8

package/src/ui/TabTrigger.tsx

@@ -0,0 +1,282 @@
+import { Slot } from '@radix-ui/react-slot'
+import type { TabNavigationState } from '@react-navigation/native'
+import { type ReactNode, use, type ReactElement, type ComponentProps, useCallback } from 'react'
+import {
+  type View,
+  StyleSheet,
+  Pressable,
+  type PressableProps,
+  type GestureResponderEvent,
+} from 'react-native'
+
+import { TabTriggerMapContext } from './TabContext'
+import type { TriggerMap } from './common'
+import { appendBaseUrl } from '../fork/getPathFromState-mods'
+import { router } from '../router/imperative-api'
+import { stripGroupSegmentsFromPath } from '../router/matchers'
+import type { OneRouter } from '../interfaces/router'
+import { useNavigatorContext } from '../views/Navigator'
+
+type PressablePropsWithoutFunctionChildren = Omit<PressableProps, 'children'> & {
+  children?: ReactNode | undefined
+}
+
+export type TabTriggerProps = PressablePropsWithoutFunctionChildren & {
+  /**
+   *  Name of tab. When used within a `TabList` this sets the name of the tab.
+   * Otherwise, this references the name.
+   */
+  name: string
+  /**
+   * Name of tab. Required when used within a `TabList`.
+   */
+  href?: OneRouter.Href
+  /**
+   * Forward props to child component. Useful for custom wrappers.
+   */
+  asChild?: boolean
+  /**
+   * Resets the route when switching to a tab.
+   */
+  resetOnFocus?: boolean
+}
+
+export type TabTriggerOptions = {
+  name: string
+  href: OneRouter.Href
+}
+
+export type TabTriggerSlotProps = PressablePropsWithoutFunctionChildren &
+  React.RefAttributes<View> & {
+    isFocused?: boolean
+    href?: string
+  }
+
+const TabTriggerSlot = Slot as React.ForwardRefExoticComponent<TabTriggerSlotProps>
+
+/**
+ * Helper function to determine if a mouse event should be handled
+ */
+function shouldHandleMouseEvent(
+  e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+): boolean {
+  if (!e) return true
+
+  // Check if it's a MouseEvent
+  if ('button' in e) {
+    // Only handle left clicks without modifier keys
+    return (
+      !e.metaKey &&
+      !e.altKey &&
+      !e.ctrlKey &&
+      !e.shiftKey &&
+      (e.button == null || e.button === 0) &&
+      [undefined, null, '', 'self'].includes((e.currentTarget as any).target)
+    )
+  }
+
+  return true
+}
+
+/**
+ * Creates a trigger to navigate to a tab. When used as child of `TabList`, its
+ * functionality slightly changes since the `href` prop is required,
+ * and the trigger also defines what routes are present in the `Tabs`.
+ *
+ * When used outside of `TabList`, this component no longer requires an `href`.
+ *
+ * @example
+ * ```tsx
+ * <Tabs>
+ *  <TabSlot />
+ *  <TabList>
+ *   <TabTrigger name="home" href="/" />
+ *  </TabList>
+ * </Tabs>
+ * ```
+ */
+export function TabTrigger({ asChild, name, href, resetOnFocus, ...props }: TabTriggerProps) {
+  const { trigger, triggerProps } = useTabTrigger({
+    name,
+    resetOnFocus,
+    ...props,
+  })
+
+  // Pressable doesn't accept the extra props, so only pass them if we are using asChild
+  if (asChild) {
+    return (
+      <TabTriggerSlot
+        style={styles.tabTrigger}
+        {...props}
+        {...triggerProps}
+        href={trigger?.resolvedHref}
+      >
+        {props.children}
+      </TabTriggerSlot>
+    )
+  } else {
+    // These props are not typed, but are allowed by React Native Web
+    const reactNativeWebProps = { href: trigger?.resolvedHref }
+
+    return (
+      <Pressable style={styles.tabTrigger} {...reactNativeWebProps} {...props} {...triggerProps}>
+        {props.children}
+      </Pressable>
+    )
+  }
+}
+
+/**
+ * @hidden
+ */
+export function isTabTrigger(
+  child: ReactElement<any>
+): child is ReactElement<ComponentProps<typeof TabTrigger>> {
+  return child.type === TabTrigger
+}
+
+/**
+ * Options for `switchTab` function.
+ */
+export type SwitchToOptions = {
+  /**
+   * Navigate and reset the history on route focus.
+   */
+  resetOnFocus?: boolean
+}
+
+export type Trigger = TriggerMap[string] & {
+  isFocused: boolean
+  resolvedHref: string
+  route: TabNavigationState<any>['routes'][number]
+}
+
+export type UseTabTriggerResult = {
+  switchTab: (name: string, options: SwitchToOptions) => void
+  getTrigger: (name: string) => Trigger | undefined
+  trigger?: Trigger
+  triggerProps: TriggerProps
+}
+
+export type TriggerProps = {
+  isFocused: boolean
+  onPress: PressableProps['onPress']
+  onLongPress: PressableProps['onLongPress']
+}
+
+/**
+ * Utility hook creating custom `TabTrigger`.
+ */
+export function useTabTrigger(options: TabTriggerProps): UseTabTriggerResult {
+  const { state, navigation } = useNavigatorContext()
+  const { name, resetOnFocus, onPress, onLongPress } = options
+  const triggerMap = use(TabTriggerMapContext)
+
+  const getTrigger = useCallback(
+    (name: string) => {
+      const config = triggerMap[name]
+
+      if (!config) {
+        return
+      }
+
+      return {
+        isFocused: state.index === config.index,
+        route: state.routes[config.index],
+        resolvedHref: stripGroupSegmentsFromPath(appendBaseUrl(config.href)),
+        ...config,
+      }
+    },
+    [triggerMap, state]
+  )
+
+  const trigger = name !== undefined ? getTrigger(name) : undefined
+
+  const switchTab = useCallback(
+    (name: string, options?: SwitchToOptions) => {
+      const config = triggerMap[name]
+
+      if (config) {
+        if (config.type === 'external') {
+          return router.navigate(config.href)
+        } else {
+          return navigation?.dispatch({
+            ...config.action,
+            type: 'JUMP_TO',
+            payload: {
+              ...config.action.payload,
+              ...options,
+            },
+          })
+        }
+      } else {
+        return navigation?.dispatch({
+          type: 'JUMP_TO',
+          payload: {
+            name,
+          },
+        })
+      }
+    },
+    [navigation, triggerMap]
+  )
+
+  const handleOnPress = useCallback<NonNullable<PressableProps['onPress']>>(
+    (event) => {
+      onPress?.(event)
+      if (!trigger) return
+      if (event?.isDefaultPrevented()) return
+
+      navigation?.emit({
+        type: 'tabPress',
+        target: trigger.type === 'internal' ? trigger.route.key : trigger?.href,
+        canPreventDefault: true,
+      })
+
+      if (!shouldHandleMouseEvent(event)) return
+
+      switchTab(name, { resetOnFocus })
+    },
+    [onPress, name, resetOnFocus, trigger, navigation, switchTab]
+  )
+
+  const handleOnLongPress = useCallback<NonNullable<PressableProps['onLongPress']>>(
+    (event) => {
+      onLongPress?.(event)
+      if (!trigger) return
+      if (event?.isDefaultPrevented()) return
+
+      navigation?.emit({
+        type: 'tabLongPress',
+        target: trigger.type === 'internal' ? trigger.route.key : trigger?.href,
+      })
+
+      if (!shouldHandleMouseEvent(event)) return
+
+      switchTab(name, {
+        resetOnFocus,
+      })
+    },
+    [onLongPress, name, resetOnFocus, trigger, navigation, switchTab]
+  )
+
+  const triggerProps = {
+    isFocused: Boolean(trigger?.isFocused),
+    onPress: handleOnPress,
+    onLongPress: handleOnLongPress,
+  }
+
+  return {
+    switchTab,
+    getTrigger,
+    trigger,
+    triggerProps,
+  }
+}
+
+const styles = StyleSheet.create({
+  tabTrigger: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+})

package/src/ui/Tabs.tsx

@@ -0,0 +1,313 @@
+import {
+  type DefaultNavigatorOptions,
+  LinkingContext,
+  type ParamListBase,
+  type TabActionHelpers,
+  type TabNavigationState,
+  type TabRouterOptions,
+  useNavigationBuilder,
+} from '@react-navigation/native'
+import {
+  Children,
+  type ComponentProps,
+  Fragment,
+  type ReactElement,
+  type ReactNode,
+  isValidElement,
+  use,
+  useMemo,
+  type PropsWithChildren,
+} from 'react'
+import { StyleSheet, type ViewProps, View } from 'react-native'
+
+import {
+  type ExpoTabsScreenOptions,
+  type TabNavigationEventMap,
+  TabTriggerMapContext,
+  type TabsContextValue,
+} from './TabContext'
+import { isTabList } from './TabList'
+import { ExpoTabRouter, type ExpoTabRouterOptions } from './TabRouter'
+import { isTabSlot } from './TabSlot'
+import { isTabTrigger } from './TabTrigger'
+import { ViewSlot, type ScreenTrigger, triggersToScreens } from './common'
+import { useComponent } from './useComponent'
+import { useRouteNode, useContextKey } from '../router/Route'
+import { useRouteInfo } from '../hooks'
+import { resolveHref } from '../link/href'
+import { shouldLinkExternally } from '../utils/url'
+import { NavigatorContext } from '../views/Navigator'
+import type { RouterFactory } from '@react-navigation/native'
+
+type NavigatorContextValue = {
+  contextKey: string
+  state: ReturnType<typeof useNavigationBuilder>['state']
+  navigation: ReturnType<typeof useNavigationBuilder>['navigation']
+  descriptors: ReturnType<typeof useNavigationBuilder>['descriptors']
+  router: RouterFactory<any, any, any>
+}
+
+export * from './TabContext'
+export * from './TabList'
+export * from './TabSlot'
+export * from './TabTrigger'
+
+/**
+ * Options to provide to the Tab Router.
+ */
+export type UseTabsOptions = Omit<
+  DefaultNavigatorOptions<
+    ParamListBase,
+    any,
+    TabNavigationState<any>,
+    ExpoTabsScreenOptions,
+    TabNavigationEventMap,
+    any
+  >,
+  'children'
+> & {
+  backBehavior?: TabRouterOptions['backBehavior']
+}
+
+export type TabsProps = ViewProps & {
+  /** Forward props to child component and removes the extra `<View>`. Useful for custom wrappers. */
+  asChild?: boolean
+  options?: UseTabsOptions
+}
+
+/**
+ * Root component for the headless tabs.
+ *
+ * @see [`useTabsWithChildren`](#usetabswithchildrenoptions) for a hook version of this component.
+ * @example
+ * ```tsx
+ * <Tabs>
+ *  <TabSlot />
+ *  <TabList>
+ *   <TabTrigger name="home" href="/" />
+ *  </TabList>
+ * </Tabs>
+ * ```
+ */
+export function Tabs(props: TabsProps) {
+  const { children, asChild, options, ...rest } = props
+  const Comp = asChild ? ViewSlot : View
+
+  const { NavigationContent } = useTabsWithChildren({
+    // asChild adds an extra layer, so we need to process the child's children
+    children:
+      asChild &&
+      isValidElement(children) &&
+      children.props &&
+      typeof children.props === 'object' &&
+      'children' in children.props
+        ? (children.props.children as ReactNode)
+        : children,
+    ...options,
+  })
+
+  return (
+    <Comp style={styles.tabsRoot} {...rest}>
+      <NavigationContent>{children}</NavigationContent>
+    </Comp>
+  )
+}
+
+// @docsMissing
+export type UseTabsWithChildrenOptions = PropsWithChildren<UseTabsOptions>
+
+// @docsMissing
+export type UseTabsWithTriggersOptions = UseTabsOptions & {
+  triggers: ScreenTrigger[]
+}
+
+/**
+ * Hook version of `Tabs`. The returned NavigationContent component
+ * should be rendered. Using the hook requires using the `<TabList />`
+ * and `<TabTrigger />` components exported from One.
+ *
+ * The `useTabsWithTriggers()` hook can be used for custom components.
+ *
+ * @see [`Tabs`](#tabs) for the component version of this hook.
+ * @example
+ * ```tsx
+ * export function MyTabs({ children }) {
+ *  const { NavigationContent } = useTabsWithChildren({ children })
+ *
+ *  return <NavigationContent />
+ * }
+ * ```
+ */
+export function useTabsWithChildren(options: UseTabsWithChildrenOptions) {
+  const { children, ...rest } = options
+  return useTabsWithTriggers({ triggers: parseTriggersFromChildren(children), ...rest })
+}
+
+/**
+ * Alternative hook version of `Tabs` that uses explicit triggers
+ * instead of `children`.
+ *
+ * @see [`Tabs`](#tabs) for the component version of this hook.
+ * @example
+ * ```tsx
+ * export function MyTabs({ children }) {
+ *   const { NavigationContent } = useTabsWithChildren({ triggers: [] })
+ *
+ *   return <NavigationContent />
+ * }
+ * ```
+ */
+export function useTabsWithTriggers(options: UseTabsWithTriggersOptions): TabsContextValue {
+  const { triggers, ...rest } = options
+  // Ensure we extend the parent triggers, so we can trigger them as well
+  const parentTriggerMap = use(TabTriggerMapContext)
+  const routeNode = useRouteNode()
+  const contextKey = useContextKey()
+  const linking = use(LinkingContext).options
+  const routeInfo = useRouteInfo()
+
+  if (!routeNode || !linking) {
+    throw new Error('No RouteNode. This is likely a bug in one router.')
+  }
+
+  const initialRouteName = routeNode.initialRouteName
+
+  const { children, triggerMap } = triggersToScreens(
+    triggers,
+    routeNode,
+    linking,
+    initialRouteName,
+    parentTriggerMap,
+    routeInfo,
+    contextKey
+  )
+
+  const navigatorContext = useNavigationBuilder<
+    TabNavigationState<any>,
+    ExpoTabRouterOptions,
+    TabActionHelpers<ParamListBase>,
+    ExpoTabsScreenOptions,
+    TabNavigationEventMap
+  >(ExpoTabRouter, {
+    children,
+    ...rest,
+    triggerMap,
+    id: contextKey,
+    initialRouteName,
+  })
+
+  const {
+    state,
+    descriptors,
+    navigation,
+    describe,
+    NavigationContent: RNNavigationContent,
+  } = navigatorContext
+
+  const navigatorContextValue = useMemo<NavigatorContextValue>(
+    () => ({
+      ...(navigatorContext as unknown as ReturnType<typeof useNavigationBuilder>),
+      contextKey,
+      router: ExpoTabRouter,
+    }),
+    [navigatorContext, contextKey, ExpoTabRouter]
+  )
+
+  const NavigationContent = useComponent((children: React.ReactNode) => (
+    <TabTriggerMapContext.Provider value={triggerMap}>
+      <NavigatorContext.Provider value={navigatorContextValue}>
+        <RNNavigationContent>{children}</RNNavigationContent>
+      </NavigatorContext.Provider>
+    </TabTriggerMapContext.Provider>
+  )) as TabsContextValue['NavigationContent']
+
+  return { state, descriptors, navigation, NavigationContent, describe }
+}
+
+function parseTriggersFromChildren(
+  children: ReactNode,
+  screenTriggers: ScreenTrigger[] = [],
+  isInTabList = false
+) {
+  Children.forEach(children, (child) => {
+    if (!child || !isValidElement(child) || isTabSlot(child)) {
+      return
+    }
+
+    if (isFragment(child) && typeof child.props.children !== 'function') {
+      return parseTriggersFromChildren(
+        child.props.children,
+        screenTriggers,
+        isInTabList || isTabList(child)
+      )
+    }
+
+    if (isTabList(child) && typeof child.props.children !== 'function') {
+      let children = child.props.children
+
+      // <TabList asChild /> adds an extra layer. We need to parse the child's children
+      if (
+        child.props.asChild &&
+        isValidElement(children) &&
+        children.props &&
+        typeof children.props === 'object' &&
+        'children' in children.props
+      ) {
+        children = children.props.children as ReactNode
+      }
+
+      return parseTriggersFromChildren(children, screenTriggers, isInTabList || isTabList(child))
+    }
+
+    // We should only process TabTriggers within the TabList. All other components will be ignored
+    if (!isInTabList || !isTabTrigger(child)) {
+      return
+    }
+
+    const { href, name } = child.props
+
+    if (!href) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          `<TabTrigger name={${name}}> does not have a 'href' prop. TabTriggers within a <TabList /> are required to have an href.`
+        )
+      }
+      return
+    }
+
+    const resolvedHref = resolveHref(href)
+
+    if (shouldLinkExternally(resolvedHref)) {
+      return screenTriggers.push({
+        type: 'external',
+        name,
+        href: resolvedHref,
+      })
+    }
+
+    if (!name) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          `<TabTrigger> does not have a 'name' prop. TabTriggers within a <TabList /> are required to have a name.`
+        )
+      }
+      return
+    }
+
+    return screenTriggers.push({ type: 'internal', href: resolvedHref, name })
+  })
+
+  return screenTriggers
+}
+
+function isFragment(
+  child: ReactElement<any>
+): child is ReactElement<ComponentProps<typeof Fragment>> {
+  return child.type === Fragment
+}
+
+const styles = StyleSheet.create({
+  tabsRoot: {
+    flex: 1,
+  },
+})