Also in demo code please import css file:

import 'rc-swipeout/assets/index.css';

Not sure if this component is still under maintenance...

Here I'd report 2 bugs of this component.

1. it would never expose items if disabled is false on first render
2. it disappears when disabled become false

I've made a codesandbox demo for reproducing them.

https://codesandbox.io/s/rc-swipeout-defects-k3c23r

Hi,

I am trying to use this library however the swipeout actions seem to already be visible before swiping.

This is how I added the Swipeout component to my page:

subprojects.map((sp, i) => {
    const progressPercentage = sp.progress * 100;
    
    return (
        <Swipeout
            right={[
                {
                    text: 'Alles NVT',
                    onPress: () => console.log('nvt'),
                },
                {
                    text: 'Alles OK',
                    onPress: () => console.log('ok')
                }
            ]}>
            <div key={sp.id} className='project-list-item custom-checkbox-wrapper' onClick={this.goToSubproject(sp.id)}>
                <span className='project-list-count'>{i + 1}</span>
                <p>{sp.description}</p>
                <p>{sp.surface} m2 &nbsp;&nbsp;|&nbsp;&nbsp; {sp.constructionYear}</p>
                <div className='project-list-timeline'>
                    <span className='bar' style={{ width: `${progressPercentage}%` }}></span>
                </div>
                <div className='custom-checkbox'>
                    <input type="checkbox" id='1' disabled checked={sp.progress === 1} />
                    <label htmlFor='1'>
                        <span></span>
                    </label>
                </div>
            </div>    
        </Swipeout>                                            
    );
})

However, when I do it like this both of the actions are already unconvered before swiping:

I have covered the actions in a green rectangle. How come they are already visible before swiping to the left? Did I miss a setting?

I'm working with React 15.6, Swipeout 2.0.4

I need to be able to stopPropagation when onPress is called. Currently there is no event passed in so there is no way to cancel it.

多条记录删除上一条记录之后，记录删掉只有然后删除按钮出现在下一条记录，即原来的位置，删除最后一条记录则不会出现。

Would be nice to have icons on left or right buttons.

Would be even better to pass JSX.Element

swiped items only close on mobile, not on desktop, even in your demo: https://react-component.github.io/swipeout/examples/mutiple.html

Warning in console: Hammer: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

The current react-hammer library appears to not be maintained anymore - this fork is being updated and no longer shows the warning: https://github.com/react-component/react-hammerjs

