@amazon-devices/react-navigation__native 8.0.9000000000 → 8.0.9000000002

package/src/useDocumentTitle.native.tsx

@@ -1,3 +0,0 @@
-export function useDocumentTitle() {
-  // Noop for native platforms
-}

package/src/useDocumentTitle.tsx

@@ -1,41 +0,0 @@
-import type {
-  NavigationContainerRef,
-  ParamListBase,
-} from '@amazon-devices/react-navigation__core';
-import * as React from 'react';
-
-import type { DocumentTitleOptions } from './types';
-
-/**
- * Set the document title for the active screen
- */
-export function useDocumentTitle(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
-  {
-    enabled = true,
-    formatter = (options, route) => options?.title ?? route?.name,
-  }: DocumentTitleOptions = {}
-) {
-  React.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-
-    const navigation = ref.current;
-
-    if (navigation) {
-      const title = formatter(
-        navigation.getCurrentOptions(),
-        navigation.getCurrentRoute()
-      );
-
-      document.title = title;
-    }
-
-    return navigation?.addListener('options', (e) => {
-      const title = formatter(e.data.options, navigation?.getCurrentRoute());
-
-      document.title = title;
-    });
-  });
-}

package/src/useLinkBuilder.tsx

@@ -1,127 +0,0 @@
-import {
-  CommonActions,
-  findFocusedRoute,
-  getActionFromState,
-  getPathFromState,
-  getStateFromPath,
-  NavigationHelpersContext,
-  NavigationRouteContext,
-  useStateForPath,
-} from '@amazon-devices/react-navigation__core';
-import * as React from 'react';
-
-import { LinkingContext } from './LinkingContext';
-
-type MinimalState = {
-  routes: [{ name: string; params?: object; state?: MinimalState }];
-};
-
-/**
- * Helpers to build href or action based on the linking options.
- *
- * @returns `buildHref` to build an `href` for screen and `buildAction` to build an action from an `href`.
- */
-export function useLinkBuilder() {
-  const navigation = React.useContext(NavigationHelpersContext);
-  const route = React.useContext(NavigationRouteContext);
-
-  const { options } = React.useContext(LinkingContext);
-
-  const focusedRouteState = useStateForPath();
-
-  const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
-  const getStateFromPathHelper = options?.getStateFromPath ?? getStateFromPath;
-  const getActionFromStateHelper =
-    options?.getActionFromState ?? getActionFromState;
-
-  const buildHref = React.useCallback(
-    (name: string, params?: object) => {
-      if (options?.enabled === false) {
-        return undefined;
-      }
-
-      // Check that we're inside:
-      // - navigator's context
-      // - route context of the navigator (could be a screen, tab, etc.)
-      // - route matches the state for path (from the screen's context)
-      // This ensures that we're inside a screen
-      const isScreen =
-        navigation && route?.key && focusedRouteState
-          ? route.key === findFocusedRoute(focusedRouteState)?.key &&
-            navigation.getState().routes.some((r) => r.key === route.key)
-          : false;
-
-      const stateForRoute: MinimalState = {
-        routes: [{ name, params }],
-      };
-
-      const constructState = (
-        state: MinimalState | undefined
-      ): MinimalState => {
-        if (state) {
-          const route = state.routes[0];
-
-          // If we're inside a screen and at the innermost route
-          // We need to replace the state with the provided one
-          // This assumes that we're navigating to a sibling route
-          if (isScreen && !route.state) {
-            return stateForRoute;
-          }
-
-          // Otherwise, dive into the nested state of the route
-          return {
-            routes: [
-              {
-                ...route,
-                state: constructState(route.state),
-              },
-            ],
-          };
-        }
-
-        // Once there is no more nested state, we're at the innermost route
-        // We can add a state based on provided parameters
-        // This assumes that we're navigating to a child of this route
-        // In this case, the helper is used in a navigator for its routes
-        return stateForRoute;
-      };
-
-      const state = constructState(focusedRouteState);
-      const path = getPathFromStateHelper(state, options?.config);
-
-      return path;
-    },
-    [
-      options?.enabled,
-      options?.config,
-      route?.key,
-      navigation,
-      focusedRouteState,
-      getPathFromStateHelper,
-    ]
-  );
-
-  const buildAction = React.useCallback(
-    (href: string) => {
-      if (!href.startsWith('/')) {
-        throw new Error(`The href must start with '/' (${href}).`);
-      }
-
-      const state = getStateFromPathHelper(href, options?.config);
-
-      if (state) {
-        const action = getActionFromStateHelper(state, options?.config);
-
-        return action ?? CommonActions.reset(state);
-      } else {
-        throw new Error('Failed to parse the href to a navigation state.');
-      }
-    },
-    [options?.config, getStateFromPathHelper, getActionFromStateHelper]
-  );
-
-  return {
-    buildHref,
-    buildAction,
-  };
-}

