Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added renderButton property to customize button #235

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

added renderButton property to customize button #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b08e5b
Added "renderButton" property so that button can be easily customizable.
newmsz Jan 10, 2020
b93c530
Update README.md
newmsz Jan 10, 2020
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 @@ -73,6 +73,7 @@ Prop | Type | Optional | Default | Description
`renderRow` | func | Yes | | Customize render option rows: `function(option,index,isSelected)` **Will render a default row if `null`/`undefined`.**
`renderSeparator` | func | Yes | | Customize render dropdown list separators. **Will render a default thin gray line if `null`/`undefined`.**
`renderButtonText` | func | Yes | | Use this to extract and return text from option object. This text will show on button after option selected. **Invalid in wrapper mode.**
`renderButton` | func | Yes | | Use this to customize how text shows. Use `renderButtonText` to extract text too: `function(text)` **Invalid in wrapper mode.**
`onDropdownWillShow`| func | Yes | | Trigger when dropdown will show by touching the button. **Return `false` can cancel the event.**
`onDropdownWillHide`| func | Yes | | Trigger when dropdown will hide by touching the button. **Return `false` can cancel the event.**
`onSelect` | func | Yes | | Trigger when option row touched with selected `index` and `value`. **Return `false` can cancel the event.**
Expand Down
11 changes: 6 additions & 5 deletions components/ModalDropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export default class ModalDropdown extends Component {
renderRow: PropTypes.func,
renderSeparator: PropTypes.func,
renderButtonText: PropTypes.func,
renderButton: PropTypes.func,

onDropdownWillShow: PropTypes.func,
onDropdownWillHide: PropTypes.func,
Expand Down Expand Up @@ -163,7 +164,7 @@ export default class ModalDropdown extends Component {
}

_renderButton() {
const {disabled, accessible, children, textStyle} = this.props;
const {renderButton, disabled, accessible, children, textStyle} = this.props;
const {buttonText} = this.state;

return (
Expand All @@ -173,15 +174,15 @@ export default class ModalDropdown extends Component {
onPress={this._onButtonPress}
>
{
children ||
(
<View style={styles.button}>
children || (!renderButton?
(<View style={styles.button}>
<Text style={[styles.buttonText, textStyle]}
numberOfLines={1}
>
{buttonText}
</Text>
</View>
</View>) :
renderButton(buttonText)
)
}
</TouchableOpacity>
Expand Down