Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-city-select
Advanced tools
react-native-city-select - npm Package Compare versions
Comparing version 0.1.5 to 0.1.6
190
index.js
@@ -1,3 +0,3 @@ | ||
| import React, { Component } from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import React, { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
@@ -12,13 +12,14 @@ Text, | ||
| Dimensions, | ||
| } from 'react-native' | ||
| FlatList, | ||
| } from 'react-native'; | ||
| const deviceWidth = Dimensions.get('window').width | ||
| const deviceHeight = Dimensions.get('window').height | ||
| const deviceWidth = Dimensions.get('window').width; | ||
| const deviceHeight = Dimensions.get('window').height; | ||
| class CitySelect extends Component { | ||
| constructor(props) { | ||
| super(props) | ||
| this.state = { | ||
| modalY: new Animated.Value(deviceHeight), | ||
| } | ||
| super(props); | ||
| this.state = { | ||
| modalY: new Animated.Value(deviceHeight), | ||
| }; | ||
| } | ||
@@ -29,57 +30,66 @@ | ||
| duration: 500, | ||
| toValue: 0 | ||
| }).start() | ||
| toValue: 0, | ||
| }).start(); | ||
| } | ||
| getExtendStyle(item) { | ||
| const cityWidth = { width: deviceWidth / this.props.cityGrid }; | ||
| const selectedBg = { backgroundColor: this.props.selectedBg }; | ||
| const cityTextCenter = this.props.cityGrid === 1 ? {} : { alignItems: 'center' }; | ||
| const selectedStyle = this.props.selectedId === item.cityId ? selectedBg : {}; | ||
| const extendStyle = { | ||
| ...cityWidth, | ||
| ...cityTextCenter, | ||
| ...selectedStyle, | ||
| }; | ||
| return extendStyle; | ||
| } | ||
| renderCityItem(cityData) { | ||
| const cityItem = cityData.map((i, item) => { | ||
| const cityWidth = { width: deviceWidth * this.props.cityGrid } | ||
| const selectedBg = { backgroundColor: this.props.selectedBg } | ||
| const cityTextCenter = this.props.cityGrid === 1 ? {} : { alignItems: 'center' } | ||
| const selectedStyle = this.props.selectedId === i.cityId ? selectedBg : {} | ||
| const extendStyle={ | ||
| ...cityWidth, | ||
| ...cityTextCenter, | ||
| ...selectedStyle, | ||
| } | ||
| return( | ||
| return ( | ||
| <FlatList | ||
| numColumns={this.props.cityGrid} | ||
| removeClippedSubviews | ||
| initialListSize={20} | ||
| keyExtractor={(item, index) => `cityItem${index}`} | ||
| data={cityData} | ||
| renderItem={({ item }) => ( | ||
| <TouchableOpacity | ||
| style={[styles.city, extendStyle]} | ||
| key={i.cityId} | ||
| onPress={this.props.selectCity.bind(this,i)} | ||
| > | ||
| <Text style={styles.cityText}> | ||
| {i.cityName} | ||
| </Text> | ||
| </TouchableOpacity> | ||
| ) | ||
| }) | ||
| return cityItem | ||
| style={[styles.city, this.getExtendStyle(item)]} | ||
| key={item.cityId} | ||
| onPress={this.props.selectCity.bind(this, item)} | ||
| > | ||
| <Text style={styles.cityText}> | ||
| {item.cityName} | ||
| </Text> | ||
| </TouchableOpacity> | ||
| )} | ||
| /> | ||
| ); | ||
| } | ||
| renderHeader(){ | ||
| const cancelText={ | ||
| renderHeader() { | ||
| const cancelText = { | ||
| color: this.props.cancelColor, | ||
| fontSize: this.props.cancelSize | ||
| } | ||
| if(this.props.hasHeader){ | ||
| return( | ||
| fontSize: this.props.cancelSize, | ||
| }; | ||
| if (this.props.hasHeader) { | ||
| return ( | ||
| <View style={styles.header}> | ||
| <TouchableOpacity | ||
| style={styles.cancel} | ||
| onPress={this.props.cancelCity} | ||
| > | ||
| <Text style={cancelText}> | ||
| {this.props.cancelText} | ||
| </Text> | ||
| </TouchableOpacity> | ||
| <View style={styles.titleText}> | ||
| <Text> | ||
| {this.props.titleText} | ||
| </Text> | ||
| </View> | ||
| </View> | ||
| ) | ||
| <TouchableOpacity | ||
| style={styles.cancel} | ||
| onPress={this.props.cancelCity} | ||
| > | ||
| <Text style={cancelText}> | ||
| {this.props.cancelText} | ||
| </Text> | ||
| </TouchableOpacity> | ||
| <View style={styles.titleText}> | ||
| <Text> | ||
| {this.props.titleText} | ||
| </Text> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } | ||
@@ -89,15 +99,21 @@ } | ||
| renderCitys() { | ||
| const CITY=this.props.cityData | ||
| const citys = Object.keys(CITY).map((index, ele) => ( | ||
| <View key={index}> | ||
| <Text style={styles.title}> | ||
| {index} | ||
| </Text> | ||
| <View style={styles.cityBox}> | ||
| {this.renderCityItem(CITY[index])} | ||
| </View> | ||
| </View> | ||
| )) | ||
| return citys | ||
| const CITY = this.props.cityData; | ||
| return ( | ||
| <FlatList | ||
| removeClippedSubviews | ||
| initialListSize={10} | ||
| keyExtractor={(item, index) => `letter${index}`} | ||
| data={Object.keys(CITY)} | ||
| renderItem={({ item }) => ( | ||
| <View> | ||
| <Text style={styles.title}> | ||
| {item} | ||
| </Text> | ||
| <View style={styles.cityBox}> | ||
| {this.renderCityItem(CITY[item])} | ||
| </View> | ||
| </View> | ||
| )} | ||
| /> | ||
| ); | ||
| } | ||
@@ -112,14 +128,14 @@ | ||
| transform: [{ | ||
| translateY: this.state.modalY | ||
| }] | ||
| } | ||
| translateY: this.state.modalY, | ||
| }], | ||
| }, | ||
| ]} | ||
| > | ||
| <StatusBar hidden/> | ||
| {this.renderHeader()} | ||
| <ScrollView> | ||
| {this.renderCitys()} | ||
| </ScrollView> | ||
| <StatusBar hidden /> | ||
| {this.renderHeader()} | ||
| <ScrollView> | ||
| {this.renderCitys()} | ||
| </ScrollView> | ||
| </Animated.View> | ||
| ) | ||
| ); | ||
| } | ||
@@ -134,6 +150,6 @@ } | ||
| cancelColor: '#51a8fb', | ||
| cancelSize : 14, | ||
| cancelSize: 14, | ||
| selectedBg: '#26A1FD', | ||
| cityGrid: 0.5, | ||
| } | ||
| cityGrid: 1, | ||
| }; | ||
@@ -152,3 +168,3 @@ CitySelect.propTypes = { | ||
| cityData: PropTypes.object.isRequired, | ||
| } | ||
| }; | ||
@@ -173,3 +189,3 @@ const styles = StyleSheet.create({ | ||
| }, | ||
| cancel:{ | ||
| cancel: { | ||
| position: 'absolute', | ||
@@ -196,3 +212,3 @@ left: 10, | ||
| borderColor: '#f3f3f3', | ||
| justifyContent: 'center' | ||
| justifyContent: 'center', | ||
| }, | ||
@@ -202,5 +218,5 @@ cityText: { | ||
| fontSize: 12, | ||
| } | ||
| }) | ||
| }, | ||
| }); | ||
| export default CitySelect | ||
| export default CitySelect; |
| { | ||
| "name": "react-native-city-select", | ||
| "version": "0.1.5", | ||
| "version": "0.1.6", | ||
| "auth": "ryanyu104", | ||
@@ -14,3 +14,6 @@ "dependencies": {}, | ||
| "select-city" | ||
| ] | ||
| ], | ||
| "devDependencies": { | ||
| "prop-types": "^15.6.1" | ||
| } | ||
| } |
@@ -5,3 +5,3 @@ # react-native-city-select | ||
|  | ||
|  | ||
@@ -146,3 +146,3 @@ ## Table of contents | ||
| hasHeader | boolean | true | ||
| cityGrid | number | 0.5 | ||
| cityGrid | number | 1 | ||
@@ -149,0 +149,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-73.92%
88942
- Dev dependency count
- increased byInfinity%
1
- Number of package files
- decreased by-63.16%
7
- Lines of code
- decreased by-50.75%
1999
No dependency changes