rc-animate - npm Package Compare versions

Comparing version 3.0.0-rc.1 to 3.0.0-rc.2

es/Animate.js

 import _extends from 'babel-runtime/helpers/extends';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -26,2 +27,4 @@ import _inherits from 'babel-runtime/helpers/inherits';
     function Animate() {
+      var _ref;
+
       var _temp, _this, _ret;
@@ -35,3 +38,3 @@
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Animate.__proto__ || Object.getPrototypeOf(Animate)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         appeared: true,
@@ -63,113 +66,118 @@ mergedChildren: []
 
-    Animate.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-      var _prevState$prevProps = prevState.prevProps,
-          prevProps = _prevState$prevProps === undefined ? {} : _prevState$prevProps;
+    _createClass(Animate, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        // No need to re-render
+        this.state.appeared = false;
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _this2 = this;
 
-      var newState = {
-        prevProps: cloneProps(nextProps, clonePropList)
-      };
-      var showProp = nextProps.showProp;
+        var _state = this.state,
+            appeared = _state.appeared,
+            mergedChildren = _state.mergedChildren;
+        var _props = this.props,
+            Component = _props.component,
+            componentProps = _props.componentProps,
+            className = _props.className,
+            style = _props.style,
+            showProp = _props.showProp;
 
 
-      function processState(propName, updater) {
-        if (prevProps[propName] !== nextProps[propName]) {
-          updater(nextProps[propName]);
-          return true;
-        }
-        return false;
-      }
-
-      processState('children', function (children) {
-        var currentChildren = toArray(children).filter(function (node) {
-          return node;
-        });
-        var prevChildren = prevState.mergedChildren.filter(function (node) {
-          // Remove prev child if not show anymore
-          if (currentChildren.every(function (_ref) {
-            var key = _ref.key;
-            return key !== node.key;
-          }) && showProp && !node.props[showProp]) {
-            return false;
+        var $children = mergedChildren.map(function (node) {
+          if (mergedChildren.length > 1 && !node.key) {
+            warning(false, 'must set key for <rc-animate> children');
+            return null;
           }
-          return true;
-        });
 
-        // Merge prev children to keep the animation
-        newState.mergedChildren = mergeChildren(prevChildren, currentChildren);
-      });
+          var show = true;
 
-      return newState;
-    };
+          if (!_this2.hasChild(node.key)) {
+            show = false;
+          } else if (showProp) {
+            show = node.props[showProp];
+          }
 
-    Animate.prototype.componentDidMount = function componentDidMount() {
-      // No need to re-render
-      this.state.appeared = false;
-    };
+          var key = node.key || defaultKey;
 
-    Animate.prototype.render = function render() {
-      var _this2 = this;
+          return React.createElement(
+            ChildComponent,
+            _extends({}, _this2.props, {
+              appeared: appeared,
+              show: show,
+              className: node.props.className,
+              style: node.props.style,
+              key: key,
 
-      var _state = this.state,
-          appeared = _state.appeared,
-          mergedChildren = _state.mergedChildren;
-      var _props = this.props,
-          Component = _props.component,
-          componentProps = _props.componentProps,
-          className = _props.className,
-          style = _props.style,
-          showProp = _props.showProp;
+              animateKey: node.key // Keep trans origin key
+              , onChildLeaved: _this2.onChildLeaved
+            }),
+            node
+          );
+        });
 
+        // Wrap with component
+        if (Component) {
+          var passedProps = this.props;
+          if (typeof Component === 'string') {
+            passedProps = _extends({
+              className: className,
+              style: style
+            }, componentProps);
+          }
 
-      var $children = mergedChildren.map(function (node) {
-        if (mergedChildren.length > 1 && !node.key) {
-          warning(false, 'must set key for <rc-animate> children');
-          return null;
+          return React.createElement(
+            Component,
+            passedProps,
+            $children
+          );
         }
 
-        var show = true;
+        return $children[0] || null;
+      }
+    }], [{
+      key: 'getDerivedStateFromProps',
+      value: function getDerivedStateFromProps(nextProps, prevState) {
+        var _prevState$prevProps = prevState.prevProps,
+            prevProps = _prevState$prevProps === undefined ? {} : _prevState$prevProps;
 
-        if (!_this2.hasChild(node.key)) {
-          show = false;
-        } else if (showProp) {
-          show = node.props[showProp];
-        }
+        var newState = {
+          prevProps: cloneProps(nextProps, clonePropList)
+        };
+        var showProp = nextProps.showProp;
 
-        var key = node.key || defaultKey;
 
-        return React.createElement(
-          ChildComponent,
-          _extends({}, _this2.props, {
-            appeared: appeared,
-            show: show,
-            className: node.props.className,
-            style: node.props.style,
-            key: key,
+        function processState(propName, updater) {
+          if (prevProps[propName] !== nextProps[propName]) {
+            updater(nextProps[propName]);
+            return true;
+          }
+          return false;
+        }
 
-            animateKey: node.key // Keep trans origin key
-            , onChildLeaved: _this2.onChildLeaved
-          }),
-          node
-        );
-      });
+        processState('children', function (children) {
+          var currentChildren = toArray(children).filter(function (node) {
+            return node;
+          });
+          var prevChildren = prevState.mergedChildren.filter(function (node) {
+            // Remove prev child if not show anymore
+            if (currentChildren.every(function (_ref2) {
+              var key = _ref2.key;
+              return key !== node.key;
+            }) && showProp && !node.props[showProp]) {
+              return false;
+            }
+            return true;
+          });
 
-      // Wrap with component
-      if (Component) {
-        var passedProps = this.props;
-        if (typeof Component === 'string') {
-          passedProps = _extends({
-            className: className,
-            style: style
-          }, componentProps);
-        }
+          // Merge prev children to keep the animation
+          newState.mergedChildren = mergeChildren(prevChildren, currentChildren);
+        });
 
-        return React.createElement(
-          Component,
-          passedProps,
-          $children
-        );
+        return newState;
       }
+    }]);
 
-      return $children[0] || null;
-    };
-
     return Animate;
