feat(CascadePicker): limit the Android picker to one line

xgfe · Mar 28, 2017 · d3e2ff8 · d3e2ff8
1 parent 49c939c
commit d3e2ff8
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/app/pickerLogic/cascadePicker.js b/app/pickerLogic/cascadePicker.js
@@ -277,8 +277,8 @@ class CascadePicker extends Component {
                 {that.passData && that.passData.map((item,index) =>{
                   if (this.props.loading[index]) {
                     return (
-                      <View key={index} style={[{flex: 1, alignItems: 'center', backgroundColor: 'red', borderWidth:0}, Platform.OS !== 'ios' && {justifyContent: 'center'}]}>
-                        {Platform.OS === 'ios' && <View style={{position: 'absolute', width: 501, height: 35, borderTopWidth: 0.5, borderBottomWidth: 0.5, borderColor: '#ddd', marginTop: 90.5, borderLeftWidth: 0}} />}
+                      <View key={index} style={[{flex: 1, alignItems: 'center', borderWidth:0}, Platform.OS !== 'ios' && {justifyContent: 'center'}]}>
+                        {Platform.OS === 'ios' && <View style={{position: 'absolute', width: 500, height: 36, borderTopWidth: 1, borderBottomWidth: 1, borderColor: '#ddd', marginTop: 90}} />}
                         <ActivityIndicator
                                 animating={true}
                                 size="small"
@@ -287,6 +287,7 @@ class CascadePicker extends Component {
                       </View>
                     );
                   }
+                  console.debug(index);
                   return (
                     <PickRoll
                       itemStyle={{fontSize: 16}}

diff --git a/app/pickerLogic/cascadeRoll.js b/app/pickerLogic/cascadeRoll.js
@@ -90,6 +90,7 @@ class Pickroll extends Component {
       middleItems[index + 2] = <View style={rollStyles.textContainer} key={'mid' + (index + 2)}><Animated.Text
         className={'mid' + (index + 2)}
         onPress={() => {this._moveTo(index + 2);}}
+        numberOfLines={1}
         style={[rollStyles.middleText, this.props.itemStyle,
           {
                           // todo: when add fontSize, the shaking is too obvious

diff --git a/index.android.js b/index.android.js
@@ -250,42 +250,63 @@ class TpickerEx extends Component {
       if (index === 0) {
         that.state.Cdata1[1] = [];
         that.state.Cdata1[2] = [];
+        that.state.Cdata1[3] = [];
         this.forceUpdate();
         return;
       }
       console.debug(cateMap[index - 1]);
       let url = ip + cateMap[index - 1];
-      this.setState({loadingState: [false, true, true]});
+      this.setState({loadingState: [false, true, true, true]});
       fetch(url)
       .then((res) => {
         return res.json();
       }).then((data) => {
         that.state.Cdata1[1] = data.data;
         that.state.Cdata1[2] = [];
-        this.state.loadingState = [false, false, false];
+        that.state.Cdata1[3] = [];
+        this.state.loadingState = [false, false, false, false];
         this.forceUpdate();
       });
     }
     if (wheelNumber === 1) {
       if (index === 0) {
         that.state.Cdata1[2] = [];
+        that.state.Cdata1[3] = [];
         this.forceUpdate();
         return;
       }
       let url = ip + cateMap[index - 1];
-      this.setState({loadingState: [false, false, true]});
+      this.setState({loadingState: [false, false, true, true]});
       fetch(url)
       .then((res) => {
         return res.json();
       }).then((data) => {
         that.state.Cdata1[2] = data.data;
-        this.state.loadingState = [false, false, false];
+        that.state.Cdata1[3] = [];
+        this.state.loadingState = [false, false, false, false];
+        this.forceUpdate();
+      });
+    }
+    if (wheelNumber === 2) {
+      if (index === 0) {
+        that.state.Cdata1[3] = [];
+        this.forceUpdate();
+        return;
+      }
+      let url = ip + cateMap[index - 1];
+      this.setState({loadingState: [false, false, false, true]});
+      fetch(url)
+      .then((res) => {
+        return res.json();
+      }).then((data) => {
+        that.state.Cdata1[3] = data.data;
+        this.state.loadingState = [false, false, false, false];
         this.forceUpdate();
       });
     }
   }
   _handle(level, data) {
-    this.setState({Cdata1: [data,[],[]]});
+    this.setState({Cdata1: [data,[],[],[]]});
   }
   _handle2(level, data, index) {
     this.state.Cdata[1] = data;
@@ -384,7 +405,7 @@ class TpickerEx extends Component {
         <Text style={styles.demoValue}>Cascade Picker value: {this.state.str4}</Text>
         <CascadePicker
           inputValue = {this.state.str5}
-          level = {3}
+          level = {4}
           selectedValue ={this.state.choseValue}
           data = {this.state.Cdata1}
           onWheelChange={(value, index, wheelNumber) => {this._getLevel3(value, index, wheelNumber);}}