rc-animate - npm Package Compare versions

Comparing version 2.8.3 to 2.9.0

es/Animate.js

@@ -246,2 +246,4 @@ import _extends from 'babel-runtime/helpers/extends';
 Animate.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.object,
   component: PropTypes.any,
@@ -248,0 +250,0 @@ componentProps: PropTypes.object,

es/AnimateChild.js

@@ -109,4 +109,6 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 AnimateChild.propTypes = {
-  children: PropTypes.any
+  children: PropTypes.any,
+  animation: PropTypes.any,
+  transitionName: PropTypes.any
 };
 export default AnimateChild;

es/CSSMotion.js

@@ -7,6 +7,7 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
 import _inherits from 'babel-runtime/helpers/inherits';
+/* eslint-disable react/default-props-match-prop-types, react/no-multi-comp */
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { polyfill } from 'react-lifecycles-compat';
+import findDOMNode from 'rc-util/es/Dom/findDOMNode';
 import classNames from 'classnames';
@@ -21,2 +22,24 @@ import raf from 'raf';
 
+export var MotionPropTypes = {
+  eventProps: PropTypes.object, // Internal usage. Only pass by CSSMotionList
+  visible: PropTypes.bool,
+  children: PropTypes.func,
+  motionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  motionAppear: PropTypes.bool,
+  motionEnter: PropTypes.bool,
+  motionLeave: PropTypes.bool,
+  motionLeaveImmediately: PropTypes.bool, // Trigger leave motion immediately
+  removeOnLeave: PropTypes.bool,
+  leavedClassName: PropTypes.string,
+  onAppearStart: PropTypes.func,
+  onAppearActive: PropTypes.func,
+  onAppearEnd: PropTypes.func,
+  onEnterStart: PropTypes.func,
+  onEnterActive: PropTypes.func,
+  onEnterEnd: PropTypes.func,
+  onLeaveStart: PropTypes.func,
+  onLeaveActive: PropTypes.func,
+  onLeaveEnd: PropTypes.func
+};
+
 /**
@@ -26,3 +49,11 @@ * `transitionSupport` is used for none transition test case.
  */
-export function genCSSMotion(transitionSupport) {
+export function genCSSMotion(config) {
+  var transitionSupport = void 0;
+  var forwardRef = !!React.forwardRef;
+
+  if (typeof config === 'object') {
+    transitionSupport = config.transitionSupport;
+    forwardRef = 'forwardRef' in config ? config.forwardRef : forwardRef;
+  }
+
   function isSupportTransition(props) {
@@ -61,7 +92,7 @@ return !!(props.motionName && transitionSupport);
         // Event injection
-        var $ele = ReactDOM.findDOMNode(_this);
-        if (_this.$ele !== $ele) {
-          _this.removeEventListener(_this.$ele);
+        var $ele = _this.getElement();
+        if (_this.$cacheEle !== $ele) {
+          _this.removeEventListener(_this.$cacheEle);
           _this.addEventListener($ele);
-          _this.$ele = $ele;
+          _this.$cacheEle = $ele;
         }
@@ -103,2 +134,18 @@
 
+      _this.setNodeRef = function (node) {
+        var internalRef = _this.props.internalRef;
+
+        _this.node = node;
+
+        if (typeof internalRef === 'function') {
+          internalRef(node);
+        } else if (internalRef && 'current' in internalRef) {
+          internalRef.current = node;
+        }
+      };
+
+      _this.getElement = function () {
+        return findDOMNode(_this.node || _this);
+      };
+
       _this.addEventListener = function ($ele) {
@@ -119,3 +166,3 @@ if (!$ele) return;
       _this.updateStatus = function (styleFunc, additionalState, event, callback) {
-        var statusStyle = styleFunc ? styleFunc(ReactDOM.findDOMNode(_this), event) : null;
+        var statusStyle = styleFunc ? styleFunc(_this.getElement(), event) : null;
 
@@ -167,3 +214,4 @@ if (statusStyle === false || _this._destroyed) return;
       };
-      _this.$ele = null;
+      _this.$cacheEle = null;
+      _this.node = null;
       _this.raf = null;
@@ -187,3 +235,3 @@ return _this;
         this._destroyed = true;
-        this.removeEventListener(this.$ele);
+        this.removeEventListener(this.$cacheEle);
         this.cancelNextFrame();
@@ -213,5 +261,5 @@ }
           if (visible) {
-            return children(_extends({}, eventProps));
+            return children(_extends({}, eventProps), this.setNodeRef);
           } else if (!removeOnLeave) {
-            return children(_extends({}, eventProps, { className: leavedClassName }));
+            return children(_extends({}, eventProps, { className: leavedClassName }), this.setNodeRef);
           }
@@ -225,3 +273,3 @@
           style: statusStyle
-        }));
+        }), this.setNodeRef);
       }
