From 1c9fd02dc44711ab38a809b110766cd706a7810b Mon Sep 17 00:00:00 2001 From: Or Lavy Date: Wed, 19 Jun 2019 13:43:50 +0300 Subject: [PATCH 1/3] Adds props to allow custom rendering of RouSubItem content --- lib/components/RowItem.js | 17 ++++--- lib/components/RowSubItem.js | 88 +++++++++++++++++++++++------------ lib/sectioned-multi-select.js | 15 +++--- 3 files changed, 78 insertions(+), 42 deletions(-) diff --git a/lib/components/RowItem.js b/lib/components/RowItem.js index aecbbc1..5626a22 100644 --- a/lib/components/RowItem.js +++ b/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 { - ) + ) : callIfFunction(unselectedIconComponent) || null } diff --git a/lib/components/RowSubItem.js b/lib/components/RowSubItem.js index ed593db..9a47c2b 100644 --- a/lib/components/RowSubItem.js +++ b/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,72 @@ 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 ( + + {selectedIconOnLeft && this._renderSelectedIcon()} + + {iconKey && subItem[iconKey] && ( + + )} + + {subItem[displayKey]} + + {!selectedIconOnLeft && this._renderSelectedIcon()} + + ) + } + + render() { + const { + mergedStyles, + mergedColors, + subItem, + uniqueKey, selectChildren, - selectedIconOnLeft, highlightedChildren, - itemNumberOfLines, - displayKey, - iconKey, + + // OL_CHANGE + customSubItemContentRenderer: CustomSubItemContentRenderer } = this.props const highlightChild = !selectChildren && highlightedChildren.includes(subItem[uniqueKey]) const itemSelected = this._itemSelected() + const shouldUseCostumeRender = CustomSubItemContentRenderer ? true : false; + return ( - {selectedIconOnLeft && this._renderSelectedIcon()} + {!shouldUseCostumeRender && this._renderDefaultContent()} - {iconKey && subItem[iconKey] && ( - - )} - - {subItem[displayKey]} - - {!selectedIconOnLeft && this._renderSelectedIcon()} + {shouldUseCostumeRender && } ) diff --git a/lib/sectioned-multi-select.js b/lib/sectioned-multi-select.js index 17c2046..afe04bf 100644 --- a/lib/sectioned-multi-select.js +++ b/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, @@ -951,13 +952,13 @@ class SectionedMultiSelect extends PureComponent { onRequestClose={this._closeSelector} > - {this._getSelectLabel()} + {this._getSelectLabel()} {callIfFunction(selectToggleIconComponent) || ( Date: Mon, 24 Jun 2019 14:31:41 +0300 Subject: [PATCH 2/3] Changes 'isItemSelected' prop to be use the primitive boolean values and not the calculating function --- lib/components/RowSubItem.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/components/RowSubItem.js b/lib/components/RowSubItem.js index 9a47c2b..294c139 100644 --- a/lib/components/RowSubItem.js +++ b/lib/components/RowSubItem.js @@ -136,8 +136,6 @@ class RowSubItem extends Component { uniqueKey, selectChildren, highlightedChildren, - - // OL_CHANGE customSubItemContentRenderer: CustomSubItemContentRenderer } = this.props @@ -173,7 +171,7 @@ class RowSubItem extends Component { > {!shouldUseCostumeRender && this._renderDefaultContent()} - {shouldUseCostumeRender && } + {shouldUseCostumeRender && } ) From 53a86fb7e6da50b0745a6a02231bd468f4e970e0 Mon Sep 17 00:00:00 2001 From: Or Lavy Date: Mon, 24 Jun 2019 16:37:47 +0300 Subject: [PATCH 3/3] Adds an '_openSelector' function --- lib/sectioned-multi-select.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/lib/sectioned-multi-select.js b/lib/sectioned-multi-select.js index afe04bf..8745125 100644 --- a/lib/sectioned-multi-select.js +++ b/lib/sectioned-multi-select.js @@ -486,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()