react-swipeable-list - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/react-swipeable-list.cjs.js

@@ -199,2 +199,43 @@ 'use strict';
 
+function toVal(mix) {
+	var k, y, str='';
+
+	if (typeof mix === 'string' || typeof mix === 'number') {
+		str += mix;
+	} else if (typeof mix === 'object') {
+		if (Array.isArray(mix)) {
+			for (k=0; k < mix.length; k++) {
+				if (mix[k]) {
+					if (y = toVal(mix[k])) {
+						str && (str += ' ');
+						str += y;
+					}
+				}
+			}
+		} else {
+			for (k in mix) {
+				if (mix[k]) {
+					str && (str += ' ');
+					str += k;
+				}
+			}
+		}
+	}
+
+	return str;
+}
+
+function clsx () {
+	var i=0, tmp, x, str='';
+	while (i < arguments.length) {
+		if (tmp = arguments[i++]) {
+			if (x = toVal(tmp)) {
+				str && (str += ' ');
+				str += x;
+			}
+		}
+	}
+	return str;
+}
+
 var ItemContext = /*#__PURE__*/React__default['default'].createContext();
@@ -229,3 +270,5 @@ var ActionAnimation = {
   trailingFullSwipe: false,
-  triggerAction: false
+  triggerAction: false,
+  scaleLeading: false,
+  scaleTrailing: false
 };
@@ -380,38 +423,97 @@
 
