react-misc-toolbox/dist/RTGCSSTransitionFade.js

'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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _CSSTransition = require('react-transition-group/CSSTransition');

var _CSSTransition2 = _interopRequireDefault(_CSSTransition);

var _helperFunctions = require('./helperFunctions');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var transitionStyles = {
  entering: {
    opacity: '0.01'
  },
  entered: {
    opacity: '1'
  },

  exiting: {
    opacity: '0.01'
  }
};

var baseStyles = {
  transition: 'all 300ms ease-out'
};

var RTGCSSTransitionFade = function RTGCSSTransitionFade(_ref) {
  var inProp = _ref.in,
      onClick = _ref.onClick,
      className = _ref.className,
      children = _ref.children,
      colors = _ref.colors,
      unmountOnExit = _ref.unmountOnExit,
      mountOnEnter = _ref.mountOnEnter,
      style = _ref.style,
      duration = _ref.transitionOptions.duration,
      otherProps = (0, _objectWithoutProperties3.default)(_ref, ['in', 'onClick', 'className', 'children', 'colors', 'unmountOnExit', 'mountOnEnter', 'style', 'transitionOptions']);
  return _react2.default.createElement(
    _CSSTransition2.default,
    {
      'in': inProp,
      timeout: { enter: 0, exit: 300 },
      classNames: 'rtgfade',
      unmountOnExit: unmountOnExit,
      mountOnEnter: mountOnEnter
    },
    function (state) {
      return children({ style: (0, _extends3.default)({}, baseStyles, style, transitionStyles[state]) });
    }
  );
};
RTGCSSTransitionFade.defaultProps = {
  onClick: function onClick() {
    return console.log('RTGCSSTransitionFade: onClick');
  },
  transitionOptions: {
    duration: 300
  },
  unmountOnExit: true,
  mountOnEnter: false
};

exports.default = RTGCSSTransitionFade;