add only left or right example, add tests

examples/left.html

@@ -0,0 +1 @@
+placeholder

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(
+  <div style={{ marginBottom: 12 }}>
+    <Swipeout
+      style={{ backgroundColor: 'white' }}
+      autoClose
+      left={[
+        {
+          text: 'read',
+          onPress: () => 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')}
+    >
+      <div style={{
+        height: 44,
+        backgroundColor: 'white',
+        lineHeight: '44px',
+        borderTop: '1px solid #dedede',
+        borderBottom: '1px solid #dedede',
+      }}
+      >swipe out simple demo</div>
+    </Swipeout>
+  </div>,
+  document.getElementById('__react-content')
+);

examples/right.html

@@ -0,0 +1 @@
+placeholder

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(
+  <div style={{ marginBottom: 12 }}>
+    <Swipeout
+      style={{ backgroundColor: 'white' }}
+      autoClose
+      left={[
+        {
+          text: 'read',
+          onPress: () => 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')}
+    >
+      <div style={{
+        height: 44,
+        backgroundColor: 'white',
+        lineHeight: '44px',
+        borderTop: '1px solid #dedede',
+        borderBottom: '1px solid #dedede',
+      }}
+      >swipe out simple demo</div>
+    </Swipeout>
+  </div>,
+  document.getElementById('__react-content')
+);

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",

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) ? (
       <div className={`${prefixCls} transitioning`} {...others}>
         <Hammer

tests/usage.spec.js

@@ -99,6 +99,93 @@ describe('simple', () => {
     });
   });
 
+
+  it('only left', done => {
+    const instance = ReactDOM.render(
+      <Swipeout
+        left={[
+          { text: 'read' },
+          { text: 'reply' },
+        ]}
+      >
+        swipeout demo
+      </Swipeout>
+      , 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
+        right={[
+          { text: 'read' },
+          { text: 'reply' },
+        ]}
+      >
+        swipeout demo
+      </Swipeout>
+      , 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(
       <Swipeout