Added changes from d-a-n#29

Added changes from d-a-n#32 Added changes from d-a-n#37 Added changes from d-a-n#40 Added Properties (default): optionContainerStyle: ({}) optionNumberOfLines (undefined) optionEllipsizeMode (tail)
Proberts · Apr 13, 2017 · 3e641c8 · 3e641c8
1 parent a2d0b9b
commit 3e641c8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/index.js b/index.js
@@ -23,11 +23,15 @@ let componentIndex = 0;
 const propTypes = {
     data: PropTypes.array,
     onChange: PropTypes.func,
+    onClose: PropTypes.func,
     initValue: PropTypes.string,
     style: View.propTypes.style,
     selectStyle: View.propTypes.style,
+    optionContainer: View.propTypes.style,
     optionStyle: View.propTypes.style,
     optionTextStyle: Text.propTypes.style,
+    optionNumberOfLines: PropTypes.number,
+    optionEllipsizeMode: PropTypes.oneOf(['head', 'middle', 'tail', 'clip']),
     sectionStyle: View.propTypes.style,
     sectionTextStyle: Text.propTypes.style,
     cancelStyle: View.propTypes.style,
@@ -39,11 +43,15 @@ const propTypes = {
 const defaultProps = {
     data: [],
     onChange: ()=> {},
+    onClose: ()=> {},
     initValue: 'Select me!',
     style: {},
     selectStyle: {},
+    optionContainer: {},
     optionStyle: {},
     optionTextStyle: {},
+    optionNumberOfLines: undefined,
+    optionEllipsizeMode: 'tail',
     sectionStyle: {},
     sectionTextStyle: {},
     cancelStyle: {},
@@ -60,16 +68,18 @@ export default class ModalPicker extends BaseComponent {
 
         this._bind(
             'onChange',
+            'onClose',
             'open',
             'close',
             'renderChildren'
         );
 
         this.state = {
-            animationType: 'slide',
+            animationType: 'none',
             modalVisible: false,
             transparent: false,
             selected: 'please select'
+            selectedObject: {},
         };
     }
 
@@ -84,12 +94,23 @@ export default class ModalPicker extends BaseComponent {
       }
     }
 
+  	componentWillUpdate(nextProps, nextState){
+      if (nextState.modalVisible != this.state.modalVisible && nextState.modalVisible === false) {
+        this.onClose(nextState.selectedObject);
+      }
+  	}
+
+
     onChange(item) {
         this.props.onChange(item);
-        this.setState({selected: item.label});
+        this.setState({selected: item.label, selectedObject: item});
         this.close();
     }
 
+    onClose(item) {
+        this.props.onClose(item);
+    }
+
     close() {
       this.setState({
         modalVisible: false
@@ -114,7 +135,9 @@ export default class ModalPicker extends BaseComponent {
         return (
             <TouchableOpacity key={option.key} onPress={()=>this.onChange(option)}>
                 <View style={[styles.optionStyle, this.props.optionStyle]}>
-                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
+                    <Text numberOfLines={this.props.optionNumberOfLines}
+                      ellipsizeMode={this.props.optionEllipsizeMode}
+                      style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
                 </View>
             </TouchableOpacity>)
     }
@@ -129,9 +152,10 @@ export default class ModalPicker extends BaseComponent {
         });
 
         return (
+
             <View style={[styles.overlayStyle, this.props.overlayStyle]} key={'modalPicker'+(componentIndex++)}>
-                <View style={styles.optionContainer}>
-                    <ScrollView keyboardShouldPersistTaps>
+                <View style={[styles.optionContainer, this.props.optionContainer]}>
+                    <ScrollView keyboardShouldPersistTaps='always'>
                         <View style={{paddingHorizontal:10}}>
                             {options}
                         </View>

diff --git a/style.js b/style.js
@@ -8,35 +8,33 @@ const PADDING = 8;
 const BORDER_RADIUS = 5;
 const FONT_SIZE = 16;
 const HIGHLIGHT_COLOR = 'rgba(0,118,255,0.9)';
-const OPTION_CONTAINER_HEIGHT = 400;
 
 export default StyleSheet.create({
 
     overlayStyle: {
         width: width,
         height: height,
+        padding: width*0.1,
+        justifyContent: 'center',
         backgroundColor: 'rgba(0,0,0,0.7)'
     },
 
     optionContainer: {
         borderRadius:BORDER_RADIUS,
-        width:width*0.8,
-        height:OPTION_CONTAINER_HEIGHT,
+        flexShrink: 1,
+        marginBottom: 8,
+        padding: PADDING,
         backgroundColor:'rgba(255,255,255,0.8)',
-        left:width*0.1,
-        top:(height-OPTION_CONTAINER_HEIGHT)/2
     },
 
     cancelContainer: {
-        left:width*0.1,
-        top:(height-OPTION_CONTAINER_HEIGHT)/2 + 10
+        alignSelf: 'center'
     },
 
     selectStyle: {
-        flex: 1,
         borderColor: '#ccc',
         borderWidth: 1,
-        padding: 8,
+        padding: PADDING,
         borderRadius: BORDER_RADIUS
     },
 
@@ -81,4 +79,4 @@ export default StyleSheet.create({
         textAlign: 'center',
         fontSize: FONT_SIZE
     }
-});
+});