Skip to content

Commit

Permalink
fix: fix warnings in strict mode
Browse files Browse the repository at this point in the history
  • Loading branch information
kyletsang committed Mar 14, 2024
1 parent 44dc346 commit 0354c78
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 3 deletions.
7 changes: 4 additions & 3 deletions src/ImperativeTransition.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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} />;
Expand Down
19 changes: 19 additions & 0 deletions src/RTGTransition.tsx
Original file line number Diff line number Diff line change
@@ -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;
82 changes: 82 additions & 0 deletions src/useRTGTransitionProps.ts
Original file line number Diff line number Diff line change
@@ -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, {

Check warning on line 74 in src/useRTGTransitionProps.ts

View check run for this annotation

Codecov / codecov/patch

src/useRTGTransitionProps.ts#L74

Added line #L74 was not covered by tests
...innerProps,
ref: mergedRef,
})) as any)
: cloneElement(children as React.ReactElement, {
ref: mergedRef,
}),
};
}

0 comments on commit 0354c78

Please sign in to comment.