'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _Transition = require('react-transition-group/Transition'); var _Transition2 = _interopRequireDefault(_Transition); var _transitions = require('../styles/transitions'); var _withTheme = require('../styles/withTheme'); var _withTheme2 = _interopRequireDefault(_withTheme); var _utils = require('./utils'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } // @inheritedComponent Transition var styles = { entering: { transform: 'scale(1)' }, entered: { transform: 'scale(1)' } }; /** * The Zoom transition can be used for the floating variant of the * [Button](https://material-ui-next.com/demos/buttons/#floating-action-buttons) component. * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. */ var Zoom = function (_React$Component) { (0, _inherits3.default)(Zoom, _React$Component); function Zoom() { var _ref; var _temp, _this, _ret; (0, _classCallCheck3.default)(this, Zoom); for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Zoom.__proto__ || (0, _getPrototypeOf2.default)(Zoom)).call.apply(_ref, [this].concat(args))), _this), _this.handleEnter = function (node) { var theme = _this.props.theme; (0, _utils.reflow)(node); // So the animation always start from the start. var _getTransitionProps = (0, _utils.getTransitionProps)(_this.props, { mode: 'enter' }), transitionDuration = _getTransitionProps.duration, delay = _getTransitionProps.delay; node.style.transition = theme.transitions.create('transform', { duration: transitionDuration, delay: delay }); node.style.webkitTransition = theme.transitions.create('transform', { duration: transitionDuration, delay: delay }); if (_this.props.onEnter) { _this.props.onEnter(node); } }, _this.handleExit = function (node) { var theme = _this.props.theme; var _getTransitionProps2 = (0, _utils.getTransitionProps)(_this.props, { mode: 'exit' }), transitionDuration = _getTransitionProps2.duration, delay = _getTransitionProps2.delay; node.style.transition = theme.transitions.create('transform', { duration: transitionDuration, delay: delay }); node.style.webkitTransition = theme.transitions.create('transform', { duration: transitionDuration, delay: delay }); if (_this.props.onExit) { _this.props.onExit(node); } }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); } (0, _createClass3.default)(Zoom, [{ key: 'render', value: function render() { var _props = this.props, children = _props.children, onEnter = _props.onEnter, onExit = _props.onExit, styleProp = _props.style, theme = _props.theme, other = (0, _objectWithoutProperties3.default)(_props, ['children', 'onEnter', 'onExit', 'style', 'theme']); var style = (0, _extends3.default)({}, styleProp, _react2.default.isValidElement(children) ? children.props.style : {}); return _react2.default.createElement( _Transition2.default, (0, _extends3.default)({ appear: true, onEnter: this.handleEnter, onExit: this.handleExit }, other), function (state, childProps) { return _react2.default.cloneElement(children, (0, _extends3.default)({ style: (0, _extends3.default)({ transform: 'scale(0)' }, styles[state], style) }, childProps)); } ); } }]); return Zoom; }(_react2.default.Component); Zoom.propTypes = process.env.NODE_ENV !== "production" ? { /** * A single child content element. */ children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]), /** * If `true`, the component will transition in. */ in: _propTypes2.default.bool, /** * @ignore */ onEnter: _propTypes2.default.func, /** * @ignore */ onExit: _propTypes2.default.func, /** * @ignore */ style: _propTypes2.default.object, /** * @ignore */ theme: _propTypes2.default.object.isRequired, /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. */ timeout: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number })]) } : {}; Zoom.defaultProps = { timeout: { enter: _transitions.duration.enteringScreen, exit: _transitions.duration.leavingScreen } }; exports.default = (0, _withTheme2.default)()(Zoom);