Solved unselect issue

Author: alvaromb

README.md

@@ -19,9 +19,9 @@ import CascadePicker from 'react-native-js-cascade-picker'
 // Render your component
 <CascadePicker
   options={[{ value: 2, label: 'Two' }, { value: 4, label: 'Four' }]}
-  valueSelected={2}
-  onChange={() => null}
-  pickerText='Hello'
+  valueSelected={this.state.val}
+  onChange={(option: Object) => this.setState({ val: option.value })}
+  pickerText='Select one'
 />
 ```
 

lib/CascadePicker.js

@@ -57,7 +57,7 @@ class CascadePicker extends React.Component<Props, State> {
     this._width = new Animated.Value(100)
   }
 
-  _startAnimation = (selectedOption: Option | any) => {
+  _startAnimation = (selectedOption: ?Option) => {
     let height = ALMOST_ZERO
     let width = 100
     let collapseAnimation = Animated.timing(this._height, {
@@ -81,24 +81,21 @@ class CascadePicker extends React.Component<Props, State> {
       }),
       collapseAnimation
     ]).start()
-    const isCollapsed = !this.state.isCollapsed
     if (selectedOption) {
-      this.setState({ isCollapsed })
       // Pass the option selected
       InteractionManager.runAfterInteractions(() => {
         this.props.onChange(selectedOption)
       })
-    } else {
-      this.setState({ isCollapsed })
     }
+    this.setState({ isCollapsed: !this.state.isCollapsed })
   }
 
-  _findElement = (element: Object) => {
-    return element.weeks === this.props.valueSelected
+  _findElement = (element: Option): boolean => {
+    return element.value === this.props.valueSelected
   }
 
   _renderChilds() {
-    return this.props.options.map((optionObject: Object, index: number) => (
+    return this.props.options.map((optionObject: Option, index: number) => (
       <OptionButton
         option={optionObject}
         onPress={this._startAnimation}
@@ -108,7 +105,7 @@ class CascadePicker extends React.Component<Props, State> {
           styles.separator,
           {
             backgroundColor:
-              optionObject.weeks === this.props.valueSelected
+              optionObject.value === this.props.valueSelected
                 ? this.props.selectedColor
                 : this.props.itemColor
           }
@@ -122,27 +119,25 @@ class CascadePicker extends React.Component<Props, State> {
   _renderButton() {
     const option: ?Option = this.props.valueSelected
       ? this.props.options.find(this._findElement)
-      : this.props.options[0]
+      : undefined
     return (
-      <View>
-        <MainOptionButton
-          isCollapsed={this.state.isCollapsed}
-          onPress={this._startAnimation}
-          style={[
-            styles.option,
-            styles.separator,
-            {
-              borderBottomColor: this.props.separatorColor,
-              backgroundColor: this.props.mainColor
-            }
-          ]}
-          textStyle={[
-            styles.mainOptionText,
-            { color: this.props.selectedTextColor }
-          ]}>
-          {option ? option.label : this.props.pickerText}
-        </MainOptionButton>
-      </View>
+      <MainOptionButton
+        isCollapsed={this.state.isCollapsed}
+        onPress={this._startAnimation}
+        style={[
+          styles.option,
+          styles.separator,
+          {
+            borderBottomColor: this.props.separatorColor,
+            backgroundColor: this.props.mainColor
+          }
+        ]}
+        textStyle={[
+          styles.mainOptionText,
+          { color: this.props.selectedTextColor }
+        ]}>
+        {option ? option.label : this.props.pickerText}
+      </MainOptionButton>
     )
   }