@amazon-devices/react-navigation__stack 8.0.9000000001 → 8.0.9000000002

package/src/views/Stack/CardContainer.tsx

@@ -1,339 +0,0 @@
-import {
-  getHeaderTitle,
-  HeaderBackContext,
-  HeaderHeightContext,
-  HeaderShownContext,
-} from '@amazon-devices/react-navigation__elements';
-import {
-  type Route,
-  useLinkBuilder,
-  useLocale,
-  useTheme,
-} from '@amazon-devices/react-navigation__native';
-import * as React from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
-
-import type { Layout, Scene } from '../../types';
-import { ModalPresentationContext } from '../../utils/ModalPresentationContext';
-import { useKeyboardManager } from '../../utils/useKeyboardManager';
-import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
-import { Card } from './Card';
-import { CardA11yWrapper, type CardA11yWrapperRef } from './CardA11yWrapper';
-
-type Props = {
-  interpolationIndex: number;
-  index: number;
-  active: boolean;
-  focused: boolean;
-  opening: boolean;
-  closing: boolean;
-  modal: boolean;
-  layout: Layout;
-  gesture: Animated.Value;
-  preloaded: boolean;
-  scene: Scene;
-  safeAreaInsetTop: number;
-  safeAreaInsetRight: number;
-  safeAreaInsetBottom: number;
-  safeAreaInsetLeft: number;
-  getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
-  getFocusedRoute: () => Route<string>;
-  renderHeader: (props: HeaderContainerProps) => React.ReactNode;
-  onOpenRoute: (props: { route: Route<string> }) => void;
-  onCloseRoute: (props: { route: Route<string> }) => void;
-  onTransitionStart: (
-    props: { route: Route<string> },
-    closing: boolean
-  ) => void;
-  onTransitionEnd: (props: { route: Route<string> }, closing: boolean) => void;
-  onGestureStart: (props: { route: Route<string> }) => void;
-  onGestureEnd: (props: { route: Route<string> }) => void;
-  onGestureCancel: (props: { route: Route<string> }) => void;
-  hasAbsoluteFloatHeader: boolean;
-  headerHeight: number;
-  onHeaderHeightChange: (props: {
-    route: Route<string>;
-    height: number;
-  }) => void;
-  isParentHeaderShown: boolean;
-  isNextScreenTransparent: boolean;
-  detachCurrentScreen: boolean;
-};
-
-const EPSILON = 0.1;
-
-function CardContainerInner({
-  interpolationIndex,
-  index,
-  active,
-  opening,
-  closing,
-  gesture,
-  focused,
-  modal,
-  getPreviousScene,
-  getFocusedRoute,
-  hasAbsoluteFloatHeader,
-  headerHeight,
-  onHeaderHeightChange,
-  isParentHeaderShown,
-  isNextScreenTransparent,
-  detachCurrentScreen,
-  layout,
-  onCloseRoute,
-  onOpenRoute,
-  onGestureCancel,
-  onGestureEnd,
-  onGestureStart,
-  onTransitionEnd,
-  onTransitionStart,
-  preloaded,
-  renderHeader,
-  safeAreaInsetBottom,
-  safeAreaInsetLeft,
-  safeAreaInsetRight,
-  safeAreaInsetTop,
-  scene,
-}: Props) {
-  const wrapperRef = React.useRef<CardA11yWrapperRef>(null);
-
-  const { direction } = useLocale();
-
-  const parentHeaderHeight = React.useContext(HeaderHeightContext);
-
-  const { onPageChangeStart, onPageChangeCancel, onPageChangeConfirm } =
-    useKeyboardManager(
-      React.useCallback(() => {
-        const { options, navigation } = scene.descriptor;
-
-        return (
-          navigation.isFocused() && options.keyboardHandlingEnabled !== false && Platform.OS as any !== 'kepler'
-        );
-      }, [scene.descriptor])
-    );
-
-  const handleOpen = () => {
-    const { route } = scene.descriptor;
-
-    onTransitionEnd({ route }, false);
-    onOpenRoute({ route });
-  };
-
-  const handleClose = () => {
-    const { route } = scene.descriptor;
-
-    onTransitionEnd({ route }, true);
-    onCloseRoute({ route });
-  };
-
-  const handleGestureBegin = () => {
-    const { route } = scene.descriptor;
-
-    onPageChangeStart();
-    onGestureStart({ route });
-  };
-
-  const handleGestureCanceled = () => {
-    const { route } = scene.descriptor;
-
-    onPageChangeCancel();
-    onGestureCancel({ route });
-  };
-
-  const handleGestureEnd = () => {
-    const { route } = scene.descriptor;
-
-    onGestureEnd({ route });
-  };
-
-  const handleTransition = ({
-    closing,
-    gesture,
-  }: {
-    closing: boolean;
-    gesture: boolean;
-  }) => {
-    wrapperRef.current?.setInert(closing);
-
-    const { route } = scene.descriptor;
-
-    if (!gesture) {
-      onPageChangeConfirm?.(true);
-    } else if (active && closing) {
-      onPageChangeConfirm?.(false);
-    } else {
-      onPageChangeCancel?.();
-    }
-
-    onTransitionStart?.({ route }, closing);
-  };
-
-  const insets = {
-    top: safeAreaInsetTop,
-    right: safeAreaInsetRight,
-    bottom: safeAreaInsetBottom,
-    left: safeAreaInsetLeft,
-  };
-
-  const { colors } = useTheme();
-
-  React.useEffect(() => {
-    const listener = scene.progress.next?.addListener?.(
-      ({ value }: { value: number }) => {
-        wrapperRef.current?.setInert(value > EPSILON);
-      }
-    );
-
-    return () => {
-      if (listener) {
-        scene.progress.next?.removeListener?.(listener);
-      }
-    };
-  }, [scene.progress.next]);
-
-  const {
-    presentation,
-    animation,
-    cardOverlay,
-    cardOverlayEnabled,
-    cardShadowEnabled,
-    cardStyle,
-    cardStyleInterpolator,
-    gestureDirection,
-    gestureEnabled,
-    gestureResponseDistance,
-    gestureVelocityImpact,
-    headerMode,
-    headerShown,
-    transitionSpec,
-  } = scene.descriptor.options;
-
-  const { buildHref } = useLinkBuilder();
-  const previousScene = getPreviousScene({ route: scene.descriptor.route });
-
-  let backTitle: string | undefined;
-  let href: string | undefined;
-
-  if (previousScene) {
-    const { options, route } = previousScene.descriptor;
-
-    backTitle = getHeaderTitle(options, route.name);
-    href = buildHref(route.name, route.params);
-  }
-
-  const canGoBack = previousScene != null;
-  const headerBack = React.useMemo(() => {
-    if (canGoBack) {
-      return {
-        href,
-        title: backTitle,
-      };
-    }
-
-    return undefined;
-  }, [canGoBack, backTitle, href]);
-
-  const animated = animation !== 'none';
-
-  return (
-    <CardA11yWrapper
-      ref={wrapperRef}
-      focused={focused}
-      active={active}
-      animated={animated}
-      isNextScreenTransparent={isNextScreenTransparent}
-      detachCurrentScreen={detachCurrentScreen}
-    >
-      <Card
-        animated={animated}
-        interpolationIndex={interpolationIndex}
-        gestureDirection={gestureDirection}
-        layout={layout}
-        insets={insets}
-        direction={direction}
-        gesture={gesture}
-        current={scene.progress.current}
-        next={scene.progress.next}
-        opening={opening}
-        closing={closing}
-        onOpen={handleOpen}
-        onClose={handleClose}
-        overlay={cardOverlay}
-        overlayEnabled={cardOverlayEnabled}
-        shadowEnabled={cardShadowEnabled}
-        onTransition={handleTransition}
-        onGestureBegin={handleGestureBegin}
-        onGestureCanceled={handleGestureCanceled}
-        onGestureEnd={handleGestureEnd}
-        gestureEnabled={index === 0 ? false : gestureEnabled}
-        gestureResponseDistance={gestureResponseDistance}
-        gestureVelocityImpact={gestureVelocityImpact}
-        transitionSpec={transitionSpec}
-        styleInterpolator={cardStyleInterpolator}
-        pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
-        preloaded={preloaded}
-        containerStyle={
-          hasAbsoluteFloatHeader && headerMode !== 'screen'
-            ? { marginTop: headerHeight }
-            : null
-        }
-        contentStyle={[
-          {
-            backgroundColor:
-              presentation === 'transparentModal'
-                ? 'transparent'
-                : colors.background,
-          },
-          cardStyle,
-        ]}
-      >
-        <View style={styles.container}>
-          <ModalPresentationContext.Provider value={modal}>
-            {headerMode !== 'float'
-              ? renderHeader({
-                  mode: 'screen',
-                  layout,
-                  scenes: [previousScene, scene],
-                  getPreviousScene,
-                  getFocusedRoute,
-                  onContentHeightChange: onHeaderHeightChange,
-                  style: styles.header,
-                })
-              : null}
-            <View style={styles.scene}>
-              <HeaderBackContext.Provider value={headerBack}>
-                <HeaderShownContext.Provider
-                  value={isParentHeaderShown || headerShown !== false}
-                >
-                  <HeaderHeightContext.Provider
-                    value={
-                      headerShown !== false
-                        ? headerHeight
-                        : (parentHeaderHeight ?? 0)
-                    }
-                  >
-                    {scene.descriptor.render()}
-                  </HeaderHeightContext.Provider>
-                </HeaderShownContext.Provider>
-              </HeaderBackContext.Provider>
-            </View>
-          </ModalPresentationContext.Provider>
-        </View>
-      </Card>
-    </CardA11yWrapper>
-  );
-}
-
-export const CardContainer = React.memo(CardContainerInner);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  header: {
-    zIndex: 1,
-  },
-  scene: {
-    flex: 1,
-  },
-});

