fix: fix warnings in strict mode (#97)

Author: kyletsang

src/ImperativeTransition.tsx

@@ -4,6 +4,7 @@ import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
 import React, { useRef, cloneElement, useState } from 'react';
 import { TransitionComponent, TransitionProps } from './types';
 import NoopTransition from './NoopTransition';
+import RTGTransition from './RTGTransition';
 
 export interface TransitionFunctionOptions {
   in: boolean;
@@ -118,12 +119,12 @@ export default function ImperativeTransition({
 }
 
 export function renderTransition(
-  Component: TransitionComponent | undefined,
+  component: TransitionComponent | undefined,
   runTransition: TransitionHandler | undefined,
   props: TransitionProps & Omit<ImperativeTransitionProps, 'transition'>,
 ) {
-  if (Component) {
-    return <Component {...props} />;
+  if (component) {
+    return <RTGTransition {...props} component={component} />;
   }
   if (runTransition) {
     return <ImperativeTransition {...props} transition={runTransition} />;

src/RTGTransition.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import useRTGTransitionProps, {
+  TransitionProps,
+} from './useRTGTransitionProps';
+
+export type RTGTransitionProps = TransitionProps & {
+  component: React.ElementType;
+};
+
+// Normalizes Transition callbacks when nodeRef is used.
+const RTGTransition = React.forwardRef<any, RTGTransitionProps>(
+  ({ component: Component, ...props }, ref) => {
+    const transitionProps = useRTGTransitionProps(props);
+
+    return <Component ref={ref} {...transitionProps} />;
+  },
+);
+
+export default RTGTransition;

src/useRTGTransitionProps.ts

@@ -0,0 +1,82 @@
+import { cloneElement, useCallback, useRef } from 'react';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import {
+  TransitionProps as RTGTransitionProps,
+  TransitionStatus,
+} from 'react-transition-group/Transition';
+
+export type TransitionProps = RTGTransitionProps & {
+  children:
+    | React.ReactElement
+    | ((
+        status: TransitionStatus,
+        props: Record<string, unknown>,
+      ) => React.ReactNode);
+};
+
+/**
+ * Normalizes RTG transition callbacks with nodeRef to better support
+ * strict mode.
+ *
+ * @param props Transition props.
+ * @returns Normalized transition props.
+ */
+export default function useRTGTransitionProps({
+  onEnter,
+  onEntering,
+  onEntered,
+  onExit,
+  onExiting,
+  onExited,
+  addEndListener,
+  children,
+  ...props
+}: TransitionProps) {
+  const nodeRef = useRef<HTMLElement>(null);
+  const mergedRef = useMergedRefs(
+    nodeRef,
+    typeof children === 'function' ? null : (children as any).ref,
+  );
+
+  const normalize =
+    (callback?: (node: HTMLElement, param: any) => void) => (param: any) => {
+      if (callback && nodeRef.current) {
+        callback(nodeRef.current, param);
+      }
+    };
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  const handleEnter = useCallback(normalize(onEnter), [onEnter]);
+  const handleEntering = useCallback(normalize(onEntering), [onEntering]);
+  const handleEntered = useCallback(normalize(onEntered), [onEntered]);
+  const handleExit = useCallback(normalize(onExit), [onExit]);
+  const handleExiting = useCallback(normalize(onExiting), [onExiting]);
+  const handleExited = useCallback(normalize(onExited), [onExited]);
+  const handleAddEndListener = useCallback(normalize(addEndListener), [
+    addEndListener,
+  ]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  return {
+    ...props,
+    nodeRef,
+    onEnter: handleEnter,
+    onEntering: handleEntering,
+    onEntered: handleEntered,
+    onExit: handleExit,
+    onExiting: handleExiting,
+    onExited: handleExited,
+    addEndListener: handleAddEndListener,
+    children:
+      typeof children === 'function'
+        ? (((status: TransitionStatus, innerProps: Record<string, unknown>) =>
+            // TODO: Types for RTG missing innerProps, so need to cast.
+            children(status, {
+              ...innerProps,
+              ref: mergedRef,
+            })) as any)
+        : cloneElement(children as React.ReactElement, {
+            ref: mergedRef,
+          }),
+  };
+}