From 6cddb5238c0b1e37238c85c76e2ecb1f81517c19 Mon Sep 17 00:00:00 2001
From: Christian Falch <christian.falch@gmail.com>
Date: Tue, 10 Dec 2019 15:51:49 +0100
Subject: [PATCH] feat: expose animation related values in context

---
 packages/stack/src/index.tsx                  |  1 +
 packages/stack/src/types.tsx                  |  4 ++
 .../src/utils/StackCardAnimationContext.tsx   |  6 +++
 packages/stack/src/views/Stack/Card.tsx       | 47 ++++++++++++++++++-
 4 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 packages/stack/src/utils/StackCardAnimationContext.tsx

diff --git a/packages/stack/src/index.tsx b/packages/stack/src/index.tsx
index e517bb82..bccdf1be 100644
--- a/packages/stack/src/index.tsx
+++ b/packages/stack/src/index.tsx
@@ -35,6 +35,7 @@ export {
  * Utilities
  */
 export { default as StackGestureContext } from './utils/StackGestureContext';
+export { default as StackCardAnimationContext } from './utils/StackCardAnimationContext';
 
 /**
  * Types
diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
index 2ce5e705..578da8d1 100644
--- a/packages/stack/src/types.tsx
+++ b/packages/stack/src/types.tsx
@@ -468,6 +468,10 @@ export type StackCardInterpolationProps = {
    * Animated node representing whether the card is closing.
    */
   closing: Animated.Node<0 | 1>;
+  /**
+   * Animated node representing whether the card is being swiped.
+   */
+  swiping: Animated.Node<0 | 1>;
   /**
    * Animated node representing multiplier when direction is inverted.
    */
diff --git a/packages/stack/src/utils/StackCardAnimationContext.tsx b/packages/stack/src/utils/StackCardAnimationContext.tsx
new file mode 100644
index 00000000..124e6458
--- /dev/null
+++ b/packages/stack/src/utils/StackCardAnimationContext.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { StackCardInterpolationProps } from '../types';
+
+export default React.createContext<StackCardInterpolationProps | undefined>(
+  undefined
+);
diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx
index c43cca03..2ca83f7d 100755
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -16,6 +16,7 @@ import animate, { Binary } from './CardAnimation';
 import PointerEventsView from './PointerEventsView';
 import memoize from '../../utils/memoize';
 import StackGestureContext from '../../utils/StackGestureContext';
+import StackCardAnimationContext from '../../utils/StackCardAnimationContext';
 import {
   TransitionSpec,
   StackCardStyleInterpolator,
@@ -645,6 +646,7 @@ export default class Card extends React.Component<Props> {
         current: { progress: current },
         next: next && { progress: next },
         closing: this.isClosing,
+        swiping: this.isSwiping,
         inverted: this.inverted,
         layouts: {
           screen: layout,
@@ -674,6 +676,36 @@ export default class Card extends React.Component<Props> {
     this.props.insets.left
   );
 
+  // Keep track of the animation context when deps changes.
+  private getCardAnimationContext = memoize(
+    (
+      index: number,
+      current: Animated.Node<number>,
+      next: Animated.Node<number> | undefined,
+      layout: Layout,
+      insetTop: number,
+      insetRight: number,
+      insetBottom: number,
+      insetLeft: number
+    ) => ({
+      index,
+      current: { progress: current },
+      next: next && { progress: next },
+      closing: this.isClosing,
+      swiping: this.isSwiping,
+      inverted: this.inverted,
+      layouts: {
+        screen: layout,
+      },
+      insets: {
+        top: insetTop,
+        right: insetRight,
+        bottom: insetBottom,
+        left: insetLeft,
+      },
+    })
+  );
+
   private gestureActivationCriteria() {
     const { layout, gestureDirection, gestureResponseDistance } = this.props;
 
@@ -757,6 +789,17 @@ export default class Card extends React.Component<Props> {
       );
     }
 
+    const animationContext = this.getCardAnimationContext(
+      index,
+      current,
+      next,
+      layout,
+      insets.top,
+      insets.right,
+      insets.bottom,
+      insets.left
+    );
+
     const {
       containerStyle,
       cardStyle,
@@ -816,7 +859,9 @@ export default class Card extends React.Component<Props> {
                     contentStyle,
                   ]}
                 >
-                  {children}
+                  <StackCardAnimationContext.Provider value={animationContext}>
+                    {children}
+                  </StackCardAnimationContext.Provider>
                 </PointerEventsView>
               </Animated.View>
             </PanGestureHandler>