@mui/material#useForkRef TypeScript Examples

SlideFade = React.forwardRef(function SlideFade(props: SlideProps, ref) {
    const {
        children,
        in: inProp,
        timeout,
        onExitAnimation,
        ...other
    } = props;

    const theme: any = useTheme();
    const childrenRef = React.useRef<any>(null);
    const handleRefIntermediary = useForkRef(children.ref, childrenRef);
    const handleRef = useForkRef(handleRefIntermediary, ref);

    const normalizedTransitionCallback = (callback: any) => (isAppearing: boolean) => {
        if (callback) {
            // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
            if (isAppearing === undefined) {
                callback(childrenRef.current);
            } else {
                callback(childrenRef.current, isAppearing);
            }
        }
    };

    const handleEnter = normalizedTransitionCallback((node: any) => {
        setTranslateValue(node);
        reflow(node);
    });

    const handleEntering = normalizedTransitionCallback((node: any) => {
        const transitionProps = getTransitionProps(
            { timeout },
            {
                mode: "enter"
            }
        );
        node.style.webkitTransition = theme.transitions.create("-webkit-transform", {
            ...transitionProps,
            easing: theme.transitions.easing.easeOut
        });

        node.style.transition = theme.transitions.create("transform", {
            ...transitionProps,
            easing: theme.transitions.easing.easeOut
        });

        node.style.webkitTransform = "none";
        node.style.transform = "none";
        node.style.opacity = 1;
    });


    const handleExit: any = normalizedTransitionCallback((node: any) => {
        const transitionProps = getTransitionProps(
            { timeout },
            {
                mode: "exit"
            }
        );

        node.style.opacity = 0.5;
        node.style.webkitTransition = theme.transitions.create(["-webkit-transform", "opacity"], {
            ...transitionProps,
            easing: theme.transitions.easing.sharp
        });

        node.style.transition = theme.transitions.create(["transform", "opacity"], {
            ...transitionProps,
            easing: theme.transitions.easing.sharp
        });

        setTranslateValue(node);
    });

    const handleExited: any = normalizedTransitionCallback((node: any) => {
        // No need for transitions when the component is hidden
        node.style.webkitTransition = "";
        node.style.transition = "";

    });

    const updatePosition = React.useCallback(() => {
        if (childrenRef.current) {
            setTranslateValue(childrenRef.current);
        }
    }, []);

    React.useEffect(() => {
        // Skip configuration where the position is screen size invariant.
        if (inProp) {
            return undefined;
        }

        const handleResize = debounce(() => {
            if (childrenRef.current) {
                setTranslateValue(childrenRef.current);
            }
        });

        const containerWindow = ownerWindow(childrenRef.current);
        containerWindow.addEventListener("resize", handleResize);
        return () => {
            handleResize.clear();
            containerWindow.removeEventListener("resize", handleResize);
        };
    }, [inProp]);

    React.useEffect(() => {
        if (!inProp) {
            // We need to update the position of the drawer when the direction change and
            // when it's hidden.d
            updatePosition();
        }
    }, [inProp, updatePosition]);

    return (
        <Transition
            nodeRef={childrenRef}
            onEnter={handleEnter}
            onEntering={handleEntering}
            onExit={handleExit}
            onExited={handleExited}
            appear={true}
            in={inProp}
            timeout={timeout}
            {...other}
        >
            {((state: any, childProps: any) => {
                return React.cloneElement(children, {
                    ref: handleRef,
                    style: {
                        visibility: state === "exited" && !inProp ? "hidden" : undefined,
                        ...children.props.style
                    },
                    ...childProps
                });
            }) as any}
        </Transition>
    );
})