Files F101438193

Zoom.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Mon, Feb 10, 11:50

Zoom.js
View Options

	import _extends from "@babel/runtime/helpers/esm/extends";
	import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
	const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
	import * as React from 'react';
	import PropTypes from 'prop-types';
	import { Transition } from 'react-transition-group';
	import { elementAcceptingRef } from '@mui/utils';
	import useTheme from '../styles/useTheme';
	import { reflow, getTransitionProps } from '../transitions/utils';
	import useForkRef from '../utils/useForkRef';
	import { jsx as _jsx } from "react/jsx-runtime";
	const styles = {
	entering: {
	transform: 'none'
	},
	entered: {
	transform: 'none'
	}
	};

	/**
	* The Zoom transition can be used for the floating variant of the
	* [Button](/material-ui/react-button/#floating-action-buttons) component.
	* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
	*/
	const Zoom = /#__PURE__/React.forwardRef(function Zoom(props, ref) {
	const theme = useTheme();
	const defaultTimeout = {
	enter: theme.transitions.duration.enteringScreen,
	exit: theme.transitions.duration.leavingScreen
	};
	const {
	addEndListener,
	appear = true,
	children,
	easing,
	in: inProp,
	onEnter,
	onEntered,
	onEntering,
	onExit,
	onExited,
	onExiting,
	style,
	timeout = defaultTimeout,
	// eslint-disable-next-line react/prop-types
	TransitionComponent = Transition
	} = props,
	other = _objectWithoutPropertiesLoose(props, _excluded);
	const nodeRef = React.useRef(null);
	const handleRef = useForkRef(nodeRef, children.ref, ref);
	const normalizedTransitionCallback = callback => maybeIsAppearing => {
	if (callback) {
	const node = nodeRef.current;

	// onEnterXxx and onExitXxx callbacks have a different arguments.length value.
	if (maybeIsAppearing === undefined) {
	callback(node);
	} else {
	callback(node, maybeIsAppearing);
	}
	}
	};
	const handleEntering = normalizedTransitionCallback(onEntering);
	const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
	reflow(node); // So the animation always start from the start.

	const transitionProps = getTransitionProps({
	style,
	timeout,
	easing
	}, {
	mode: 'enter'
	});
	node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
	node.style.transition = theme.transitions.create('transform', transitionProps);
	if (onEnter) {
	onEnter(node, isAppearing);
	}
	});
	const handleEntered = normalizedTransitionCallback(onEntered);
	const handleExiting = normalizedTransitionCallback(onExiting);
	const handleExit = normalizedTransitionCallback(node => {
	const transitionProps = getTransitionProps({
	style,
	timeout,
	easing
	}, {
	mode: 'exit'
	});
	node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
	node.style.transition = theme.transitions.create('transform', transitionProps);
	if (onExit) {
	onExit(node);
	}
	});
	const handleExited = normalizedTransitionCallback(onExited);
	const handleAddEndListener = next => {
	if (addEndListener) {
	// Old call signature before `react-transition-group` implemented `nodeRef`
	addEndListener(nodeRef.current, next);
	}
	};
	return /#__PURE__/_jsx(TransitionComponent, _extends({
	appear: appear,
	in: inProp,
	nodeRef: nodeRef,
	onEnter: handleEnter,
	onEntered: handleEntered,
	onEntering: handleEntering,
	onExit: handleExit,
	onExited: handleExited,
	onExiting: handleExiting,
	addEndListener: handleAddEndListener,
	timeout: timeout
	}, other, {
	children: (state, childProps) => {
	return /#__PURE__/React.cloneElement(children, _extends({
	style: _extends({
	transform: 'scale(0)',
	visibility: state === 'exited' && !inProp ? 'hidden' : undefined
	}, styles[state], style, children.props.style),
	ref: handleRef
	}, childProps));
	}
	}));
	});
	process.env.NODE_ENV !== "production" ? Zoom.propTypes /* remove-proptypes */ = {
	// ----------------------------- Warning --------------------------------
	// \| These PropTypes are generated from the TypeScript type definitions \|
	// \| To update them edit the d.ts file and run "yarn proptypes" \|
	// ----------------------------------------------------------------------
	/**
	* Add a custom transition end trigger. Called with the transitioning DOM
	* node and a done callback. Allows for more fine grained transition end
	* logic. Note: Timeouts are still used as a fallback if provided.
	*/
	addEndListener: PropTypes.func,
	/**
	* Perform the enter transition when it first mounts if `in` is also `true`.
	* Set this to `false` to disable this behavior.
	* @default true
	*/
	appear: PropTypes.bool,
	/**
	* A single child content element.
	*/
	children: elementAcceptingRef.isRequired,
	/**
	* The transition timing function.
	* You may specify a single easing or a object containing enter and exit values.
	*/
	easing: PropTypes.oneOfType([PropTypes.shape({
	enter: PropTypes.string,
	exit: PropTypes.string
	}), PropTypes.string]),
	/**
	* If `true`, the component will transition in.
	*/
	in: PropTypes.bool,
	/**
	* @ignore
	*/
	onEnter: PropTypes.func,
	/**
	* @ignore
	*/
	onEntered: PropTypes.func,
	/**
	* @ignore
	*/
	onEntering: PropTypes.func,
	/**
	* @ignore
	*/
	onExit: PropTypes.func,
	/**
	* @ignore
	*/
	onExited: PropTypes.func,
	/**
	* @ignore
	*/
	onExiting: PropTypes.func,
	/**
	* @ignore
	*/
	style: PropTypes.object,
	/**
	* The duration for the transition, in milliseconds.
	* You may specify a single timeout for all transitions, or individually with an object.
	* @default {
	* enter: theme.transitions.duration.enteringScreen,
	* exit: theme.transitions.duration.leavingScreen,
	* }
	*/
	timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
	appear: PropTypes.number,
	enter: PropTypes.number,
	exit: PropTypes.number
	})])
	} : void 0;
	export default Zoom;

Event Timeline