Adds props to allow custom rendering of RouSubItem content

lib/components/RowItem.js

@@ -70,7 +70,7 @@ class RowItem extends Component {
       ) {
         return true
       }
-      
+
     }
 
     if (this.props.searchTerm !== nextProps.searchTerm) {
@@ -82,6 +82,11 @@ class RowItem extends Component {
     if (this.props.mergedStyles !== nextProps.mergedStyles) {
       return true
     }
+
+    if (this.props.costumeSubItemContentRender !== nextProps.costumeSubItemContentRender) {
+      return true
+    }
+
     return false
   }
 
@@ -179,12 +184,12 @@ class RowItem extends Component {
       <Icon
         name="check"
         style={{
-              fontSize: 16,
-              color: mergedColors.success,
-              paddingLeft: 10,
-            }}
+          fontSize: 16,
+          color: mergedColors.success,
+          paddingLeft: 10,
+        }}
       />
-      )
+    )
       : callIfFunction(unselectedIconComponent) || null
   }
 

lib/components/RowSubItem.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types'
 import { View, TouchableOpacity, Text, Image } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
@@ -32,6 +32,9 @@ class RowSubItem extends Component {
     if (this.props.mergedStyles !== nextProps.mergedStyles) {
       return true
     }
+    if (this.props.customSubItemContentRenderer !== nextProps.customSubItemContentRenderer) {
+      return true
+    }
     return false
   }
 
@@ -77,24 +80,70 @@ class RowSubItem extends Component {
     ) : null
   }
 
-  render() {
+  _renderDefaultContent = () => {
     const {
       mergedStyles,
       mergedColors,
       subItem,
+      selectChildren,
+      selectedIconOnLeft,
+      iconKey,
       uniqueKey,
+      displayKey,
+      itemNumberOfLines,
       subItemFontFamily,
+      highlightedChildren,
+    } = this.props;
+
+    const itemSelected = this._itemSelected();
+    const highlightChild = !selectChildren && highlightedChildren.includes(subItem[uniqueKey])
+
+    return (
+      <Fragment>
+        {selectedIconOnLeft && this._renderSelectedIcon()}
+
+        {iconKey && subItem[iconKey] && (
+          <ItemIcon
+            iconKey={iconKey}
+            icon={subItem[iconKey]}
+            style={mergedStyles.itemIconStyle}
+          />
+        )}
+        <Text
+          numberOfLines={itemNumberOfLines}
+          style={[
+            {
+              flex: 1,
+              color: subItem.disabled ? mergedColors.disabled : mergedColors.subText,
+            },
+            subItemFontFamily,
+            mergedStyles.subItemText,
+            (itemSelected || highlightChild) && mergedStyles.selectedSubItemText,
+          ]}
+        >
+          {subItem[displayKey]}
+        </Text>
+        {!selectedIconOnLeft && this._renderSelectedIcon()}
+      </Fragment>
+    )
+  }
+
+  render() {
+    const {
+      mergedStyles,
+      mergedColors,
+      subItem,
+      uniqueKey,
       selectChildren,
-      selectedIconOnLeft,
       highlightedChildren,
-      itemNumberOfLines,
-      displayKey,
-      iconKey,
+      customSubItemContentRenderer: CustomSubItemContentRenderer
     } = this.props
 
     const highlightChild = !selectChildren && highlightedChildren.includes(subItem[uniqueKey])
     const itemSelected = this._itemSelected()
 
+    const shouldUseCostumeRender = CustomSubItemContentRenderer ? true : false;
+
     return (
       <View
         key={subItem[uniqueKey]}
@@ -120,30 +169,9 @@ class RowSubItem extends Component {
             (itemSelected || highlightChild) && mergedStyles.selectedSubItem,
           ]}
         >
-          {selectedIconOnLeft && this._renderSelectedIcon()}
+          {!shouldUseCostumeRender && this._renderDefaultContent()}
 
-          {iconKey && subItem[iconKey] && (
-            <ItemIcon
-              iconKey={iconKey}
-              icon={subItem[iconKey]}
-              style={mergedStyles.itemIconStyle}
-            />
-          )}
-          <Text
-            numberOfLines={itemNumberOfLines}
-            style={[
-              {
-                flex: 1,
-                color: subItem.disabled ? mergedColors.disabled : mergedColors.subText,
-              },
-              subItemFontFamily,
-              mergedStyles.subItemText,
-              (itemSelected || highlightChild) && mergedStyles.selectedSubItemText,
-            ]}
-          >
-            {subItem[displayKey]}
-          </Text>
-          {!selectedIconOnLeft && this._renderSelectedIcon()}
+          {shouldUseCostumeRender && <CustomSubItemContentRenderer subItem={subItem} isItemSelected={itemSelected}/> }
         </TouchableOpacity>
       </View>
     )

lib/sectioned-multi-select.js

@@ -151,6 +151,7 @@ class SectionedMultiSelect extends PureComponent {
     dropDownToggleIconUpComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     dropDownToggleIconDownComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     chipRemoveIconComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    customSubItemContentRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     selectChildren: PropTypes.bool,
     highlightChildren: PropTypes.bool,
     onSelectedItemObjectsChange: PropTypes.func,
@@ -485,6 +486,16 @@ class SectionedMultiSelect extends PureComponent {
     })
     onToggleSelector && onToggleSelector(false)
   }
+
+  _openSelector = () => {
+    const { onToggleSelector } = this.props
+    this.setState({
+      selector: true,
+      searchTerm: '',
+    })
+    onToggleSelector && onToggleSelector(true)
+  }
+
   _submitSelection = () => {
     const { onConfirm } = this.props
     this._toggleSelector()
@@ -951,13 +962,13 @@ class SectionedMultiSelect extends PureComponent {
           onRequestClose={this._closeSelector}
         >
           <this.BackdropView
-            style={[{ 
-              flex: 1, 
-              width: '100%', 
-              height: '100%', 
-              position: 'absolute', 
+            style={[{
+              flex: 1,
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
               backgroundColor: 'rgba(0,0,0,0.5)',
-              zIndex: 0 
+              zIndex: 0
             }, styles.backdrop]}
           />
             <View
@@ -1117,7 +1128,7 @@ class SectionedMultiSelect extends PureComponent {
                 styles.selectToggle,
               ]}
             >
-                {this._getSelectLabel()} 
+                {this._getSelectLabel()}
               {callIfFunction(selectToggleIconComponent) || (
                 <Icon
                   size={24}