package/src/useLinkProps.tsx

@@ -1,156 +0,0 @@
-import {
-  getPathFromState,
-  type NavigationAction,
-  NavigationContainerRefContext,
-  NavigationHelpersContext,
-  type NavigatorScreenParams,
-  type ParamListBase,
-} from '@amazon-devices/react-navigation__core';
-import type { NavigationState, PartialState } from '@amazon-devices/react-navigation__routers';
-import * as React from 'react';
-import { type GestureResponderEvent, Platform } from 'react-native';
-
-import { LinkingContext } from './LinkingContext';
-
-export type LinkProps<
-  ParamList extends ReactNavigation.RootParamList,
-  RouteName extends keyof ParamList = keyof ParamList,
-> =
-  | ({
-      href?: string;
-      action?: NavigationAction;
-    } & {
-      [Screen in keyof ParamList]: undefined extends ParamList[Screen]
-        ? { screen: Screen; params?: ParamList[Screen] }
-        : { screen: Screen; params: ParamList[Screen] };
-    }[RouteName])
-  | {
-      href?: string;
-      action: NavigationAction;
-      screen?: undefined;
-      params?: undefined;
-    };
-
-const getStateFromParams = (
-  params: NavigatorScreenParams<ParamListBase> | undefined
-): PartialState<NavigationState> | NavigationState | undefined => {
-  if (params?.state) {
-    return params.state;
-  }
-
-  if (params?.screen) {
-    return {
-      routes: [
-        {
-          name: params.screen,
-          params: params.params,
-          // @ts-expect-error this is fine 🔥
-          state: params.screen
-            ? getStateFromParams(
-                params.params as
-                  | NavigatorScreenParams<ParamListBase>
-                  | undefined
-              )
-            : undefined,
-        },
-      ],
-    };
-  }
-
-  return undefined;
-};
-
-/**
- * Hook to get props for an anchor tag so it can work with in page navigation.
- *
- * @param props.screen Name of the screen to navigate to (e.g. `'Feeds'`).
- * @param props.params Params to pass to the screen to navigate to (e.g. `{ sort: 'hot' }`).
- * @param props.href Optional absolute path to use for the href (e.g. `/feeds/hot`).
- * @param props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.
- */
-export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
-  screen,
-  params,
-  href,
-  action,
-}: LinkProps<ParamList>) {
-  const root = React.useContext(NavigationContainerRefContext);
-  const navigation = React.useContext(NavigationHelpersContext);
-  const { options } = React.useContext(LinkingContext);
-
-  const onPress = (
-    e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-  ) => {
-    let shouldHandle = false;
-
-    if (Platform.OS !== 'web' || !e) {
-      e?.preventDefault?.();
-      shouldHandle = true;
-    } else {
-      // ignore clicks with modifier keys
-      const hasModifierKey =
-        ('metaKey' in e && e.metaKey) ||
-        ('altKey' in e && e.altKey) ||
-        ('ctrlKey' in e && e.ctrlKey) ||
-        ('shiftKey' in e && e.shiftKey);
-
-      // only handle left clicks
-      const isLeftClick =
-        'button' in e ? e.button == null || e.button === 0 : true;
-
-      // let browser handle "target=_blank" etc.
-      const isSelfTarget =
-        e.currentTarget && 'target' in e.currentTarget
-          ? [undefined, null, '', 'self'].includes(e.currentTarget.target)
-          : true;
-
-      if (!hasModifierKey && isLeftClick && isSelfTarget) {
-        e.preventDefault?.();
-        shouldHandle = true;
-      }
-    }
-
-    if (shouldHandle) {
-      if (action) {
-        if (navigation) {
-          navigation.dispatch(action);
-        } else if (root) {
-          root.dispatch(action);
-        } else {
-          throw new Error(
-            "Couldn't find a navigation object. Is your component inside NavigationContainer?"
-          );
-        }
-      } else {
-        // @ts-expect-error This is already type-checked by the prop types
-        navigation?.navigate(screen, params);
-      }
-    }
-  };
-
-  const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
-
-  return {
-    href:
-      href ??
-      (Platform.OS === 'web' && screen != null
-        ? getPathFromStateHelper(
-            {
-              routes: [
-                {
-                  // @ts-expect-error this is fine 🔥
-                  name: screen,
-                  // @ts-expect-error this is fine 🔥
-                  params: params,
-                  // @ts-expect-error this is fine 🔥
-                  state: getStateFromParams(params),
-                },
-              ],
-            },
-            options?.config
-          )
-        : undefined),
-    role: 'link' as const,
-    onPress,
-  };
-}

