swipeout icon indicating copy to clipboard operation
swipeout copied to clipboard

Wrong dimensionsof this.btnsLeftWidth when ComponentDidMount

Open Moskvyak opened this issue 7 years ago • 3 comments

I noticed that in some cases this function in Swipeout.js:

 _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);
        }
    },

returns me this.btnsLeftWidth as 0 because this.left.offsetWidth returns 0 even though this.left is defined and it's a proper

It happens when I have fixed dialog and the content of it as image

As a result this.btnsLeftWidth is 0 and this block (that responsible for swiping)

var limit = value > 0 ? _this.btnsLeftWidth : -_this.btnsRightWidth;
            var contentLeft = _this._getContentEasing(value, limit);
            var transform = 'translate3d(' + contentLeft + 'px, 0px, 0px)'; 

return translate3d(0px,0px,0px) which does not swipe.

Quick fix was to add setTimeout on that function (even with 0 delay it fixes the issue).

_createClass(Swipeout, [
    {
      key: 'componentDidMount',
      value: function componentDidMount() {
        setTimeout(() => {
          this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0
          this.btnsRightWidth = this.right ? this.right.offsetWidth : 0
          document.body.addEventListener('touchstart', this.onCloseSwipe, true)
        }, 0)
      }
    },

Could you please have a look and maybe find something better?

Moskvyak avatar Oct 27 '17 05:10 Moskvyak

@Moskvyak I will check this later

silentcloud avatar Oct 27 '17 10:10 silentcloud

this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0;
this.btnsRightWidth = this.right ? this.right.offsetWidth : 0;

这样写有时候是拿不到正确的值的

shaodahong avatar Aug 07 '19 12:08 shaodahong

I encountered this bug,too! My solution is to calling method instead of reading variable. Change all this.btnsRightWidth to this.get_btnsRightWidth(),and add the following method

function get_btnsRightWidth(){
        return this.right ? this.right.offsetWidth : 0;
}

summer-wu avatar Aug 02 '21 05:08 summer-wu