From 4fa202bf43b2912ed0eac50c9615f284a440d325 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrno=20Ader?= <jyrno42@gmail.com>
Date: Mon, 23 Jul 2018 18:58:04 +0300
Subject: [PATCH] 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).
---
 README.md |  1 +
 index.js  | 22 +++++++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 36d30f15..c99f1690 100644
--- 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
index 27f1900d..85577aef 100644
--- 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>
         );
     }