@amazon-devices/react-navigation__stack 8.0.9000000000 → 8.0.9000000002

package/lib/module/TransitionConfigs/CardStyleInterpolators.js

@@ -1,394 +0,0 @@
-"use strict";
-
-import { Animated, Platform } from 'react-native';
-import { conditional } from "../utils/conditional.js";
-const {
-  add,
-  multiply
-} = Animated;
-
-/**
- * Standard iOS-style slide in from the right.
- */
-export function forHorizontalIOS({
-  current,
-  next,
-  inverted,
-  layouts: {
-    screen
-  }
-}) {
-  const translateFocused = multiply(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [screen.width, 0],
-    extrapolate: 'clamp'
-  }), inverted);
-  const translateUnfocused = next ? multiply(next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, screen.width * -0.3],
-    extrapolate: 'clamp'
-  }), inverted) : 0;
-  const overlayOpacity = current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.07],
-    extrapolate: 'clamp'
-  });
-  const shadowOpacity = current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.3],
-    extrapolate: 'clamp'
-  });
-  return {
-    cardStyle: {
-      transform: [
-      // Translation for the animation of the current card
-      {
-        translateX: translateFocused
-      },
-      // Translation for the animation of the card on top of this
-      {
-        translateX: translateUnfocused
-      }]
-    },
-    overlayStyle: {
-      opacity: overlayOpacity
-    },
-    shadowStyle: {
-      shadowOpacity
-    }
-  };
-}
-
-/**
- * iOS-style slide in from the left.
- */
-export function forHorizontalIOSInverted({
-  inverted,
-  ...rest
-}) {
-  return forHorizontalIOS({
-    ...rest,
-    inverted: Animated.multiply(inverted, -1)
-  });
-}
-
-/**
- * Standard iOS-style slide in from the bottom (used for modals).
- */
-export function forVerticalIOS({
-  current,
-  inverted,
-  layouts: {
-    screen
-  }
-}) {
-  const translateY = multiply(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [screen.height, 0],
-    extrapolate: 'clamp'
-  }), inverted);
-  return {
-    cardStyle: {
-      transform: [{
-        translateY
-      }]
-    }
-  };
-}
-
-/**
- * Standard iOS-style modal animation in iOS 13.
- */
-export function forModalPresentationIOS({
-  index,
-  current,
-  next,
-  inverted,
-  layouts: {
-    screen
-  },
-  insets
-}) {
-  const hasNotchIos = Platform.OS === 'ios' && !Platform.isPad && !Platform.isTV && insets.top > 20;
-  const isLandscape = screen.width > screen.height;
-  const topOffset = isLandscape ? 0 : 10;
-  const statusBarHeight = insets.top;
-  const aspectRatio = screen.height / screen.width;
-  const progress = add(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }), next ? next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }) : 0);
-  const isFirst = index === 0;
-  const translateY = multiply(progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: [screen.height, isFirst ? 0 : topOffset, (isFirst ? statusBarHeight : 0) - topOffset * aspectRatio]
-  }), inverted);
-  const overlayOpacity = progress.interpolate({
-    inputRange: [0, 1, 1.0001, 2],
-    outputRange: [0, 0.3, 1, 1]
-  });
-  const scale = isLandscape ? 1 : progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: [1, 1, screen.width ? 1 - topOffset * 2 / screen.width : 1]
-  });
-  const borderRadius = isLandscape ? 0 : isFirst ? progress.interpolate({
-    inputRange: [0, 1, 1.0001, 2],
-    outputRange: [0, 0, hasNotchIos ? 38 : 0, 10]
-  }) : 10;
-  return {
-    cardStyle: {
-      overflow: 'hidden',
-      borderCurve: 'continuous',
-      borderTopLeftRadius: borderRadius,
-      borderTopRightRadius: borderRadius,
-      // We don't need these for the animation
-      // But different border radius for corners improves animation perf
-      borderBottomLeftRadius: hasNotchIos ? borderRadius : 0,
-      borderBottomRightRadius: hasNotchIos ? borderRadius : 0,
-      marginTop: isFirst ? 0 : statusBarHeight,
-      marginBottom: isFirst ? 0 : topOffset,
-      transform: [{
-        translateY
-      }, {
-        scale
-      }]
-    },
-    overlayStyle: {
-      opacity: overlayOpacity
-    }
-  };
-}
-
-/**
- * Standard Android-style fade in from the bottom for Android Oreo.
- */
-export function forFadeFromBottomAndroid({
-  current,
-  inverted,
-  layouts: {
-    screen
-  },
-  closing
-}) {
-  const translateY = multiply(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [screen.height * 0.08, 0],
-    extrapolate: 'clamp'
-  }), inverted);
-  const opacity = conditional(closing, current.progress, current.progress.interpolate({
-    inputRange: [0, 0.5, 0.9, 1],
-    outputRange: [0, 0.25, 0.7, 1],
-    extrapolate: 'clamp'
-  }));
-  return {
-    cardStyle: {
-      opacity,
-      transform: [{
-        translateY
-      }]
-    }
-  };
-}
-
-/**
- * Standard Android-style reveal from the bottom for Android Pie.
- */
-export function forRevealFromBottomAndroid({
-  current,
-  next,
-  inverted,
-  layouts: {
-    screen
-  }
-}) {
-  const containerTranslateY = multiply(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [screen.height, 0],
-    extrapolate: 'clamp'
-  }), inverted);
-  const cardTranslateYFocused = multiply(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [screen.height * (95.9 / 100) * -1, 0],
-    extrapolate: 'clamp'
-  }), inverted);
-  const cardTranslateYUnfocused = next ? multiply(next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, screen.height * (2 / 100) * -1],
-    extrapolate: 'clamp'
-  }), inverted) : 0;
-  const overlayOpacity = current.progress.interpolate({
-    inputRange: [0, 0.36, 1],
-    outputRange: [0, 0.1, 0.1],
-    extrapolate: 'clamp'
-  });
-  return {
-    containerStyle: {
-      overflow: 'hidden',
-      transform: [{
-        translateY: containerTranslateY
-      }]
-    },
-    cardStyle: {
-      transform: [{
-        translateY: cardTranslateYFocused
-      }, {
-        translateY: cardTranslateYUnfocused
-      }]
-    },
-    overlayStyle: {
-      opacity: overlayOpacity
-    }
-  };
-}
-
-/**
- * Standard Android-style zoom for Android 10.
- */
-export function forScaleFromCenterAndroid({
-  current,
-  next,
-  closing
-}) {
-  const progress = add(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }), next ? next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }) : 0);
-  const opacity = progress.interpolate({
-    inputRange: [0, 0.75, 0.875, 1, 1.0825, 1.2075, 2],
-    outputRange: [0, 0, 1, 1, 1, 1, 0]
-  });
-  const scale = conditional(closing, current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0.925, 1],
-    extrapolate: 'clamp'
-  }), progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: [0.85, 1, 1.075]
-  }));
-  return {
-    cardStyle: {
-      opacity,
-      transform: [{
-        scale
-      }]
-    }
-  };
-}
-
-/**
- * Standard Android-style fade from right for Android 14.
- */
-export function forFadeFromRightAndroid({
-  current,
-  next,
-  inverted,
-  closing
-}) {
-  const translateFocused = multiply(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [96, 0],
-    extrapolate: 'clamp'
-  }), inverted);
-  const translateUnfocused = next ? multiply(next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, -96],
-    extrapolate: 'clamp'
-  }), inverted) : 0;
-  const opacity = conditional(closing, current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }), current.progress);
-  return {
-    cardStyle: {
-      opacity,
-      transform: [
-      // Translation for the animation of the current card
-      {
-        translateX: translateFocused
-      },
-      // Translation for the animation of the card on top of this
-      {
-        translateX: translateUnfocused
-      }]
-    }
-  };
-}
-
-/**
- * Standard bottom sheet slide in from the bottom for Android.
- */
-export function forBottomSheetAndroid({
-  current,
-  inverted,
-  layouts: {
-    screen
-  },
-  closing
-}) {
-  const translateY = multiply(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [screen.height * 0.8, 0],
-    extrapolate: 'clamp'
-  }), inverted);
-  const opacity = conditional(closing, current.progress, current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }));
-  const overlayOpacity = current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.3],
-    extrapolate: 'clamp'
-  });
-  return {
-    cardStyle: {
-      opacity,
-      transform: [{
-        translateY
-      }]
-    },
-    overlayStyle: {
-      opacity: overlayOpacity
-    }
-  };
-}
-
-/**
- * Simple fade animation for dialogs
- */
-export function forFadeFromCenter({
-  current: {
-    progress
-  }
-}) {
-  return {
-    cardStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0, 0.5, 0.9, 1],
-        outputRange: [0, 0.25, 0.7, 1]
-      })
-    },
-    overlayStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, 0.5],
-        extrapolate: 'clamp'
-      })
-    }
-  };
-}
-export function forNoAnimation() {
-  return {};
-}
-//# sourceMappingURL=CardStyleInterpolators.js.map