@@ -273,23 +321,6 @@ }], [{
 
-  CSSMotion.propTypes = {
-    eventProps: PropTypes.object, // Internal usage. Only pass by CSSMotionList
-    visible: PropTypes.bool,
-    children: PropTypes.func,
-    motionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    motionAppear: PropTypes.bool,
-    motionEnter: PropTypes.bool,
-    motionLeave: PropTypes.bool,
-    motionLeaveImmediately: PropTypes.bool, // Trigger leave motion immediately
-    removeOnLeave: PropTypes.bool,
-    leavedClassName: PropTypes.string,
-    onAppearStart: PropTypes.func,
-    onAppearActive: PropTypes.func,
-    onAppearEnd: PropTypes.func,
-    onEnterStart: PropTypes.func,
-    onEnterActive: PropTypes.func,
-    onEnterEnd: PropTypes.func,
-    onLeaveStart: PropTypes.func,
-    onLeaveActive: PropTypes.func,
-    onLeaveEnd: PropTypes.func
-  };
+  CSSMotion.propTypes = _extends({}, MotionPropTypes, {
+
+    internalRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+  });
   CSSMotion.defaultProps = {
@@ -306,5 +337,11 @@ visible: true,
 
-  return CSSMotion;
+  if (!forwardRef) {
+    return CSSMotion;
+  }
+
+  return React.forwardRef(function (props, ref) {
+    return React.createElement(CSSMotion, _extends({ internalRef: ref }, props));
+  });
 }
 
 export default genCSSMotion(supportTransition);

es/CSSMotionList.js

@@ -10,7 +10,7 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import PropTypes from 'prop-types';
-import OriginCSSMotion from './CSSMotion';
+import OriginCSSMotion, { MotionPropTypes } from './CSSMotion';
 import { supportTransition } from './util/motion';
 import { STATUS_ADD, STATUS_KEEP, STATUS_REMOVE, STATUS_REMOVED, diffKeys, parseKeys } from './util/diff';
 
-var MOTION_PROP_NAMES = Object.keys(OriginCSSMotion.propTypes);
+var MOTION_PROP_NAMES = Object.keys(MotionPropTypes);
 
@@ -17,0 +17,0 @@ export function genCSSMotionList(transitionSupport) {

HISTORY.md

 # History
 ----
 
+## 2.9.0 / 2019-07-09
+
+- CSSMotion support forward ref to render props
+
 ## 2.8.0 / 2019-04-29
@@ -5,0 +9,0 @@

lib/Animate.js

@@ -283,2 +283,4 @@ 'use strict';
 Animate.propTypes = {
+  className: _propTypes2['default'].string,
+  style: _propTypes2['default'].object,
   component: _propTypes2['default'].any,
@@ -285,0 +287,0 @@ componentProps: _propTypes2['default'].object,

lib/AnimateChild.js

@@ -141,5 +141,7 @@ 'use strict';
 AnimateChild.propTypes = {
-  children: _propTypes2['default'].any
+  children: _propTypes2['default'].any,
+  animation: _propTypes2['default'].any,
+  transitionName: _propTypes2['default'].any
 };
 exports['default'] = AnimateChild;
 module.exports = exports['default'];

lib/CSSMotion.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.MotionPropTypes = undefined;
 
@@ -38,6 +39,2 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _propTypes = require('prop-types');
@@ -49,2 +46,6 @@
 
+var _findDOMNode = require('rc-util/lib/Dom/findDOMNode');
+
+var _findDOMNode2 = _interopRequireDefault(_findDOMNode);
+
 var _classnames = require('classnames');
@@ -62,3 +63,4 @@
 
-var STATUS_NONE = 'none';
+var STATUS_NONE = 'none'; /* eslint-disable react/default-props-match-prop-types, react/no-multi-comp */
+
 var STATUS_APPEAR = 'appear';
@@ -68,2 +70,24 @@ var STATUS_ENTER = 'enter';
 
+var MotionPropTypes = exports.MotionPropTypes = {
+  eventProps: _propTypes2['default'].object, // Internal usage. Only pass by CSSMotionList
+  visible: _propTypes2['default'].bool,
+  children: _propTypes2['default'].func,
+  motionName: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].object]),
+  motionAppear: _propTypes2['default'].bool,
+  motionEnter: _propTypes2['default'].bool,
+  motionLeave: _propTypes2['default'].bool,
+  motionLeaveImmediately: _propTypes2['default'].bool, // Trigger leave motion immediately
+  removeOnLeave: _propTypes2['default'].bool,
+  leavedClassName: _propTypes2['default'].string,
+  onAppearStart: _propTypes2['default'].func,
+  onAppearActive: _propTypes2['default'].func,
+  onAppearEnd: _propTypes2['default'].func,
+  onEnterStart: _propTypes2['default'].func,
+  onEnterActive: _propTypes2['default'].func,
+  onEnterEnd: _propTypes2['default'].func,
+  onLeaveStart: _propTypes2['default'].func,
+  onLeaveActive: _propTypes2['default'].func,
+  onLeaveEnd: _propTypes2['default'].func
+};
+
 /**
@@ -73,3 +97,11 @@ * `transitionSupport` is used for none transition test case.
  */
-function genCSSMotion(transitionSupport) {
+function genCSSMotion(config) {
+  var transitionSupport = void 0;
+  var forwardRef = !!_react2['default'].forwardRef;
+
+  if (typeof config === 'object') {
+    transitionSupport = config.transitionSupport;
+    forwardRef = 'forwardRef' in config ? config.forwardRef : forwardRef;
+  }
+
   function isSupportTransition(props) {
@@ -108,7 +140,7 @@ return !!(props.motionName && transitionSupport);
         // Event injection
-        var $ele = _reactDom2['default'].findDOMNode(_this);
-        if (_this.$ele !== $ele) {
-          _this.removeEventListener(_this.$ele);
+        var $ele = _this.getElement();
+        if (_this.$cacheEle !== $ele) {
+          _this.removeEventListener(_this.$cacheEle);
           _this.addEventListener($ele);
-          _this.$ele = $ele;
+          _this.$cacheEle = $ele;
         }
@@ -150,2 +182,18 @@
 
+      _this.setNodeRef = function (node) {
+        var internalRef = _this.props.internalRef;
+
+        _this.node = node;
+
+        if (typeof internalRef === 'function') {
+          internalRef(node);
+        } else if (internalRef && 'current' in internalRef) {
+          internalRef.current = node;
+        }
+      };
+
+      _this.getElement = function () {
+        return (0, _findDOMNode2['default'])(_this.node || _this);
+      };
+
       _this.addEventListener = function ($ele) {
@@ -166,3 +214,3 @@ if (!$ele) return;
       _this.updateStatus = function (styleFunc, additionalState, event, callback) {
-        var statusStyle = styleFunc ? styleFunc(_reactDom2['default'].findDOMNode(_this), event) : null;
+        var statusStyle = styleFunc ? styleFunc(_this.getElement(), event) : null;
 
@@ -214,3 +262,4 @@ if (statusStyle === false || _this._destroyed) return;
       };
-      _this.$ele = null;
+      _this.$cacheEle = null;
+      _this.node = null;
       _this.raf = null;
@@ -234,3 +283,3 @@ return _this;
         this._destroyed = true;
-        this.removeEventListener(this.$ele);
+        this.removeEventListener(this.$cacheEle);
         this.cancelNextFrame();
@@ -260,5 +309,5 @@ }
           if (visible) {
-            return children((0, _extends3['default'])({}, eventProps));
+            return children((0, _extends3['default'])({}, eventProps), this.setNodeRef);
           } else if (!removeOnLeave) {
-            return children((0, _extends3['default'])({}, eventProps, { className: leavedClassName }));
+            return children((0, _extends3['default'])({}, eventProps, { className: leavedClassName }), this.setNodeRef);
           }
@@ -272,3 +321,3 @@
           style: statusStyle
-        }));
+        }), this.setNodeRef);
       }
