@amazon-devices/react-navigation__native 8.0.9000000000 → 8.0.9000000002

package/src/useLinking.tsx

@@ -1,442 +0,0 @@
-import {
-  findFocusedRoute,
-  getActionFromState as getActionFromStateDefault,
-  getPathFromState as getPathFromStateDefault,
-  getStateFromPath as getStateFromPathDefault,
-  type NavigationContainerRef,
-  type NavigationState,
-  type ParamListBase,
-  useNavigationIndependentTree,
-} from '@amazon-devices/react-navigation__core';
-import isEqual from 'fast-deep-equal';
-import * as React from 'react';
-
-import { createMemoryHistory } from './createMemoryHistory';
-import { ServerContext } from './ServerContext';
-import type { LinkingOptions } from './types';
-
-type ResultState = ReturnType<typeof getStateFromPathDefault>;
-
-/**
- * Find the matching navigation state that changed between 2 navigation states
- * e.g.: a -> b -> c -> d and a -> b -> c -> e -> f, if history in b changed, b is the matching state
- */
-const findMatchingState = <T extends NavigationState>(
-  a: T | undefined,
-  b: T | undefined
-): [T | undefined, T | undefined] => {
-  if (a === undefined || b === undefined || a.key !== b.key) {
-    return [undefined, undefined];
-  }
-
-  // Tab and drawer will have `history` property, but stack will have history in `routes`
-  const aHistoryLength = a.history ? a.history.length : a.routes.length;
-  const bHistoryLength = b.history ? b.history.length : b.routes.length;
-
-  const aRoute = a.routes[a.index];
-  const bRoute = b.routes[b.index];
-
-  const aChildState = aRoute.state as T | undefined;
-  const bChildState = bRoute.state as T | undefined;
-
-  // Stop here if this is the state object that changed:
-  // - history length is different
-  // - focused routes are different
-  // - one of them doesn't have child state
-  // - child state keys are different
-  if (
-    aHistoryLength !== bHistoryLength ||
-    aRoute.key !== bRoute.key ||
-    aChildState === undefined ||
-    bChildState === undefined ||
-    aChildState.key !== bChildState.key
-  ) {
-    return [a, b];
-  }
-
-  return findMatchingState(aChildState, bChildState);
-};
-
-/**
- * Run async function in series as it's called.
- */
-export const series = (cb: () => Promise<void>) => {
-  let queue = Promise.resolve();
-  const callback = () => {
-    // eslint-disable-next-line promise/no-callback-in-promise
-    queue = queue.then(cb);
-  };
-  return callback;
-};
-
-const linkingHandlers: symbol[] = [];
-
-type Options = LinkingOptions<ParamListBase>;
-
-export function useLinking(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
-  {
-    enabled = true,
-    config,
-    getStateFromPath = getStateFromPathDefault,
-    getPathFromState = getPathFromStateDefault,
-    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',
-        ]
-          .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]);
-
-  const [history] = React.useState(createMemoryHistory);
-
-  // 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 configRef = React.useRef(config);
-  const getStateFromPathRef = React.useRef(getStateFromPath);
-  const getPathFromStateRef = React.useRef(getPathFromState);
-  const getActionFromStateRef = React.useRef(getActionFromState);
-
-  React.useEffect(() => {
-    enabledRef.current = enabled;
-    configRef.current = config;
-    getStateFromPathRef.current = getStateFromPath;
-    getPathFromStateRef.current = getPathFromState;
-    getActionFromStateRef.current = getActionFromState;
-  });
-
-  const validateRoutesNotExistInRootState = React.useCallback(
-    (state: ResultState) => {
-      const navigation = ref.current;
-      const rootState = navigation?.getRootState();
-      // Make sure that the routes in the state exist in the root navigator
-      // Otherwise there's an error in the linking configuration
-      return state?.routes.some((r) => !rootState?.routeNames.includes(r.name));
-    },
-    [ref]
-  );
-
-  const server = React.useContext(ServerContext);
-
-  const getInitialState = React.useCallback(() => {
-    let value: ResultState | undefined;
-
-    if (enabledRef.current) {
-      const location =
-        server?.location ??
-        (typeof window !== 'undefined' ? window.location : undefined);
-
-      const path = location ? location.pathname + location.search : undefined;
-
-      if (path) {
-        value = getStateFromPathRef.current(path, configRef.current);
-      }
-
-      // If the link were handled, it gets cleared in NavigationContainer
-      onUnhandledLinking(path);
-    }
-
-    const thenable = {
-      then(onfulfilled?: (state: ResultState | undefined) => void) {
-        return Promise.resolve(onfulfilled ? onfulfilled(value) : value);
-      },
-      catch() {
-        return thenable;
-      },
-    };
-
-    return thenable as PromiseLike<ResultState | undefined>;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const previousIndexRef = React.useRef<number | undefined>(undefined);
-  const previousStateRef = React.useRef<NavigationState | undefined>(undefined);
-  const pendingPopStatePathRef = React.useRef<string | undefined>(undefined);
-
-  React.useEffect(() => {
-    previousIndexRef.current = history.index;
-
-    return history.listen(() => {
-      const navigation = ref.current;
-
-      if (!navigation || !enabled) {
-        return;
-      }
-
-      const { location } = window;
-
-      const path = location.pathname + location.search;
-      const index = history.index;
-
-      const previousIndex = previousIndexRef.current ?? 0;
-
-      previousIndexRef.current = index;
-      pendingPopStatePathRef.current = path;
-
-      // When browser back/forward is clicked, we first need to check if state object for this index exists
-      // If it does we'll reset to that state object
-      // Otherwise, we'll handle it like a regular deep link
-      const record = history.get(index);
-
-      if (record?.path === path && record?.state) {
-        navigation.resetRoot(record.state);
-        return;
-      }
-
-      const state = getStateFromPathRef.current(path, configRef.current);
-
-      // We should only dispatch an action when going forward
-      // Otherwise the action will likely add items to history, which would mess things up
-      if (state) {
-        // If the link were handled, it gets cleared in NavigationContainer
-        onUnhandledLinking(path);
-        // Make sure that the routes in the state exist in the root navigator
-        // Otherwise there's an error in the linking configuration
-        if (validateRoutesNotExistInRootState(state)) {
-          return;
-        }
-
-        if (index > previousIndex) {
-          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 '${path}': ${
-                  typeof e === 'object' && e != null && 'message' in e
-                    ? e.message
-                    : e
-                }`
-              );
-            }
-          } else {
-            navigation.resetRoot(state);
-          }
-        } else {
-          navigation.resetRoot(state);
-        }
-      } else {
-        // if current path didn't return any state, we should revert to initial state
-        navigation.resetRoot(state);
-      }
-    });
-  }, [
-    enabled,
-    history,
-    onUnhandledLinking,
-    ref,
-    validateRoutesNotExistInRootState,
-  ]);
-
-  React.useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-
-    const getPathForRoute = (
-      route: ReturnType<typeof findFocusedRoute>,
-      state: NavigationState
-    ): string => {
-      let path;
-
-      // If the `route` object contains a `path`, use that path as long as `route.name` and `params` still match
-      // This makes sure that we preserve the original URL for wildcard routes
-      if (route?.path) {
-        const stateForPath = getStateFromPathRef.current(
-          route.path,
-          configRef.current
-        );
-
-        if (stateForPath) {
-          const focusedRoute = findFocusedRoute(stateForPath);
-
-          if (
-            focusedRoute &&
-            focusedRoute.name === route.name &&
-            isEqual(focusedRoute.params, route.params)
-          ) {
-            path = route.path;
-          }
-        }
-      }
-
-      if (path == null) {
-        path = getPathFromStateRef.current(state, configRef.current);
-      }
-
-      const previousRoute = previousStateRef.current
-        ? findFocusedRoute(previousStateRef.current)
-        : undefined;
-
-      // Preserve the hash if the route didn't change
-      if (
-        previousRoute &&
-        route &&
-        'key' in previousRoute &&
-        'key' in route &&
-        previousRoute.key === route.key
-      ) {
-        path = path + location.hash;
-      }
-
-      return path;
-    };
-
-    if (ref.current) {
-      // We need to record the current metadata on the first render if they aren't set
-      // This will allow the initial state to be in the history entry
-      const state = ref.current.getRootState();
-
-      if (state) {
-        const route = findFocusedRoute(state);
-        const path = getPathForRoute(route, state);
-
-        if (previousStateRef.current === undefined) {
-          previousStateRef.current = state;
-        }
-
-        history.replace({ path, state });
-      }
-    }
-
-    const onStateChange = async () => {
-      const navigation = ref.current;
-
-      if (!navigation || !enabled) {
-        return;
-      }
-
-      const previousState = previousStateRef.current;
-      const state = navigation.getRootState();
-
-      // root state may not available, for example when root navigators switch inside the container
-      if (!state) {
-        return;
-      }
-
-      const pendingPath = pendingPopStatePathRef.current;
-      const route = findFocusedRoute(state);
-      const path = getPathForRoute(route, state);
-
-      previousStateRef.current = state;
-      pendingPopStatePathRef.current = undefined;
-
-      // To detect the kind of state change, we need to:
-      // - Find the common focused navigation state in previous and current state
-      // - If only the route keys changed, compare history/routes.length to check if we go back/forward/replace
-      // - If no common focused navigation state found, it's a replace
-      const [previousFocusedState, focusedState] = findMatchingState(
-        previousState,
-        state
-      );
-
-      if (
-        previousFocusedState &&
-        focusedState &&
-        // We should only handle push/pop if path changed from what was in last `popstate`
-        // Otherwise it's likely a change triggered by `popstate`
-        path !== pendingPath
-      ) {
-        const historyDelta =
-          (focusedState.history
-            ? focusedState.history.length
-            : focusedState.routes.length) -
-          (previousFocusedState.history
-            ? previousFocusedState.history.length
-            : previousFocusedState.routes.length);
-
-        if (historyDelta > 0) {
-          // If history length is increased, we should pushState
-          // Note that path might not actually change here, for example, drawer open should pushState
-          history.push({ path, state });
-        } else if (historyDelta < 0) {
-          // If history length is decreased, i.e. entries were removed, we want to go back
-
-          const nextIndex = history.backIndex({ path });
-          const currentIndex = history.index;
-
-          try {
-            if (
-              nextIndex !== -1 &&
-              nextIndex < currentIndex &&
-              // We should only go back if the entry exists and it's less than current index
-              history.get(nextIndex)
-            ) {
-              // An existing entry for this path exists and it's less than current index, go back to that
-              await history.go(nextIndex - currentIndex);
-            } else {
-              // We couldn't find an existing entry to go back to, so we'll go back by the delta
-              // This won't be correct if multiple routes were pushed in one go before
-              // Usually this shouldn't happen and this is a fallback for that
-              await history.go(historyDelta);
-            }
-
-            // Store the updated state as well as fix the path if incorrect
-            history.replace({ path, state });
-          } catch (e) {
-            // The navigation was interrupted
-          }
-        } else {
-          // If history length is unchanged, we want to replaceState
-          history.replace({ path, state });
-        }
-      } else {
-        // If no common navigation state was found, assume it's a replace
-        // This would happen if the user did a reset/conditionally changed navigators
-        history.replace({ path, state });
-      }
-    };
-
-    // We debounce onStateChange coz we don't want multiple state changes to be handled at one time
-    // This could happen since `history.go(n)` is asynchronous
-    // If `pushState` or `replaceState` were called before `history.go(n)` completes, it'll mess stuff up
-    return ref.current?.addListener('state', series(onStateChange));
-  }, [enabled, history, ref]);
-
-  return {
-    getInitialState,
-  };
-}

package/src/useLocale.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import { LocaleDirContext } from './LocaleDirContext';
-
-/**
- * Hook to access the text direction specified in the `NavigationContainer`.
- */
-export function useLocale() {
-  const direction = React.useContext(LocaleDirContext);
-
-  if (direction === undefined) {
-    throw new Error(
-      "Couldn't determine the text direction. Is your component inside NavigationContainer?"
-    );
-  }
-
-  return { direction };
-}

package/src/useRoutePath.tsx

@@ -1,34 +0,0 @@
-import { getPathFromState, useStateForPath } from '@amazon-devices/react-navigation__core';
-import * as React from 'react';
-
-import { LinkingContext } from './LinkingContext';
-
-/**
- * Hook to get the path for the current route based on linking options.
- *
- * @returns Path for the current route.
- */
-export function useRoutePath() {
-  const { options } = React.useContext(LinkingContext);
-  const state = useStateForPath();
-
-  if (state === undefined) {
-    throw new Error(
-      "Couldn't find a state for the route object. Is your component inside a screen in a navigator?"
-    );
-  }
-
-  const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
-
-  const path = React.useMemo(() => {
-    if (options?.enabled === false) {
-      return undefined;
-    }
-
-    const path = getPathFromStateHelper(state, options?.config);
-
-    return path;
-  }, [options?.enabled, options?.config, state, getPathFromStateHelper]);
-
-  return path;
-}

package/src/useScrollToTop.tsx

@@ -1,120 +0,0 @@
-import {
-  type EventArg,
-  NavigationContext,
-  type NavigationProp,
-  type ParamListBase,
-  useRoute,
-} from '@amazon-devices/react-navigation__core';
-import * as React from 'react';
-import type { ScrollView } from 'react-native';
-
-type ScrollOptions = { x?: number; y?: number; animated?: boolean };
-
-type ScrollableView =
-  | { scrollToTop(): void }
-  | { scrollTo(options: ScrollOptions): void }
-  | { scrollToOffset(options: { offset: number; animated?: boolean }): void }
-  | { scrollResponderScrollTo(options: ScrollOptions): void };
-
-type ScrollableWrapper =
-  | { getScrollResponder(): React.ReactNode | ScrollView }
-  | { getNode(): ScrollableView }
-  | ScrollableView;
-
-function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
-  if (ref.current == null) {
-    return null;
-  }
-
-  if (
-    'scrollToTop' in ref.current ||
-    'scrollTo' in ref.current ||
-    'scrollToOffset' in ref.current ||
-    'scrollResponderScrollTo' in ref.current
-  ) {
-    // This is already a scrollable node.
-    return ref.current;
-  } else if ('getScrollResponder' in ref.current) {
-    // If the view is a wrapper like FlatList, SectionList etc.
-    // We need to use `getScrollResponder` to get access to the scroll responder
-    return ref.current.getScrollResponder();
-  } else if ('getNode' in ref.current) {
-    // When a `ScrollView` is wrapped in `Animated.createAnimatedComponent`
-    // we need to use `getNode` to get the ref to the actual scrollview.
-    // Note that `getNode` is deprecated in newer versions of react-native
-    // this is why we check if we already have a scrollable node above.
-    return ref.current.getNode();
-  } else {
-    return ref.current;
-  }
-}
-
-export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
-  const navigation = React.useContext(NavigationContext);
-  const route = useRoute();
-
-  if (navigation === undefined) {
-    throw new Error(
-      "Couldn't find a navigation object. Is your component inside NavigationContainer?"
-    );
-  }
-
-  React.useEffect(() => {
-    const tabNavigations: NavigationProp<ParamListBase>[] = [];
-    let currentNavigation = navigation;
-    // If the screen is nested inside multiple tab navigators, we should scroll to top for any of them
-    // So we need to find all the parent tab navigators and add the listeners there
-    while (currentNavigation) {
-      if (currentNavigation.getState().type === 'tab') {
-        tabNavigations.push(currentNavigation);
-      }
-
-      currentNavigation = currentNavigation.getParent();
-    }
-
-    if (tabNavigations.length === 0) {
-      return;
-    }
-
-    const unsubscribers = tabNavigations.map((tab) => {
-      return tab.addListener(
-        // We don't wanna import tab types here to avoid extra deps
-        // in addition, there are multiple tab implementations
-        // @ts-expect-error the `tabPress` event is only available when navigation type is tab
-        'tabPress',
-        (e: EventArg<'tabPress', true>) => {
-          // We should scroll to top only when the screen is focused
-          const isFocused = navigation.isFocused();
-
-          // In a nested stack navigator, tab press resets the stack to first screen
-          // So we should scroll to top only when we are on first screen
-          const isFirst =
-            tabNavigations.includes(navigation) ||
-            navigation.getState().routes[0].key === route.key;
-
-          // Run the operation in the next frame so we're sure all listeners have been run
-          // This is necessary to know if preventDefault() has been called
-          requestAnimationFrame(() => {
-            const scrollable = getScrollableNode(ref) as ScrollableWrapper;
-
-            if (isFocused && isFirst && scrollable && !e.defaultPrevented) {
-              if ('scrollToTop' in scrollable) {
-                scrollable.scrollToTop();
-              } else if ('scrollTo' in scrollable) {
-                scrollable.scrollTo({ y: 0, animated: true });
-              } else if ('scrollToOffset' in scrollable) {
-                scrollable.scrollToOffset({ offset: 0, animated: true });
-              } else if ('scrollResponderScrollTo' in scrollable) {
-                scrollable.scrollResponderScrollTo({ y: 0, animated: true });
-              }
-            }
-          });
-        }
-      );
-    });
-
-    return () => {
-      unsubscribers.forEach((unsubscribe) => unsubscribe());
-    };
-  }, [navigation, ref, route.key]);
-}

package/src/useThenable.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-
-export function useThenable<T>(create: () => PromiseLike<T>) {
-  const [promise] = React.useState(create);
-
-  let initialState: [boolean, T | undefined] = [false, undefined];
-
-  // Check if our thenable is synchronous
-  // eslint-disable-next-line promise/catch-or-return, promise/always-return
-  promise.then((result) => {
-    initialState = [true, result];
-  });
-
-  const [state, setState] = React.useState(initialState);
-  const [resolved] = state;
-
-  React.useEffect(() => {
-    let cancelled = false;
-
-    const resolve = async () => {
-      let result;
-
-      try {
-        result = await promise;
-      } finally {
-        if (!cancelled) {
-          setState([true, result]);
-        }
-      }
-    };
-
-    if (!resolved) {
-      resolve();
-    }
-
-    return () => {
-      cancelled = true;
-    };
-  }, [promise, resolved]);
-
-  return state;
-}