Skip to content
This repository has been archived by the owner on Sep 16, 2020. It is now read-only.

display swiped buttons with row/column orientation. #261

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

display swiped buttons with row/column orientation. #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d569e5d
display swiped buttons with row/column orientation.
ZackLeonardo Apr 10, 2018
c7c5cb3
update readme.md with orientation props added.
ZackLeonardo Apr 10, 2018
55b1a35
Swipeout unset orientation which will be undefined, make it as row.
ZackLeonardo Apr 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
11 changes: 7 additions & 4 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const SwipeoutBtn = createReactClass({
text: PropTypes.node,
type: PropTypes.string,
underlayColor: PropTypes.string,
orientation: PropTypes.oneOf(['row', 'column']),
},

getDefaultProps: function() {
Expand All @@ -41,6 +42,7 @@ const SwipeoutBtn = createReactClass({
text: 'Click me',
type: '',
width: 0,
orientation: 'row',
};
},

Expand Down Expand Up @@ -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(),
});
Expand Down Expand Up @@ -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( <View style={style}>
{ buttons.map(this._renderButton) }
</View>);
Expand All @@ -420,14 +423,14 @@ const Swipeout = createReactClass({
}
},

_renderButton: function(btn, i) {
_renderButton: function(btn, i, btns) {
return (
<SwipeoutBtn
backgroundColor={btn.backgroundColor}
color={btn.color}
component={btn.component}
disabled={btn.disabled}
height={this.state.contentHeight}
height={this.props.orientation == 'column' && btns.length > 0 ? this.state.contentHeight/btns.length : this.state.contentHeight}
key={i}
onPress={() => this._autoClose(btn)}
text={btn.text}
Expand Down