@amazon-devices/react-navigation__stack 8.0.9000000000 → 8.0.9000000002

package/lib/module/views/Stack/Card.js

@@ -1,433 +0,0 @@
-"use strict";
-
-import Color from 'color';
-import * as React from 'react';
-import { Animated, InteractionManager, Platform, StyleSheet, View } from 'react-native';
-import useLatestCallback from 'use-latest-callback';
-import { CardAnimationContext } from "../../utils/CardAnimationContext.js";
-import { gestureActivationCriteria } from "../../utils/gestureActivationCriteria.js";
-import { getDistanceForDirection } from "../../utils/getDistanceForDirection.js";
-import { getInvertedMultiplier } from "../../utils/getInvertedMultiplier.js";
-import { getShadowStyle } from "../../utils/getShadowStyle.js";
-import { GestureState, PanGestureHandler } from '../GestureHandler';
-import { CardContent } from "./CardContent.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GESTURE_VELOCITY_IMPACT = 0.3;
-const TRUE = 1;
-const FALSE = 0;
-const useNativeDriver = Platform.OS !== 'web';
-const hasOpacityStyle = style => {
-  if (style) {
-    const flattenedStyle = StyleSheet.flatten(style);
-    return 'opacity' in flattenedStyle && flattenedStyle.opacity != null;
-  }
-  return false;
-};
-const getAnimateToValue = ({
-  closing: isClosing,
-  layout: currentLayout,
-  gestureDirection: currentGestureDirection,
-  direction: currentDirection,
-  preloaded: isPreloaded
-}) => {
-  if (!isClosing && !isPreloaded) {
-    return 0;
-  }
-  return getDistanceForDirection(currentLayout, currentGestureDirection, currentDirection === 'rtl');
-};
-const defaultOverlay = ({
-  style
-}) => style ? /*#__PURE__*/_jsx(Animated.View, {
-  pointerEvents: "none",
-  style: [styles.overlay, style]
-}) : null;
-function Card({
-  shadowEnabled = false,
-  gestureEnabled = true,
-  gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
-  overlay = defaultOverlay,
-  animated,
-  interpolationIndex,
-  opening,
-  closing,
-  next,
-  current,
-  gesture,
-  layout,
-  insets,
-  direction,
-  pageOverflowEnabled,
-  gestureDirection,
-  onOpen,
-  onClose,
-  onTransition,
-  onGestureBegin,
-  onGestureCanceled,
-  onGestureEnd,
-  children,
-  overlayEnabled,
-  gestureResponseDistance,
-  transitionSpec,
-  preloaded,
-  styleInterpolator,
-  containerStyle: customContainerStyle,
-  contentStyle
-}) {
-  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
-  const didInitiallyAnimate = React.useRef(false);
-  const lastToValueRef = React.useRef(undefined);
-  const interactionHandleRef = React.useRef(undefined);
-  const animationHandleRef = React.useRef(undefined);
-  const pendingGestureCallbackRef = React.useRef(undefined);
-  const [isClosing] = React.useState(() => new Animated.Value(FALSE));
-  const [inverted] = React.useState(() => new Animated.Value(getInvertedMultiplier(gestureDirection, direction === 'rtl')));
-  const [layoutAnim] = React.useState(() => ({
-    width: new Animated.Value(layout.width),
-    height: new Animated.Value(layout.height)
-  }));
-  const [isSwiping] = React.useState(() => new Animated.Value(FALSE));
-  const onStartInteraction = useLatestCallback(() => {
-    if (interactionHandleRef.current === undefined) {
-      interactionHandleRef.current = InteractionManager.createInteractionHandle();
-    }
-  });
-  const onEndInteraction = useLatestCallback(() => {
-    if (interactionHandleRef.current !== undefined) {
-      InteractionManager.clearInteractionHandle(interactionHandleRef.current);
-      interactionHandleRef.current = undefined;
-    }
-  });
-  const animate = useLatestCallback(({
-    closing: isClosingParam,
-    velocity
-  }) => {
-    const toValue = getAnimateToValue({
-      closing: isClosingParam,
-      layout,
-      gestureDirection,
-      direction,
-      preloaded
-    });
-    lastToValueRef.current = toValue;
-    isClosing.setValue(isClosingParam ? TRUE : FALSE);
-    const spec = isClosingParam ? transitionSpec.close : transitionSpec.open;
-    const animation = spec.animation === 'spring' ? Animated.spring : Animated.timing;
-    clearTimeout(pendingGestureCallbackRef.current);
-    if (animationHandleRef.current !== undefined) {
-      cancelAnimationFrame(animationHandleRef.current);
-    }
-    onTransition?.({
-      closing: isClosingParam,
-      gesture: velocity !== undefined
-    });
-    const onFinish = () => {
-      if (isClosingParam) {
-        onClose();
-      } else {
-        onOpen();
-      }
-      animationHandleRef.current = requestAnimationFrame(() => {
-        if (didInitiallyAnimate.current) {
-          // Make sure to re-open screen if it wasn't removed
-          forceUpdate();
-        }
-      });
-    };
-    if (animated) {
-      onStartInteraction();
-      animation(gesture, {
-        ...spec.config,
-        velocity,
-        toValue,
-        useNativeDriver,
-        isInteraction: false
-      }).start(({
-        finished
-      }) => {
-        onEndInteraction();
-        clearTimeout(pendingGestureCallbackRef.current);
-        if (finished) {
-          onFinish();
-        }
-      });
-    } else {
-      onFinish();
-    }
-  });
-  const onGestureStateChange = useLatestCallback(({
-    nativeEvent
-  }) => {
-    switch (nativeEvent.state) {
-      case GestureState.ACTIVE:
-        isSwiping.setValue(TRUE);
-        onStartInteraction();
-        onGestureBegin?.();
-        break;
-      case GestureState.CANCELLED:
-      case GestureState.FAILED:
-        {
-          isSwiping.setValue(FALSE);
-          onEndInteraction();
-          const velocity = gestureDirection === 'vertical' || gestureDirection === 'vertical-inverted' ? nativeEvent.velocityY : nativeEvent.velocityX;
-          animate({
-            closing,
-            velocity
-          });
-          onGestureCanceled?.();
-          break;
-        }
-      case GestureState.END:
-        {
-          isSwiping.setValue(FALSE);
-          let distance;
-          let translation;
-          let velocity;
-          if (gestureDirection === 'vertical' || gestureDirection === 'vertical-inverted') {
-            distance = layout.height;
-            translation = nativeEvent.translationY;
-            velocity = nativeEvent.velocityY;
-          } else {
-            distance = layout.width;
-            translation = nativeEvent.translationX;
-            velocity = nativeEvent.velocityX;
-          }
-          const shouldClose = (translation + velocity * gestureVelocityImpact) * getInvertedMultiplier(gestureDirection, direction === 'rtl') > distance / 2 ? velocity !== 0 || translation !== 0 : closing;
-          animate({
-            closing: shouldClose,
-            velocity
-          });
-          if (shouldClose) {
-            // We call onClose with a delay to make sure that the animation has already started
-            // This will make sure that the state update caused by this doesn't affect start of animation
-            pendingGestureCallbackRef.current = setTimeout(() => {
-              onClose();
-
-              // Trigger an update after we dispatch the action to remove the screen
-              // This will make sure that we check if the screen didn't get removed so we can cancel the animation
-              forceUpdate();
-            }, 32);
-          }
-          onGestureEnd?.();
-          break;
-        }
-    }
-  });
-  React.useLayoutEffect(() => {
-    layoutAnim.width.setValue(layout.width);
-    layoutAnim.height.setValue(layout.height);
-    inverted.setValue(getInvertedMultiplier(gestureDirection, direction === 'rtl'));
-  }, [gestureDirection, direction, inverted, layoutAnim.width, layoutAnim.height, layout.width, layout.height]);
-  const previousPropsRef = React.useRef(null);
-  React.useEffect(() => {
-    return () => {
-      onEndInteraction();
-      if (animationHandleRef.current) {
-        cancelAnimationFrame(animationHandleRef.current);
-      }
-      clearTimeout(pendingGestureCallbackRef.current);
-    };
-
-    // We only want to clean up the animation on unmount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const timeoutRef = React.useRef(null);
-  React.useEffect(() => {
-    if (preloaded) {
-      return;
-    }
-    if (!didInitiallyAnimate.current) {
-      // Animate the card in on initial mount
-      // Wrap in setTimeout to ensure animation starts after
-      // rending of the screen is done. This is especially important
-      // in the new architecture
-      // cf., https://github.com/react-navigation/react-navigation/issues/12401
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      timeoutRef.current = setTimeout(() => {
-        didInitiallyAnimate.current = true;
-        animate({
-          closing
-        });
-      }, 0);
-    } else {
-      const previousOpening = previousPropsRef.current?.opening;
-      const previousToValue = previousPropsRef.current ? getAnimateToValue(previousPropsRef.current) : null;
-      const toValue = getAnimateToValue({
-        closing,
-        layout,
-        gestureDirection,
-        direction,
-        preloaded
-      });
-      if (previousToValue !== toValue || lastToValueRef.current !== toValue) {
-        // We need to trigger the animation when route was closed
-        // The route might have been closed by a `POP` action or by a gesture
-        // When route was closed due to a gesture, the animation would've happened already
-        // It's still important to trigger the animation so that `onClose` is called
-        // If `onClose` is not called, cleanup step won't be performed for gestures
-        animate({
-          closing
-        });
-      } else if (typeof previousOpening === 'boolean' && opening && !previousOpening) {
-        // This can happen when screen somewhere below in the stack comes into focus via rearranging
-        // Also reset the animated value to make sure that the animation starts from the beginning
-        gesture.setValue(getDistanceForDirection(layout, gestureDirection, direction === 'rtl'));
-        animate({
-          closing
-        });
-      }
-    }
-    previousPropsRef.current = {
-      opening,
-      closing,
-      layout,
-      gestureDirection,
-      direction,
-      preloaded
-    };
-  }, [animate, closing, direction, gesture, gestureDirection, layout, opening, preloaded]);
-  const interpolationProps = React.useMemo(() => ({
-    index: interpolationIndex,
-    current: {
-      progress: current
-    },
-    next: next && {
-      progress: next
-    },
-    closing: isClosing,
-    swiping: isSwiping,
-    inverted,
-    layouts: {
-      screen: layout
-    },
-    insets: {
-      top: insets.top,
-      right: insets.right,
-      bottom: insets.bottom,
-      left: insets.left
-    }
-  }), [interpolationIndex, current, next, isClosing, isSwiping, inverted, layout, insets.top, insets.right, insets.bottom, insets.left]);
-  const {
-    containerStyle,
-    cardStyle,
-    overlayStyle,
-    shadowStyle
-  } = React.useMemo(() => styleInterpolator(interpolationProps), [styleInterpolator, interpolationProps]);
-  const onGestureEvent = React.useMemo(() => gestureEnabled ? Animated.event([{
-    nativeEvent: gestureDirection === 'vertical' || gestureDirection === 'vertical-inverted' ? {
-      translationY: gesture
-    } : {
-      translationX: gesture
-    }
-  }], {
-    useNativeDriver
-  }) : undefined, [gesture, gestureDirection, gestureEnabled]);
-  const {
-    backgroundColor
-  } = StyleSheet.flatten(contentStyle || {});
-  const isTransparent = typeof backgroundColor === 'string' ? Color(backgroundColor).alpha() === 0 : false;
-  return /*#__PURE__*/_jsxs(CardAnimationContext.Provider, {
-    value: interpolationProps,
-    children: [Platform.OS !== 'web' ? /*#__PURE__*/_jsx(Animated.View, {
-      style: {
-        // This is a dummy style that doesn't actually change anything visually.
-        // Animated needs the animated value to be used somewhere, otherwise things don't update properly.
-        // If we disable animations and hide header, it could end up making the value unused.
-        // So we have this dummy style that will always be used regardless of what else changed.
-        opacity: current
-      }
-      // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
-      ,
-      collapsable: false
-    }) : null, overlayEnabled ? /*#__PURE__*/_jsx(View, {
-      pointerEvents: "box-none",
-      style: StyleSheet.absoluteFill,
-      children: overlay({
-        style: overlayStyle
-      })
-    }) : null, /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "box-none",
-      style: [styles.container, containerStyle, customContainerStyle],
-      children: /*#__PURE__*/_jsx(PanGestureHandler, {
-        enabled: layout.width !== 0 && gestureEnabled,
-        onGestureEvent: onGestureEvent,
-        onHandlerStateChange: onGestureStateChange,
-        ...gestureActivationCriteria({
-          layout,
-          direction,
-          gestureDirection,
-          gestureResponseDistance
-        }),
-        children: /*#__PURE__*/_jsxs(Animated.View, {
-          pointerEvents: "box-none",
-          needsOffscreenAlphaCompositing: hasOpacityStyle(cardStyle),
-          style: [styles.container, cardStyle],
-          children: [shadowEnabled && shadowStyle && !isTransparent ? /*#__PURE__*/_jsx(Animated.View, {
-            pointerEvents: "none",
-            style: [styles.shadow, gestureDirection === 'horizontal' ? [styles.shadowHorizontal, styles.shadowStart] : gestureDirection === 'horizontal-inverted' ? [styles.shadowHorizontal, styles.shadowEnd] : gestureDirection === 'vertical' ? [styles.shadowVertical, styles.shadowTop] : [styles.shadowVertical, styles.shadowBottom], {
-              backgroundColor
-            }, shadowStyle]
-          }) : null, /*#__PURE__*/_jsx(CardContent, {
-            enabled: pageOverflowEnabled,
-            layout: layout,
-            style: contentStyle,
-            children: children
-          })]
-        })
-      })
-    })]
-  });
-}
-export { Card };
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  overlay: {
-    flex: 1,
-    backgroundColor: '#000'
-  },
-  shadow: {
-    position: 'absolute'
-  },
-  shadowHorizontal: {
-    top: 0,
-    bottom: 0,
-    width: 3,
-    ...getShadowStyle({
-      offset: {
-        width: -1,
-        height: 1
-      },
-      radius: 5,
-      opacity: 0.3
-    })
-  },
-  shadowStart: {
-    start: 0
-  },
-  shadowEnd: {
-    end: 0
-  },
-  shadowVertical: {
-    start: 0,
-    end: 0,
-    height: 3,
-    ...getShadowStyle({
-      offset: {
-        width: 1,
-        height: -1
-      },
-      radius: 5,
-      opacity: 0.3
-    })
-  },
-  shadowTop: {
-    top: 0
-  },
-  shadowBottom: {
-    bottom: 0
-  }
-});
-//# sourceMappingURL=Card.js.map

