		@@ -7,114 +7,20 @@ 'use strict';

		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 _helpers = require('./helpers');

		var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
		Object.keys(_helpers).forEach(function (key) {
		if (key === "default" \|\| key === "__esModule") return;
		Object.defineProperty(exports, key, {
		enumerable: true,
		get: function get() {
		return _helpers[key];
		}
		});
		});

		var _templateObject = _taggedTemplateLiteral(['\n height: 40px;\n font-size: 24px;\n background-color: white;\n color: royalblue;\n'], ['\n height: 40px;\n font-size: 24px;\n background-color: white;\n color: royalblue;\n']),
		_templateObject2 = _taggedTemplateLiteral(['\n transition: ', ' ', ';\n ', ';\n ', ';\n ', ';\n '], ['\n transition: ', ' ', ';\n ', ';\n ', ';\n ', ';\n ']);
		var _withAnimation = require('./with-animation');

		var _react = require('react');
		var _withAnimation2 = _interopRequireDefault(_withAnimation);

		var _react2 = _interopRequireDefault(_react);

		var _styledComponents = require('styled-components');

		var _styledComponents2 = _interopRequireDefault(_styledComponents);

		var _Transition = require('react-transition-group/Transition');

		var _Transition2 = _interopRequireDefault(_Transition);

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

		function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

		var Debug = _styledComponents2.default.div(_templateObject);

		exports.default = function (component, _ref) {
		var animateIn = _ref.animateIn,
		animateOut = _ref.animateOut,
		animateSticky = _ref.animateSticky,
		animate = _ref.animate,
		transition = _ref.transition;

		// if more than one animate, throw exception
		if ((Boolean(animate) ^ Boolean(animateIn) ^ Boolean(animateOut) ^ Boolean(animateSticky)) !== 1) {
		throw new Error('Exactly one of the following options must be passed to animate: animate, animateIn, animateOut or animateSticky.');
		}

		var styles = animate \|\| animateIn \|\| animateOut \|\| animateSticky;
		var propertyName = Object.keys(styles)[0];

		var _styles$propertyName = _slicedToArray(styles[propertyName], 2),
		defaultValue = _styles$propertyName[0],
		enteredValue = _styles$propertyName[1];

		var defaultStyles = propertyName + ': ' + defaultValue;
		var enteredStyles = propertyName + ': ' + enteredValue;
		var enteringStyles = animateOut ? enteredStyles : '';

		var AnimatedComponent = (0, _styledComponents2.default)(component)(_templateObject2, propertyName, transition, defaultStyles, function (_ref2) {
		var __state = _ref2.__state;
		return __state === 'entered' && enteredStyles;
		}, function (_ref3) {
		var __state = _ref3.__state;
		return __state === 'entering' && enteringStyles;
		});

		var unmountOnExit = Boolean(animateIn \|\| animateOut \|\| animate);

		var _transition$match = transition.match(/(\d+)(m?s)/i),
		_transition$match2 = _slicedToArray(_transition$match, 3),
		_ = _transition$match2[0],
		value = _transition$match2[1],
		unit = _transition$match2[2];

		var timeout = unit.toLowerCase() === 's' ? value * 1000 : parseInt(value, 10);
		var exitTimeout = animate \|\| animateOut \|\| animateSticky ? timeout : 0;
		var enteredTimeout = animateIn ? timeout : 0;

		return function (_ref4) {
		var inProp = _ref4.in,
		children = _ref4.children,
		debug = _ref4.debug,
		rest = _objectWithoutProperties(_ref4, ['in', 'children', 'debug']);

		return _react2.default.createElement(
		_Transition2.default,
		{
		'in': inProp,
		timeout: {
		enter: 0,
		entered: enteredTimeout,
		exit: exitTimeout,
		exited: 0
		},
		unmountOnExit: unmountOnExit,
		mountOnEnter: unmountOnExit
		},
		function (state) {
		return debug ? _react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(
		AnimatedComponent,
		_extends({ __state: state }, rest),
		children
		),
		_react2.default.createElement(
		Debug,
		null,
		'State: ',
		state
		)
		) : _react2.default.createElement(
		AnimatedComponent,
		_extends({ __state: state }, rest),
		children
		);
		}
		);
		};
		};
		exports.default = _withAnimation2.default;

package.json

		{
		"name": "styled-animate",
		"version": "0.0.5",
		"version": "0.0.6",
		"description": "",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

styled-animate - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics