focus-components-v3/animation/index.js

Focus web components to build applications (based on Material Design)

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactTransitionGroup = require('react-transition-group');

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; } //dependencies


var propTypes = {
    //If you want to use a custom css class
    // for each transion step, set this prop to TRUE.
    customClasses: _react.PropTypes.bool,
    // to enable transition
    appear: _react.PropTypes.bool,
    enter: _react.PropTypes.bool,
    leave: _react.PropTypes.bool,

    // Transition duration
    appearTimeout: _react.PropTypes.number,
    enterTimeout: _react.PropTypes.number,
    leaveTimeout: _react.PropTypes.number,

    // Transition css className.
    appearName: _react.PropTypes.string,
    appearActiveName: _react.PropTypes.string,
    enterName: _react.PropTypes.string,
    enterActiveName: _react.PropTypes.string,
    leaveName: _react.PropTypes.string,
    leaveActiveName: _react.PropTypes.string,
    transitionName: _react.PropTypes.string
};

var defaultProps = {
    customClasses: true,

    appear: true,
    enter: true,
    leave: true,

    appearTimeout: 500,
    enterTimeout: 500,
    leaveTimeout: 500,

    appearName: 'bounce',
    appearActiveName: 'bounce',
    enterName: 'bounce',
    enterActiveName: 'bounce',
    leaveName: 'bounceOut',
    leaveActiveName: 'bounceOut'
};

function Animation(_ref) {
    var customClasses = _ref.customClasses,
        appear = _ref.appear,
        enter = _ref.enter,
        leave = _ref.leave,
        appearName = _ref.appearName,
        appearActiveName = _ref.appearActiveName,
        enterName = _ref.enterName,
        enterActiveName = _ref.enterActiveName,
        leaveName = _ref.leaveName,
        leaveActiveName = _ref.leaveActiveName,
        appearTimeout = _ref.appearTimeout,
        enterTimeout = _ref.enterTimeout,
        leaveTimeout = _ref.leaveTimeout,
        transitionName = _ref.transitionName,
        otherProps = _objectWithoutProperties(_ref, ['customClasses', 'appear', 'enter', 'leave', 'appearName', 'appearActiveName', 'enterName', 'enterActiveName', 'leaveName', 'leaveActiveName', 'appearTimeout', 'enterTimeout', 'leaveTimeout', 'transitionName']);

    var transitionClassName = transitionName;
    if (true === customClasses) {
        transitionClassName = {
            appear: appearName,
            appearActive: appearActiveName,
            enter: enterName,
            enterActive: enterActiveName,
            leave: leaveName,
            leaveActive: leaveActiveName
        };
    }
    return _react2.default.createElement(
        _reactTransitionGroup.CSSTransitionGroup,
        {
            transitionAppear: appear,
            transitionAppearTimeout: enter,
            transitionEnter: leave,
            transitionEnterTimeout: appearTimeout,
            transitionLeave: enterTimeout,
            transitionLeaveTimeout: leaveTimeout,
            transitionName: transitionClassName
        },
        _react2.default.createElement(
            'div',
            { className: 'animated' },
            otherProps.children
        )
    );
}

//Static props.
Animation.displayName = 'animation';
Animation.defaultProps = defaultProps;
Animation.propTypes = propTypes;

