allow render custom search component in Picker options list

wix · Oct 16, 2018 · 15992f5 · 15992f5
1 parent 25e88fb
commit 15992f5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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)}