rc-animate - npm Package Compare versions

Comparing version 2.7.0 to 2.8.0

es/CSSMotion.js

@@ -198,3 +198,3 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
             leavedClassName = _props.leavedClassName,
-            eventKey = _props.eventKey;
+            eventProps = _props.eventProps;
 
@@ -206,5 +206,5 @@
           if (visible) {
-            return children({ key: eventKey });
+            return children(_extends({}, eventProps));
           } else if (!removeOnLeave) {
-            return children({ key: eventKey, className: leavedClassName });
+            return children(_extends({}, eventProps, { className: leavedClassName }));
           }
@@ -215,7 +215,6 @@
 
-        return children({
-          key: eventKey,
+        return children(_extends({}, eventProps, {
           className: classNames((_classNames = {}, _defineProperty(_classNames, getTransitionName(motionName, status), status !== STATUS_NONE), _defineProperty(_classNames, getTransitionName(motionName, status + '-active'), status !== STATUS_NONE && statusActive), _defineProperty(_classNames, motionName, typeof motionName === 'string'), _classNames)),
           style: statusStyle
-        });
+        }));
       }
@@ -268,3 +267,3 @@ }], [{
   CSSMotion.propTypes = {
-    eventKey: PropTypes.any, // Internal usage. Only pass by CSSMotionList
+    eventProps: PropTypes.object, // Internal usage. Only pass by CSSMotionList
     visible: PropTypes.bool,
@@ -271,0 +270,0 @@ children: PropTypes.func,

es/CSSMotionList.js

@@ -12,3 +12,3 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import { supportTransition } from './util/motion';
-import { diffKeys } from './util/diff';
+import { STATUS_ADD, STATUS_KEEP, STATUS_REMOVE, STATUS_REMOVED, diffKeys, parseKeys } from './util/diff';
 
@@ -41,3 +41,3 @@ var MOTION_PROP_NAMES = Object.keys(CSSMotion.propTypes);
               return _extends({}, entity, {
-                removed: true
+                status: STATUS_REMOVED
               });
@@ -72,13 +72,12 @@ })
           keyEntities.map(function (_ref3) {
-            var key = _ref3.key,
-                add = _ref3.add,
-                keep = _ref3.keep;
+            var status = _ref3.status,
+                eventProps = _objectWithoutProperties(_ref3, ['status']);
 
-            var visible = !!(add || keep);
+            var visible = status === STATUS_ADD || status === STATUS_KEEP;
             return React.createElement(
               CSSMotion,
               _extends({}, motionProps, {
-                key: key,
+                key: eventProps.key,
                 visible: visible,
-                eventKey: key,
+                eventProps: eventProps,
                 onLeaveEnd: function onLeaveEnd() {
@@ -88,3 +87,3 @@ if (motionProps.onLeaveEnd) {
                   }
-                  _this2.removeKey(key);
+                  _this2.removeKey(eventProps.key);
                 }
@@ -103,7 +102,9 @@ }),
 
+        var parsedKeyObjects = parseKeys(keys);
+
         // Always as keep when motion not support
         if (!transitionSupport) {
           return {
-            keyEntities: keys.map(function (key) {
-              return { key: key, keep: true };
+            keyEntities: parsedKeyObjects.map(function (obj) {
+              return _extends({}, obj, { status: STATUS_KEEP });
             })
@@ -113,7 +114,3 @@ };
 
-        var prevKeys = keyEntities.map(function (_ref6) {
-          var key = _ref6.key;
-          return key;
-        });
-        var mixedKeyEntities = diffKeys(prevKeys, keys);
+        var mixedKeyEntities = diffKeys(keyEntities, parsedKeyObjects);
 
@@ -134,3 +131,3 @@ var keyEntitiesLen = keyEntities.length;
             // Remove if already mark as removed
-            if (prevEntity && prevEntity.removed && entity.remove) {
+            if (prevEntity && prevEntity.status === STATUS_REMOVED && entity.status === STATUS_REMOVE) {
               return false;
@@ -137,0 +134,0 @@ }

es/util/diff.js

@@ -0,1 +1,20 @@
+import _extends from 'babel-runtime/helpers/extends';
+export var STATUS_ADD = 'add';
+export var STATUS_KEEP = 'keep';
+export var STATUS_REMOVE = 'remove';
+export var STATUS_REMOVED = 'removed';
+
+export function wrapKeyToObject(key) {
+  if (key && typeof key === 'object' && 'key' in key) {
+    return key;
+  }
+  return { key: key };
+}
+
+export function parseKeys() {
+  var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+  return keys.map(wrapKeyToObject);
+}
+
 export function diffKeys() {
@@ -9,20 +28,22 @@ var prevKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 
+  var prevKeyObjects = parseKeys(prevKeys);
+  var currentKeyObjects = parseKeys(currentKeys);
+
   // Check prev keys to insert or keep
-  prevKeys.forEach(function (key) {
+  prevKeyObjects.forEach(function (keyObj) {
     var hit = false;
 
     for (var i = currentIndex; i < currentLen; i += 1) {
-      var currentKey = currentKeys[i];
-      if (currentKey === key) {
+      var currentKeyObj = currentKeyObjects[i];
+      if (currentKeyObj.key === keyObj.key) {
         // New added keys should add before current key
         if (currentIndex < i) {
-          list = list.concat(currentKeys.slice(currentIndex, i).map(function (addKey) {
-            return { key: addKey, add: true };
+          list = list.concat(currentKeyObjects.slice(currentIndex, i).map(function (obj) {
+            return _extends({}, obj, { status: STATUS_ADD });
           }));
           currentIndex = i;
         }
-        list.push({
-          key: key,
-          keep: true
-        });
+        list.push(_extends({}, currentKeyObj, {
+          status: STATUS_KEEP
+        }));
         currentIndex += 1;
@@ -37,6 +58,5 @@
     if (!hit) {
-      list.push({
-        key: key,
-        remove: true
-      });
+      list.push(_extends({}, keyObj, {
+        status: STATUS_REMOVE
+      }));
     }
@@ -47,4 +67,4 @@ });
   if (currentIndex < currentLen) {
-    list = list.concat(currentKeys.slice(currentIndex).map(function (addKey) {
-      return { key: addKey, add: true };
+    list = list.concat(currentKeyObjects.slice(currentIndex).map(function (obj) {
+      return _extends({}, obj, { status: STATUS_ADD });
     }));
@@ -54,4 +74,2 @@ }
   return list;
-}
-
-export default diffKeys;
+}

HISTORY.md

 # History
 ----
 
+## 2.8.0 / 2019-04-29
+
+- `keys` on CSSMotionList can be an object
+
 ## 2.7.0 / 2019-04-29
@@ -5,0 +9,0 @@

lib/CSSMotion.js

@@ -242,3 +242,3 @@ 'use strict';
             leavedClassName = _props.leavedClassName,
-            eventKey = _props.eventKey;
+            eventProps = _props.eventProps;
 
@@ -250,5 +250,5 @@
           if (visible) {
-            return children({ key: eventKey });
+            return children((0, _extends3['default'])({}, eventProps));
           } else if (!removeOnLeave) {
-            return children({ key: eventKey, className: leavedClassName });
+            return children((0, _extends3['default'])({}, eventProps, { className: leavedClassName }));
           }
@@ -259,7 +259,6 @@
 
-        return children({
-          key: eventKey,
+        return children((0, _extends3['default'])({}, eventProps, {
           className: (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, (0, _motion.getTransitionName)(motionName, status), status !== STATUS_NONE), (0, _defineProperty3['default'])(_classNames, (0, _motion.getTransitionName)(motionName, status + '-active'), status !== STATUS_NONE && statusActive), (0, _defineProperty3['default'])(_classNames, motionName, typeof motionName === 'string'), _classNames)),
           style: statusStyle
-        });
+        }));
       }
@@ -311,3 +310,3 @@ }], [{
   CSSMotion.propTypes = {
-    eventKey: _propTypes2['default'].any, // Internal usage. Only pass by CSSMotionList
+    eventProps: _propTypes2['default'].object, // Internal usage. Only pass by CSSMotionList
     visible: _propTypes2['default'].bool,
@@ -314,0 +313,0 @@ children: _propTypes2['default'].func,

lib/CSSMotionList.js

@@ -79,3 +79,3 @@ 'use strict';
               return (0, _extends3['default'])({}, entity, {
-                removed: true
+                status: _diff.STATUS_REMOVED
               });
@@ -110,13 +110,12 @@ })
           keyEntities.map(function (_ref3) {
-            var key = _ref3.key,
-                add = _ref3.add,
-                keep = _ref3.keep;
+            var status = _ref3.status,
+                eventProps = (0, _objectWithoutProperties3['default'])(_ref3, ['status']);
 
-            var visible = !!(add || keep);
+            var visible = status === _diff.STATUS_ADD || status === _diff.STATUS_KEEP;
             return _react2['default'].createElement(
               _CSSMotion2['default'],
               (0, _extends3['default'])({}, motionProps, {
-                key: key,
+                key: eventProps.key,
                 visible: visible,
-                eventKey: key,
+                eventProps: eventProps,
                 onLeaveEnd: function onLeaveEnd() {
@@ -126,3 +125,3 @@ if (motionProps.onLeaveEnd) {
                   }
-                  _this2.removeKey(key);
+                  _this2.removeKey(eventProps.key);
                 }
@@ -141,7 +140,9 @@ }),
 
+        var parsedKeyObjects = (0, _diff.parseKeys)(keys);
+
         // Always as keep when motion not support
         if (!transitionSupport) {
           return {
-            keyEntities: keys.map(function (key) {
-              return { key: key, keep: true };
+            keyEntities: parsedKeyObjects.map(function (obj) {
+              return (0, _extends3['default'])({}, obj, { status: _diff.STATUS_KEEP });
             })
@@ -151,7 +152,3 @@ };
 
-        var prevKeys = keyEntities.map(function (_ref6) {
-          var key = _ref6.key;
-          return key;
-        });
-        var mixedKeyEntities = (0, _diff.diffKeys)(prevKeys, keys);
+        var mixedKeyEntities = (0, _diff.diffKeys)(keyEntities, parsedKeyObjects);
 
@@ -172,3 +169,3 @@ var keyEntitiesLen = keyEntities.length;
             // Remove if already mark as removed
-            if (prevEntity && prevEntity.removed && entity.remove) {
+            if (prevEntity && prevEntity.status === _diff.STATUS_REMOVED && entity.status === _diff.STATUS_REMOVE) {
               return false;
@@ -175,0 +172,0 @@ }

lib/util/diff.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -6,3 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.STATUS_REMOVED = exports.STATUS_REMOVE = exports.STATUS_KEEP = exports.STATUS_ADD = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+exports.wrapKeyToObject = wrapKeyToObject;
+exports.parseKeys = parseKeys;
 exports.diffKeys = diffKeys;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var STATUS_ADD = exports.STATUS_ADD = 'add';
+var STATUS_KEEP = exports.STATUS_KEEP = 'keep';
+var STATUS_REMOVE = exports.STATUS_REMOVE = 'remove';
+var STATUS_REMOVED = exports.STATUS_REMOVED = 'removed';
+
+function wrapKeyToObject(key) {
+  if (key && typeof key === 'object' && 'key' in key) {
+    return key;
+  }
+  return { key: key };
+}
+
+function parseKeys() {
+  var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+  return keys.map(wrapKeyToObject);
+}
+
 function diffKeys() {
@@ -16,20 +45,22 @@ var prevKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 
+  var prevKeyObjects = parseKeys(prevKeys);
+  var currentKeyObjects = parseKeys(currentKeys);
+
   // Check prev keys to insert or keep
-  prevKeys.forEach(function (key) {
+  prevKeyObjects.forEach(function (keyObj) {
     var hit = false;
 
     for (var i = currentIndex; i < currentLen; i += 1) {
-      var currentKey = currentKeys[i];
-      if (currentKey === key) {
+      var currentKeyObj = currentKeyObjects[i];
+      if (currentKeyObj.key === keyObj.key) {
         // New added keys should add before current key
         if (currentIndex < i) {
-          list = list.concat(currentKeys.slice(currentIndex, i).map(function (addKey) {
-            return { key: addKey, add: true };
+          list = list.concat(currentKeyObjects.slice(currentIndex, i).map(function (obj) {
+            return (0, _extends3['default'])({}, obj, { status: STATUS_ADD });
           }));
           currentIndex = i;
         }
-        list.push({
-          key: key,
-          keep: true
-        });
+        list.push((0, _extends3['default'])({}, currentKeyObj, {
+          status: STATUS_KEEP
+        }));
         currentIndex += 1;
@@ -44,6 +75,5 @@
     if (!hit) {
-      list.push({
-        key: key,
-        remove: true
-      });
+      list.push((0, _extends3['default'])({}, keyObj, {
+        status: STATUS_REMOVE
+      }));
     }
@@ -54,4 +84,4 @@ });
   if (currentIndex < currentLen) {
-    list = list.concat(currentKeys.slice(currentIndex).map(function (addKey) {
-      return { key: addKey, add: true };
+    list = list.concat(currentKeyObjects.slice(currentIndex).map(function (obj) {
+      return (0, _extends3['default'])({}, obj, { status: STATUS_ADD });
     }));
@@ -61,4 +91,2 @@ }
   return list;
-}
-
-exports["default"] = diffKeys;
+}

package.json

 {
   "name": "rc-animate",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "css-transition ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

88299

increased by2.64%

Lines of code

2165

increased by1.07%

No dependency changes