@@ -176,0 +184,0 @@ }(React.Component);

es/AnimateChild.js

@@ -0,2 +1,4 @@
+import _toArray from 'babel-runtime/helpers/toArray';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -31,3 +33,3 @@ import _inherits from 'babel-runtime/helpers/inherits';
       // also can handle the animate, let keep the logic.
-      var _this = _possibleConstructorReturn(this, _React$Component.call(this));
+      var _this = _possibleConstructorReturn(this, (AnimateChild.__proto__ || Object.getPrototypeOf(AnimateChild)).call(this));
 
@@ -261,4 +263,5 @@ _this.state = {
             var _cloneQueue = cloneQueue,
-                _eventType = _cloneQueue[0],
-                restQueue = _cloneQueue.slice(1);
+                _cloneQueue2 = _toArray(_cloneQueue),
+                _eventType = _cloneQueue2[0],
+                restQueue = _cloneQueue2.slice(1);
 
@@ -310,111 +313,118 @@ if (hasEventHandler(_eventType)) {
 
-    AnimateChild.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-      var _prevState$prevProps = prevState.prevProps,
-          prevProps = _prevState$prevProps === undefined ? {} : _prevState$prevProps;
-      var appeared = nextProps.appeared;
+    _createClass(AnimateChild, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.onDomUpdated();
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate() {
+        this.onDomUpdated();
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        clearTimeout(this.timeout);
+        this._destroy = true;
+        this.cleanDomEvent();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _state = this.state,
+            child = _state.child,
+            eventActive = _state.eventActive;
+        var _props = this.props,
+            showProp = _props.showProp,
+            transitionName = _props.transitionName;
 
+        var _ref2 = child.props || {},
+            className = _ref2.className;
 
-      var newState = {
-        prevProps: cloneProps(nextProps, clonePropList)
-      };
+        var currentEvent = this.getCurrentEvent();
 
-      function processState(propName, updater) {
-        if (prevProps[propName] !== nextProps[propName]) {
-          if (updater) {
-            updater(nextProps[propName]);
-          }
-          return true;
+        // Class name
+        var connectClassName = transitionSupport && this.currentEvent ? classNames(className, getTransitionName(transitionName, this.currentEvent.type), eventActive && getTransitionName(transitionName, this.currentEvent.type + '-active')) : className;
+
+        var show = true;
+
+        // Keep show when is in transition or has customize animate
+        if (transitionSupport && (!currentEvent.empty || this.currentEvent && this.currentEvent.animateObj)) {
+          show = true;
+        } else {
+          show = child.props[showProp];
         }
-        return false;
-      }
 
-      function pushEvent(eventType) {
-        var eventQueue = newState.eventQueue || prevState.eventQueue.slice();
-        var matchIndex = eventQueue.indexOf(eventType);
+        // Clone child
+        var newChildProps = {
+          className: connectClassName
+        };
 
-        // Clean the rest event if eventType match
-        if (matchIndex !== -1) {
-          eventQueue = eventQueue.slice(0, matchIndex);
+        if (showProp) {
+          newChildProps[showProp] = show;
         }
 
-        eventQueue.push(eventType);
-        newState.eventQueue = eventQueue;
+        return React.cloneElement(child, newChildProps);
       }
+    }], [{
+      key: 'getDerivedStateFromProps',
+      value: function getDerivedStateFromProps(nextProps, prevState) {
+        var _prevState$prevProps = prevState.prevProps,
+            prevProps = _prevState$prevProps === undefined ? {} : _prevState$prevProps;
+        var appeared = nextProps.appeared;
 
-      // Child update. Only set child.
-      processState('children', function (child) {
-        newState.child = child;
-      });
 
-      processState('appeared', function (isAppeared) {
-        if (isAppeared) {
-          pushEvent('appear');
-        }
-      });
+        var newState = {
+          prevProps: cloneProps(nextProps, clonePropList)
+        };
 
-      // Show update
-      processState('show', function (show) {
-        if (!appeared) {
-          if (show) {
-            pushEvent('enter');
-          } else {
-            pushEvent('leave');
+        function processState(propName, updater) {
+          if (prevProps[propName] !== nextProps[propName]) {
+            if (updater) {
+              updater(nextProps[propName]);
+            }
+            return true;
           }
+          return false;
         }
-      });
 
-      return newState;
-    };
+        function pushEvent(eventType) {
+          var eventQueue = newState.eventQueue || prevState.eventQueue.slice();
+          var matchIndex = eventQueue.indexOf(eventType);
 
-    AnimateChild.prototype.componentDidMount = function componentDidMount() {
-      this.onDomUpdated();
-    };
+          // Clean the rest event if eventType match
+          if (matchIndex !== -1) {
+            eventQueue = eventQueue.slice(0, matchIndex);
+          }
 
-    AnimateChild.prototype.componentDidUpdate = function componentDidUpdate() {
-      this.onDomUpdated();
-    };
+          eventQueue.push(eventType);
+          newState.eventQueue = eventQueue;
+        }
 
-    AnimateChild.prototype.componentWillUnmount = function componentWillUnmount() {
-      clearTimeout(this.timeout);
-      this._destroy = true;
-      this.cleanDomEvent();
-    };
+        // Child update. Only set child.
+        processState('children', function (child) {
+          newState.child = child;
+        });
 
-    AnimateChild.prototype.render = function render() {
-      var _state = this.state,
-          child = _state.child,
-          eventActive = _state.eventActive;
-      var _props = this.props,
-          showProp = _props.showProp,
-          transitionName = _props.transitionName;
+        processState('appeared', function (isAppeared) {
+          if (isAppeared) {
+            pushEvent('appear');
+          }
+        });
 
-      var _ref2 = child.props || {},
-          className = _ref2.className;
+        // Show update
+        processState('show', function (show) {
+          if (!appeared) {
+            if (show) {
+              pushEvent('enter');
+            } else {
+              pushEvent('leave');
+            }
+          }
+        });
 
-      var currentEvent = this.getCurrentEvent();
-
-      // Class name
-      var connectClassName = transitionSupport && this.currentEvent ? classNames(className, getTransitionName(transitionName, this.currentEvent.type), eventActive && getTransitionName(transitionName, this.currentEvent.type + '-active')) : className;
-
-      var show = true;
-
-      // Keep show when is in transition or has customize animate
-      if (transitionSupport && (!currentEvent.empty || this.currentEvent && this.currentEvent.animateObj)) {
-        show = true;
-      } else {
-        show = child.props[showProp];
+        return newState;
       }
+    }]);
 
-      // Clone child
-      var newChildProps = {
-        className: connectClassName
-      };
-
-      if (showProp) {
-        newChildProps[showProp] = show;
-      }
-
-      return React.cloneElement(child, newChildProps);
-    };
-
     return AnimateChild;
@@ -421,0 +431,0 @@ }(React.Component);

lib/Animate.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
@@ -13,2 +15,6 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -62,2 +68,4 @@
     function Animate() {
+      var _ref;
+
       var _temp, _this, _ret;
@@ -71,3 +79,3 @@
 
-      return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = Animate.__proto__ || Object.getPrototypeOf(Animate)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         appeared: true,
@@ -99,113 +107,117 @@ mergedChildren: []
 
-    Animate.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-      var _prevState$prevProps = prevState.prevProps,
-          prevProps = _prevState$prevProps === undefined ? {} : _prevState$prevProps;
+    (0, _createClass3['default'])(Animate, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        // No need to re-render
+        this.state.appeared = false;
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _this2 = this;
 
-      var newState = {
-        prevProps: (0, _util.cloneProps)(nextProps, clonePropList)
-      };
-      var showProp = nextProps.showProp;
+        var _state = this.state,
+            appeared = _state.appeared,
+            mergedChildren = _state.mergedChildren;
+        var _props = this.props,
+            Component = _props.component,
+            componentProps = _props.componentProps,
+            className = _props.className,
+            style = _props.style,
+            showProp = _props.showProp;
 
 
-      function processState(propName, updater) {
-        if (prevProps[propName] !== nextProps[propName]) {
-          updater(nextProps[propName]);
-          return true;
-        }
-        return false;
-      }
-
-      processState('children', function (children) {
-        var currentChildren = (0, _toArray2['default'])(children).filter(function (node) {
-          return node;
-        });
-        var prevChildren = prevState.mergedChildren.filter(function (node) {
-          // Remove prev child if not show anymore
-          if (currentChildren.every(function (_ref) {
-            var key = _ref.key;
-            return key !== node.key;
-          }) && showProp && !node.props[showProp]) {
-            return false;
+        var $children = mergedChildren.map(function (node) {
+          if (mergedChildren.length > 1 && !node.key) {
+            (0, _warning2['default'])(false, 'must set key for <rc-animate> children');
+            return null;
           }
-          return true;
-        });
 
-        // Merge prev children to keep the animation
-        newState.mergedChildren = (0, _util.mergeChildren)(prevChildren, currentChildren);
-      });
+          var show = true;
 
-      return newState;
-    };
+          if (!_this2.hasChild(node.key)) {
+            show = false;
+          } else if (showProp) {
+            show = node.props[showProp];
+          }
 
-    Animate.prototype.componentDidMount = function componentDidMount() {
-      // No need to re-render
-      this.state.appeared = false;
-    };
+          var key = node.key || defaultKey;
 
-    Animate.prototype.render = function render() {
-      var _this2 = this;
+          return _react2['default'].createElement(
+            ChildComponent,
+            (0, _extends3['default'])({}, _this2.props, {
+              appeared: appeared,
+              show: show,
+              className: node.props.className,
+              style: node.props.style,
+              key: key,
 
-      var _state = this.state,
-          appeared = _state.appeared,
-          mergedChildren = _state.mergedChildren;
-      var _props = this.props,
-          Component = _props.component,
-          componentProps = _props.componentProps,
-          className = _props.className,
-          style = _props.style,
-          showProp = _props.showProp;
+              animateKey: node.key // Keep trans origin key
+              , onChildLeaved: _this2.onChildLeaved
+            }),
+            node
+          );
+        });
 
+        // Wrap with component
+        if (Component) {
+          var passedProps = this.props;
+          if (typeof Component === 'string') {
+            passedProps = (0, _extends3['default'])({
+              className: className,
+              style: style
+            }, componentProps);
+          }
 
-      var $children = mergedChildren.map(function (node) {
-        if (mergedChildren.length > 1 && !node.key) {
-          (0, _warning2['default'])(false, 'must set key for <rc-animate> children');
-          return null;
+          return _react2['default'].createElement(
+            Component,
+            passedProps,
+            $children
+          );
         }
 
-        var show = true;
+        return $children[0] || null;
+      }
+    }], [{
+      key: 'getDerivedStateFromProps',
+      value: function getDerivedStateFromProps(nextProps, prevState) {
+        var _prevState$prevProps = prevState.prevProps,
+            prevProps = _prevState$prevProps === undefined ? {} : _prevState$prevProps;
 
-        if (!_this2.hasChild(node.key)) {
-          show = false;
-        } else if (showProp) {
-          show = node.props[showProp];
-        }
+        var newState = {
+          prevProps: (0, _util.cloneProps)(nextProps, clonePropList)
+        };
+        var showProp = nextProps.showProp;
 
-        var key = node.key || defaultKey;
 
-        return _react2['default'].createElement(
-          ChildComponent,
-          (0, _extends3['default'])({}, _this2.props, {
-            appeared: appeared,
-            show: show,
-            className: node.props.className,
-            style: node.props.style,
-            key: key,
+        function processState(propName, updater) {
+          if (prevProps[propName] !== nextProps[propName]) {
+            updater(nextProps[propName]);
+            return true;
+          }
+          return false;
+        }
 
-            animateKey: node.key // Keep trans origin key
-            , onChildLeaved: _this2.onChildLeaved
-          }),
-          node
-        );
-      });
+        processState('children', function (children) {
+          var currentChildren = (0, _toArray2['default'])(children).filter(function (node) {
+            return node;
+          });
+          var prevChildren = prevState.mergedChildren.filter(function (node) {
+            // Remove prev child if not show anymore
+            if (currentChildren.every(function (_ref2) {
+              var key = _ref2.key;
+              return key !== node.key;
+            }) && showProp && !node.props[showProp]) {
+              return false;
+            }
+            return true;
+          });
 
-      // Wrap with component
-      if (Component) {
-        var passedProps = this.props;
-        if (typeof Component === 'string') {
-          passedProps = (0, _extends3['default'])({
-            className: className,
-            style: style
-          }, componentProps);
-        }
+          // Merge prev children to keep the animation
+          newState.mergedChildren = (0, _util.mergeChildren)(prevChildren, currentChildren);
+        });
 
-        return _react2['default'].createElement(
-          Component,
-          passedProps,
-          $children
-        );
+        return newState;
       }
-
-      return $children[0] || null;
-    };
-
+    }]);
     return Animate;
@@ -212,0 +224,0 @@ }(_react2['default'].Component);

lib/AnimateChild.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
+var _toArray2 = require('babel-runtime/helpers/toArray');
+
+var _toArray3 = _interopRequireDefault(_toArray2);
+
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
@@ -9,2 +15,6 @@
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -67,3 +77,3 @@
       // also can handle the animate, let keep the logic.
-      var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this));
+      var _this = (0, _possibleConstructorReturn3['default'])(this, (AnimateChild.__proto__ || Object.getPrototypeOf(AnimateChild)).call(this));
 
@@ -297,4 +307,5 @@ _this.state = {
             var _cloneQueue = cloneQueue,
-                _eventType = _cloneQueue[0],
-                restQueue = _cloneQueue.slice(1);
+                _cloneQueue2 = (0, _toArray3['default'])(_cloneQueue),
+                _eventType = _cloneQueue2[0],
+                restQueue = _cloneQueue2.slice(1);
 
@@ -346,111 +357,117 @@ if (hasEventHandler(_eventType)) {
 
-    AnimateChild.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-      var _prevState$prevProps = prevState.prevProps,
-          prevProps = _prevState$prevProps === undefined ? {} : _prevState$prevProps;
-      var appeared = nextProps.appeared;
+    (0, _createClass3['default'])(AnimateChild, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.onDomUpdated();
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate() {
+        this.onDomUpdated();
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        clearTimeout(this.timeout);
+        this._destroy = true;
+        this.cleanDomEvent();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var _state = this.state,
+            child = _state.child,
+            eventActive = _state.eventActive;
+        var _props = this.props,
+            showProp = _props.showProp,
+            transitionName = _props.transitionName;
 
+        var _ref2 = child.props || {},
+            className = _ref2.className;
 
-      var newState = {
-        prevProps: (0, _util.cloneProps)(nextProps, clonePropList)
-      };
+        var currentEvent = this.getCurrentEvent();
 
-      function processState(propName, updater) {
-        if (prevProps[propName] !== nextProps[propName]) {
-          if (updater) {
-            updater(nextProps[propName]);
-          }
-          return true;
+        // Class name
+        var connectClassName = transitionSupport && this.currentEvent ? (0, _classnames2['default'])(className, (0, _util.getTransitionName)(transitionName, this.currentEvent.type), eventActive && (0, _util.getTransitionName)(transitionName, this.currentEvent.type + '-active')) : className;
+
+        var show = true;
+
+        // Keep show when is in transition or has customize animate
+        if (transitionSupport && (!currentEvent.empty || this.currentEvent && this.currentEvent.animateObj)) {
+          show = true;
+        } else {
+          show = child.props[showProp];
         }
-        return false;
-      }
 
-      function pushEvent(eventType) {
-        var eventQueue = newState.eventQueue || prevState.eventQueue.slice();
-        var matchIndex = eventQueue.indexOf(eventType);
+        // Clone child
+        var newChildProps = {
+          className: connectClassName
+        };
 
-        // Clean the rest event if eventType match
-        if (matchIndex !== -1) {
-          eventQueue = eventQueue.slice(0, matchIndex);
+        if (showProp) {
+          newChildProps[showProp] = show;
         }
 
-        eventQueue.push(eventType);
-        newState.eventQueue = eventQueue;
+        return _react2['default'].cloneElement(child, newChildProps);
       }
+    }], [{
+      key: 'getDerivedStateFromProps',
+      value: function getDerivedStateFromProps(nextProps, prevState) {
+        var _prevState$prevProps = prevState.prevProps,
+            prevProps = _prevState$prevProps === undefined ? {} : _prevState$prevProps;
+        var appeared = nextProps.appeared;
 
-      // Child update. Only set child.
-      processState('children', function (child) {
-        newState.child = child;
-      });
 
-      processState('appeared', function (isAppeared) {
-        if (isAppeared) {
-          pushEvent('appear');
-        }
-      });
+        var newState = {
+          prevProps: (0, _util.cloneProps)(nextProps, clonePropList)
+        };
 
-      // Show update
-      processState('show', function (show) {
-        if (!appeared) {
-          if (show) {
-            pushEvent('enter');
-          } else {
-            pushEvent('leave');
+        function processState(propName, updater) {
+          if (prevProps[propName] !== nextProps[propName]) {
+            if (updater) {
+              updater(nextProps[propName]);
+            }
+            return true;
           }
+          return false;
         }
-      });
 
-      return newState;
-    };
+        function pushEvent(eventType) {
+          var eventQueue = newState.eventQueue || prevState.eventQueue.slice();
+          var matchIndex = eventQueue.indexOf(eventType);
 
-    AnimateChild.prototype.componentDidMount = function componentDidMount() {
-      this.onDomUpdated();
-    };
+          // Clean the rest event if eventType match
+          if (matchIndex !== -1) {
+            eventQueue = eventQueue.slice(0, matchIndex);
+          }
 
-    AnimateChild.prototype.componentDidUpdate = function componentDidUpdate() {
-      this.onDomUpdated();
-    };
+          eventQueue.push(eventType);
+          newState.eventQueue = eventQueue;
+        }
 
-    AnimateChild.prototype.componentWillUnmount = function componentWillUnmount() {
-      clearTimeout(this.timeout);
-      this._destroy = true;
-      this.cleanDomEvent();
-    };
+        // Child update. Only set child.
+        processState('children', function (child) {
+          newState.child = child;
+        });
 
-    AnimateChild.prototype.render = function render() {
-      var _state = this.state,
-          child = _state.child,
-          eventActive = _state.eventActive;
-      var _props = this.props,
-          showProp = _props.showProp,
-          transitionName = _props.transitionName;
+        processState('appeared', function (isAppeared) {
+          if (isAppeared) {
+            pushEvent('appear');
+          }
+        });
 
-      var _ref2 = child.props || {},
-          className = _ref2.className;
+        // Show update
+        processState('show', function (show) {
+          if (!appeared) {
+            if (show) {
+              pushEvent('enter');
+            } else {
+              pushEvent('leave');
+            }
+          }
+        });
 
-      var currentEvent = this.getCurrentEvent();
-
-      // Class name
-      var connectClassName = transitionSupport && this.currentEvent ? (0, _classnames2['default'])(className, (0, _util.getTransitionName)(transitionName, this.currentEvent.type), eventActive && (0, _util.getTransitionName)(transitionName, this.currentEvent.type + '-active')) : className;
-
-      var show = true;
-
-      // Keep show when is in transition or has customize animate
-      if (transitionSupport && (!currentEvent.empty || this.currentEvent && this.currentEvent.animateObj)) {
-        show = true;
-      } else {
-        show = child.props[showProp];
+        return newState;
       }
-
-      // Clone child
-      var newChildProps = {
-        className: connectClassName
-      };
-
-      if (showProp) {
-        newChildProps[showProp] = show;
-      }
-
-      return _react2['default'].cloneElement(child, newChildProps);
-    };
-
+    }]);
     return AnimateChild;
@@ -457,0 +474,0 @@ }(_react2['default'].Component);

lib/util.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.supportTransition = exports.transitionEndName = exports.animationEndName = undefined;
@@ -5,0 +7,0 @@ exports.getStyleProperty = getStyleProperty;

package.json

 {
   "name": "rc-animate",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-rc.2",
   "description": "css-transition ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -47,6 +47,56 @@ # rc-animate
 
-## API
 
+## CSSMotion
+
 ### props
 
+| Property | Type | Default | Description|
+| -------- | ---- | ------- | ---------- |
+| visible | boolean | true | Display child content or not |
+| children | function | | Render props of children content. Example [see below](#sample usage) |
+| motionName | string \| [motionNameObjProps](#motionNameObjProps) | | Set the className when motion start |
+| motionAppear | boolean | true | Support motion on appear |
+| motionEnter | boolean | true | Support motion on enter |
+| motionLeave | boolean | true | Support motion on leave |
+| onAppearStart | function | | Trigger when appear start |
+| onAppearActive | function | | Trigger when appear active |
+| onAppearEnd | function | | Trigger when appear end |
+| onEnterStart | function | | Trigger when enter start |
+| onEnterActive | function | | Trigger when enter active |
+| onEnterEnd | function | | Trigger when enter end |
+| onLeaveStart | function | | Trigger when leave start |
+| onLeaveActive | function | | Trigger when leave active |
+| onLeaveEnd | function | | Trigger when leave end |
+
+#### motionNameObjProps
+| Property | Type |
+| -------- | ---- |
+| appear | string |
+| appearActive | string |
+| enter | string |
+| enterActive | string |
+| leave | string |
+| leaveActive | string |
+
+### sample usage
+
+```jsx
+// Return customize style
+const onAppearStart = (ele) => ({ height: 0 });
+
+<CSSMotion
+  visible={show}
+  transitionName="transition"
+  onAppearStart={onAppearStart}
+>
+  {({ style, className }) => (
+    <div className={className} style={style} />
+  )}
+</CSSMotion>
+```
+
+## Animate (Deprecated)
+
+### props
+
 <table class="table table-bordered table-striped">
@@ -53,0 +103,0 @@ <thead>

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

85534

increased by37.46%

Number of package files

12

increased by20%

Lines of code

1903

increased by39.62%

Number of lines in readme file

239

increased by26.46%

No dependency changes