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}