react-native-modal-dropdown
Advanced tools
Comparing version 0.4.1 to 0.4.2
@@ -30,9 +30,2 @@ /** | ||
export default class ModalDropdown extends Component { | ||
static defaultProps = { | ||
disabled: false, | ||
defaultIndex: -1, | ||
defaultValue: 'Please select...', | ||
options: null, | ||
}; | ||
static propTypes = { | ||
@@ -44,2 +37,6 @@ disabled: PropTypes.bool, | ||
accessible: PropTypes.bool, | ||
animated: PropTypes.bool, | ||
showsVerticalScrollIndicator: PropTypes.bool, | ||
style: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), | ||
@@ -55,5 +52,14 @@ textStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), | ||
onDropdownWillHide: PropTypes.func, | ||
onSelect: PropTypes.func, | ||
onSelect: PropTypes.func | ||
}; | ||
static defaultProps = { | ||
disabled: false, | ||
defaultIndex: -1, | ||
defaultValue: 'Please select...', | ||
options: null, | ||
animated: true, | ||
showsVerticalScrollIndicator: true | ||
}; | ||
constructor(props) { | ||
@@ -69,6 +75,7 @@ super(props); | ||
disabled: props.disabled, | ||
accessible: props.accessible !== false, | ||
loading: props.options == null, | ||
showDropdown: false, | ||
buttonText: props.defaultValue, | ||
selectedIndex: props.defaultIndex, | ||
selectedIndex: props.defaultIndex | ||
}; | ||
@@ -93,3 +100,3 @@ } | ||
buttonText: buttonText, | ||
selectedIndex: selectedIndex, | ||
selectedIndex: selectedIndex | ||
}); | ||
@@ -119,3 +126,3 @@ } | ||
this.setState({ | ||
showDropdown: true, | ||
showDropdown: true | ||
}); | ||
@@ -127,3 +134,3 @@ }); | ||
this.setState({ | ||
showDropdown: false, | ||
showDropdown: false | ||
}); | ||
@@ -147,3 +154,3 @@ } | ||
buttonText: value, | ||
selectedIndex: idx, | ||
selectedIndex: idx | ||
}); | ||
@@ -156,2 +163,3 @@ } | ||
disabled={this.props.disabled} | ||
accessible={this.props.accessible} | ||
onPress={this._onButtonPress.bind(this)}> | ||
@@ -183,7 +191,10 @@ { | ||
let frameStyle = this._calcPosition(); | ||
let animationType = this.props.animated ? 'fade' : 'none'; | ||
return ( | ||
<Modal animationType='fade' | ||
<Modal animationType={animationType} | ||
transparent={true} | ||
onRequestClose={this._onRequestClose.bind(this)}> | ||
<TouchableWithoutFeedback onPress={this._onModalPress.bind(this)}> | ||
onRequestClose={this._onRequestClose.bind(this)} | ||
supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}> | ||
<TouchableWithoutFeedback accessible={this.props.accessible} | ||
onPress={this._onModalPress.bind(this)}> | ||
<View style={styles.modal}> | ||
@@ -216,3 +227,3 @@ <View style={[styles.dropdown, this.props.dropdownStyle, frameStyle]}> | ||
top: showInBottom ? this._buttonFrame.y + this._buttonFrame.h : Math.max(0, this._buttonFrame.y - dropdownHeight), | ||
} | ||
}; | ||
@@ -264,2 +275,3 @@ if (showInLeft) { | ||
automaticallyAdjustContentInsets={false} | ||
showsVerticalScrollIndicator={this.props.showsVerticalScrollIndicator} | ||
/> | ||
@@ -271,3 +283,3 @@ ); | ||
let ds = new ListView.DataSource({ | ||
rowHasChanged: (r1, r2) => r1 !== r2, | ||
rowHasChanged: (r1, r2) => r1 !== r2 | ||
}); | ||
@@ -279,3 +291,3 @@ return ds.cloneWithRows(this.props.options); | ||
let key = `row_${rowID}`; | ||
let highlighted = rowID == this.state.selectedIndex | ||
let highlighted = rowID == this.state.selectedIndex; | ||
let row = !this.props.renderRow ? | ||
@@ -288,2 +300,3 @@ (<Text style={[styles.rowText, highlighted && styles.highlightedRowText]}> | ||
key: key, | ||
accessible: this.props.accessible, | ||
onPress: () => this._onRowPress(rowData, sectionID, rowID, highlightRow), | ||
@@ -351,3 +364,3 @@ }; | ||
buttonText: rowData.toString(), | ||
selectedIndex: rowID, | ||
selectedIndex: rowID | ||
}); | ||
@@ -358,3 +371,3 @@ } | ||
this.setState({ | ||
showDropdown: false, | ||
showDropdown: false | ||
}); | ||
@@ -374,9 +387,9 @@ } | ||
button: { | ||
justifyContent: 'center', | ||
justifyContent: 'center' | ||
}, | ||
buttonText: { | ||
fontSize: 12, | ||
fontSize: 12 | ||
}, | ||
modal: { | ||
flexGrow: 1, | ||
flexGrow: 1 | ||
}, | ||
@@ -390,6 +403,6 @@ dropdown: { | ||
backgroundColor: 'white', | ||
justifyContent: 'center', | ||
justifyContent: 'center' | ||
}, | ||
loading: { | ||
alignSelf: 'center', | ||
alignSelf: 'center' | ||
}, | ||
@@ -405,11 +418,11 @@ list: { | ||
backgroundColor: 'white', | ||
textAlignVertical: 'center', | ||
textAlignVertical: 'center' | ||
}, | ||
highlightedRowText: { | ||
color: 'black', | ||
color: 'black' | ||
}, | ||
separator: { | ||
height: StyleSheet.hairlineWidth, | ||
backgroundColor: 'lightgray', | ||
backgroundColor: 'lightgray' | ||
} | ||
}); |
{ | ||
"name": "react-native-modal-dropdown", | ||
"version": "0.4.1", | ||
"version": "0.4.2", | ||
"description": "A react-native dropdown component for both iOS and Android.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -24,2 +24,6 @@ [![npm version](https://badge.fury.io/js/react-native-modal-dropdown.svg)](https://badge.fury.io/js/react-native-modal-dropdown) | ||
### v0.4.2 | ||
- Add `animated` option. | ||
- Add `showsVerticalScrollIndicator` option | ||
### v0.4.1 | ||
@@ -90,6 +94,8 @@ - Fix bug: [\#27](https://github.com/sohobloo/react-native-modal-dropdown/issues/27) Fix a flex style bug. | ||
------------------- | -------- | -------- | --------- | ----------- | ||
`disabled` | bool | Yes | false | disable/enable the component. | ||
`disabled` | bool | Yes | false | disable / enable the component. | ||
`defaultIndex` | number | Yes | -1 | Init selected index. `-1`: None is selected. **This only change the highlight of the dropdown row, you have to give a `defaultValue` to change the init text.** | ||
`defaultValue` | string | Yes | Please select... | Init text of the button. **Invalid in wrapper mode.** | ||
`options` | array | Yes | | Options. **The dropdown will show a loading indicator if `options` is `null`/`undefined`.** | ||
`animated` | bool | Yes | true | Disable / enable fade animation. | ||
`showsVerticalScrollIndicator` | bool | Yes | true | Show / hide vertical scroll indicator. | ||
`style` | object | Yes | | Style of the button. | ||
@@ -104,2 +110,3 @@ `textStyle` | object | Yes | | Style of the button text. **Invalid in wrapper mode.** | ||
`onSelect` | func | Yes | | Trigger when option row touched with selected `index` and `value`. **Return `false` can cancel the event.** | ||
`accessible` | bool | Yes | true | Set accessibility of dropdown modal and dropdown rows | ||
@@ -106,0 +113,0 @@ ### Methods |
19892
370
119