hooks_use-fade-in-out.js

import { React } from '@gravityforms/libraries';

const { useCallback, useState } = React;

/**
 * @module useFadeInOut
 * @description A hook to manage fade in/fade out and mounted state.
 *
 * @since 5.1.6
 *
 * @param {object}  args                  The arguments for the hook.
 * @param {number}  args.animationDelay   The animation delay for closing the component.
 * @param {boolean} args.initialIsMounted The initial value of the isMounted state.
 * @param {boolean} args.initialIsOpen    The initial value of the isOpen state.
 *
 * @return {object} The fade in out state.
 */
const useFadeInOut = ( {
	animationDelay = 250,
	initialIsMounted = false,
	initialIsOpen = false,
} = {} ) => {
	const [ isMounted, setIsMounted ] = useState( initialIsMounted );
	const [ isOpen, setIsOpen ] = useState( initialIsOpen );

	/**
	 * @function fadeIn
	 * @description Mount and fade in a component.
	 *
	 * @since 5.1.6
	 *
	 * @return {void}
	 */
	const fadeIn = useCallback( () => {
		setIsMounted( true );
		setIsOpen( true );
	}, [] );

	/**
	 * @function fadeOut
	 * @description Fade out and unmount a component.
	 *
	 * @since 5.1.6
	 *
	 * @return {void}
	 */
	const fadeOut = useCallback( () => {
		setIsOpen( false );
		setTimeout( () => {
			setIsMounted( false );
		}, animationDelay );
	}, [ animationDelay ] );

	return {
		fadeIn,
		fadeOut,
		isMounted,
		isOpen,
	};
};

export default useFadeInOut;