react-with-animation - npm Package Compare versions

Comparing version 1.0.16 to 1.0.17

dist/bundle.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var PropTypes = _interopDefault(require('prop-types'));
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
 
@@ -30,4 +33,4 @@ 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; };
 function withAnimation(WrappedComponent) {
-    var ComponentWithAnimation = function (_React$Component) {
-        _inherits(ComponentWithAnimation, _React$Component);
+    var ComponentWithAnimation = function (_Component) {
+        _inherits(ComponentWithAnimation, _Component);
 
@@ -89,4 +92,2 @@ function ComponentWithAnimation() {
 
-                var classes = [].concat(className ? [className] : []).concat(isAnimating && animationClasses ? [animationClasses] : []).join(' ');
-
                 var componentProps = _extends({}, this.props, {
@@ -96,6 +97,6 @@ style: _extends({}, style, {
                     }),
-                    className: classes,
+                    className: (className ? className : '') + ' ' + (isAnimating ? animationClasses : ''),
                     ref: wrappedRef
                 });
-                return React.createElement(
+                return React__default.createElement(
                     WrappedComponent,
@@ -116,2 +117,25 @@ componentProps,
 
-module.exports = withAnimation;
+WithAnimationContainer.propTypes = propTypes;
+
+/*
+    In order to pass a react component to the hoc, we need to create a React element for the div
+*/
+var Div = function Div(_ref) {
+    var children = _ref.children,
+        className = _ref.className,
+        style = _ref.style;
+    return React__default.createElement(
+        'div',
+        { className: className, style: style },
+        children
+    );
+};
+
+var Animatee = withAnimation(Div);
+
+function WithAnimationContainer(props) {
+    return React__default.createElement(Animatee, props);
+}
+
+exports.withAnimation = withAnimation;
+exports.WithAnimationContainer = WithAnimationContainer;

dist/module.js

 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Component } from 'react';
 
@@ -26,4 +26,4 @@ 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; };
 function withAnimation(WrappedComponent) {
-    var ComponentWithAnimation = function (_React$Component) {
-        _inherits(ComponentWithAnimation, _React$Component);
+    var ComponentWithAnimation = function (_Component) {
+        _inherits(ComponentWithAnimation, _Component);
 
@@ -85,4 +85,2 @@ function ComponentWithAnimation() {
 
-                var classes = [].concat(className ? [className] : []).concat(isAnimating && animationClasses ? [animationClasses] : []).join(' ');
-
                 var componentProps = _extends({}, this.props, {
@@ -92,3 +90,3 @@ style: _extends({}, style, {
                     }),
-                    className: classes,
+                    className: (className ? className : '') + ' ' + (isAnimating ? animationClasses : ''),
                     ref: wrappedRef
@@ -105,3 +103,3 @@ });
         return ComponentWithAnimation;
-    }(React.Component);
+    }(Component);
 
@@ -113,2 +111,24 @@ ComponentWithAnimation.propTypes = propTypes;
 
-export default withAnimation;
+WithAnimationContainer.propTypes = propTypes;
+
+/*
+    In order to pass a react component to the hoc, we need to create a React element for the div
+*/
+var Div = function Div(_ref) {
+    var children = _ref.children,
+        className = _ref.className,
+        style = _ref.style;
+    return React.createElement(
+        'div',
+        { className: className, style: style },
+        children
+    );
+};
+
+var Animatee = withAnimation(Div);
+
+function WithAnimationContainer(props) {
+    return React.createElement(Animatee, props);
+}
+
+export { withAnimation, WithAnimationContainer };

package.json

 {
   "name": "react-with-animation",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "A higher-order-component (HOC) to manage short-lived CSS animations in react",
@@ -5,0 +5,0 @@ "main": "dist/bundle.js",

README.md

 # react-with-animation
 
 A higher-order-component (HOC) to manage short-lived CSS animations in React
+
+Working example: [here](https://lucastobrazil.github.io/react-with-animation-example/) or take a quick squiz at the code example further down the readme.
+
 ## Concept
@@ -25,3 +28,3 @@ Let's say you want to temporarily add a CSS class to a React component to play a little animation, and when the animation's finished, remove the class. Sounds like a simple enough thing to do, right? We've been doing that for years in jQuery:
 ## Example
-Check out a working example [here](https://github.com/lucastobrazil/react-with-animation-example) or take a quick squiz at the code example below.
+Check out a working example [here](https://lucastobrazil.github.io/react-with-animation-example/) or take a quick squiz at the code example below.
 
@@ -28,0 +31,0 @@ 1. Set up your CSS Animation

rollup.config.js

@@ -5,3 +5,3 @@ import babel from 'rollup-plugin-babel';
 export default {
-    input: 'src/withAnimation.js',
+    input: 'src/index.js',
     external: ['react', 'prop-types'],
@@ -8,0 +8,0 @@ output: [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24940

increased by7.77%

Number of package files

12

increased by20%

Lines of code

394

increased by15.2%

Number of lines in readme file

111

increased by2.78%

No dependency changes