react-swipeable-list - npm Package Compare versions

Comparing version 0.0.3 to 1.0.0

dist/react-swipeable-list.cjs.js

@@ -6,2 +6,3 @@ 'use strict';
 var React = require('react');
+var PropTypes = require('prop-types');
 
@@ -11,2 +12,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
@@ -36,5 +38,5 @@ var LeadingActions = function LeadingActions(_ref) {
 var Type = {
+  ANDROID: Symbol('ANDROID'),
   IOS: Symbol('IOS'),
-  MS: Symbol('MS'),
-  ANDROID: Symbol('ANDROID')
+  MS: Symbol('MS')
 };
@@ -72,2 +74,14 @@
 
+SwipeableList.propTypes = {
+  children: PropTypes__default['default'].node,
+  fullSwipe: PropTypes__default['default'].bool,
+  destructiveCallbackDelay: PropTypes__default['default'].number,
+  style: PropTypes__default['default'].object,
+  type: PropTypes__default['default'].oneOf(Object.values(Type)),
+  Tag: PropTypes__default['default'].string,
+  scrollStartThreshold: PropTypes__default['default'].number,
+  swipeStartThreshold: PropTypes__default['default'].number,
+  threshold: PropTypes__default['default'].number
+};
+
 function _classCallCheck(instance, Constructor) {
@@ -388,2 +402,7 @@ if (!(instance instanceof Constructor)) {
         leadingActionsElement.className = 'swipeable-list-item__leading-actions swipeable-list-item__leading-actions--return';
+
+        if (_this.leadingActionsOpened && isIosType) {
+          leadingActionsElement.className += ' test-actions-opened';
+        }
+
         leadingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.leadingActionsOpened && isIosType ? _this.leadingActionsWidth : 0, "px");
@@ -394,2 +413,7 @@ }
         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");
@@ -401,2 +425,4 @@ }
         _this.trailingActionsOpened = false;
+
+        _this.resetState();
       }
@@ -465,3 +491,8 @@ });
             triggerAction = _this$state.triggerAction;
+        var onSwipeEnd = _this.props.onSwipeEnd;
 
+        if (onSwipeEnd) {
+          onSwipeEnd();
+        }
+
         if (triggerAction) {
@@ -496,6 +527,2 @@ if (leadingFullSwipe) {
         }
-
-        if (_this.props.onSwipeEnd) {
-          _this.props.onSwipeEnd();
-        }
       }
@@ -629,27 +656,2 @@ });
 
