93 lines
2.8 KiB
JavaScript
93 lines
2.8 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _Transition = require('react-transition-group/Transition');
|
|
|
|
var _Transition2 = _interopRequireDefault(_Transition);
|
|
|
|
var _glamor = require('glamor');
|
|
|
|
var _animation = require('./animation');
|
|
|
|
var _animation2 = _interopRequireDefault(_animation);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
|
|
|
var animate = {
|
|
animationDuration: '0.75s',
|
|
animationFillMode: 'both'
|
|
};
|
|
|
|
var styles = function styles(pos) {
|
|
var _getAnimation = (0, _animation2.default)(pos),
|
|
enter = _getAnimation.enter,
|
|
exit = _getAnimation.exit;
|
|
|
|
var enterAnimation = _glamor.css.keyframes(_extends({
|
|
'from, 60%, 75%, 90%, to': {
|
|
animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
|
|
}
|
|
}, enter));
|
|
var exitAnimation = _glamor.css.keyframes(exit);
|
|
|
|
return {
|
|
enter: (0, _glamor.css)(_extends({}, animate, { animationName: enterAnimation })),
|
|
exit: (0, _glamor.css)(_extends({}, animate, { animationName: exitAnimation }))
|
|
};
|
|
};
|
|
|
|
function DefaultTransition(_ref) {
|
|
var children = _ref.children,
|
|
position = _ref.position,
|
|
props = _objectWithoutProperties(_ref, ['children', 'position']);
|
|
|
|
var _styles = styles(position),
|
|
enter = _styles.enter,
|
|
exit = _styles.exit;
|
|
|
|
var onEnter = function onEnter(node) {
|
|
return node.classList.add(enter);
|
|
};
|
|
var onEntered = function onEntered(node) {
|
|
return node.classList.remove(enter);
|
|
};
|
|
var onExit = function onExit(node) {
|
|
var height = node.getBoundingClientRect().height;
|
|
node.style.transition = 'padding 0.75s, height 0.75s, maringBottom 0.75s';
|
|
node.style.minHeight = 0;
|
|
node.style.height = height >= 48 ? height + 'px' : '48px';
|
|
|
|
requestAnimationFrame(function () {
|
|
node.style.padding = 0;
|
|
node.style.height = 0;
|
|
node.style.marginBottom = 0;
|
|
requestAnimationFrame(function () {
|
|
return node.classList.add(exit);
|
|
});
|
|
});
|
|
};
|
|
|
|
return _react2.default.createElement(
|
|
_Transition2.default,
|
|
_extends({}, props, {
|
|
timeout: 750,
|
|
onEnter: onEnter,
|
|
onEntered: onEntered,
|
|
onExit: onExit
|
|
}),
|
|
children
|
|
);
|
|
}
|
|
|
|
exports.default = DefaultTransition; |