@@ -319,23 +368,6 @@ }], [{
 
-  CSSMotion.propTypes = {
-    eventProps: _propTypes2['default'].object, // Internal usage. Only pass by CSSMotionList
-    visible: _propTypes2['default'].bool,
-    children: _propTypes2['default'].func,
-    motionName: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].object]),
-    motionAppear: _propTypes2['default'].bool,
-    motionEnter: _propTypes2['default'].bool,
-    motionLeave: _propTypes2['default'].bool,
-    motionLeaveImmediately: _propTypes2['default'].bool, // Trigger leave motion immediately
-    removeOnLeave: _propTypes2['default'].bool,
-    leavedClassName: _propTypes2['default'].string,
-    onAppearStart: _propTypes2['default'].func,
-    onAppearActive: _propTypes2['default'].func,
-    onAppearEnd: _propTypes2['default'].func,
-    onEnterStart: _propTypes2['default'].func,
-    onEnterActive: _propTypes2['default'].func,
-    onEnterEnd: _propTypes2['default'].func,
-    onLeaveStart: _propTypes2['default'].func,
-    onLeaveActive: _propTypes2['default'].func,
-    onLeaveEnd: _propTypes2['default'].func
-  };
+  CSSMotion.propTypes = (0, _extends3['default'])({}, MotionPropTypes, {
+
+    internalRef: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].func])
+  });
   CSSMotion.defaultProps = {
@@ -352,5 +384,11 @@ visible: true,
 
-  return CSSMotion;
+  if (!forwardRef) {
+    return CSSMotion;
+  }
+
+  return _react2['default'].forwardRef(function (props, ref) {
+    return _react2['default'].createElement(CSSMotion, (0, _extends3['default'])({ internalRef: ref }, props));
+  });
 }
 
 exports['default'] = genCSSMotion(_motion.supportTransition);

lib/CSSMotionList.js

@@ -53,3 +53,3 @@ 'use strict';
 
-var MOTION_PROP_NAMES = Object.keys(_CSSMotion2['default'].propTypes);
+var MOTION_PROP_NAMES = Object.keys(_CSSMotion.MotionPropTypes);
 
@@ -56,0 +56,0 @@ function genCSSMotionList(transitionSupport) {

package.json

 {
   "name": "rc-animate",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "css-transition ui component for react",
@@ -64,4 +64,5 @@ "keywords": [
     "raf": "^3.4.0",
+    "rc-util": "^4.8.0",
     "react-lifecycles-compat": "^3.0.4"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

92850

increased by3.06%

Lines of code

2285

increased by2.88%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedrc-util@^4.8.0

• + Addedadd-dom-event-listener@1.1.0(transitive)

• + Addedrc-util@4.21.1(transitive)

• + Addedshallowequal@1.1.0(transitive)