From 15992f55f7e6c30b8cc8c1eb51ee677edd88b4f7 Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <ethans@wix.com>
Date: Tue, 16 Oct 2018 13:48:49 +0300
Subject: [PATCH] allow render custom search component in Picker options list

---
 src/components/picker/PickerModal.js |  8 +++++++-
 src/components/picker/index.js       | 15 ++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/picker/PickerModal.js b/src/components/picker/PickerModal.js
index 4c1902ee24..a541d23ee9 100644
--- a/src/components/picker/PickerModal.js
+++ b/src/components/picker/PickerModal.js
@@ -25,6 +25,7 @@ class PickerModal extends BaseComponent {
     }),
     searchPlaceholder: PropTypes.string,
     onSearchChange: PropTypes.func,
+    renderCustomSearch: PropTypes.func,
     listProps: PropTypes.object,
   };
 
@@ -43,8 +44,13 @@ class PickerModal extends BaseComponent {
   }
 
   renderSearchInput() {
-    const {showSearch, searchStyle, searchPlaceholder, onSearchChange} = this.props;
+    const {showSearch, searchStyle, searchPlaceholder, onSearchChange, renderCustomSearch} = this.props;
+    
     if (showSearch) {
+      if (_.isFunction(renderCustomSearch)) {
+        return renderCustomSearch(this.props);
+      }
+
       return (
         <View style={this.styles.searchInputContainer}>
           <Image style={this.styles.searchIcon} source={Assets.icons.search} />
diff --git a/src/components/picker/index.js b/src/components/picker/index.js
index 56df9e53ac..4f83350d93 100644
--- a/src/components/picker/index.js
+++ b/src/components/picker/index.js
@@ -105,6 +105,10 @@ class Picker extends TextInput {
      * callback for picker modal search input text change
      */
     onSearchChange: PropTypes.func,
+    /**
+     * Render custom search input
+     */
+    renderCustomSearch: PropTypes.func,
     /**
      * Allow to use the native picker solution (different for iOS and Android)
      */
@@ -269,7 +273,15 @@ class Picker extends TextInput {
   }
 
   renderExpandableModal() {
-    const {mode, enableModalBlur, topBarProps, showSearch, searchStyle, searchPlaceholder, listProps} = this.getThemeProps();
+    const {
+      mode,
+      enableModalBlur,
+      topBarProps,
+      showSearch,
+      searchStyle,
+      searchPlaceholder,
+      renderCustomSearch,
+      listProps} = this.getThemeProps();
     const {showExpandableModal, selectedItemPosition} = this.state;
     return (
       <PickerModal
@@ -285,6 +297,7 @@ class Picker extends TextInput {
         searchStyle={searchStyle}
         searchPlaceholder={searchPlaceholder}
         onSearchChange={this.onSearchChange}
+        renderCustomSearch={renderCustomSearch}
         listProps={listProps}
       >
         {this.appendPropsToChildren(this.props.children)}