diff --git a/examples/left.html b/examples/left.html new file mode 100644 index 0000000..b3a4252 --- /dev/null +++ b/examples/left.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/examples/left.js b/examples/left.js new file mode 100644 index 0000000..f91ccff --- /dev/null +++ b/examples/left.js @@ -0,0 +1,37 @@ +import 'rc-swipeout/assets/index.less'; +import Swipeout from 'rc-swipeout'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +ReactDOM.render( +
+ console.log('read'), + style: { backgroundColor: 'blue', color: 'white' }, + }, + { + text: 'reply', + onPress: () => console.log('reply'), + style: { backgroundColor: 'green', color: 'white' }, + }, + ]} + onOpen={() => console.log('open')} + onClose={() => console.log('close')} + > +
swipe out simple demo
+ +
, + document.getElementById('__react-content') +); diff --git a/examples/right.html b/examples/right.html new file mode 100644 index 0000000..b3a4252 --- /dev/null +++ b/examples/right.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/examples/right.js b/examples/right.js new file mode 100644 index 0000000..f91ccff --- /dev/null +++ b/examples/right.js @@ -0,0 +1,37 @@ +import 'rc-swipeout/assets/index.less'; +import Swipeout from 'rc-swipeout'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +ReactDOM.render( +
+ console.log('read'), + style: { backgroundColor: 'blue', color: 'white' }, + }, + { + text: 'reply', + onPress: () => console.log('reply'), + style: { backgroundColor: 'green', color: 'white' }, + }, + ]} + onOpen={() => console.log('open')} + onClose={() => console.log('close')} + > +
swipe out simple demo
+ +
, + document.getElementById('__react-content') +); diff --git a/package.json b/package.json index 3f71b81..4a97a7a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-swipeout", - "version": "1.0.1", + "version": "1.0.2", "description": "swipe out ui component for react", "keywords": [ "react", diff --git a/src/Swipeout.js b/src/Swipeout.js index d335d02..0a85fa2 100644 --- a/src/Swipeout.js +++ b/src/Swipeout.js @@ -33,6 +33,7 @@ class Swipeout extends React.Component { this.openedLeft = false; this.openedRight = false; + this.disabledPan = false; } componentDidMount() { @@ -45,14 +46,26 @@ class Swipeout extends React.Component { } onPanStart(e) { - if (this.props.disabled) { + // cannot set direction by react-harmmerjs, fix left & right direction temporarily + // wait react-harmmerjs pr #46 to merge + const { left, right } = this.props; + const aev = e.additionalEvent; + if (aev === 'panright' && !left.length) { + this.disabledPan = true; + } else if (aev === 'panleft' && !right.length) { + this.disabledPan = true; + } else { + this.disabledPan = false; + } + + if (this.props.disabled || this.disabledPan) { return; } this.panStartX = e.deltaX; } onPan(e) { - if (this.props.disabled) { + if (this.props.disabled || this.disabledPan) { return; } @@ -72,7 +85,7 @@ class Swipeout extends React.Component { } onPanEnd(e) { - if (this.props.disabled) { + if (this.props.disabled || this.disabledPan) { return; } @@ -186,6 +199,7 @@ class Swipeout extends React.Component { render() { const { prefixCls, left, right, children, ...others } = this.props; + return (left.length || right.length) ? (
{ }); }); + + it('only left', done => { + const instance = ReactDOM.render( + + swipeout demo + + , div + ); + const domEl = TestUtils.findRenderedDOMComponentWithClass( + instance, 'rc-swipeout-content' + ); + const leftActionEl = TestUtils.findRenderedDOMComponentWithClass( + instance, 'rc-swipeout-actions-left' + ); + + const hammer = new Hammer(domEl, { recognizers: [] }); + const swipeLeft = new Hammer.Swipe({ threshold: 1, direction: Hammer.DIRECTION_LEFT }); + hammer.add(swipeLeft); + + Simulator.gestures.swipe(domEl, { + deltaX: -300, + deltaY: 10, + }, () => { + expect(domEl.style.left).to.be(''); + + const swipeRight = new Hammer.Swipe({ threshold: 1, direction: Hammer.DIRECTION_RIGHT }); + hammer.add(swipeRight); + + Simulator.gestures.swipe(domEl, { + deltaX: 300, + deltaY: 10, + }, () => { + expect(domEl.style.left).to.be('128px'); + expect(leftActionEl.style.width).to.be('128px'); + done(); + }); + }); + }); + + it('only right', done => { + const instance = ReactDOM.render( + + swipeout demo + + , div + ); + const domEl = TestUtils.findRenderedDOMComponentWithClass( + instance, 'rc-swipeout-content' + ); + const rightActionEl = TestUtils.findRenderedDOMComponentWithClass( + instance, 'rc-swipeout-actions-right' + ); + + const hammer = new Hammer(domEl, { recognizers: [] }); + const swipeRight = new Hammer.Swipe({ threshold: 1, direction: Hammer.DIRECTION_RIGHT }); + hammer.add(swipeRight); + + Simulator.gestures.swipe(domEl, { + deltaX: 300, + deltaY: 10, + }, () => { + expect(domEl.style.left).to.be(''); + + const swipeLeft = new Hammer.Swipe({ threshold: 1, direction: Hammer.DIRECTION_LEFT }); + hammer.add(swipeLeft); + + Simulator.gestures.swipe(domEl, { + deltaX: -300, + deltaY: 10, + }, () => { + expect(domEl.style.left).to.be('-128px'); + expect(rightActionEl.style.width).to.be('128px'); + done(); + }); + }); + }); + it('works when swipe', done => { const instance = ReactDOM.render(