exports.default = Animation;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZyLUZSLmpzIl0sIm5hbWVzIjpbInByb3BUeXBlcyIsImN1c3RvbUNsYXNzZXMiLCJib29sIiwiYXBwZWFyIiwiZW50ZXIiLCJsZWF2ZSIsImFwcGVhclRpbWVvdXQiLCJudW1iZXIiLCJlbnRlclRpbWVvdXQiLCJsZWF2ZVRpbWVvdXQiLCJhcHBlYXJOYW1lIiwic3RyaW5nIiwiYXBwZWFyQWN0aXZlTmFtZSIsImVudGVyTmFtZSIsImVudGVyQWN0aXZlTmFtZSIsImxlYXZlTmFtZSIsImxlYXZlQWN0aXZlTmFtZSIsInRyYW5zaXRpb25OYW1lIiwiZGVmYXVsdFByb3BzIiwiQW5pbWF0aW9uIiwib3RoZXJQcm9wcyIsInRyYW5zaXRpb25DbGFzc05hbWUiLCJhcHBlYXJBY3RpdmUiLCJlbnRlckFjdGl2ZSIsImxlYXZlQWN0aXZlIiwiY2hpbGRyZW4iLCJkaXNwbGF5TmFtZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQ0E7Ozs7QUFDQTs7Ozs2TkFGQTs7O0FBSUEsSUFBTUEsWUFBWTtBQUNkO0FBQ0E7QUFDQUMsbUJBQWUsaUJBQVVDLElBSFg7QUFJZDtBQUNBQyxZQUFRLGlCQUFVRCxJQUxKO0FBTWRFLFdBQU8saUJBQVVGLElBTkg7QUFPZEcsV0FBTyxpQkFBVUgsSUFQSDs7QUFTZDtBQUNBSSxtQkFBZSxpQkFBVUMsTUFWWDtBQVdkQyxrQkFBYyxpQkFBVUQsTUFYVjtBQVlkRSxrQkFBYyxpQkFBVUYsTUFaVjs7QUFjZDtBQUNBRyxnQkFBWSxpQkFBVUMsTUFmUjtBQWdCZEMsc0JBQWtCLGlCQUFVRCxNQWhCZDtBQWlCZEUsZUFBVyxpQkFBVUYsTUFqQlA7QUFrQmRHLHFCQUFpQixpQkFBVUgsTUFsQmI7QUFtQmRJLGVBQVcsaUJBQVVKLE1BbkJQO0FBb0JkSyxxQkFBaUIsaUJBQVVMLE1BcEJiO0FBcUJkTSxvQkFBZ0IsaUJBQVVOO0FBckJaLENBQWxCOztBQXdCQSxJQUFNTyxlQUFlO0FBQ2pCakIsbUJBQWUsSUFERTs7QUFHakJFLFlBQVEsSUFIUztBQUlqQkMsV0FBTyxJQUpVO0FBS2pCQyxXQUFPLElBTFU7O0FBT2pCQyxtQkFBZSxHQVBFO0FBUWpCRSxrQkFBYyxHQVJHO0FBU2pCQyxrQkFBYyxHQVRHOztBQVdqQkMsZ0JBQVksUUFYSztBQVlqQkUsc0JBQWtCLFFBWkQ7QUFhakJDLGVBQVcsUUFiTTtBQWNqQkMscUJBQWlCLFFBZEE7QUFlakJDLGVBQVcsV0FmTTtBQWdCakJDLHFCQUFpQjtBQWhCQSxDQUFyQjs7QUFvQkEsU0FBU0csU0FBVCxPQUU2RTtBQUFBLFFBRnpEbEIsYUFFeUQsUUFGekRBLGFBRXlEO0FBQUEsUUFGMUNFLE1BRTBDLFFBRjFDQSxNQUUwQztBQUFBLFFBRmxDQyxLQUVrQyxRQUZsQ0EsS0FFa0M7QUFBQSxRQUYzQkMsS0FFMkIsUUFGM0JBLEtBRTJCO0FBQUEsUUFGcEJLLFVBRW9CLFFBRnBCQSxVQUVvQjtBQUFBLFFBRDNFRSxnQkFDMkUsUUFEM0VBLGdCQUMyRTtBQUFBLFFBRHpEQyxTQUN5RCxRQUR6REEsU0FDeUQ7QUFBQSxRQUQ5Q0MsZUFDOEMsUUFEOUNBLGVBQzhDO0FBQUEsUUFEOUJDLFNBQzhCLFFBRDlCQSxTQUM4QjtBQUFBLFFBRG5CQyxlQUNtQixRQURuQkEsZUFDbUI7QUFBQSxRQUEzRVYsYUFBMkUsUUFBM0VBLGFBQTJFO0FBQUEsUUFBNURFLFlBQTRELFFBQTVEQSxZQUE0RDtBQUFBLFFBQTlDQyxZQUE4QyxRQUE5Q0EsWUFBOEM7QUFBQSxRQUFoQ1EsY0FBZ0MsUUFBaENBLGNBQWdDO0FBQUEsUUFBYkcsVUFBYTs7QUFDekUsUUFBSUMsc0JBQXNCSixjQUExQjtBQUNBLFFBQUcsU0FBU2hCLGFBQVosRUFBMkI7QUFDdkJvQiw4QkFBc0I7QUFDbEJsQixvQkFBUU8sVUFEVTtBQUVsQlksMEJBQWNWLGdCQUZJO0FBR2xCUixtQkFBT1MsU0FIVztBQUlsQlUseUJBQWFULGVBSks7QUFLbEJULG1CQUFPVSxTQUxXO0FBTWxCUyx5QkFBYVI7QUFOSyxTQUF0QjtBQVFIO0FBQ0QsV0FDRTtBQUFBO0FBQUE7QUFDSSw4QkFBa0JiLE1BRHRCO0FBRUkscUNBQXlCQyxLQUY3QjtBQUdJLDZCQUFpQkMsS0FIckI7QUFJSSxvQ0FBd0JDLGFBSjVCO0FBS0ksNkJBQWlCRSxZQUxyQjtBQU1JLG9DQUF3QkMsWUFONUI7QUFPSSw0QkFBZ0JZO0FBUHBCO0FBU0k7QUFBQTtBQUFBLGNBQUssV0FBVSxVQUFmO0FBQ0dELHVCQUFXSztBQURkO0FBVEosS0FERjtBQWVIOztBQUVEO0FBQ0FOLFVBQVVPLFdBQVYsR0FBd0IsV0FBeEI7QUFDQVAsVUFBVUQsWUFBVixHQUF5QkEsWUFBekI7QUFDQUMsVUFBVW5CLFNBQVYsR0FBc0JBLFNBQXRCOztrQkFFZW1CLFMiLCJmaWxlIjoiZnItRlIuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvL2RlcGVuZGVuY2llc1xyXG5pbXBvcnQgUmVhY3QsIHtQcm9wVHlwZXN9IGZyb20gJ3JlYWN0JztcclxuaW1wb3J0IHtDU1NUcmFuc2l0aW9uR3JvdXB9IGZyb20gJ3JlYWN0LXRyYW5zaXRpb24tZ3JvdXAnO1xyXG5cclxuY29uc3QgcHJvcFR5cGVzID0ge1xyXG4gICAgLy9JZiB5b3Ugd2FudCB0byB1c2UgYSBjdXN0b20gY3NzIGNsYXNzXHJcbiAgICAvLyBmb3IgZWFjaCB0cmFuc2lvbiBzdGVwLCBzZXQgdGhpcyBwcm9wIHRvIFRSVUUuXHJcbiAgICBjdXN0b21DbGFzc2VzOiBQcm9wVHlwZXMuYm9vbCxcclxuICAgIC8vIHRvIGVuYWJsZSB0cmFuc2l0aW9uXHJcbiAgICBhcHBlYXI6IFByb3BUeXBlcy5ib29sLFxyXG4gICAgZW50ZXI6IFByb3BUeXBlcy5ib29sLFxyXG4gICAgbGVhdmU6IFByb3BUeXBlcy5ib29sLFxyXG5cclxuICAgIC8vIFRyYW5zaXRpb24gZHVyYXRpb25cclxuICAgIGFwcGVhclRpbWVvdXQ6IFByb3BUeXBlcy5udW1iZXIsXHJcbiAgICBlbnRlclRpbWVvdXQ6IFByb3BUeXBlcy5udW1iZXIsXHJcbiAgICBsZWF2ZVRpbWVvdXQ6IFByb3BUeXBlcy5udW1iZXIsXHJcblxyXG4gICAgLy8gVHJhbnNpdGlvbiBjc3MgY2xhc3NOYW1lLlxyXG4gICAgYXBwZWFyTmFtZTogUHJvcFR5cGVzLnN0cmluZyxcclxuICAgIGFwcGVhckFjdGl2ZU5hbWU6IFByb3BUeXBlcy5zdHJpbmcsXHJcbiAgICBlbnRlck5hbWU6IFByb3BUeXBlcy5zdHJpbmcsXHJcbiAgICBlbnRlckFjdGl2ZU5hbWU6IFByb3BUeXBlcy5zdHJpbmcsXHJcbiAgICBsZWF2ZU5hbWU6IFByb3BUeXBlcy5zdHJpbmcsXHJcbiAgICBsZWF2ZUFjdGl2ZU5hbWU6IFByb3BUeXBlcy5zdHJpbmcsXHJcbiAgICB0cmFuc2l0aW9uTmFtZTogUHJvcFR5cGVzLnN0cmluZ1xyXG59O1xyXG5cclxuY29uc3QgZGVmYXVsdFByb3BzID0ge1xyXG4gICAgY3VzdG9tQ2xhc3NlczogdHJ1ZSxcclxuXHJcbiAgICBhcHBlYXI6IHRydWUsXHJcbiAgICBlbnRlcjogdHJ1ZSxcclxuICAgIGxlYXZlOiB0cnVlLFxyXG5cclxuICAgIGFwcGVhclRpbWVvdXQ6IDUwMCxcclxuICAgIGVudGVyVGltZW91dDogNTAwLFxyXG4gICAgbGVhdmVUaW1lb3V0OiA1MDAsXHJcblxyXG4gICAgYXBwZWFyTmFtZTogJ2JvdW5jZScsXHJcbiAgICBhcHBlYXJBY3RpdmVOYW1lOiAnYm91bmNlJyxcclxuICAgIGVudGVyTmFtZTogJ2JvdW5jZScsXHJcbiAgICBlbnRlckFjdGl2ZU5hbWU6ICdib3VuY2UnLFxyXG4gICAgbGVhdmVOYW1lOiAnYm91bmNlT3V0JyxcclxuICAgIGxlYXZlQWN0aXZlTmFtZTogJ2JvdW5jZU91dCdcclxufTtcclxuXHJcblxyXG5mdW5jdGlvbiBBbmltYXRpb24oe2N1c3RvbUNsYXNzZXMsIGFwcGVhciwgZW50ZXIsIGxlYXZlLCBhcHBlYXJOYW1lLFxyXG4gIGFwcGVhckFjdGl2ZU5hbWUsIGVudGVyTmFtZSwgZW50ZXJBY3RpdmVOYW1lLGxlYXZlTmFtZSwgbGVhdmVBY3RpdmVOYW1lLFxyXG4gIGFwcGVhclRpbWVvdXQsIGVudGVyVGltZW91dCwgbGVhdmVUaW1lb3V0LCB0cmFuc2l0aW9uTmFtZSwgLi4ub3RoZXJQcm9wc30pIHtcclxuICAgIGxldCB0cmFuc2l0aW9uQ2xhc3NOYW1lID0gdHJhbnNpdGlvbk5hbWU7XHJcbiAgICBpZih0cnVlID09PSBjdXN0b21DbGFzc2VzKSB7XHJcbiAgICAgICAgdHJhbnNpdGlvbkNsYXNzTmFtZSA9IHtcclxuICAgICAgICAgICAgYXBwZWFyOiBhcHBlYXJOYW1lLFxyXG4gICAgICAgICAgICBhcHBlYXJBY3RpdmU6IGFwcGVhckFjdGl2ZU5hbWUsXHJcbiAgICAgICAgICAgIGVudGVyOiBlbnRlck5hbWUsXHJcbiAgICAgICAgICAgIGVudGVyQWN0aXZlOiBlbnRlckFjdGl2ZU5hbWUsXHJcbiAgICAgICAgICAgIGxlYXZlOiBsZWF2ZU5hbWUsXHJcbiAgICAgICAgICAgIGxlYXZlQWN0aXZlOiBsZWF2ZUFjdGl2ZU5hbWVcclxuICAgICAgICB9XHJcbiAgICB9XHJcbiAgICByZXR1cm4gKFxyXG4gICAgICA8Q1NTVHJhbnNpdGlvbkdyb3VwXHJcbiAgICAgICAgICB0cmFuc2l0aW9uQXBwZWFyPXthcHBlYXJ9XHJcbiAgICAgICAgICB0cmFuc2l0aW9uQXBwZWFyVGltZW91dD17ZW50ZXJ9XHJcbiAgICAgICAgICB0cmFuc2l0aW9uRW50ZXI9e2xlYXZlfVxyXG4gICAgICAgICAgdHJhbnNpdGlvbkVudGVyVGltZW91dD17YXBwZWFyVGltZW91dH1cclxuICAgICAgICAgIHRyYW5zaXRpb25MZWF2ZT17ZW50ZXJUaW1lb3V0fVxyXG4gICAgICAgICAgdHJhbnNpdGlvbkxlYXZlVGltZW91dD17bGVhdmVUaW1lb3V0fVxyXG4gICAgICAgICAgdHJhbnNpdGlvbk5hbWU9e3RyYW5zaXRpb25DbGFzc05hbWV9XHJcbiAgICAgID5cclxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPSdhbmltYXRlZCc+XHJcbiAgICAgICAgICAgIHtvdGhlclByb3BzLmNoaWxkcmVufVxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvQ1NTVHJhbnNpdGlvbkdyb3VwPlxyXG4gICAgKTtcclxufVxyXG5cclxuLy9TdGF0aWMgcHJvcHMuXHJcbkFuaW1hdGlvbi5kaXNwbGF5TmFtZSA9ICdhbmltYXRpb24nO1xyXG5BbmltYXRpb24uZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xyXG5BbmltYXRpb24ucHJvcFR5cGVzID0gcHJvcFR5cGVzO1xyXG5cclxuZXhwb3J0IGRlZmF1bHQgQW5pbWF0aW9uO1xyXG4iXX0=