package/src/views/Stack/CardContent.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View, type ViewProps } from 'react-native';
-
-type Props = ViewProps & {
-  enabled: boolean;
-  layout: { width: number; height: number };
-  children: React.ReactNode;
-};
-
-// This component will render a page which overflows the screen
-// if the container fills the body by comparing the size
-// This lets the document.body handle scrolling of the content
-// It's necessary for mobile browsers to be able to hide address bar on scroll
-export function CardContent({ enabled, layout, style, ...rest }: Props) {
-  const [fill, setFill] = React.useState(false);
-
-  React.useEffect(() => {
-    if (typeof document === 'undefined' || !document.body) {
-      // Only run when DOM is available
-      return;
-    }
-
-    const width = document.body.clientWidth;
-    const height = document.body.clientHeight;
-
-    // Workaround for mobile Chrome, necessary when a navigation happens
-    // when the address bar has already collapsed, which resulted in an
-    // empty space at the bottom of the page (matching the height of the
-    // address bar). To fix this, it's necessary to update the height of
-    // the DOM with the current height of the window.
-    // See https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-    const isFullHeight = height === layout.height;
-    const id = '__react-navigation-stack-mobile-chrome-viewport-fix';
-
-    let unsubscribe: (() => void) | undefined;
-
-    if (isFullHeight && navigator.maxTouchPoints > 0) {
-      const style =
-        document.getElementById(id) ?? document.createElement('style');
-
-      style.id = id;
-
-      const updateStyle = () => {
-        const vh = window.innerHeight * 0.01;
-
-        style.textContent = [
-          `:root { --vh: ${vh}px; }`,
-          `body { height: calc(var(--vh, 1vh) * 100); }`,
-        ].join('\n');
-      };
-
-      updateStyle();
-
-      if (!document.head.contains(style)) {
-        document.head.appendChild(style);
-      }
-
-      window.addEventListener('resize', updateStyle);
-
-      unsubscribe = () => {
-        window.removeEventListener('resize', updateStyle);
-      };
-    } else {
-      // Remove the workaround if the stack does not occupy the whole
-      // height of the page
-      document.getElementById(id)?.remove();
-    }
-
-    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
-    setFill(width === layout.width && height === layout.height);
-
-    return unsubscribe;
-  }, [layout.height, layout.width]);
-
-  return (
-    <View
-      {...rest}
-      pointerEvents="box-none"
-      style={[enabled && fill ? styles.page : styles.card, style]}
-    />
-  );
-}
-
-const styles = StyleSheet.create({
-  page: {
-    minHeight: '100%',
-  },
-  card: {
-    flex: 1,
-    overflow: 'hidden',
-  },
-});