rc-animate - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/Animate.js

@@ -23,2 +23,6 @@ 'use strict';
 
+var _util = require('./util');
+
+var _util2 = _interopRequireDefault(_util);
+
 var defaultKey = 'rc_animate_' + Date.now();
@@ -38,6 +42,8 @@
 
+function noop() {}
+
 var Animate = _react2['default'].createClass({
   displayName: 'Animate',
 
-  protoTypes: {
+  propTypes: {
     component: _react2['default'].PropTypes.any,
@@ -47,6 +53,9 @@ animation: _react2['default'].PropTypes.object,
     transitionEnter: _react2['default'].PropTypes.bool,
+    transitionAppear: _react2['default'].PropTypes.bool,
     transitionLeave: _react2['default'].PropTypes.bool,
     onEnd: _react2['default'].PropTypes.func,
-    showProp: _react2['default'].PropTypes.bool,
-    animateMount: _react2['default'].PropTypes.bool
+    onEnter: _react2['default'].PropTypes.func,
+    onLeave: _react2['default'].PropTypes.func,
+    onAppear: _react2['default'].PropTypes.func,
+    showProp: _react2['default'].PropTypes.string
   },
@@ -60,8 +69,16 @@
       transitionLeave: true,
-      enter: true,
-      animateMount: false,
-      onEnd: function onEnd() {}
+      transitionAppear: false,
+      onEnd: noop,
+      onEnter: noop,
+      onLeave: noop,
+      onAppear: noop
     };
   },
 
+  componentDidMount: function componentDidMount() {
+    this.state.children.map(function (c) {
+      return c.key;
+    }).forEach(this.performAppear);
+  },
+
   getInitialState: function getInitialState() {
@@ -91,6 +108,7 @@ this.currentlyAnimatingKeys = {};
       newChildren = newChildren.map(function (c) {
+        var ret = c;
         if (!c.props[showProp] && (0, _ChildrenUtils.isShownInChildren)(currentChildren, c, showProp)) {
-          c = _react2['default'].cloneElement(c, _defineProperty({}, showProp, true));
+          ret = _react2['default'].cloneElement(c, _defineProperty({}, showProp, true));
         }
-        return c;
+        return ret;
       });
@@ -150,2 +168,41 @@ }
 
+  componentDidUpdate: function componentDidUpdate() {
+    var keysToEnter = this.keysToEnter;
+    this.keysToEnter = [];
+    keysToEnter.forEach(this.performEnter);
+    var keysToLeave = this.keysToLeave;
+    this.keysToLeave = [];
+    keysToLeave.forEach(this.performLeave);
+  },
+
+  render: function render() {
+    var props = this.props;
+    var children = this.state.children.map(function (child) {
+      if (!child.key) {
+        throw new Error('must set key for <rc-animate> children');
+      }
+      return _react2['default'].createElement(
+        _AnimateChild2['default'],
+        {
+          key: child.key,
+          ref: child.key,
+          animation: props.animation,
+          transitionName: props.transitionName,
+          transitionEnter: props.transitionEnter,
+          transitionAppear: props.transitionAppear,
+          transitionLeave: props.transitionLeave },
+        child
+      );
+    });
+    var Component = props.component;
+    if (Component) {
+      return _react2['default'].createElement(
+        Component,
+        this.props,
+        children
+      );
+    }
+    return children[0] || null;
+  },
+
   performEnter: function performEnter(key) {
@@ -155,9 +212,17 @@ // may already remove by exclusive
       this.currentlyAnimatingKeys[key] = true;
-      this.refs[key].componentWillEnter(this._handleDoneEntering.bind(this, key));
+      this.refs[key].componentWillEnter(this.handleDoneAdding.bind(this, key, 'enter'));
     }
   },
 