+    _defineProperty(_assertThisInitialized(_this), "playReturnAnimationForLeadingActions", function (_ref2) {
+      var to = _ref2.to,
+          isIosType = _ref2.isIosType,
+          playMsReturnAnimation = _ref2.playMsReturnAnimation;
+
+      if (_this.leadingActionsElement) {
+        _this.leadingActionsElement.className = clsx('swipeable-list-item__leading-actions', playMsReturnAnimation ? 'swipeable-list-item__actions--return-ms' : 'swipeable-list-item__leading-actions--return');
+
+        if (_this.leadingActionsOpened && isIosType) {
+          _this.leadingActionsElement.className += ' test-actions-opened';
+        }
+
+        if (playMsReturnAnimation) {
+          var keepAnimationEnd = function keepAnimationEnd() {
+            _this.leadingActionsElement.removeEventListener('animationend', keepAnimationEnd);
+
+            _this.leadingActionsElement.style.width = 0;
+          };
+
+          _this.leadingActionsElement.addEventListener('animationend', keepAnimationEnd);
+        } else {
+          _this.leadingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.leadingActionsOpened && isIosType ? _this.leadingActionsWidth : 0, "px");
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "playReturnAnimationForTrailingActions", function (_ref3) {
+      var to = _ref3.to,
+          isIosType = _ref3.isIosType,
+          playMsReturnAnimation = _ref3.playMsReturnAnimation;
+
+      if (_this.trailingActionsElement) {
+        _this.trailingActionsElement.className = clsx('swipeable-list-item__trailing-actions', playMsReturnAnimation ? 'swipeable-list-item__actions--return-ms' : 'swipeable-list-item__trailing-actions--return');
+
+        if (_this.trailingActionsOpened && isIosType) {
+          _this.trailingActionsElement.className += ' test-actions-opened';
+        }
+
+        if (!playMsReturnAnimation) {
+          _this.trailingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.trailingActionsOpened && isIosType ? _this.trailingActionsWidth : 0, "px");
+        } else {
+          var keepAnimationEnd = function keepAnimationEnd() {
+            _this.trailingActionsElement.removeEventListener('animationend', keepAnimationEnd);
+
+            _this.trailingActionsElement.style.width = 0;
+          };
+
+          _this.trailingActionsElement.addEventListener('animationend', keepAnimationEnd);
+        }
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "playReturnAnimation", function () {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref2$to = _ref2.to,
-          to = _ref2$to === void 0 ? 0 : _ref2$to;
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref4$to = _ref4.to,
+          to = _ref4$to === void 0 ? 0 : _ref4$to;
 
       var _assertThisInitialize = _assertThisInitialized(_this),
-          leadingActionsElement = _assertThisInitialize.leadingActionsElement,
-          listElement = _assertThisInitialize.listElement,
-          trailingActionsElement = _assertThisInitialize.trailingActionsElement;
+          listElement = _assertThisInitialize.listElement;
 
       var listType = _this.props.listType;
+      var triggerAction = _this.state.triggerAction;
       var isIosType = listType === Type.IOS;
+      var isMsType = listType === Type.MS;
+      var playMsReturnAnimation = triggerAction && isMsType;
 
-      if (listElement) {
-        listElement.className = 'swipeable-list-item__content swipeable-list-item__content--return';
-        listElement.style.transform = "translateX(".concat(isIosType ? to : 0, "px)");
+      if (playMsReturnAnimation) {
+        var keepAnimationEnd = function keepAnimationEnd() {
+          listElement.removeEventListener('animationend', keepAnimationEnd);
+          listElement.style.transform = "translateX(0)";
+        };
+
+        listElement.addEventListener('animationend', keepAnimationEnd);
       }
 
-      if (leadingActionsElement) {
-        leadingActionsElement.className = 'swipeable-list-item__leading-actions swipeable-list-item__leading-actions--return';
+      if (listElement) {
+        listElement.className = clsx('swipeable-list-item__content', playMsReturnAnimation ? "swipeable-list-item__content--return-".concat(_this.left < 0 ? 'trailing' : 'leading', "-ms") : 'swipeable-list-item__content--return');
 
-        if (_this.leadingActionsOpened && isIosType) {
-          leadingActionsElement.className += ' test-actions-opened';
+        if (!playMsReturnAnimation) {
+          listElement.style.transform = "translateX(".concat(isIosType ? to : 0, "px)");
         }
-
-        leadingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.leadingActionsOpened && isIosType ? _this.leadingActionsWidth : 0, "px");
       }
 
-      if (trailingActionsElement) {
-        trailingActionsElement.className = 'swipeable-list-item__trailing-actions swipeable-list-item__trailing-actions--return';
-
-        if (_this.trailingActionsOpened && isIosType) {
-          trailingActionsElement.className += ' test-actions-opened';
-        }
-
-        trailingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.trailingActionsOpened && isIosType ? _this.trailingActionsWidth : 0, "px");
+      if (_this.left < 0) {
+        _this.playReturnAnimationForTrailingActions({
+          to,
+          isIosType,
+          playMsReturnAnimation
+        });
+      } else {
+        _this.playReturnAnimationForLeadingActions({
+          to,
+          isIosType,
+          playMsReturnAnimation
+        });
       }
@@ -458,4 +560,4 @@
 
-    _defineProperty(_assertThisInitialized(_this), "playActionAnimation", function (_ref3) {
-      var type = _ref3.type;
+    _defineProperty(_assertThisInitialized(_this), "playActionAnimation", function (_ref5) {
+      var type = _ref5.type;
 
@@ -519,5 +621,5 @@ var _assertThisInitialize3 = _assertThisInitialized(_this),
         } else {
+          _this.playReturnAnimation();
+
           _this.resetState();
-
-          _this.playReturnAnimation();
         }
@@ -671,3 +773,4 @@ }
               trailingFullSwipe: true,
-              triggerAction: true
+              triggerAction: true,
+              scaleTrailing: true
             });
@@ -678,6 +781,9 @@ } else if (_this.left > threshold) {
               trailingFullSwipe: false,
-              triggerAction: true
+              triggerAction: true,
+              scaleLeading: true
             });
           } else {
             _this.setState({
+              scaleLeading: false,
+              scaleTrailing: false,
               triggerAction: false
@@ -738,3 +844,5 @@ });
           leadingFullSwipe = _this$state2.leadingFullSwipe,
-          trailingFullSwipe = _this$state2.trailingFullSwipe;
+          trailingFullSwipe = _this$state2.trailingFullSwipe,
+          scaleLeading = _this$state2.scaleLeading,
+          scaleTrailing = _this$state2.scaleTrailing;
 
@@ -746,4 +854,7 @@ var _assertThisInitialize5 = _assertThisInitialized(_this),
 
+      var scaled = listType === Type.MS && (scaleLeading && type === 'leading' || scaleTrailing && type === 'trailing');
       return /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "swipeable-list-item__".concat(type, "-actions"),
+        className: clsx("swipeable-list-item__".concat(type, "-actions"), {
+          ["swipeable-list-item__".concat(type, "-actions--scaled")]: scaled
+        }),
         "data-testid": "".concat(type, "-actions"),
@@ -757,2 +868,4 @@ ref: binder
           onActionTriggered,
+          scaleLeading,
+          scaleTrailing,
           setLeadingFullSwipeAction,
@@ -893,43 +1006,2 @@ setTrailingFullSwipeAction,
 
-function toVal(mix) {
-	var k, y, str='';
-
-	if (typeof mix === 'string' || typeof mix === 'number') {
-		str += mix;
-	} else if (typeof mix === 'object') {
-		if (Array.isArray(mix)) {
-			for (k=0; k < mix.length; k++) {
-				if (mix[k]) {
-					if (y = toVal(mix[k])) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			}
-		} else {
-			for (k in mix) {
-				if (mix[k]) {
-					str && (str += ' ');
-					str += k;
-				}
-			}
-		}
-	}
-
-	return str;
-}
-
-function clsx () {
-	var i=0, tmp, x, str='';
-	while (i < arguments.length) {
-		if (tmp = arguments[i++]) {
-			if (x = toVal(tmp)) {
-				str && (str += ' ');
-				str += x;
-			}
-		}
-	}
-	return str;
-}
-
 var SwipeAction = function SwipeAction(_ref) {
@@ -954,3 +1026,5 @@ var children = _ref.children,
       setTrailingFullSwipeAction = _React$useContext.setTrailingFullSwipeAction,
-      trailingFullSwipe = _React$useContext.trailingFullSwipe;
+      trailingFullSwipe = _React$useContext.trailingFullSwipe,
+      scaleLeading = _React$useContext.scaleLeading,
+      scaleTrailing = _React$useContext.scaleTrailing;
 
@@ -985,3 +1059,4 @@ var onHandleClick = React__default['default'].useCallback(function () {
       'swipe-action__trailing--full-swipe-rest': trailing && trailingFullSwipe && !main && listType === Type.IOS,
-      'swipe-action__trailing--full-swipe-main': trailing && trailingFullSwipe && main && listType === Type.IOS
+      'swipe-action__trailing--full-swipe-main': trailing && trailingFullSwipe && main && listType === Type.IOS,
+      'swipe-action__grayed': listType === Type.MS && !(scaleLeading || scaleTrailing)
     }),
@@ -988,0 +1063,0 @@ onClick: onHandleClick

dist/react-swipeable-list.esm.js

@@ -190,2 +190,43 @@ import React, { PureComponent } from 'react';
 
+function toVal(mix) {
+	var k, y, str='';
+
+	if (typeof mix === 'string' || typeof mix === 'number') {
+		str += mix;
+	} else if (typeof mix === 'object') {
+		if (Array.isArray(mix)) {
+			for (k=0; k < mix.length; k++) {
+				if (mix[k]) {
+					if (y = toVal(mix[k])) {
+						str && (str += ' ');
+						str += y;
+					}
+				}
+			}
+		} else {
+			for (k in mix) {
+				if (mix[k]) {
+					str && (str += ' ');
+					str += k;
+				}
+			}
+		}
+	}
+
+	return str;
+}
+
+function clsx () {
+	var i=0, tmp, x, str='';
+	while (i < arguments.length) {
+		if (tmp = arguments[i++]) {
+			if (x = toVal(tmp)) {
+				str && (str += ' ');
+				str += x;
+			}
+		}
+	}
+	return str;
+}
+
 var ItemContext = /*#__PURE__*/React.createContext();
@@ -220,3 +261,5 @@ var ActionAnimation = {
   trailingFullSwipe: false,
-  triggerAction: false
+  triggerAction: false,
+  scaleLeading: false,
+  scaleTrailing: false
 };
@@ -371,38 +414,97 @@
 
+    _defineProperty(_assertThisInitialized(_this), "playReturnAnimationForLeadingActions", function (_ref2) {
+      var to = _ref2.to,
+          isIosType = _ref2.isIosType,
+          playMsReturnAnimation = _ref2.playMsReturnAnimation;
+
+      if (_this.leadingActionsElement) {
+        _this.leadingActionsElement.className = clsx('swipeable-list-item__leading-actions', playMsReturnAnimation ? 'swipeable-list-item__actions--return-ms' : 'swipeable-list-item__leading-actions--return');
+
+        if (_this.leadingActionsOpened && isIosType) {
+          _this.leadingActionsElement.className += ' test-actions-opened';
+        }
+
+        if (playMsReturnAnimation) {
+          var keepAnimationEnd = function keepAnimationEnd() {
+            _this.leadingActionsElement.removeEventListener('animationend', keepAnimationEnd);
+
+            _this.leadingActionsElement.style.width = 0;
+          };
+
+          _this.leadingActionsElement.addEventListener('animationend', keepAnimationEnd);
+        } else {
+          _this.leadingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.leadingActionsOpened && isIosType ? _this.leadingActionsWidth : 0, "px");
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "playReturnAnimationForTrailingActions", function (_ref3) {
+      var to = _ref3.to,
+          isIosType = _ref3.isIosType,
+          playMsReturnAnimation = _ref3.playMsReturnAnimation;
+
+      if (_this.trailingActionsElement) {
+        _this.trailingActionsElement.className = clsx('swipeable-list-item__trailing-actions', playMsReturnAnimation ? 'swipeable-list-item__actions--return-ms' : 'swipeable-list-item__trailing-actions--return');
+
+        if (_this.trailingActionsOpened && isIosType) {
+          _this.trailingActionsElement.className += ' test-actions-opened';
+        }
+
+        if (!playMsReturnAnimation) {
+          _this.trailingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.trailingActionsOpened && isIosType ? _this.trailingActionsWidth : 0, "px");
+        } else {
+          var keepAnimationEnd = function keepAnimationEnd() {
+            _this.trailingActionsElement.removeEventListener('animationend', keepAnimationEnd);
+
+            _this.trailingActionsElement.style.width = 0;
+          };
+
+          _this.trailingActionsElement.addEventListener('animationend', keepAnimationEnd);
+        }
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "playReturnAnimation", function () {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref2$to = _ref2.to,
-          to = _ref2$to === void 0 ? 0 : _ref2$to;
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref4$to = _ref4.to,
+          to = _ref4$to === void 0 ? 0 : _ref4$to;
 
       var _assertThisInitialize = _assertThisInitialized(_this),
-          leadingActionsElement = _assertThisInitialize.leadingActionsElement,
-          listElement = _assertThisInitialize.listElement,
-          trailingActionsElement = _assertThisInitialize.trailingActionsElement;
+          listElement = _assertThisInitialize.listElement;
 
       var listType = _this.props.listType;
+      var triggerAction = _this.state.triggerAction;
       var isIosType = listType === Type.IOS;
+      var isMsType = listType === Type.MS;
+      var playMsReturnAnimation = triggerAction && isMsType;
 
-      if (listElement) {
-        listElement.className = 'swipeable-list-item__content swipeable-list-item__content--return';
-        listElement.style.transform = "translateX(".concat(isIosType ? to : 0, "px)");
+      if (playMsReturnAnimation) {
+        var keepAnimationEnd = function keepAnimationEnd() {
+          listElement.removeEventListener('animationend', keepAnimationEnd);
+          listElement.style.transform = "translateX(0)";
+        };
+
+        listElement.addEventListener('animationend', keepAnimationEnd);
       }
 
-      if (leadingActionsElement) {
-        leadingActionsElement.className = 'swipeable-list-item__leading-actions swipeable-list-item__leading-actions--return';
+      if (listElement) {
+        listElement.className = clsx('swipeable-list-item__content', playMsReturnAnimation ? "swipeable-list-item__content--return-".concat(_this.left < 0 ? 'trailing' : 'leading', "-ms") : 'swipeable-list-item__content--return');
 
-        if (_this.leadingActionsOpened && isIosType) {
-          leadingActionsElement.className += ' test-actions-opened';
+        if (!playMsReturnAnimation) {
+          listElement.style.transform = "translateX(".concat(isIosType ? to : 0, "px)");
         }
-
-        leadingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.leadingActionsOpened && isIosType ? _this.leadingActionsWidth : 0, "px");
       }
 
-      if (trailingActionsElement) {
-        trailingActionsElement.className = 'swipeable-list-item__trailing-actions swipeable-list-item__trailing-actions--return';
-
-        if (_this.trailingActionsOpened && isIosType) {
-          trailingActionsElement.className += ' test-actions-opened';
-        }
-
-        trailingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.trailingActionsOpened && isIosType ? _this.trailingActionsWidth : 0, "px");
+      if (_this.left < 0) {
+        _this.playReturnAnimationForTrailingActions({
+          to,
+          isIosType,
+          playMsReturnAnimation
+        });
+      } else {
+        _this.playReturnAnimationForLeadingActions({
+          to,
+          isIosType,
+          playMsReturnAnimation
+        });
       }
@@ -449,4 +551,4 @@
 
-    _defineProperty(_assertThisInitialized(_this), "playActionAnimation", function (_ref3) {
-      var type = _ref3.type;
+    _defineProperty(_assertThisInitialized(_this), "playActionAnimation", function (_ref5) {
+      var type = _ref5.type;
 
@@ -510,5 +612,5 @@ var _assertThisInitialize3 = _assertThisInitialized(_this),
         } else {
+          _this.playReturnAnimation();
+
           _this.resetState();
-
-          _this.playReturnAnimation();
         }
@@ -662,3 +764,4 @@ }
               trailingFullSwipe: true,
-              triggerAction: true
+              triggerAction: true,
+              scaleTrailing: true
             });
@@ -669,6 +772,9 @@ } else if (_this.left > threshold) {
               trailingFullSwipe: false,
-              triggerAction: true
+              triggerAction: true,
+              scaleLeading: true
             });
           } else {
             _this.setState({
+              scaleLeading: false,
+              scaleTrailing: false,
               triggerAction: false
@@ -729,3 +835,5 @@ });
           leadingFullSwipe = _this$state2.leadingFullSwipe,
-          trailingFullSwipe = _this$state2.trailingFullSwipe;
+          trailingFullSwipe = _this$state2.trailingFullSwipe,
+          scaleLeading = _this$state2.scaleLeading,
+          scaleTrailing = _this$state2.scaleTrailing;
 
@@ -737,4 +845,7 @@ var _assertThisInitialize5 = _assertThisInitialized(_this),
 
+      var scaled = listType === Type.MS && (scaleLeading && type === 'leading' || scaleTrailing && type === 'trailing');
       return /*#__PURE__*/React.createElement("div", {
-        className: "swipeable-list-item__".concat(type, "-actions"),
+        className: clsx("swipeable-list-item__".concat(type, "-actions"), {
+          ["swipeable-list-item__".concat(type, "-actions--scaled")]: scaled
+        }),
         "data-testid": "".concat(type, "-actions"),
@@ -748,2 +859,4 @@ ref: binder
           onActionTriggered,
+          scaleLeading,
+          scaleTrailing,
           setLeadingFullSwipeAction,
@@ -884,43 +997,2 @@ setTrailingFullSwipeAction,
 
-function toVal(mix) {
-	var k, y, str='';
-
-	if (typeof mix === 'string' || typeof mix === 'number') {
-		str += mix;
-	} else if (typeof mix === 'object') {
-		if (Array.isArray(mix)) {
-			for (k=0; k < mix.length; k++) {
-				if (mix[k]) {
-					if (y = toVal(mix[k])) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			}
-		} else {
-			for (k in mix) {
-				if (mix[k]) {
-					str && (str += ' ');
-					str += k;
-				}
-			}
-		}
-	}
-
-	return str;
-}
-
-function clsx () {
-	var i=0, tmp, x, str='';
-	while (i < arguments.length) {
-		if (tmp = arguments[i++]) {
-			if (x = toVal(tmp)) {
-				str && (str += ' ');
-				str += x;
-			}
-		}
-	}
-	return str;
-}
-
 var SwipeAction = function SwipeAction(_ref) {
@@ -945,3 +1017,5 @@ var children = _ref.children,
       setTrailingFullSwipeAction = _React$useContext.setTrailingFullSwipeAction,
-      trailingFullSwipe = _React$useContext.trailingFullSwipe;
+      trailingFullSwipe = _React$useContext.trailingFullSwipe,
+      scaleLeading = _React$useContext.scaleLeading,
+      scaleTrailing = _React$useContext.scaleTrailing;
 
@@ -976,3 +1050,4 @@ var onHandleClick = React.useCallback(function () {
       'swipe-action__trailing--full-swipe-rest': trailing && trailingFullSwipe && !main && listType === Type.IOS,
-      'swipe-action__trailing--full-swipe-main': trailing && trailingFullSwipe && main && listType === Type.IOS
+      'swipe-action__trailing--full-swipe-main': trailing && trailingFullSwipe && main && listType === Type.IOS,
+      'swipe-action__grayed': listType === Type.MS && !(scaleLeading || scaleTrailing)
     }),
@@ -979,0 +1054,0 @@ onClick: onHandleClick

dist/react-swipeable-list.umd.js

@@ -198,2 +198,43 @@ (function (global, factory) {
 
+  function toVal(mix) {
+  	var k, y, str='';
+
+  	if (typeof mix === 'string' || typeof mix === 'number') {
+  		str += mix;
+  	} else if (typeof mix === 'object') {
+  		if (Array.isArray(mix)) {
+  			for (k=0; k < mix.length; k++) {
+  				if (mix[k]) {
+  					if (y = toVal(mix[k])) {
+  						str && (str += ' ');
+  						str += y;
+  					}
+  				}
+  			}
+  		} else {
+  			for (k in mix) {
+  				if (mix[k]) {
+  					str && (str += ' ');
+  					str += k;
+  				}
+  			}
+  		}
+  	}
+
+  	return str;
+  }
+
+  function clsx () {
+  	var i=0, tmp, x, str='';
+  	while (i < arguments.length) {
+  		if (tmp = arguments[i++]) {
+  			if (x = toVal(tmp)) {
+  				str && (str += ' ');
+  				str += x;
+  			}
+  		}
+  	}
+  	return str;
+  }
+
   var ItemContext = /*#__PURE__*/React__default['default'].createContext();
@@ -228,3 +269,5 @@ var ActionAnimation = {
     trailingFullSwipe: false,
-    triggerAction: false
+    triggerAction: false,
+    scaleLeading: false,
+    scaleTrailing: false
   };
@@ -379,38 +422,97 @@
 
+      _defineProperty(_assertThisInitialized(_this), "playReturnAnimationForLeadingActions", function (_ref2) {
+        var to = _ref2.to,
+            isIosType = _ref2.isIosType,
+            playMsReturnAnimation = _ref2.playMsReturnAnimation;
+
+        if (_this.leadingActionsElement) {
+          _this.leadingActionsElement.className = clsx('swipeable-list-item__leading-actions', playMsReturnAnimation ? 'swipeable-list-item__actions--return-ms' : 'swipeable-list-item__leading-actions--return');
+
+          if (_this.leadingActionsOpened && isIosType) {
+            _this.leadingActionsElement.className += ' test-actions-opened';
+          }
+
+          if (playMsReturnAnimation) {
+            var keepAnimationEnd = function keepAnimationEnd() {
+              _this.leadingActionsElement.removeEventListener('animationend', keepAnimationEnd);
+
+              _this.leadingActionsElement.style.width = 0;
+            };
+
+            _this.leadingActionsElement.addEventListener('animationend', keepAnimationEnd);
+          } else {
+            _this.leadingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.leadingActionsOpened && isIosType ? _this.leadingActionsWidth : 0, "px");
+          }
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "playReturnAnimationForTrailingActions", function (_ref3) {
+        var to = _ref3.to,
+            isIosType = _ref3.isIosType,
+            playMsReturnAnimation = _ref3.playMsReturnAnimation;
+
+        if (_this.trailingActionsElement) {
+          _this.trailingActionsElement.className = clsx('swipeable-list-item__trailing-actions', playMsReturnAnimation ? 'swipeable-list-item__actions--return-ms' : 'swipeable-list-item__trailing-actions--return');
+
+          if (_this.trailingActionsOpened && isIosType) {
+            _this.trailingActionsElement.className += ' test-actions-opened';
+          }
+
+          if (!playMsReturnAnimation) {
+            _this.trailingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.trailingActionsOpened && isIosType ? _this.trailingActionsWidth : 0, "px");
+          } else {
+            var keepAnimationEnd = function keepAnimationEnd() {
+              _this.trailingActionsElement.removeEventListener('animationend', keepAnimationEnd);
+
+              _this.trailingActionsElement.style.width = 0;
+            };
+
+            _this.trailingActionsElement.addEventListener('animationend', keepAnimationEnd);
+          }
+        }
+      });
+
       _defineProperty(_assertThisInitialized(_this), "playReturnAnimation", function () {
-        var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-            _ref2$to = _ref2.to,
-            to = _ref2$to === void 0 ? 0 : _ref2$to;
+        var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            _ref4$to = _ref4.to,
+            to = _ref4$to === void 0 ? 0 : _ref4$to;
 
         var _assertThisInitialize = _assertThisInitialized(_this),
-            leadingActionsElement = _assertThisInitialize.leadingActionsElement,
-            listElement = _assertThisInitialize.listElement,
-            trailingActionsElement = _assertThisInitialize.trailingActionsElement;
+            listElement = _assertThisInitialize.listElement;
 
         var listType = _this.props.listType;
+        var triggerAction = _this.state.triggerAction;
         var isIosType = listType === Type.IOS;
+        var isMsType = listType === Type.MS;
+        var playMsReturnAnimation = triggerAction && isMsType;
 
-        if (listElement) {
-          listElement.className = 'swipeable-list-item__content swipeable-list-item__content--return';
-          listElement.style.transform = "translateX(".concat(isIosType ? to : 0, "px)");
+        if (playMsReturnAnimation) {
+          var keepAnimationEnd = function keepAnimationEnd() {
+            listElement.removeEventListener('animationend', keepAnimationEnd);
+            listElement.style.transform = "translateX(0)";
+          };
+
+          listElement.addEventListener('animationend', keepAnimationEnd);
         }
 
-        if (leadingActionsElement) {
-          leadingActionsElement.className = 'swipeable-list-item__leading-actions swipeable-list-item__leading-actions--return';
+        if (listElement) {
+          listElement.className = clsx('swipeable-list-item__content', playMsReturnAnimation ? "swipeable-list-item__content--return-".concat(_this.left < 0 ? 'trailing' : 'leading', "-ms") : 'swipeable-list-item__content--return');
 
-          if (_this.leadingActionsOpened && isIosType) {
-            leadingActionsElement.className += ' test-actions-opened';
+          if (!playMsReturnAnimation) {
+            listElement.style.transform = "translateX(".concat(isIosType ? to : 0, "px)");
           }
-
-          leadingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.leadingActionsOpened && isIosType ? _this.leadingActionsWidth : 0, "px");
         }
 
-        if (trailingActionsElement) {
-          trailingActionsElement.className = 'swipeable-list-item__trailing-actions swipeable-list-item__trailing-actions--return';
-
-          if (_this.trailingActionsOpened && isIosType) {
-            trailingActionsElement.className += ' test-actions-opened';
-          }
-
-          trailingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.trailingActionsOpened && isIosType ? _this.trailingActionsWidth : 0, "px");
+        if (_this.left < 0) {
+          _this.playReturnAnimationForTrailingActions({
+            to,
+            isIosType,
+            playMsReturnAnimation
+          });
+        } else {
+          _this.playReturnAnimationForLeadingActions({
+            to,
+            isIosType,
+            playMsReturnAnimation
+          });
         }
@@ -457,4 +559,4 @@
 
-      _defineProperty(_assertThisInitialized(_this), "playActionAnimation", function (_ref3) {
-        var type = _ref3.type;
+      _defineProperty(_assertThisInitialized(_this), "playActionAnimation", function (_ref5) {
+        var type = _ref5.type;
 
@@ -518,5 +620,5 @@ var _assertThisInitialize3 = _assertThisInitialized(_this),
           } else {
+            _this.playReturnAnimation();
+
             _this.resetState();
-
-            _this.playReturnAnimation();
           }
@@ -670,3 +772,4 @@ }
                 trailingFullSwipe: true,
-                triggerAction: true
+                triggerAction: true,
+                scaleTrailing: true
               });
@@ -677,6 +780,9 @@ } else if (_this.left > threshold) {
                 trailingFullSwipe: false,
-                triggerAction: true
+                triggerAction: true,
+                scaleLeading: true
               });
             } else {
               _this.setState({
+                scaleLeading: false,
+                scaleTrailing: false,
                 triggerAction: false
@@ -737,3 +843,5 @@ });
             leadingFullSwipe = _this$state2.leadingFullSwipe,
-            trailingFullSwipe = _this$state2.trailingFullSwipe;
+            trailingFullSwipe = _this$state2.trailingFullSwipe,
+            scaleLeading = _this$state2.scaleLeading,
+            scaleTrailing = _this$state2.scaleTrailing;
 
@@ -745,4 +853,7 @@ var _assertThisInitialize5 = _assertThisInitialized(_this),
 
+        var scaled = listType === Type.MS && (scaleLeading && type === 'leading' || scaleTrailing && type === 'trailing');
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "swipeable-list-item__".concat(type, "-actions"),
+          className: clsx("swipeable-list-item__".concat(type, "-actions"), {
+            ["swipeable-list-item__".concat(type, "-actions--scaled")]: scaled
+          }),
           "data-testid": "".concat(type, "-actions"),
@@ -756,2 +867,4 @@ ref: binder
             onActionTriggered,
+            scaleLeading,
+            scaleTrailing,
             setLeadingFullSwipeAction,
@@ -892,43 +1005,2 @@ setTrailingFullSwipeAction,
 
-  function toVal(mix) {
-  	var k, y, str='';
-
-  	if (typeof mix === 'string' || typeof mix === 'number') {
-  		str += mix;
-  	} else if (typeof mix === 'object') {
-  		if (Array.isArray(mix)) {
-  			for (k=0; k < mix.length; k++) {
-  				if (mix[k]) {
-  					if (y = toVal(mix[k])) {
-  						str && (str += ' ');
-  						str += y;
-  					}
-  				}
-  			}
-  		} else {
-  			for (k in mix) {
-  				if (mix[k]) {
-  					str && (str += ' ');
-  					str += k;
-  				}
-  			}
-  		}
-  	}
-
-  	return str;
-  }
-
-  function clsx () {
-  	var i=0, tmp, x, str='';
-  	while (i < arguments.length) {
-  		if (tmp = arguments[i++]) {
-  			if (x = toVal(tmp)) {
-  				str && (str += ' ');
-  				str += x;
-  			}
-  		}
-  	}
-  	return str;
-  }
-
   var SwipeAction = function SwipeAction(_ref) {
@@ -953,3 +1025,5 @@ var children = _ref.children,
         setTrailingFullSwipeAction = _React$useContext.setTrailingFullSwipeAction,
-        trailingFullSwipe = _React$useContext.trailingFullSwipe;
+        trailingFullSwipe = _React$useContext.trailingFullSwipe,
+        scaleLeading = _React$useContext.scaleLeading,
+        scaleTrailing = _React$useContext.scaleTrailing;
 
@@ -984,3 +1058,4 @@ var onHandleClick = React__default['default'].useCallback(function () {
         'swipe-action__trailing--full-swipe-rest': trailing && trailingFullSwipe && !main && listType === Type.IOS,
-        'swipe-action__trailing--full-swipe-main': trailing && trailingFullSwipe && main && listType === Type.IOS
+        'swipe-action__trailing--full-swipe-main': trailing && trailingFullSwipe && main && listType === Type.IOS,
+        'swipe-action__grayed': listType === Type.MS && !(scaleLeading || scaleTrailing)
       }),
@@ -987,0 +1062,0 @@ onClick: onHandleClick

package.json

 {
   "name": "react-swipeable-list",
   "description": "Swipeable list component for React",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "author": {
@@ -57,2 +57,3 @@ "name": "Marek Rozmus",
     "eslint-plugin-react-hooks": "4.1.0",
+    "eslint-plugin-testing-library": "^3.10.1",
     "husky": "4.2.5",
@@ -59,0 +60,0 @@ "identity-obj-proxy": "3.0.0",

README.md

 <h1 align="center">react-swipeable-list</h1>
-<h4 align="center">A react component to render list with swipeable items.</h4>
+<h4 align="center">A configurable react component to render list with swipeable items.</h4>
 <p align="center">
@@ -21,3 +21,3 @@ <img src="docs/main.gif"></img>
 
-A react component to render list with swipeable items. Items can have one or more actions on left (leading) and right (trailing) swipe and different behaviour depending on props.
+A react component to render list with swipeable items. Items can have one or more actions on left (leading) and right (trailing) swipe and different behaviour depending on props. [See examples](#type)
 
@@ -108,3 +108,3 @@ ## Demo
 
-Type: `ListType (ANDROID | IOS)` (optional, deafult: `ANDROID`)
+Type: `ListType (ANDROID | IOS | MS)` (optional, deafult: `ANDROID`)
 
@@ -121,2 +121,6 @@ Changes behavior of swipeable items.
 
+#### `MS`
+
+<img src="docs/ms.gif"></img>
+
 ### Tag
@@ -123,0 +127,0 @@

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

123290

increased by10.41%

Lines of code

2889

increased by10.99%

Number of lines in readme file

222

increased by1.83%

Worsened metrics

Dev dependency count

34

increased by3.03%

No dependency changes