-      if (fullSwipe) {
-        var _assertThisInitialize4 = _assertThisInitialized(_this),
-            offsetWidth = _assertThisInitialize4.listElement.offsetWidth;
-
-        var threshold = offsetWidth * fullSwipeThreshold;
-
-        if (_this.left < -threshold) {
-          _this.setState({
-            leadingFullSwipe: false,
-            trailingFullSwipe: true,
-            triggerAction: true
-          });
-        } else if (_this.left > threshold) {
-          _this.setState({
-            leadingFullSwipe: true,
-            trailingFullSwipe: false,
-            triggerAction: true
-          });
-        } else {
-          _this.setState({
-            triggerAction: false
-          });
-        }
-      }
-
       if (_this.leadingActionsElement) {
@@ -664,2 +666,27 @@ _this.leadingActionsElement.style.width = "".concat(_this.left < 0 ? 0 : _this.left, "px");
       if (_this.listElement) {
+        if (fullSwipe) {
+          var _assertThisInitialize4 = _assertThisInitialized(_this),
+              offsetWidth = _assertThisInitialize4.listElement.offsetWidth;
+
+          var threshold = offsetWidth * fullSwipeThreshold;
+
+          if (_this.left < -threshold) {
+            _this.setState({
+              leadingFullSwipe: false,
+              trailingFullSwipe: true,
+              triggerAction: true
+            });
+          } else if (_this.left > threshold) {
+            _this.setState({
+              leadingFullSwipe: true,
+              trailingFullSwipe: false,
+              triggerAction: true
+            });
+          } else {
+            _this.setState({
+              triggerAction: false
+            });
+          }
+        }
+
         _this.listElement.style.transform = "translateX(".concat(_this.left, "px)");
@@ -724,2 +751,3 @@
         className: "swipeable-list-item__".concat(type, "-actions"),
+        "data-testid": "".concat(type, "-actions"),
         ref: binder
@@ -838,6 +866,7 @@ }, /*#__PURE__*/React__default['default'].createElement(ItemContext.Provider, {
       return /*#__PURE__*/React__default['default'].createElement("div", {
-        ref: this.bindWrapperElement,
-        className: "swipeable-list-item"
+        className: "swipeable-list-item",
+        ref: this.bindWrapperElement
       }, leadingActions && this.renderActions(leadingActions, 'leading', this.bindLeadingActionsElement), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "swipeable-list-item__content",
+        "data-testid": "content",
         ref: this.bindListElement
@@ -851,2 +880,18 @@ }, children), trailingActions && this.renderActions(trailingActions, 'trailing', this.bindTrailingActionsElement));
 
+SwipeableListItem.propTypes = {
+  blockSwipe: PropTypes__default['default'].bool,
+  children: PropTypes__default['default'].node,
+  destructiveCallbackDelay: PropTypes__default['default'].number,
+  fullSwipe: PropTypes__default['default'].bool,
+  leadingActions: PropTypes__default['default'].node,
+  listType: PropTypes__default['default'].oneOf(Object.values(Type)),
+  onSwipeEnd: PropTypes__default['default'].func,
+  onSwipeProgress: PropTypes__default['default'].func,
+  onSwipeStart: PropTypes__default['default'].func,
+  scrollStartThreshold: PropTypes__default['default'].number,
+  swipeStartThreshold: PropTypes__default['default'].number,
+  threshold: PropTypes__default['default'].number,
+  trailingActions: PropTypes__default['default'].node
+};
+
 function toVal(mix) {
@@ -948,2 +993,12 @@ var k, y, str='';
 
+SwipeAction.propTypes = {
+  children: PropTypes__default['default'].node.isRequired,
+  destructive: PropTypes__default['default'].bool,
+  main: PropTypes__default['default'].bool,
+  leading: PropTypes__default['default'].bool,
+  onClick: PropTypes__default['default'].func.isRequired,
+  trailing: PropTypes__default['default'].bool,
+  Tag: PropTypes__default['default'].string
+};
+
 var TrailingActions = function TrailingActions(_ref) {
@@ -950,0 +1005,0 @@ var children = _ref.children;

dist/react-swipeable-list.esm.js

 import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
@@ -26,5 +27,5 @@ var LeadingActions = function LeadingActions(_ref) {
 var Type = {
+  ANDROID: Symbol('ANDROID'),
   IOS: Symbol('IOS'),
-  MS: Symbol('MS'),
-  ANDROID: Symbol('ANDROID')
+  MS: Symbol('MS')
 };
@@ -62,2 +63,14 @@
 
+SwipeableList.propTypes = {
+  children: PropTypes.node,
+  fullSwipe: PropTypes.bool,
+  destructiveCallbackDelay: PropTypes.number,
+  style: PropTypes.object,
+  type: PropTypes.oneOf(Object.values(Type)),
+  Tag: PropTypes.string,
+  scrollStartThreshold: PropTypes.number,
+  swipeStartThreshold: PropTypes.number,
+  threshold: PropTypes.number
+};
+
 function _classCallCheck(instance, Constructor) {
@@ -378,2 +391,7 @@ if (!(instance instanceof Constructor)) {
         leadingActionsElement.className = 'swipeable-list-item__leading-actions swipeable-list-item__leading-actions--return';
+
+        if (_this.leadingActionsOpened && isIosType) {
+          leadingActionsElement.className += ' test-actions-opened';
+        }
+
         leadingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.leadingActionsOpened && isIosType ? _this.leadingActionsWidth : 0, "px");
@@ -384,2 +402,7 @@ }
         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");
@@ -391,2 +414,4 @@ }
         _this.trailingActionsOpened = false;
+
+        _this.resetState();
       }
@@ -455,3 +480,8 @@ });
             triggerAction = _this$state.triggerAction;
