diff --git a/README.md b/README.md
index 8d86ea93..39115f4d 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,7 @@ scroll | func | Yes | | prevent parent scroll
style | style | Yes | | style of the container
sensitivity | number | Yes | 50 | change the sensitivity of gesture
buttonWidth | number | Yes | | each button width
+orientation | 'row' or 'column' | Yes | 'row' | swipeout buttons display orientation
##### Button props
diff --git a/src/index.js b/src/index.js
index 10bc457b..c5538fe9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -27,6 +27,7 @@ const SwipeoutBtn = createReactClass({
text: PropTypes.node,
type: PropTypes.string,
underlayColor: PropTypes.string,
+ orientation: PropTypes.oneOf(['row', 'column']),
},
getDefaultProps: function() {
@@ -41,6 +42,7 @@ const SwipeoutBtn = createReactClass({
text: 'Click me',
type: '',
width: 0,
+ orientation: 'row',
};
},
@@ -171,8 +173,8 @@ const Swipeout = createReactClass({
let buttonWidth = this.props.buttonWidth || (width/5);
this.setState({
btnWidth: buttonWidth,
- btnsLeftWidth: this.props.left ? buttonWidth*this.props.left.length : 0,
- btnsRightWidth: this.props.right ? buttonWidth*this.props.right.length : 0,
+ btnsLeftWidth: this.props.left ? (this.props.orientation == 'column' ? (width/5) : buttonWidth*this.props.left.length ): 0,
+ btnsRightWidth: this.props.right ? (this.props.orientation == 'column' ? (width/5) : buttonWidth*this.props.right.length ) : 0,
swiping: true,
timeStart: (new Date()).getTime(),
});
@@ -410,6 +412,7 @@ const Swipeout = createReactClass({
_renderButtons: function(buttons, isVisible, style) {
if (buttons && isVisible) {
+ this.props.orientation == "column" ? style.push({flexDirection: "column"}) : null;
return(
{ buttons.map(this._renderButton) }
);
@@ -420,14 +423,14 @@ const Swipeout = createReactClass({
}
},
- _renderButton: function(btn, i) {
+ _renderButton: function(btn, i, btns) {
return (
0 ? this.state.contentHeight/btns.length : this.state.contentHeight}
key={i}
onPress={() => this._autoClose(btn)}
text={btn.text}