In readme.md file in demo code in props "right" you have to write {[ instead of [{.

Hi there,

I am trying to use the dist build of the swipeout component, but it seems like the build is broken!

Here's a minimal example in a codepen:

https://codepen.io/sherbondy/pen/jzKKrz?editors=1111

As you can see, both React and ReactDOM are available on the global window object, but the swipeout dist script is assigning an empty JavaScript object to window["rc-swipeout"].

Any idea what might be amiss?

I tried forking the repository and fiddling with the config in the package.json file.

I initially thought it might be a quirk with an older webpack version, so I tried bumping the rc-tools dependency to v7, but no go!

I also experimented with changing the config.output.libraryTarget setting, e.g. to be window instead of umd, but that causes the library to throw an error on import:

Uncaught TypeError: Cannot read property 'Component' of undefined

I'm a little out of my depth here, so if anyone has any pointers or ideas, re: what might be messing up the dist build, I would love to hear your advice!

Also, just an ergonomic thing, I think it'd be nicer if the config.output.library setting was changed to, e.g. Swipeout so you could call window.Swipeout instead of using the more awkward window["rc-swipeout"] syntax (due to the dash in the name).

Thanks!

Is it support for both platform?

On Left Swipe the content is displays but the card is not behavioral as similar to Right Swipe.

When the swipe is opened (such as the right buttons is visible), then I tap the list item intend to close it. But now, the event which is bound on the child be fired.
Before:
<Swipeout right={[ { text: '删除', onPress: () => this.handleDelete(), style: { backgroundColor: '#fc352b', color: 'white' }, }, ]} onClose={() => { console.log('close!'); }} ><div onClick={()=>{browserHistory.push('/pageTwo');}}>Go to page two</div> </Swipeout>

While I has an idea is that bind another event to the component, only when the swipe is closed can be fired.

Modified:
(1)file:Swipeout.out.js
Swipeout.prototype.onTap = function onTap() { if (this.openedLeft || this.openedRight) { this.close(); }else{ this.props.onPress(); } };
(2)
<Swipeout right={[ { text: '删除', onPress: () => this.handleDelete(), style: { backgroundColor: '#fc352b', color: 'white' }, }, ]} onClose={() => { console.log('close!'); }} onPress={()=>{browserHistory.push('/pageTwo');}} ><div>Go to page two</div> </Swipeout>

Would you give some suggestions?

I want to know the swipe direction, and for different direction i want to add other css.
Now i can only use the methods onClose and onOpen. It can trigger the onClose and onOpen, but i can not tell the onOpen is triggered by swipeRight or swipeLeft.

好像不适用于listview，在你定义了左滑右滑的手势之后，listview的上下滑动就失效了，是否存在这个问题？

上面这段代码中的 this.open 方法的第 2、3 个参数是不是反了，虽然最终未影响到代码逻辑，但正确的是不是应该是下面这样的？

doOpenRight = () => { 
   this.open(-this.btnsRightWidth, false, true); 
 } 

Means swipe right / left dispatches an action and shows the action card while swiping, like Gmail does on android.

I add swipeout component to ListItem of ListView, I want swipeout will close the swipeout buttons when this ListItem lost focus (close when scrolling the ListView or choose other item of ListView).

Thanks
Quan Vo

I have two right buttons : one width is '50px' another '70px' ; i think the parent container(<div class="rc-swipeout-actions rc-swipeout-actions-right"></div>) should be '120px' . unfortunately is still '150px'.
finally i find the reason that my screen width is '375px' ,the parent container has a limit width: 375/5 * 2
(buttons count) = 150, so the width not depend on the children's total width but the screen‘s width and buttons count .......

Expo Version ~41.0.0
"react": "16.13.1"
"rc-swipeout": "^2.0.11",

When I use Swipeout component, I get this warning in console

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: %s, Swipeout

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: %s, Swipeout

react-component/m-picker@a8e3ddb

In src/Swipeout.tsx:

  renderCustomButton(button) {
    const buttonStyle = button.style || {};
    const bgColor = buttonStyle.backgroundColor || 'transparent';
    const Component = (
      <View
        style={{
          flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: bgColor,
        }}
      >
        {React.isValidElement(button.text) ? button.text : (
          <Text style={[button.style, { textAlign: 'center' }]}>
            {button.text}
          </Text>
        )}
      </View>
    );
    return {
      text: button.text || 'Click',
      onPress: button.onPress,
      type: 'default',
      component: Component,
      backgroundColor: 'transparent',
      color: '#999',
      disabled: false,
    };
  }

button.component is simply ignored but the parameter exists in react-native-swiperout, please add the parameter so we can use custom component like custom icon in swipeout.

ant-design/ant-design-mobile#13 (comment)

Could You move import css file inside the package ?

Then user can only import whole component and don't worry about import css in own *.js file.

Problem:

While the swipe from left to right is really smooth and in terms of timing/swing, if I swipe to the opposite direction I get no smooth transition at all. The two buttons at the right appear all of a sudden and eventually they disappear in the same fashion.
I've used the same code of this example

Gif:

My stack:

• mobile: Nexus 5x emulator (API 23)
• react-native-cli: 2.0.1
• react-native: 0.38.0

Example: Consider I have a button on the element which is swipeable. If I click on the button the swipe action should be performed.

在 onCloseSwipe 方法中
if (node.className.indexOf('rc-swipeout-actions') > -1) {
这行代码中的 'rc-swipeout-actions' 应该是 this.props.prefixCls+‘-actions’ 吧？！

Component slides open just fine, but then I can't get it to close without clicking a button. Clicking the button closes if I have autoClose flag set, but how can I swipe back to close?

BTW Absolutely love this component, it's so simple & the animation is so smooth! Great work!

I'd really like to perform it on web(PC), do you have any plans to support this feature in the future?

Remove transition property when touchmove.

Steps to repro

1. Install

npm install --save rc-swipeout

2. Import in file

import Swipeout from 'rc-swipeout';

3. Run, error displayed:

Now click on the area outside the slider, the slider will automatically collapse. I want to ban this. What do I need to do? Thank you!

If the property left (or right) changes his value, the width of the swipe movement doesn't get recalculated.

If for example the left property contains 2 buttons, the width is calculated in the componentDidMount method with an initial value. After a change in the left property it has now 4 button, but the swipe width is still the initial one (when it should be much more). The result is that the two new buttons are only partially visible or not visible al all.
The same happens with the right property.
I only verified this problem in the browser, not in native version of the Swipeout component.

To solve this problem simply add a componentDidUpdate like this:

componentDidUpdate() {
    this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0;
    this.btnsRightWidth = this.right ? this.right.offsetWidth : 0;
}

Thanks

hammerjs/hammer.js#1103

Uncaught TypeError: node.className.indexOf is not a function

当打开一条以上的情况下，并且开启了autoClose，当列表中有svg标签时，点击svg标签会导致错误

I just downloaded the newest version of antd-mobile and SwipeAction components stopped firing onPress events. Reverting these changes from this pull request fixed everything: 4f08ee1

Ok, the problem is that firing preventDefault in touchstart suppresses onClick event. You need to change touchstart to touchmove

Source: http://stackoverflow.com/questions/6780965/why-onclick-event-suppressed-when-preventdefault-is-called-for-the-touchstart

Chrome: 55.0.2883.87 m

I am seeing this Intervention in the JavaScript console in Chrome:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

In:

Swipeout._this.onCloseSwipe @ Swipeout.js:47

OS: macOS 10.13.5
Chrome: 67.0.3396.99 (64-bit)

I'm using it to wrap a TextInput and the TextInputs are not clickable/usable anymore. Can you see into the issue?

Swipeout right={
[{
text: 'ok'
}]
}>

<TextInput /

The TextInput is no longer useable

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

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

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

Is there any way to close the swipe on scroll or after a timeout?

Chrome56 touchstart 事件默认是被动事件（passive）, 不能调用 preventDefault。详见 Scrolling Intervention

大体上有两条路可选：

1. document.body.addEventListener('touchstart', this.onCloseSwipe.bind(this), {passive: false}); 但并不是所有浏览器都支持 EventListenerOptions。
2. 官方建议是用 touch-action CSS 属性来控制元素对 touch 事件的响应。

我查了半天竟然没有找到一个变量来指示 preventDefault 是否可以调用。Modernizr 给出的测试代码是 try catch。

Unable to preventDefault inside passive event listener due to target being treated as passive.
See https://www.chromestatus.com/features/5093566007214080
onCloseSwipe @ Swipeout.web.js?5589b3f:97