react-native-city-select - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

examples/App.js

@@ -50,2 +50,3 @@ import React from 'react';
             cityData={CITY}
+            selectedId={this.state.cityId}
          />
@@ -52,0 +53,0 @@ )

examples/citySelect.js

@@ -33,13 +33,17 @@ import React, { Component } from 'react'
   renderCityItem(cityData) {
-    const cityItem = cityData.map((i, item) => (
-      <TouchableOpacity
-        style={styles.city}
-        key={i.cityId}
-        onPress={this.props.selectCity.bind(this,i)}
-      >
-        <Text style={styles.cityText}>
-          {i.cityName}
-        </Text>
-      </TouchableOpacity>
-    ))
+    const cityItem = cityData.map((i, item) => {
+      const selectedStyle = { backgroundColor: this.props.selectedBg }
+      const extendStyle = this.props.selectedId === i.cityId ? selectedStyle : {}
+      return(
+          <TouchableOpacity
+          style={[styles.city, extendStyle]}
+          key={i.cityId}
+          onPress={this.props.selectCity.bind(this,i)}
+        >
+          <Text style={styles.cityText}>
+            {i.cityName}
+          </Text>
+        </TouchableOpacity>
+      )
+    })
 
@@ -54,3 +58,3 @@ return cityItem
     }
-    if(this.props.header){
+    if(this.props.hasHeader){
       return(
@@ -115,11 +119,13 @@ <View style={styles.header}>
 CitySelect.defaultProps = {
+  selectedId: '',
   cancelText: '取消',
   titleText: '选择城市',
-  header: true,
+  hasHeader: true,
   cancelColor: '#51a8fb',
   cancelSize : 14,
+  selectedBg: '#26A1FD',
 }
 
 CitySelect.propTypes = {
-  header: PropTypes.bool,
+  hasHeader: PropTypes.bool,
   cancelText: PropTypes.string,
@@ -129,2 +135,4 @@ cancelColor: PropTypes.string,
   titleText: PropTypes.string,
+  selectedId: PropTypes.string,
+  selectedBg: PropTypes.string,
   cancelCity: PropTypes.func.isRequired,
@@ -131,0 +139,0 @@ selectCity: PropTypes.func.isRequired,

examples/package.json

 {
-  "name": "examples",
+  "name": "AwesomeProject",
   "version": "0.1.0",
@@ -25,4 +25,4 @@ "private": true,
     "react-native": "0.50.3",
-    "react-native-city-select": "^0.1.1"
+    "react-native-city-select": "^0.1.4"
   }
 }

index.js

@@ -33,13 +33,17 @@ import React, { Component } from 'react'
   renderCityItem(cityData) {
-    const cityItem = cityData.map((i, item) => (
-      <TouchableOpacity
-        style={styles.city}
-        key={i.cityId}
-        onPress={this.props.selectCity.bind(this,i)}
-      >
-        <Text style={styles.cityText}>
-          {i.cityName}
-        </Text>
-      </TouchableOpacity>
-    ))
+    const cityItem = cityData.map((i, item) => {
+      const selectedStyle = { backgroundColor: this.props.selectedBg }
+      const extendStyle = this.props.selectedId === i.cityId ? selectedStyle : {}
+      return(
+          <TouchableOpacity
+          style={[styles.city, extendStyle]}
+          key={i.cityId}
+          onPress={this.props.selectCity.bind(this,i)}
+        >
+          <Text style={styles.cityText}>
+            {i.cityName}
+          </Text>
+        </TouchableOpacity>
+      )
+    })
 
@@ -54,3 +58,3 @@ return cityItem
     }
-    if(this.props.header){
+    if(this.props.hasHeader){
       return(
@@ -115,11 +119,13 @@ <View style={styles.header}>
 CitySelect.defaultProps = {
+  selectedId: '',
   cancelText: '取消',
   titleText: '选择城市',
-  header: true,
+  hasHeader: true,
   cancelColor: '#51a8fb',
   cancelSize : 14,
+  selectedBg: '#26A1FD',
 }
 
 CitySelect.propTypes = {
-  header: PropTypes.bool,
+  hasHeader: PropTypes.bool,
   cancelText: PropTypes.string,
@@ -129,2 +135,4 @@ cancelColor: PropTypes.string,
   titleText: PropTypes.string,
+  selectedId: PropTypes.string,
+  selectedBg: PropTypes.string,
   cancelCity: PropTypes.func.isRequired,
@@ -131,0 +139,0 @@ selectCity: PropTypes.func.isRequired,

package.json

 {
   "name": "react-native-city-select",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "auth": "ryanyu104",
@@ -5,0 +5,0 @@ "dependencies": {},

README.md

@@ -77,2 +77,3 @@ # react-native-city-select
           cityData={CITY}
+          selectedId={this.state.cityId}
         />
@@ -135,10 +136,12 @@ )
 ------ | ---- |  ----
-cancelCity | function |
+cancelCity | function | null
 cancelColor | string | '#51a8fb'
 cancelSize | number | 14
-selectCity | function |
-cityData | object |
+selectedBg | string | '#26A1FD'
+selectedId | string | ''
+selectCity | function | null
+cityData | object | null
 cancelText | string | '取消'
 titleText | string | '选择城市'
-header | boolean | true
+hasHeader | boolean | true
 
@@ -145,0 +148,0 @@

No alert changes

Improved metrics

Total package byte prevSize

340397

increased by0.25%

Number of package files

19

increased by5.56%

Lines of code

4043

increased by0.42%

Number of lines in readme file

153

increased by2%

No dependency changes