rc-swipeout - npm Package Compare versions

Comparing version 1.4.5-alpha.0 to 1.4.5

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

@@ -27,7 +27,32 @@ import _extends from 'babel-runtime/helpers/extends';
 
-        _this.onCloseSwipe = function (ev) {
-            if (_this.openedLeft || _this.openedRight) {
+        _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) {
                 var pNode = function (node) {
                     while (node.parentNode && node.parentNode !== document.body) {
-                        if (node.className.indexOf(_this.props.prefixCls + '-actions') > -1) {
+                        if (node.className.indexOf(_this2.props.prefixCls + '-actions') > -1) {
                             return node;
@@ -40,99 +65,58 @@ }
                     ev.preventDefault();
-                    _this.close();
+                    this.close();
                 }
             }
-        };
-        _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) {
+        }
+    }, {
+        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)) {
                 return;
             }
-            var _this$props = _this.props,
-                left = _this$props.left,
-                right = _this$props.right;
+            var _props = this.props,
+                left = _props.left,
+                right = _props.right;
 
-            _this.needShowRight = isLeft && right.length > 0;
-            _this.needShowLeft = isRight && left.length > 0;
-            if (_this.left) {
-                _this.left.style.visibility = _this.needShowRight ? 'hidden' : 'visible';
+            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));
             }
-            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) {
+        }
+    }, {
+        key: 'onPanEnd',
+        value: function onPanEnd(e) {
+            if (!this.swiping) {
                 return;
             }
-            _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;
+            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;
 
-            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);
+            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);
             } 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
@@ -155,12 +139,23 @@
             // limit content style left when value > actions width
-            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;
+            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);
             }
             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',
@@ -188,3 +183,3 @@ value: function open(value, openedLeft, openedRight) {
         value: function renderButtons(buttons, _ref) {
-            var _this2 = this;
+            var _this3 = this;
 
@@ -195,3 +190,3 @@ var prefixCls = this.props.prefixCls;
                 { className: prefixCls + '-actions ' + prefixCls + '-actions-' + _ref, ref: function ref(el) {
-                        return _this2[_ref] = ReactDOM.findDOMNode(el);
+                        return _this3[_ref] = el;
                     } },
@@ -202,3 +197,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 _this2.onBtnClick(e, btn);
+                                return _this3.onBtnClick(e, btn);
                             } },
@@ -217,3 +212,3 @@ React.createElement(
         value: function render() {
-            var _this3 = this;
+            var _this4 = this;
 
@@ -230,3 +225,3 @@ var _a = this.props,
                 ref: function ref(el) {
-                    return _this3.content = ReactDOM.findDOMNode(el);
+                    return _this4.content = ReactDOM.findDOMNode(el);
                 }
@@ -238,3 +233,3 @@ };
                 React.createElement('div', { className: prefixCls + '-cover', ref: function ref(el) {
-                        return _this3.cover = ReactDOM.findDOMNode(el);
+                        return _this4.cover = el;
                     } }),
@@ -241,0 +236,0 @@ this.renderButtons(left, 'left'),

HISTORY.md

 # History
 
+# 1.4.5
+
+- replace `object.omit`, update style
+
 # ~1.4.4
@@ -4,0 +8,0 @@

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

@@ -62,7 +62,32 @@ 'use strict';
 
-        _this.onCloseSwipe = function (ev) {
-            if (_this.openedLeft || _this.openedRight) {
+        _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) {
                 var pNode = function (node) {
                     while (node.parentNode && node.parentNode !== document.body) {
-                        if (node.className.indexOf(_this.props.prefixCls + '-actions') > -1) {
+                        if (node.className.indexOf(_this2.props.prefixCls + '-actions') > -1) {
                             return node;
@@ -75,99 +100,58 @@ }
                     ev.preventDefault();
-                    _this.close();
+                    this.close();
                 }
             }
-        };
-        _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) {
+        }
+    }, {
+        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)) {
                 return;
             }
-            var _this$props = _this.props,
-                left = _this$props.left,
-                right = _this$props.right;
+            var _props = this.props,
+                left = _props.left,
+                right = _props.right;
 
-            _this.needShowRight = isLeft && right.length > 0;
-            _this.needShowLeft = isRight && left.length > 0;
-            if (_this.left) {
-                _this.left.style.visibility = _this.needShowRight ? 'hidden' : 'visible';
+            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));
             }
-            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) {
+        }
+    }, {
+        key: 'onPanEnd',
+        value: function onPanEnd(e) {
+            if (!this.swiping) {
                 return;
             }
-            _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;
+            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;
 
-            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);
+            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);
             } 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
@@ -190,12 +174,23 @@
             // limit content style left when value > actions width
-            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;
+            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);
             }
             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',
@@ -223,3 +218,3 @@ value: function open(value, openedLeft, openedRight) {
         value: function renderButtons(buttons, _ref) {
-            var _this2 = this;
+            var _this3 = this;
 
@@ -230,3 +225,3 @@ var prefixCls = this.props.prefixCls;
                 { className: prefixCls + '-actions ' + prefixCls + '-actions-' + _ref, ref: function ref(el) {
-                        return _this2[_ref] = _reactDom2['default'].findDOMNode(el);
+                        return _this3[_ref] = el;
                     } },
@@ -237,3 +232,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 _this2.onBtnClick(e, btn);
+                                return _this3.onBtnClick(e, btn);
                             } },
@@ -252,3 +247,3 @@ _react2['default'].createElement(
         value: function render() {
-            var _this3 = this;
+            var _this4 = this;
 
@@ -265,3 +260,3 @@ var _a = this.props,
                 ref: function ref(el) {
-                    return _this3.content = _reactDom2['default'].findDOMNode(el);
+                    return _this4.content = _reactDom2['default'].findDOMNode(el);
                 }
@@ -273,3 +268,3 @@ };
                 _react2['default'].createElement('div', { className: prefixCls + '-cover', ref: function ref(el) {
-                        return _this3.cover = _reactDom2['default'].findDOMNode(el);
+                        return _this4.cover = el;
                     } }),
@@ -276,0 +271,0 @@ this.renderButtons(left, 'left'),

package.json

 {
   "name": "rc-swipeout",
-  "version": "1.4.5-alpha.0",
+  "version": "1.4.5",
   "description": "swipe out ui component for react(web and react-native)",
@@ -5,0 +5,0 @@ "keywords": [

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

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

41162

decreased by-2.65%

Lines of code

947

decreased by-1.15%

No dependency changes