Add prop customSelector (#72)

The prop can be used to render a custom node instead of the built-in select box. Note: If using this prop one must control opening/closing themselves (either via `visible` prop or by calling `open/close` on the ref).
peacechen · Jul 23, 2018 · 4fa202b · 4fa202b
1 parent 931de35
commit 4fa202b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -138,3 +138,4 @@ Prop                | Type     | Optional | Default      | Description
 `scrollViewAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the modal ScrollView
 `cancelButtonAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the cancel button
 `modalOpenerHitSlop` | object | Yes | {} | How far touch can stray away from touchable that opens modal ([RN docs](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#hitslop))
+`customSelector`     | node   | Yes | undefined          | Render a custom node instead of the built-in select box.
diff --git a/index.js b/index.js
@@ -56,6 +56,7 @@ const propTypes = {
     cancelButtonAccessibilityLabel: PropTypes.string,
     passThruProps:                  PropTypes.object,
     modalOpenerHitSlop:             PropTypes.object,
+    customSelector:                 PropTypes.node,
 };
 
 const defaultProps = {
@@ -94,6 +95,7 @@ const defaultProps = {
     cancelButtonAccessibilityLabel: undefined,
     passThruProps:                  {},
     modalOpenerHitSlop:             {top: 0, bottom: 0, left: 0, right: 0},
+    customSelector:                 undefined,
 };
 
 export default class ModalSelector extends React.Component {
@@ -241,11 +243,21 @@ export default class ModalSelector extends React.Component {
         return (
             <View style={this.props.style} {...this.props.passThruProps}>
                 {dp}
-                <TouchableOpacity hitSlop={this.props.modalOpenerHitSlop} activeOpacity={this.props.touchableActiveOpacity} style={this.props.touchableStyle} onPress={this.open} disabled={this.props.disabled}>
-                    <View style={this.props.childrenContainerStyle} pointerEvents="none">
-                        {this.renderChildren()}
-                    </View>
-                </TouchableOpacity>
+                {this.props.customSelector ?
+                    this.props.customSelector
+                    :
+                    <TouchableOpacity
+                        hitSlop={this.props.modalOpenerHitSlop}
+                        activeOpacity={this.props.touchableActiveOpacity}
+                        style={this.props.touchableStyle}
+                        onPress={this.open}
+                        disabled={this.props.disabled}
+                    >
+                        <View style={this.props.childrenContainerStyle} pointerEvents="none">
+                            {this.renderChildren()}
+                        </View>
+                    </TouchableOpacity>
+                }
             </View>
         );
     }