-  _handleDoneEntering: function _handleDoneEntering(key) {
+  performAppear: function performAppear(key) {
+    if (this.refs[key]) {
+      this.currentlyAnimatingKeys[key] = true;
+      this.refs[key].componentWillAppear(this.handleDoneAdding.bind(this, key, 'appear'));
+    }
+  },
+
+  handleDoneAdding: function handleDoneAdding(key, type) {
+    var props = this.props;
     delete this.currentlyAnimatingKeys[key];
-    var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(this.props));
+    var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props));
     if (!this.isValidChildByKey(currentChildren, key)) {
@@ -167,3 +232,13 @@ // exclusive will not need this
     } else {
-      this.props.onEnd(key, true);
+      if (type === 'appear') {
+        if (_util2['default'].isAppearSupported(props)) {
+          props.onAppear(key);
+        }
+        props.onEnd(key, true);
+      } else {
+        if (_util2['default'].isEnterSupported(props)) {
+          props.onEnter(key);
+        }
+        props.onEnd(key, true);
+      }
       if (this.isMounted() && !(0, _ChildrenUtils.isSameChildren)(this.state.children, currentChildren)) {
@@ -181,18 +256,10 @@ this.setState({
       this.currentlyAnimatingKeys[key] = true;
-      this.refs[key].componentWillLeave(this._handleDoneLeaving.bind(this, key));
+      this.refs[key].componentWillLeave(this.handleDoneLeaving.bind(this, key));
     }
   },
 
-  isValidChildByKey: function isValidChildByKey(currentChildren, key) {
-    var showProp = this.props.showProp;
-    if (showProp) {
-      return (0, _ChildrenUtils.isShownInChildrenByKey)(currentChildren, key, showProp);
-    } else {
-      return (0, _ChildrenUtils.inChildrenByKey)(currentChildren, key);
-    }
-  },
-
-  _handleDoneLeaving: function _handleDoneLeaving(key) {
+  handleDoneLeaving: function handleDoneLeaving(key) {
+    var props = this.props;
     delete this.currentlyAnimatingKeys[key];
-    var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(this.props));
+    var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props));
     // in case state change is too fast
@@ -202,3 +269,6 @@ if (this.isValidChildByKey(currentChildren, key)) {
     } else {
-      this.props.onEnd(key, false);
+      if (_util2['default'].isLeaveSupported(props)) {
+        props.onLeave(key);
+        props.onEnd(key, false);
+      }
       if (this.isMounted() && !(0, _ChildrenUtils.isSameChildren)(this.state.children, currentChildren)) {
@@ -212,2 +282,10 @@ this.setState({
 
+  isValidChildByKey: function isValidChildByKey(currentChildren, key) {
+    var showProp = this.props.showProp;
+    if (showProp) {
+      return (0, _ChildrenUtils.isShownInChildrenByKey)(currentChildren, key, showProp);
+    }
+    return (0, _ChildrenUtils.inChildrenByKey)(currentChildren, key);
+  },
+
   stop: function stop(key) {
@@ -219,49 +297,2 @@ delete this.currentlyAnimatingKeys[key];
     }
-  },
-
-  componentDidMount: function componentDidMount() {
-    if (this.props.animateMount) {
-      this.state.children.map(function (c) {
-        return c.key;
-      }).forEach(this.performEnter);
-    }
-  },
-
-  componentDidUpdate: function componentDidUpdate() {
-    var keysToEnter = this.keysToEnter;
-    this.keysToEnter = [];
-    keysToEnter.forEach(this.performEnter);
-    var keysToLeave = this.keysToLeave;
-    this.keysToLeave = [];
-    keysToLeave.forEach(this.performLeave);
-  },
-
-  render: function render() {
-    var props = this.props;
-    var children = this.state.children.map(function (child) {
-      if (!child.key) {
-        throw new Error('must set key for <rc-animate> children');
-      }
-      return _react2['default'].createElement(
-        _AnimateChild2['default'],
-        {
-          key: child.key,
-          ref: child.key,
-          animation: props.animation,
-          transitionName: props.transitionName,
-          transitionEnter: props.transitionEnter,
-          transitionLeave: props.transitionLeave },
-        child
-      );
-    });
-    var Component = props.component;
-    if (Component) {
-      return _react2['default'].createElement(
-        Component,
-        this.props,
-        children
-      );
-    } else {
-      return children[0] || null;
-    }
   }
@@ -268,0 +299,0 @@ });

lib/AnimateChild.js

@@ -17,4 +17,9 @@ 'use strict';
 
+var _util = require('./util');
+
+var _util2 = _interopRequireDefault(_util);
+
 var transitionMap = {
   enter: 'transitionEnter',
+  appear: 'transitionAppear',
   leave: 'transitionLeave'
@@ -26,2 +31,6 @@ };
 
+  propTypes: {
+    children: _react2['default'].PropTypes.any
+  },
+
   transition: function transition(animationType, finishCallback) {
@@ -57,4 +66,3 @@ var _this = this;
   componentWillEnter: function componentWillEnter(done) {
-    var props = this.props;
-    if (props.transitionEnter && props.transitionName || props.animation.enter) {
+    if (_util2['default'].isEnterSupported(this.props)) {
       this.transition('enter', done);
@@ -66,5 +74,12 @@ } else {
 
+  componentWillAppear: function componentWillAppear(done) {
+    if (_util2['default'].isAppearSupported(this.props)) {
+      this.transition('appear', done);
+    } else {
+      done();
+    }
+  },
+
   componentWillLeave: function componentWillLeave(done) {
-    var props = this.props;
-    if (props.transitionLeave && props.transitionName || props.animation.leave) {
+    if (_util2['default'].isLeaveSupported(this.props)) {
       this.transition('leave', done);
@@ -71,0 +86,0 @@ } else {

package.json

 {
   "name": "rc-animate",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "css-transition ui component for react",
@@ -26,12 +26,11 @@ "keywords": [
   "config": {
-    "port": 8000
+    "port": 8200
   },
   "scripts": {
     "build": "rc-tools run build",
-    "precommit": "rc-tools run precommit",
-    "less": "rc-tools run less",
     "gh-pages": "rc-tools run gh-pages",
     "start": "node --harmony node_modules/.bin/rc-server",
-    "publish": "rc-tools run tag",
+    "pub": "rc-tools run pub",
     "lint": "rc-tools run lint",
+    "karma": "rc-tools run karma",
     "saucelabs": "node --harmony node_modules/.bin/rc-tools run saucelabs",
@@ -44,7 +43,6 @@ "browser-test": "node --harmony node_modules/.bin/rc-tools run browser-test",
     "jquery": "~1.11.3",
-    "node-dev": "2.x",
     "object-assign": "~3.0.0",
     "precommit-hook": "1.x",
     "rc-server": "3.x",
-    "rc-tools": "3.x",
+    "rc-tools": "4.x",
     "react": "0.13.x",
@@ -54,3 +52,3 @@ "velocity-animate": "~1.2.2"
   "precommit": [
-    "precommit"
+    "lint"
   ],
@@ -57,0 +55,0 @@ "dependencies": {

README.md

@@ -39,3 +39,3 @@ # rc-animate
 var React = require('react');
-React.render(<Animate><p key="1">1</p><p key="2">2</p></Animate>, container);
+React.render(<Animate animation={{}}><p key="1">1</p><p key="2">2</p></Animate>, container);
 ```
@@ -81,2 +81,8 @@
         </tr>
+       <tr>
+         <td>transitionAppear</td>
+         <td>Boolean</td>
+         <td>false</td>
+         <td>whether support transition appear anim</td>
+       </tr>
         <tr>
@@ -96,3 +102,3 @@ <td>transitionEnter</td>
          <td>onEnd</td>
-         <td>function(key:String, enter:Boolean)</td>
+         <td>function(key:String, exists:Boolean)</td>
          <td>true</td>
@@ -106,25 +112,3 @@ <td>animation end callback</td>
           <td>
-            to animate with js.  for examples:
-          ```js
-            {
-              enter: function(node, done){
-                node.style.display='none';
-                $(node).slideUp(done);
-                return {
-                  stop:function(){
-                    $(node).stop(true);
-                  }
-                };
-              },
-              leave: function(node, done){
-                node.style.display='';
-                $(node).slideDown(done);
-                return {
-                  stop:function(){
-                    $(node).stop(true);
-                  }
-                };              
-              }
-            }
-          ```
+            to animate with js. see animation format below.
           </td>
@@ -135,2 +119,34 @@ </tr>
 
+### animation format
+
+with appear, enter and leave as keys. for example:
+
+```js
+  {
+    appear: function(node, done){
+      node.style.display='none';
+      $(node).slideUp(done);
+      return {
+        stop:function(){
+          // jq will call done on finish
+          $(node).stop(true);
+        }
+      };
+    },
+    enter: function(){
+      this.appear.apply(this,arguments);
+    },
+    leave: function(node, done){
+      node.style.display='';
+      $(node).slideDown(done);
+      return {
+        stop:function(){
+          // jq will call done on finish
+          $(node).stop(true);
+        }
+      };              
+    }
+  }
+```
+
 ## Development
@@ -145,3 +161,3 @@
 
-http://localhost:8000/examples/index.md
+http://localhost:8200/examples/index.md
 
@@ -152,7 +168,7 @@ online example: http://react-component.github.io/animate/examples/
 
-http://localhost:8000/tests/runner.html?coverage
+http://localhost:8200/tests/runner.html?coverage
 
 ## Coverage
 
-http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage
+http://localhost:8200/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8200/tests/runner.html?coverage
 
@@ -159,0 +175,0 @@ ## License

No alert changes

Improved metrics

Total package byte prevSize

20356

increased by10.37%

Dev dependency count

8

decreased by-11.11%

Number of package files

8

increased by14.29%

Lines of code

440

increased by13.99%

Number of lines in readme file

171

increased by10.32%

No dependency changes