package/src/useLinkTo.tsx

@@ -1,31 +0,0 @@
-import { NavigationContainerRefContext } from '@amazon-devices/react-navigation__core';
-import * as React from 'react';
-
-import { useLinkBuilder } from './useLinkBuilder';
-
-/**
- * Helper to navigate to a screen using a href based on the linking options.
- *
- * @returns function that receives the href to navigate to.
- */
-export function useLinkTo() {
-  const navigation = React.useContext(NavigationContainerRefContext);
-  const { buildAction } = useLinkBuilder();
-
-  const linkTo = React.useCallback(
-    (href: string) => {
-      if (navigation === undefined) {
-        throw new Error(
-          "Couldn't find a navigation object. Is your component inside NavigationContainer?"
-        );
-      }
-
-      const action = buildAction(href);
-
-      navigation.dispatch(action);
-    },
-    [buildAction, navigation]
-  );
-
-  return linkTo;
-}

package/src/useLinking.native.tsx

@@ -1,217 +0,0 @@
-import {
-  getActionFromState as getActionFromStateDefault,
-  getStateFromPath as getStateFromPathDefault,
-  type NavigationContainerRef,
-  type ParamListBase,
-  useNavigationIndependentTree,
-} from '@amazon-devices/react-navigation__core';
-import * as React from 'react';
-import { Linking, Platform } from 'react-native';
-
-import { extractPathFromURL } from './extractPathFromURL';
-import type { LinkingOptions } from './types';
-
-type ResultState = ReturnType<typeof getStateFromPathDefault>;
-
-type Options = LinkingOptions<ParamListBase>;
-
-const linkingHandlers: symbol[] = [];
-
-export function useLinking(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
-  {
-    enabled = true,
-    prefixes,
-    filter,
-    config,
-    getInitialURL = () =>
-      Promise.race([
-        Linking.getInitialURL(),
-        new Promise<undefined>((resolve) => {
-          // Timeout in 150ms if `getInitialState` doesn't resolve
-          // Workaround for https://github.com/facebook/react-native/issues/25675
-          setTimeout(resolve, 150);
-        }),
-      ]),
-    subscribe = (listener) => {
-      const callback = ({ url }: { url: string }) => listener(url);
-
-      const subscription = Linking.addEventListener('url', callback) as
-        | { remove(): void }
-        | undefined;
-
-      // Storing this in a local variable stops Jest from complaining about import after teardown
-      // @ts-expect-error: removeEventListener is not present in newer RN versions
-      const removeEventListener = Linking.removeEventListener?.bind(Linking);
-
-      return () => {
-        // https://github.com/facebook/react-native/commit/6d1aca806cee86ad76de771ed3a1cc62982ebcd7
-        if (subscription?.remove) {
-          subscription.remove();
-        } else {
-          removeEventListener?.('url', callback);
-        }
-      };
-    },
-    getStateFromPath = getStateFromPathDefault,
-    getActionFromState = getActionFromStateDefault,
-  }: Options,
-  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
-) {
-  const independent = useNavigationIndependentTree();
-
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'production') {
-      return undefined;
-    }
-
-    if (independent) {
-      return undefined;
-    }
-
-    if (enabled !== false && linkingHandlers.length) {
-      console.error(
-        [
-          'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
-          "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
-          '- Only a single instance of the root component is rendered',
-          Platform.OS === 'android'
-            ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
-            : '',
-        ]
-          .join('\n')
-          .trim()
-      );
-    }
-
-    const handler = Symbol();
-
-    if (enabled !== false) {
-      linkingHandlers.push(handler);
-    }
-
-    return () => {
-      const index = linkingHandlers.indexOf(handler);
-
-      if (index > -1) {
-        linkingHandlers.splice(index, 1);
-      }
-    };
-  }, [enabled, independent]);
-
-  // We store these options in ref to avoid re-creating getInitialState and re-subscribing listeners
-  // This lets user avoid wrapping the items in `React.useCallback` or `React.useMemo`
-  // Not re-creating `getInitialState` is important coz it makes it easier for the user to use in an effect
-  const enabledRef = React.useRef(enabled);
-  const prefixesRef = React.useRef(prefixes);
-  const filterRef = React.useRef(filter);
-  const configRef = React.useRef(config);
-  const getInitialURLRef = React.useRef(getInitialURL);
-  const getStateFromPathRef = React.useRef(getStateFromPath);
-  const getActionFromStateRef = React.useRef(getActionFromState);
-
-  React.useEffect(() => {
-    enabledRef.current = enabled;
-    prefixesRef.current = prefixes;
-    filterRef.current = filter;
-    configRef.current = config;
-    getInitialURLRef.current = getInitialURL;
-    getStateFromPathRef.current = getStateFromPath;
-    getActionFromStateRef.current = getActionFromState;
-  });
-
-  const getStateFromURL = React.useCallback(
-    (url: string | null | undefined) => {
-      if (!url || (filterRef.current && !filterRef.current(url))) {
-        return undefined;
-      }
-
-      const path = extractPathFromURL(prefixesRef.current, url);
-
-      return path !== undefined
-        ? getStateFromPathRef.current(path, configRef.current)
-        : undefined;
-    },
-    []
-  );
-
-  const getInitialState = React.useCallback(() => {
-    let state: ResultState | undefined;
-
-    if (enabledRef.current) {
-      const url = getInitialURLRef.current();
-
-      if (url != null) {
-        if (typeof url !== 'string') {
-          return url.then((url) => {
-            const state = getStateFromURL(url);
-
-            if (typeof url === 'string') {
-              // If the link were handled, it gets cleared in NavigationContainer
-              onUnhandledLinking(extractPathFromURL(prefixes, url));
-            }
-
-            return state;
-          });
-        } else {
-          onUnhandledLinking(extractPathFromURL(prefixes, url));
-        }
-      }
-
-      state = getStateFromURL(url);
-    }
-
-    const thenable = {
-      then(onfulfilled?: (state: ResultState | undefined) => void) {
-        return Promise.resolve(onfulfilled ? onfulfilled(state) : state);
-      },
-      catch() {
-        return thenable;
-      },
-    };
-
-    return thenable as PromiseLike<ResultState | undefined>;
-  }, [getStateFromURL, onUnhandledLinking, prefixes]);
-
-  React.useEffect(() => {
-    const listener = (url: string) => {
-      if (!enabled) {
-        return;
-      }
-
-      const navigation = ref.current;
-      const state = navigation ? getStateFromURL(url) : undefined;
-
-      if (navigation && state) {
-        // If the link were handled, it gets cleared in NavigationContainer
-        onUnhandledLinking(extractPathFromURL(prefixes, url));
-
-        const action = getActionFromStateRef.current(state, configRef.current);
-
-        if (action !== undefined) {
-          try {
-            navigation.dispatch(action);
-          } catch (e) {
-            // Ignore any errors from deep linking.
-            // This could happen in case of malformed links, navigation object not being initialized etc.
-            console.warn(
-              `An error occurred when trying to handle the link '${url}': ${
-                typeof e === 'object' && e != null && 'message' in e
-                  ? e.message
-                  : e
-              }`
-            );
-          }
-        } else {
-          navigation.resetRoot(state);
-        }
-      }
-    };
-
-    return subscribe(listener);
-  }, [enabled, getStateFromURL, onUnhandledLinking, prefixes, ref, subscribe]);
-
-  return {
-    getInitialState,
-  };
-}