add cancelContainerStyle prop (d-a-n#41)

* add cancelContainerStyle * Remove flexGrow & maxHeight from the `cancelContainer` style
bdelville · Nov 29, 2017 · a132470 · a132470
1 parent 46f9f0e
commit a132470
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/index.js b/index.js
@@ -34,6 +34,7 @@ const propTypes = {
     optionContainerStyle:      ViewPropTypes.style,
     sectionStyle:              ViewPropTypes.style,
     sectionTextStyle:          Text.propTypes.style,
+    cancelContainerStyle:      ViewPropTypes.style,
     cancelStyle:               ViewPropTypes.style,
     cancelTextStyle:           Text.propTypes.style,
     overlayStyle:              ViewPropTypes.style,
@@ -57,6 +58,7 @@ const defaultProps = {
     optionContainerStyle:      {},
     sectionStyle:              {},
     sectionTextStyle:          {},
+    cancelContainerStyle:      {},
     cancelStyle:               {},
     cancelTextStyle:           {},
     overlayStyle:              {},
@@ -81,10 +83,10 @@ export default class ModalSelector extends BaseComponent {
         );
 
         this.state = {
-            modalVisible:  false,
-            transparent:   false,
-            selected:      'please select',
-            changedItem:   undefined,
+            modalVisible: false,
+            transparent:  false,
+            selected:     'please select',
+            changedItem:  undefined,
         };
     }
 
@@ -101,8 +103,8 @@ export default class ModalSelector extends BaseComponent {
 
     onChange(item) {
         if (Platform.OS === 'android' || !Modal.propTypes.onDismiss) {
-          // RN >= 0.50 on iOS comes with the onDismiss prop for Modal which solves RN issue #10471
-          this.props.onChange(item)
+            // RN >= 0.50 on iOS comes with the onDismiss prop for Modal which solves RN issue #10471
+            this.props.onChange(item);
         }
         this.setState({selected: item.label, changedItem: item });
         this.close();
@@ -117,7 +119,7 @@ export default class ModalSelector extends BaseComponent {
     open() {
         this.setState({
             modalVisible: true,
-            changedItem: undefined,
+            changedItem:  undefined,
         });
     }
 
@@ -133,25 +135,27 @@ export default class ModalSelector extends BaseComponent {
         return (
             <TouchableOpacity key={option.key} onPress={() => this.onChange(option)}>
                 <View style={[styles.optionStyle, this.props.optionStyle, isLastItem &&
-                    {borderBottomWidth: 0}]}>
+                {borderBottomWidth: 0}]}>
                     <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
                 </View>
             </TouchableOpacity>);
     }
 
     renderOptionList() {
-        
+
         let options = this.props.data.map((item, index) => {
             if (item.section) {
                 return this.renderSection(item);
             }
             return this.renderOption(item, index === this.props.data.length - 1);
         });
-        
+
         const closeOverlay = this.props.backdropPressToClose;
 
         return (
-            <TouchableWithoutFeedback key={'modalSelector' + (componentIndex++)} onPress={() => {closeOverlay && this.close()}}>
+            <TouchableWithoutFeedback key={'modalSelector' + (componentIndex++)} onPress={() => {
+                closeOverlay && this.close();
+            }}>
                 <View style={[styles.overlayStyle, this.props.overlayStyle]}>
                     <View style={[styles.optionContainer, this.props.optionContainerStyle]}>
                         <ScrollView keyboardShouldPersistTaps={this.props.keyboardShouldPersistTaps}>
@@ -160,7 +164,7 @@ export default class ModalSelector extends BaseComponent {
                             </View>
                         </ScrollView>
                     </View>
-                    <View style={styles.cancelContainer}>
+                    <View style={[styles.cancelContainer, this.props.cancelContainerStyle]}>
                         <TouchableOpacity onPress={this.close}>
                             <View style={[styles.cancelStyle, this.props.cancelStyle]}>
                                 <Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>

diff --git a/style.js b/style.js
@@ -25,8 +25,6 @@ export default StyleSheet.create({
     },
 
     cancelContainer: {
-        flexGrow:  1,
-        maxHeight: 30,
         alignSelf: 'stretch',
     },