+        var onSwipeEnd = _this.props.onSwipeEnd;
 
+        if (onSwipeEnd) {
+          onSwipeEnd();
+        }
+
         if (triggerAction) {
@@ -486,6 +516,2 @@ if (leadingFullSwipe) {
         }
-
-        if (_this.props.onSwipeEnd) {
-          _this.props.onSwipeEnd();
-        }
       }
@@ -619,27 +645,2 @@ });
 
-      if (fullSwipe) {
-        var _assertThisInitialize4 = _assertThisInitialized(_this),
-            offsetWidth = _assertThisInitialize4.listElement.offsetWidth;
-
-        var threshold = offsetWidth * fullSwipeThreshold;
-
-        if (_this.left < -threshold) {
-          _this.setState({
-            leadingFullSwipe: false,
-            trailingFullSwipe: true,
-            triggerAction: true
-          });
-        } else if (_this.left > threshold) {
-          _this.setState({
-            leadingFullSwipe: true,
-            trailingFullSwipe: false,
-            triggerAction: true
-          });
-        } else {
-          _this.setState({
-            triggerAction: false
-          });
-        }
-      }
-
       if (_this.leadingActionsElement) {
@@ -654,2 +655,27 @@ _this.leadingActionsElement.style.width = "".concat(_this.left < 0 ? 0 : _this.left, "px");
       if (_this.listElement) {
+        if (fullSwipe) {
+          var _assertThisInitialize4 = _assertThisInitialized(_this),
+              offsetWidth = _assertThisInitialize4.listElement.offsetWidth;
+
+          var threshold = offsetWidth * fullSwipeThreshold;
+
+          if (_this.left < -threshold) {
+            _this.setState({
+              leadingFullSwipe: false,
+              trailingFullSwipe: true,
+              triggerAction: true
+            });
+          } else if (_this.left > threshold) {
+            _this.setState({
+              leadingFullSwipe: true,
+              trailingFullSwipe: false,
+              triggerAction: true
+            });
+          } else {
+            _this.setState({
+              triggerAction: false
+            });
+          }
+        }
+
         _this.listElement.style.transform = "translateX(".concat(_this.left, "px)");
@@ -714,2 +740,3 @@
         className: "swipeable-list-item__".concat(type, "-actions"),
+        "data-testid": "".concat(type, "-actions"),
         ref: binder
@@ -828,6 +855,7 @@ }, /*#__PURE__*/React.createElement(ItemContext.Provider, {
       return /*#__PURE__*/React.createElement("div", {
-        ref: this.bindWrapperElement,
-        className: "swipeable-list-item"
+        className: "swipeable-list-item",
+        ref: this.bindWrapperElement
       }, leadingActions && this.renderActions(leadingActions, 'leading', this.bindLeadingActionsElement), /*#__PURE__*/React.createElement("div", {
         className: "swipeable-list-item__content",
+        "data-testid": "content",
         ref: this.bindListElement
@@ -841,2 +869,18 @@ }, children), trailingActions && this.renderActions(trailingActions, 'trailing', this.bindTrailingActionsElement));
 
+SwipeableListItem.propTypes = {
+  blockSwipe: PropTypes.bool,
+  children: PropTypes.node,
+  destructiveCallbackDelay: PropTypes.number,
+  fullSwipe: PropTypes.bool,
+  leadingActions: PropTypes.node,
+  listType: PropTypes.oneOf(Object.values(Type)),
+  onSwipeEnd: PropTypes.func,
+  onSwipeProgress: PropTypes.func,
+  onSwipeStart: PropTypes.func,
+  scrollStartThreshold: PropTypes.number,
+  swipeStartThreshold: PropTypes.number,
+  threshold: PropTypes.number,
+  trailingActions: PropTypes.node
+};
+
 function toVal(mix) {
@@ -938,2 +982,12 @@ var k, y, str='';
 
+SwipeAction.propTypes = {
+  children: PropTypes.node.isRequired,
+  destructive: PropTypes.bool,
+  main: PropTypes.bool,
+  leading: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  trailing: PropTypes.bool,
+  Tag: PropTypes.string
+};
+
 var TrailingActions = function TrailingActions(_ref) {
@@ -940,0 +994,0 @@ var children = _ref.children;

dist/react-swipeable-list.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-swipeable-list'] = {}, global.React));
-}(this, (function (exports, React) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-swipeable-list'] = {}, global.React, global.PropTypes));
+}(this, (function (exports, React, PropTypes) { 'use strict';
 
@@ -10,2 +10,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
@@ -35,5 +36,5 @@ var LeadingActions = function LeadingActions(_ref) {
   var Type = {
+    ANDROID: Symbol('ANDROID'),
     IOS: Symbol('IOS'),
-    MS: Symbol('MS'),
-    ANDROID: Symbol('ANDROID')
+    MS: Symbol('MS')
   };
@@ -71,2 +72,14 @@
 
+  SwipeableList.propTypes = {
+    children: PropTypes__default['default'].node,
+    fullSwipe: PropTypes__default['default'].bool,
+    destructiveCallbackDelay: PropTypes__default['default'].number,
+    style: PropTypes__default['default'].object,
+    type: PropTypes__default['default'].oneOf(Object.values(Type)),
+    Tag: PropTypes__default['default'].string,
+    scrollStartThreshold: PropTypes__default['default'].number,
+    swipeStartThreshold: PropTypes__default['default'].number,
+    threshold: PropTypes__default['default'].number
+  };
+
   function _classCallCheck(instance, Constructor) {
@@ -387,2 +400,7 @@ if (!(instance instanceof Constructor)) {
           leadingActionsElement.className = 'swipeable-list-item__leading-actions swipeable-list-item__leading-actions--return';
+
+          if (_this.leadingActionsOpened && isIosType) {
+            leadingActionsElement.className += ' test-actions-opened';
+          }
+
           leadingActionsElement.style.width = "".concat(to === 0 || !isIosType ? 0 : _this.leadingActionsOpened && isIosType ? _this.leadingActionsWidth : 0, "px");
@@ -393,2 +411,7 @@ }
           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");
@@ -400,2 +423,4 @@ }
           _this.trailingActionsOpened = false;
+
+          _this.resetState();
         }
@@ -464,3 +489,8 @@ });
               triggerAction = _this$state.triggerAction;
+          var onSwipeEnd = _this.props.onSwipeEnd;
 
+          if (onSwipeEnd) {
+            onSwipeEnd();
+          }
+
           if (triggerAction) {
@@ -495,6 +525,2 @@ if (leadingFullSwipe) {
           }
-
-          if (_this.props.onSwipeEnd) {
-            _this.props.onSwipeEnd();
-          }
         }
@@ -628,27 +654,2 @@ });
 
-        if (fullSwipe) {
-          var _assertThisInitialize4 = _assertThisInitialized(_this),
-              offsetWidth = _assertThisInitialize4.listElement.offsetWidth;
-
-          var threshold = offsetWidth * fullSwipeThreshold;
-
-          if (_this.left < -threshold) {
-            _this.setState({
-              leadingFullSwipe: false,
-              trailingFullSwipe: true,
-              triggerAction: true
-            });
-          } else if (_this.left > threshold) {
-            _this.setState({
-              leadingFullSwipe: true,
-              trailingFullSwipe: false,
-              triggerAction: true
-            });
-          } else {
-            _this.setState({
-              triggerAction: false
-            });
-          }
-        }
-
         if (_this.leadingActionsElement) {
@@ -663,2 +664,27 @@ _this.leadingActionsElement.style.width = "".concat(_this.left < 0 ? 0 : _this.left, "px");
         if (_this.listElement) {
+          if (fullSwipe) {
+            var _assertThisInitialize4 = _assertThisInitialized(_this),
+                offsetWidth = _assertThisInitialize4.listElement.offsetWidth;
+
+            var threshold = offsetWidth * fullSwipeThreshold;
+
+            if (_this.left < -threshold) {
+              _this.setState({
+                leadingFullSwipe: false,
+                trailingFullSwipe: true,
+                triggerAction: true
+              });
+            } else if (_this.left > threshold) {
+              _this.setState({
+                leadingFullSwipe: true,
+                trailingFullSwipe: false,
+                triggerAction: true
+              });
+            } else {
+              _this.setState({
+                triggerAction: false
+              });
+            }
+          }
+
           _this.listElement.style.transform = "translateX(".concat(_this.left, "px)");
@@ -723,2 +749,3 @@
           className: "swipeable-list-item__".concat(type, "-actions"),
+          "data-testid": "".concat(type, "-actions"),
           ref: binder
@@ -837,6 +864,7 @@ }, /*#__PURE__*/React__default['default'].createElement(ItemContext.Provider, {
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          ref: this.bindWrapperElement,
-          className: "swipeable-list-item"
+          className: "swipeable-list-item",
+          ref: this.bindWrapperElement
         }, leadingActions && this.renderActions(leadingActions, 'leading', this.bindLeadingActionsElement), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "swipeable-list-item__content",
+          "data-testid": "content",
           ref: this.bindListElement
@@ -850,2 +878,18 @@ }, children), trailingActions && this.renderActions(trailingActions, 'trailing', this.bindTrailingActionsElement));
 
+  SwipeableListItem.propTypes = {
+    blockSwipe: PropTypes__default['default'].bool,
+    children: PropTypes__default['default'].node,
+    destructiveCallbackDelay: PropTypes__default['default'].number,
+    fullSwipe: PropTypes__default['default'].bool,
+    leadingActions: PropTypes__default['default'].node,
+    listType: PropTypes__default['default'].oneOf(Object.values(Type)),
+    onSwipeEnd: PropTypes__default['default'].func,
+    onSwipeProgress: PropTypes__default['default'].func,
+    onSwipeStart: PropTypes__default['default'].func,
+    scrollStartThreshold: PropTypes__default['default'].number,
+    swipeStartThreshold: PropTypes__default['default'].number,
+    threshold: PropTypes__default['default'].number,
+    trailingActions: PropTypes__default['default'].node
+  };
+
   function toVal(mix) {
@@ -947,2 +991,12 @@ var k, y, str='';
 
+  SwipeAction.propTypes = {
+    children: PropTypes__default['default'].node.isRequired,
+    destructive: PropTypes__default['default'].bool,
+    main: PropTypes__default['default'].bool,
+    leading: PropTypes__default['default'].bool,
+    onClick: PropTypes__default['default'].func.isRequired,
+    trailing: PropTypes__default['default'].bool,
+    Tag: PropTypes__default['default'].string
+  };
+
   var TrailingActions = function TrailingActions(_ref) {
@@ -949,0 +1003,0 @@ var children = _ref.children;

package.json

 {
   "name": "react-swipeable-list",
   "description": "Swipeable list component for React",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "author": {
@@ -6,0 +6,0 @@ "name": "Marek Rozmus",

README.md

@@ -15,2 +15,6 @@ <h1 align="center">react-swipeable-list</h1>
 
+[![Actions Status](https://github.com/marekrozmus/react-swipeable-list/workflows/Node.js%20CI/badge.svg)](https://github.com/marekrozmus/react-swipeable-list/actions)
+[![codecov](https://codecov.io/gh/marekrozmus/react-swipeable-list/branch/main/graph/badge.svg?token=8P4356I2J0)](https://codecov.io/gh/marekrozmus/react-swipeable-list)
+![GitHub Release Date](https://img.shields.io/github/release-date/marekrozmus/react-swipeable-list)
+
 ## React Swipeable List component
@@ -24,2 +28,4 @@
 
+[![Edit react-swipeable-list](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/marekrozmus/react-swipeable-list/tree/main/examples)
+
 ## Installation
@@ -26,0 +32,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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111585

increased by6.47%

Lines of code

2603

increased by5.64%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

218

increased by2.83%

No dependency changes