fix: fixed animation/resize/align fields & typing information

Author: IjzerenHein

src/SharedElementRendererData.tsx

@@ -1,7 +1,7 @@
 import SharedElementSceneData from './SharedElementSceneData';
 import {
   SharedElementEventSubscription,
-  SharedElementsConfig,
+  SharedElementsStrictConfig,
   SharedElementAnimatedValue,
   SharedElementTransitionProps,
 } from './types';
@@ -20,10 +20,9 @@ function getSharedElements(
   sceneData: SharedElementSceneData,
   otherSceneData: SharedElementSceneData,
   showing: boolean
-): SharedElementsConfig | null {
+): SharedElementsStrictConfig | null {
   const { sharedElements } = sceneData.Component;
   if (!sharedElements) return null;
-  // TODO push/pop distinction?
   return normalizeSharedElementsConfig(
     sharedElements(sceneData.navigation, otherSceneData.navigation, showing)
   );
@@ -35,7 +34,7 @@ export default class SharedElementRendererData
   private prevSceneData: SharedElementSceneData | null = null;
   private updateSubscribers = new Set<SharedElementRendererUpdateHandler>();
   private sceneSubscription: SharedElementEventSubscription | null = null;
-  private sharedElements: SharedElementsConfig = [];
+  private sharedElements: SharedElementsStrictConfig = [];
   private isShowing: boolean = true;
   private animValue: SharedElementAnimatedValue;
 
@@ -106,7 +105,7 @@ export default class SharedElementRendererData
   getTransitions(): SharedElementTransitionProps[] {
     const { sharedElements, prevSceneData, sceneData, isShowing } = this;
     // console.log('getTransitions: ', sharedElements);
-    return sharedElements.map(({ id, otherId, animation, debug }) => {
+    return sharedElements.map(({ id, otherId, ...other }) => {
       const startId = isShowing ? otherId || id : id;
       const endId = isShowing ? id : otherId || id;
       return {
@@ -122,8 +121,7 @@ export default class SharedElementRendererData
           ancestor: (sceneData ? sceneData.getAncestor() : undefined) || null,
           node: (sceneData ? sceneData.getNode(endId) : undefined) || null,
         },
-        ...animation,
-        debug,
+        ...other,
       };
     });
   }

src/types.tsx

@@ -56,19 +56,28 @@ export type SharedElementEventSubscription = {
   remove(): void;
 };
 
-export type SharedElementAnimationConfig = {
-  animation: SharedElementAnimation;
-  resize?: SharedElementResize;
-  align?: SharedElementAlign;
-};
-
-export type SharedElementConfig = {
+export type SharedElementStrictConfig = {
   readonly id: string;
   readonly otherId: string;
-  readonly animation: SharedElementAnimationConfig;
+  readonly animation: SharedElementAnimation;
+  readonly resize?: SharedElementResize;
+  readonly align?: SharedElementAlign;
   readonly debug?: boolean;
 };
 
+export type SharedElementsStrictConfig = SharedElementStrictConfig[];
+
+export type SharedElementConfig =
+  | {
+      readonly id: string;
+      readonly otherId?: string;
+      readonly animation?: SharedElementAnimation;
+      readonly resize?: SharedElementResize;
+      readonly align?: SharedElementAlign;
+      readonly debug?: boolean;
+    }
+  | string;
+
 export type SharedElementsConfig = SharedElementConfig[];
 
 export type SharedElementAnimatedValue = any;
@@ -77,7 +86,7 @@ export type SharedElementsComponentConfig = (
   navigation: NavigationProp,
   otherNavigation: NavigationProp,
   showing: boolean
-) => SharedElementsConfig | null;
+) => SharedElementsConfig | undefined;
 
 export type SharedElementSceneComponent = React.ComponentType<any> & {
   sharedElements: SharedElementsComponentConfig;

src/utils.tsx

@@ -1,65 +1,33 @@
 import {
-  SharedElementAnimationConfig,
   SharedElementConfig,
   SharedElementsConfig,
+  SharedElementStrictConfig,
+  SharedElementsStrictConfig,
 } from './types';
 
-export function normalizeSharedElementAnimationConfig(
-  animationConfig: any
-): SharedElementAnimationConfig {
-  if (animationConfig === true) {
-    return {
-      animation: 'move',
-    };
-  } else if (typeof animationConfig === 'string') {
-    return {
-      // @ts-ignore
-      animation: animationConfig,
-    };
-  } else {
-    return animationConfig;
-  }
-}
-
 export function normalizeSharedElementConfig(
-  sharedElementConfig: any
-): SharedElementConfig {
+  sharedElementConfig: SharedElementConfig
+): SharedElementStrictConfig {
   if (typeof sharedElementConfig === 'string') {
     return {
       id: sharedElementConfig,
       otherId: sharedElementConfig,
-      animation: normalizeSharedElementAnimationConfig('move'),
+      animation: 'move',
     };
   } else {
+    const { id, otherId, animation, ...other } = sharedElementConfig;
     return {
-      id: sharedElementConfig.id,
-      otherId: sharedElementConfig.otherId || sharedElementConfig.id,
-      debug: sharedElementConfig.debug || false,
-      animation: normalizeSharedElementAnimationConfig(
-        sharedElementConfig.animation || 'move'
-      ),
+      id,
+      otherId: otherId || id,
+      animation: animation || 'move',
+      ...other,
     };
   }
 }
 
 export function normalizeSharedElementsConfig(
-  sharedElementsConfig: any
-): SharedElementsConfig | null {
-  if (!sharedElementsConfig) return null;
-  if (Array.isArray(sharedElementsConfig)) {
-    if (!sharedElementsConfig.length) return null;
-    return sharedElementsConfig.map(normalizeSharedElementConfig);
-  } else {
-    const keys = Object.keys(sharedElementsConfig);
-    if (!keys.length) return null;
-    return keys.map(id => {
-      return {
-        id,
-        otherId: id,
-        animation: normalizeSharedElementAnimationConfig(
-          sharedElementsConfig[id]
-        ),
-      };
-    });
-  }
+  sharedElementsConfig: SharedElementsConfig | undefined
+): SharedElementsStrictConfig | null {
+  if (!sharedElementsConfig || !sharedElementsConfig.length) return null;
+  return sharedElementsConfig.map(normalizeSharedElementConfig);
 }