package/lib/module/TransitionConfigs/HeaderStyleInterpolators.js

@@ -1,262 +0,0 @@
-"use strict";
-
-import { Animated, Platform } from 'react-native';
-const {
-  add,
-  multiply
-} = Animated;
-
-// Width of the screen in split layout on portrait mode on iPad Mini
-// Keep in sync with HeaderBackButton.tsx
-const IPAD_MINI_MEDIUM_WIDTH = 414;
-
-/**
- * Standard UIKit style animation for the header where the title fades into the back button label.
- */
-export function forUIKit({
-  current,
-  next,
-  direction,
-  layouts
-}) {
-  const defaultOffset = 100;
-  const leftSpacing = 27 + (Platform.OS === 'ios' && layouts.screen.width >= IPAD_MINI_MEDIUM_WIDTH ? 5 // Additional padding on iPad specified in Header.tsx
-  : 0);
-
-  // The title and back button title should cross-fade to each other
-  // When screen is fully open, the title should be in center, and back title should be on left
-  // When screen is closing, the previous title will animate to back title's position
-  // And back title will animate to title's position
-  // We achieve this by calculating the offsets needed to translate title to back title's position and vice-versa
-  const leftLabelOffset = layouts.leftLabel ? (layouts.screen.width - layouts.leftLabel.width) / 2 - leftSpacing : defaultOffset;
-  const titleLeftOffset = layouts.title ? (layouts.screen.width - layouts.title.width) / 2 - leftSpacing : defaultOffset;
-
-  // When the current title is animating to right, it is centered in the right half of screen in middle of transition
-  // The back title also animates in from this position
-  const rightOffset = layouts.screen.width / 4;
-  const multiplier = direction === 'rtl' ? -1 : 1;
-  const progress = add(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }), next ? next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }) : 0);
-  return {
-    leftButtonStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0.3, 1, 1.5],
-        outputRange: [0, 1, 0]
-      })
-    },
-    leftLabelStyle: {
-      transform: [{
-        translateX: multiply(multiplier, progress.interpolate({
-          inputRange: [0, 1, 2],
-          outputRange: [leftLabelOffset, 0, -rightOffset]
-        }))
-      }]
-    },
-    rightButtonStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0.3, 1, 1.5],
-        outputRange: [0, 1, 0]
-      })
-    },
-    titleStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0, 0.5, 0.75, 1, 1.5],
-        outputRange: [0, 0, 0.1, 1, 0]
-      }),
-      transform: [{
-        translateX: multiply(multiplier, progress.interpolate({
-          inputRange: [0.5, 1, 2],
-          outputRange: [rightOffset, 0, -titleLeftOffset]
-        }))
-      }]
-    },
-    backgroundStyle: {
-      transform: [{
-        translateX: multiply(multiplier, progress.interpolate({
-          inputRange: [0, 1, 2],
-          outputRange: [layouts.screen.width, 0, -layouts.screen.width]
-        }))
-      }]
-    }
-  };
-}
-
-/**
- * Simple fade animation for the header elements.
- */
-export function forFade({
-  current,
-  next
-}) {
-  const progress = add(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }), next ? next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }) : 0);
-  const opacity = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: [0, 1, 0]
-  });
-  return {
-    leftButtonStyle: {
-      opacity
-    },
-    rightButtonStyle: {
-      opacity
-    },
-    titleStyle: {
-      opacity
-    },
-    backgroundStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0, 1, 1.9, 2],
-        outputRange: [0, 1, 1, 0]
-      })
-    }
-  };
-}
-
-/**
- * Simple translate animation to translate the header to left.
- */
-export function forSlideLeft({
-  current,
-  next,
-  direction,
-  layouts: {
-    screen
-  }
-}) {
-  const isRTL = direction === 'rtl';
-  const progress = add(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }), next ? next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }) : 0);
-  const translateX = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: isRTL ? [-screen.width, 0, screen.width] : [screen.width, 0, -screen.width]
-  });
-  const transform = [{
-    translateX
-  }];
-  return {
-    leftButtonStyle: {
-      transform
-    },
-    rightButtonStyle: {
-      transform
-    },
-    titleStyle: {
-      transform
-    },
-    backgroundStyle: {
-      transform
-    }
-  };
-}
-
-/**
- * Simple translate animation to translate the header to right.
- */
-export function forSlideRight({
-  current,
-  next,
-  direction,
-  layouts: {
-    screen
-  }
-}) {
-  const isRTL = direction === 'rtl';
-  const progress = add(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }), next ? next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }) : 0);
-  const translateX = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: isRTL ? [screen.width, 0, -screen.width] : [-screen.width, 0, screen.width]
-  });
-  const transform = [{
-    translateX
-  }];
-  return {
-    leftButtonStyle: {
-      transform
-    },
-    rightButtonStyle: {
-      transform
-    },
-    titleStyle: {
-      transform
-    },
-    backgroundStyle: {
-      transform
-    }
-  };
-}
-
-/**
- * Simple translate animation to translate the header to slide up.
- */
-export function forSlideUp({
-  current,
-  next,
-  layouts: {
-    header
-  }
-}) {
-  const progress = add(current.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }), next ? next.progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 1],
-    extrapolate: 'clamp'
-  }) : 0);
-  const translateY = progress.interpolate({
-    inputRange: [0, 1, 2],
-    outputRange: [-header.height, 0, -header.height]
-  });
-  const transform = [{
-    translateY
-  }];
-  return {
-    leftButtonStyle: {
-      transform
-    },
-    rightButtonStyle: {
-      transform
-    },
-    titleStyle: {
-      transform
-    },
-    backgroundStyle: {
-      transform
-    }
-  };
-}
-export function forNoAnimation() {
-  return {};
-}
-//# sourceMappingURL=HeaderStyleInterpolators.js.map