package/lib/module/views/Stack/CardA11yWrapper.js

@@ -1,43 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const CardA11yWrapper = /*#__PURE__*/React.forwardRef(({
-  focused,
-  active,
-  animated,
-  isNextScreenTransparent,
-  detachCurrentScreen,
-  children
-}, ref) => {
-  // Manage this in separate component to avoid re-rendering card during gestures
-  // Otherwise the gesture animation will be interrupted as state hasn't updated yet
-  const [inert, setInert] = React.useState(false);
-  React.useImperativeHandle(ref, () => ({
-    setInert
-  }), []);
-  const isHidden = !animated && isNextScreenTransparent === false && detachCurrentScreen !== false && !focused;
-  return /*#__PURE__*/_jsx(View, {
-    "aria-hidden": !focused,
-    pointerEvents: (animated ? inert : !focused) ? 'none' : 'box-none',
-    style: [StyleSheet.absoluteFill, {
-      // This is necessary to avoid unfocused larger pages increasing scroll area
-      // The issue can be seen on the web when a smaller screen is pushed over a larger one
-      overflow: active ? undefined : 'hidden',
-      // We use visibility on web
-      display: Platform.OS !== 'web' && isHidden ? 'none' : 'flex',
-      // Hide unfocused screens when animation isn't enabled
-      // This is also necessary for a11y on web
-      // @ts-expect-error visibility is only available on web
-      visibility: isHidden ? 'hidden' : 'visible'
-    }]
-    // Make sure this view is not removed on the new architecture, as it causes focus loss during navigation on Android.
-    // This can happen when the view flattening results in different trees - due to `overflow` style changing in a parent.
-    ,
-    collapsable: false,
-    children: children
-  });
-});
-CardA11yWrapper.displayName = 'CardA11yWrapper';
-//# sourceMappingURL=CardA11yWrapper.js.map