rc-swipeout - npm Package Compare versions

Comparing version 1.4.4 to 1.4.5-alpha.0

es/Swipeout.d.ts

@@ -22,15 +22,15 @@ /// <reference types="react" />
     btnsRightWidth: number;
-    panStartX: number;
-    panStartY: number;
     swiping: boolean;
+    needShowLeft: boolean;
+    needShowRight: boolean;
     constructor(props: any);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    onCloseSwipe(ev: any): void;
-    onPanStart(e: any): void;
-    onPan(e: any): void;
-    onPanEnd(e: any): void;
+    onCloseSwipe: (ev: any) => void;
+    onPanStart: (e: any) => void;
+    onPan: (e: any) => void;
+    onPanEnd: (e: any) => void;
     onBtnClick(ev: any, btn: any): void;
     _getContentEasing(value: any, limit: any): any;
-    _setStyle(value: any): void;
+    _setStyle: (value: any) => void;
     open(value: any, openedLeft: any, openedRight: any): void;
@@ -37,0 +37,0 @@ close(): void;

es/Swipeout.js

@@ -17,3 +17,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import Hammer from 'rc-hammerjs';
-import omit from 'object.omit';
+import omit from 'omit.js';
 
@@ -28,32 +28,7 @@ var Swipeout = function (_React$Component) {
 
-        _this.onPanStart = _this.onPanStart.bind(_this);
-        _this.onPan = _this.onPan.bind(_this);
-        _this.onPanEnd = _this.onPanEnd.bind(_this);
-        _this.onCloseSwipe = _this.onCloseSwipe.bind(_this);
-        _this.openedLeft = false;
-        _this.openedRight = false;
-        return _this;
-    }
-
-    _createClass(Swipeout, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
-            this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0;
-            this.btnsRightWidth = this.right ? this.right.offsetWidth : 0;
-            document.body.addEventListener('touchstart', this.onCloseSwipe, true);
-        }
-    }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-            document.body.removeEventListener('touchstart', this.onCloseSwipe, true);
-        }
-    }, {
-        key: 'onCloseSwipe',
-        value: function onCloseSwipe(ev) {
-            var _this2 = this;
-
-            if (this.openedLeft || this.openedRight) {
+        _this.onCloseSwipe = function (ev) {
+            if (_this.openedLeft || _this.openedRight) {
                 var pNode = function (node) {
                     while (node.parentNode && node.parentNode !== document.body) {
-                        if (node.className.indexOf(_this2.props.prefixCls + '-actions') > -1) {
+                        if (node.className.indexOf(_this.props.prefixCls + '-actions') > -1) {
                             return node;
@@ -66,58 +41,99 @@ }
                     ev.preventDefault();
-                    this.close();
+                    _this.close();
                 }
             }
-        }
-    }, {
-        key: 'onPanStart',
-        value: function onPanStart(e) {
-            this.panStartX = e.deltaX;
-            this.panStartY = e.deltaY;
-        }
-    }, {
-        key: 'onPan',
-        value: function onPan(e) {
-            var posX = e.deltaX - this.panStartX;
-            var posY = e.deltaY - this.panStartY;
-            if (Math.abs(posX) <= Math.abs(posY)) {
+        };
+        _this.onPanStart = function (e) {
+            var direction = e.direction,
+                deltaX = e.deltaX;
+            // http://hammerjs.github.io/api/#directions
+
+            var isLeft = direction === 2;
+            var isRight = direction === 4;
+            if (!isLeft && !isRight) {
                 return;
             }
-            var _props = this.props,
-                left = _props.left,
-                right = _props.right;
+            var _this$props = _this.props,
+                left = _this$props.left,
+                right = _this$props.right;
 
-            if (posX < 0 && right.length) {
-                this.swiping = true;
-                this._setStyle(Math.min(posX, 0));
-            } else if (posX > 0 && left.length) {
-                this.swiping = true;
-                this._setStyle(Math.max(posX, 0));
+            _this.needShowRight = isLeft && right.length > 0;
+            _this.needShowLeft = isRight && left.length > 0;
+            if (_this.left) {
+                _this.left.style.visibility = _this.needShowRight ? 'hidden' : 'visible';
             }
-        }
-    }, {
-        key: 'onPanEnd',
-        value: function onPanEnd(e) {
-            if (!this.swiping) {
+            if (_this.right) {
+                _this.right.style.visibility = _this.needShowLeft ? 'hidden' : 'visible';
+            }
+            if (_this.needShowLeft || _this.needShowRight) {
+                _this.swiping = true;
+                _this._setStyle(deltaX);
+            }
+        };
+        _this.onPan = function (e) {
+            var deltaX = e.deltaX;
+
+            if (!_this.swiping) {
                 return;
             }
-            this.swiping = false;
-            var _props2 = this.props,
-                _props2$left = _props2.left,
-                left = _props2$left === undefined ? [] : _props2$left,
-                _props2$right = _props2.right,
-                right = _props2$right === undefined ? [] : _props2$right;
+            _this._setStyle(deltaX);
+        };
+        _this.onPanEnd = function (e) {
+            if (!_this.swiping) {
+                return;
+            }
+            var _this$props2 = _this.props,
+                _this$props2$left = _this$props2.left,
+                left = _this$props2$left === undefined ? [] : _this$props2$left,
+                _this$props2$right = _this$props2.right,
+                right = _this$props2$right === undefined ? [] : _this$props2$right;
 
-            var btnsLeftWidth = this.btnsLeftWidth;
-            var btnsRightWidth = this.btnsRightWidth;
-            var posX = e.deltaX - this.panStartX;
-            var openLeft = posX > btnsLeftWidth / 2;
-            var openRight = posX < -btnsRightWidth / 2;
-            if (openRight && posX < 0 && right.length) {
-                this.open(-btnsRightWidth, false, true);
-            } else if (openLeft && posX > 0 && left.length) {
-                this.open(btnsLeftWidth, true, false);
+            var btnsLeftWidth = _this.btnsLeftWidth;
+            var btnsRightWidth = _this.btnsRightWidth;
+            var direction = e.direction,
+                deltaX = e.deltaX;
+            // http://hammerjs.github.io/api/#directions
+
+            var isLeft = direction === 2;
+            var isRight = direction === 4;
+            var needOpenRight = _this.needShowRight && Math.abs(deltaX) > btnsRightWidth / 2;
+            var needOpenLeft = _this.needShowLeft && Math.abs(deltaX) > btnsRightWidth / 2;
+            if (needOpenRight) {
+                _this.open(-btnsRightWidth, false, true);
+            } else if (needOpenLeft) {
+                _this.open(btnsLeftWidth, true, false);
             } else {
-                this.close();
+                _this.close();
             }
+            _this.swiping = false;
+            _this.needShowLeft = false;
+            _this.needShowRight = false;
+        };
+        // set content & actions style
+        _this._setStyle = function (value) {
+            var limit = value > 0 ? _this.btnsLeftWidth : -_this.btnsRightWidth;
+            var contentLeft = _this._getContentEasing(value, limit);
+            _this.content.style.left = contentLeft + 'px';
+            if (_this.cover) {
+                _this.cover.style.display = Math.abs(value) > 0 ? 'block' : 'none';
+                _this.cover.style.left = contentLeft + 'px';
+            }
+        };
+        _this.openedLeft = false;
+        _this.openedRight = false;
+        return _this;
+    }
+
+    _createClass(Swipeout, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0;
+            this.btnsRightWidth = this.right ? this.right.offsetWidth : 0;
+            document.body.addEventListener('touchstart', this.onCloseSwipe, true);
         }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            document.body.removeEventListener('touchstart', this.onCloseSwipe, true);
+        }
         // left & right button click
@@ -140,23 +156,12 @@
             // limit content style left when value > actions width
-            if (value < 0 && value < limit) {
-                return limit - Math.pow(limit - value, 0.85);
-            } else if (value > 0 && value > limit) {
-                return limit + Math.pow(value - limit, 0.85);
+            var delta = Math.abs(value) - Math.abs(limit);
+            var isOverflow = delta > 0;
+            var factor = limit > 0 ? 1 : -1;
+            if (isOverflow) {
+                value = limit + Math.pow(delta, 0.85) * factor;
+                return Math.abs(value) > Math.abs(limit) ? limit : value;
             }
             return value;
         }
-        // set content & actions style
-
     }, {
-        key: '_setStyle',
-        value: function _setStyle(value) {
-            var limit = value > 0 ? this.btnsLeftWidth : -this.btnsRightWidth;
-            var contentLeft = this._getContentEasing(value, limit);
-            this.content.style.left = contentLeft + 'px';
-            if (this.cover) {
-                this.cover.style.display = Math.abs(value) > 0 ? 'block' : 'none';
-                this.cover.style.left = contentLeft + 'px';
-            }
-        }
-    }, {
         key: 'open',
@@ -184,3 +189,3 @@ value: function open(value, openedLeft, openedRight) {
         value: function renderButtons(buttons, _ref) {
-            var _this3 = this;
+            var _this2 = this;
 
@@ -191,3 +196,3 @@ var prefixCls = this.props.prefixCls;
                 { className: prefixCls + '-actions ' + prefixCls + '-actions-' + _ref, ref: function ref(el) {
-                        return _this3[_ref] = ReactDOM.findDOMNode(el);
+                        return _this2[_ref] = ReactDOM.findDOMNode(el);
                     } },
@@ -198,3 +203,3 @@ buttons.map(function (btn, i) {
                         { key: i, className: prefixCls + '-btn ' + (btn.hasOwnProperty('className') ? btn.className : ''), style: btn.style, role: 'button', onClick: function onClick(e) {
-                                return _this3.onBtnClick(e, btn);
+                                return _this2.onBtnClick(e, btn);
                             } },
@@ -213,3 +218,3 @@ React.createElement(
         value: function render() {
-            var _this4 = this;
+            var _this3 = this;
 
@@ -226,3 +231,3 @@ var _a = this.props,
                 ref: function ref(el) {
-                    return _this4.content = ReactDOM.findDOMNode(el);
+                    return _this3.content = ReactDOM.findDOMNode(el);
                 }
@@ -234,3 +239,3 @@ };
                 React.createElement('div', { className: prefixCls + '-cover', ref: function ref(el) {
-                        return _this4.cover = ReactDOM.findDOMNode(el);
+                        return _this3.cover = ReactDOM.findDOMNode(el);
                     } }),
@@ -237,0 +242,0 @@ this.renderButtons(left, 'left'),

lib/Swipeout.d.ts

@@ -22,15 +22,15 @@ /// <reference types="react" />
     btnsRightWidth: number;
-    panStartX: number;
-    panStartY: number;
     swiping: boolean;
+    needShowLeft: boolean;
+    needShowRight: boolean;
     constructor(props: any);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    onCloseSwipe(ev: any): void;
-    onPanStart(e: any): void;
-    onPan(e: any): void;
-    onPanEnd(e: any): void;
+    onCloseSwipe: (ev: any) => void;
+    onPanStart: (e: any) => void;
+    onPan: (e: any) => void;
+    onPanEnd: (e: any) => void;
     onBtnClick(ev: any, btn: any): void;
     _getContentEasing(value: any, limit: any): any;
-    _setStyle(value: any): void;
+    _setStyle: (value: any) => void;
     open(value: any, openedLeft: any, openedRight: any): void;
@@ -37,0 +37,0 @@ close(): void;

lib/Swipeout.js

@@ -39,5 +39,5 @@ 'use strict';
 
-var _object = require('object.omit');
+var _omit = require('omit.js');
 
-var _object2 = _interopRequireDefault(_object);
+var _omit2 = _interopRequireDefault(_omit);
 
@@ -63,32 +63,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-        _this.onPanStart = _this.onPanStart.bind(_this);
-        _this.onPan = _this.onPan.bind(_this);
-        _this.onPanEnd = _this.onPanEnd.bind(_this);
-        _this.onCloseSwipe = _this.onCloseSwipe.bind(_this);
-        _this.openedLeft = false;
-        _this.openedRight = false;
-        return _this;
-    }
-
-    (0, _createClass3['default'])(Swipeout, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
-            this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0;
-            this.btnsRightWidth = this.right ? this.right.offsetWidth : 0;
-            document.body.addEventListener('touchstart', this.onCloseSwipe, true);
-        }
-    }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-            document.body.removeEventListener('touchstart', this.onCloseSwipe, true);
-        }
-    }, {
-        key: 'onCloseSwipe',
-        value: function onCloseSwipe(ev) {
-            var _this2 = this;
-
-            if (this.openedLeft || this.openedRight) {
+        _this.onCloseSwipe = function (ev) {
+            if (_this.openedLeft || _this.openedRight) {
                 var pNode = function (node) {
                     while (node.parentNode && node.parentNode !== document.body) {
-                        if (node.className.indexOf(_this2.props.prefixCls + '-actions') > -1) {
+                        if (node.className.indexOf(_this.props.prefixCls + '-actions') > -1) {
                             return node;
@@ -101,58 +76,99 @@ }
                     ev.preventDefault();
-                    this.close();
+                    _this.close();
                 }
             }
-        }
-    }, {
-        key: 'onPanStart',
-        value: function onPanStart(e) {
-            this.panStartX = e.deltaX;
-            this.panStartY = e.deltaY;
-        }
-    }, {
-        key: 'onPan',
-        value: function onPan(e) {
-            var posX = e.deltaX - this.panStartX;
-            var posY = e.deltaY - this.panStartY;
-            if (Math.abs(posX) <= Math.abs(posY)) {
+        };
+        _this.onPanStart = function (e) {
+            var direction = e.direction,
+                deltaX = e.deltaX;
+            // http://hammerjs.github.io/api/#directions
+
+            var isLeft = direction === 2;
+            var isRight = direction === 4;
+            if (!isLeft && !isRight) {
                 return;
             }
-            var _props = this.props,
-                left = _props.left,
-                right = _props.right;
+            var _this$props = _this.props,
+                left = _this$props.left,
+                right = _this$props.right;
 
-            if (posX < 0 && right.length) {
-                this.swiping = true;
-                this._setStyle(Math.min(posX, 0));
-            } else if (posX > 0 && left.length) {
-                this.swiping = true;
-                this._setStyle(Math.max(posX, 0));
+            _this.needShowRight = isLeft && right.length > 0;
+            _this.needShowLeft = isRight && left.length > 0;
+            if (_this.left) {
+                _this.left.style.visibility = _this.needShowRight ? 'hidden' : 'visible';
             }
-        }
-    }, {
-        key: 'onPanEnd',
-        value: function onPanEnd(e) {
-            if (!this.swiping) {
+            if (_this.right) {
+                _this.right.style.visibility = _this.needShowLeft ? 'hidden' : 'visible';
+            }
+            if (_this.needShowLeft || _this.needShowRight) {
+                _this.swiping = true;
+                _this._setStyle(deltaX);
+            }
+        };
+        _this.onPan = function (e) {
+            var deltaX = e.deltaX;
+
+            if (!_this.swiping) {
                 return;
             }
-            this.swiping = false;
-            var _props2 = this.props,
-                _props2$left = _props2.left,
-                left = _props2$left === undefined ? [] : _props2$left,
-                _props2$right = _props2.right,
-                right = _props2$right === undefined ? [] : _props2$right;
+            _this._setStyle(deltaX);
+        };
+        _this.onPanEnd = function (e) {
+            if (!_this.swiping) {
+                return;
+            }
+            var _this$props2 = _this.props,
+                _this$props2$left = _this$props2.left,
+                left = _this$props2$left === undefined ? [] : _this$props2$left,
+                _this$props2$right = _this$props2.right,
+                right = _this$props2$right === undefined ? [] : _this$props2$right;
 
-            var btnsLeftWidth = this.btnsLeftWidth;
-            var btnsRightWidth = this.btnsRightWidth;
-            var posX = e.deltaX - this.panStartX;
-            var openLeft = posX > btnsLeftWidth / 2;
-            var openRight = posX < -btnsRightWidth / 2;
-            if (openRight && posX < 0 && right.length) {
-                this.open(-btnsRightWidth, false, true);
-            } else if (openLeft && posX > 0 && left.length) {
-                this.open(btnsLeftWidth, true, false);
+            var btnsLeftWidth = _this.btnsLeftWidth;
+            var btnsRightWidth = _this.btnsRightWidth;
+            var direction = e.direction,
+                deltaX = e.deltaX;
+            // http://hammerjs.github.io/api/#directions
+
+            var isLeft = direction === 2;
+            var isRight = direction === 4;
+            var needOpenRight = _this.needShowRight && Math.abs(deltaX) > btnsRightWidth / 2;
+            var needOpenLeft = _this.needShowLeft && Math.abs(deltaX) > btnsRightWidth / 2;
+            if (needOpenRight) {
+                _this.open(-btnsRightWidth, false, true);
+            } else if (needOpenLeft) {
+                _this.open(btnsLeftWidth, true, false);
             } else {
-                this.close();
+                _this.close();
             }
+            _this.swiping = false;
+            _this.needShowLeft = false;
+            _this.needShowRight = false;
+        };
+        // set content & actions style
+        _this._setStyle = function (value) {
+            var limit = value > 0 ? _this.btnsLeftWidth : -_this.btnsRightWidth;
+            var contentLeft = _this._getContentEasing(value, limit);
+            _this.content.style.left = contentLeft + 'px';
+            if (_this.cover) {
+                _this.cover.style.display = Math.abs(value) > 0 ? 'block' : 'none';
+                _this.cover.style.left = contentLeft + 'px';
+            }
+        };
+        _this.openedLeft = false;
+        _this.openedRight = false;
+        return _this;
+    }
+
+    (0, _createClass3['default'])(Swipeout, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0;
+            this.btnsRightWidth = this.right ? this.right.offsetWidth : 0;
+            document.body.addEventListener('touchstart', this.onCloseSwipe, true);
         }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            document.body.removeEventListener('touchstart', this.onCloseSwipe, true);
+        }
         // left & right button click
@@ -175,23 +191,12 @@
             // limit content style left when value > actions width
-            if (value < 0 && value < limit) {
-                return limit - Math.pow(limit - value, 0.85);
-            } else if (value > 0 && value > limit) {
-                return limit + Math.pow(value - limit, 0.85);
+            var delta = Math.abs(value) - Math.abs(limit);
+            var isOverflow = delta > 0;
+            var factor = limit > 0 ? 1 : -1;
+            if (isOverflow) {
+                value = limit + Math.pow(delta, 0.85) * factor;
+                return Math.abs(value) > Math.abs(limit) ? limit : value;
             }
             return value;
         }
-        // set content & actions style
-
     }, {
-        key: '_setStyle',
-        value: function _setStyle(value) {
-            var limit = value > 0 ? this.btnsLeftWidth : -this.btnsRightWidth;
-            var contentLeft = this._getContentEasing(value, limit);
-            this.content.style.left = contentLeft + 'px';
-            if (this.cover) {
-                this.cover.style.display = Math.abs(value) > 0 ? 'block' : 'none';
-                this.cover.style.left = contentLeft + 'px';
-            }
-        }
-    }, {
         key: 'open',
@@ -219,3 +224,3 @@ value: function open(value, openedLeft, openedRight) {
         value: function renderButtons(buttons, _ref) {
-            var _this3 = this;
+            var _this2 = this;
 
@@ -226,3 +231,3 @@ var prefixCls = this.props.prefixCls;
                 { className: prefixCls + '-actions ' + prefixCls + '-actions-' + _ref, ref: function ref(el) {
-                        return _this3[_ref] = _reactDom2['default'].findDOMNode(el);
+                        return _this2[_ref] = _reactDom2['default'].findDOMNode(el);
                     } },
@@ -233,3 +238,3 @@ buttons.map(function (btn, i) {
                         { key: i, className: prefixCls + '-btn ' + (btn.hasOwnProperty('className') ? btn.className : ''), style: btn.style, role: 'button', onClick: function onClick(e) {
-                                return _this3.onBtnClick(e, btn);
+                                return _this2.onBtnClick(e, btn);
                             } },
@@ -248,3 +253,3 @@ _react2['default'].createElement(
         value: function render() {
-            var _this4 = this;
+            var _this3 = this;
 
@@ -258,6 +263,6 @@ var _a = this.props,
                 restProps = __rest(_a, ["prefixCls", "left", "right", "disabled", "children"]);
-            var divProps = (0, _object2['default'])(restProps, ['autoClose', 'onOpen', 'onClose']);
+            var divProps = (0, _omit2['default'])(restProps, ['autoClose', 'onOpen', 'onClose']);
             var refProps = {
                 ref: function ref(el) {
-                    return _this4.content = _reactDom2['default'].findDOMNode(el);
+                    return _this3.content = _reactDom2['default'].findDOMNode(el);
                 }
@@ -269,3 +274,3 @@ };
                 _react2['default'].createElement('div', { className: prefixCls + '-cover', ref: function ref(el) {
-                        return _this4.cover = _reactDom2['default'].findDOMNode(el);
+                        return _this3.cover = _reactDom2['default'].findDOMNode(el);
                     } }),
@@ -272,0 +277,0 @@ this.renderButtons(left, 'left'),

package.json

 {
   "name": "rc-swipeout",
-  "version": "1.4.4",
+  "version": "1.4.5-alpha.0",
   "description": "swipe out ui component for react(web and react-native)",
@@ -48,3 +48,3 @@ "keywords": [
     "babel-runtime": "6.x",
-    "object.omit": "~2.0.0",
+    "omit.js": "^1.0.0",
     "rc-hammerjs": "^0.6.6",
@@ -51,0 +51,0 @@ "react-native-swipeout": "~2.1.1"

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

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

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

42283

increased by2.4%

Lines of code

958

increased by0.84%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addedomit.js@^1.0.0

• + Addedomit.js@1.0.2(transitive)

• - Removedobject.omit@~2.0.0

• - Removedfor-in@1.0.2(transitive)

• - Removedfor-own@0.1.5(transitive)

• - Removedis-extendable@0.1.1(transitive)

• - Removedobject.omit@2.0.1(transitive)