You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.9 KiB
61 lines
1.9 KiB
import React, { useCallback, useRef } from 'react';
|
|
import Transition from 'react-transition-group/Transition';
|
|
import useMergedRefs from '@restart/hooks/useMergedRefs';
|
|
import safeFindDOMNode from './safeFindDOMNode';
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
// Normalizes Transition callbacks when nodeRef is used.
|
|
const TransitionWrapper = /*#__PURE__*/React.forwardRef(({
|
|
onEnter,
|
|
onEntering,
|
|
onEntered,
|
|
onExit,
|
|
onExiting,
|
|
onExited,
|
|
addEndListener,
|
|
children,
|
|
childRef,
|
|
...props
|
|
}, ref) => {
|
|
const nodeRef = useRef(null);
|
|
const mergedRef = useMergedRefs(nodeRef, childRef);
|
|
|
|
const attachRef = r => {
|
|
mergedRef(safeFindDOMNode(r));
|
|
};
|
|
|
|
const normalize = callback => param => {
|
|
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 /*#__PURE__*/_jsx(Transition, {
|
|
ref: ref,
|
|
...props,
|
|
onEnter: handleEnter,
|
|
onEntered: handleEntered,
|
|
onEntering: handleEntering,
|
|
onExit: handleExit,
|
|
onExited: handleExited,
|
|
onExiting: handleExiting,
|
|
addEndListener: handleAddEndListener,
|
|
nodeRef: nodeRef,
|
|
children: typeof children === 'function' ? (status, innerProps) => children(status, { ...innerProps,
|
|
ref: attachRef
|
|
}) : /*#__PURE__*/React.cloneElement(children, {
|
|
ref: attachRef
|
|
})
|
|
});
|
|
});
|
|
export default TransitionWrapper; |