Merge pull request #1 from murilo-campaner/render-search

Added renderSearch feature
murilo-campaner · Mar 25, 2020 · b54f0b2 · b54f0b2
2 parents 934e843 + fc9f011
commit b54f0b2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Components/Modal.tsx b/src/Components/Modal.tsx
@@ -72,7 +72,7 @@ export class ModalComponent extends React.PureComponent<IModalProps, IModalState
 	}
 
 	public render(): JSX.Element {
-		const { autoSort, modalAnimationType, onClosed, showAlphabeticalIndex, searchInputTextColor, keyExtractor, showToTopButton, onEndReached, removeClippedSubviews, FlatListProps, selectPlaceholderText, searchPlaceholderText, SearchInputProps, selected, disabled, items, requireSelection, renderSelectView, ModalProps, backButtonDisabled} = this.props;
+		const { autoSort, modalAnimationType, onClosed, showAlphabeticalIndex, searchInputTextColor, keyExtractor, showToTopButton, onEndReached, removeClippedSubviews, FlatListProps, selectPlaceholderText, searchPlaceholderText, SearchInputProps, selected, disabled, items, requireSelection, renderSelectView, ModalProps, backButtonDisabled, renderSearch } = this.props;
 
 		const { modalVisible, alphabeticalIndexChars, stickyBottomButton, selectedAlpha, selectedObject, searchText } = this.state;
 
@@ -93,16 +93,23 @@ export class ModalComponent extends React.PureComponent<IModalProps, IModalState
 					{...ModalProps}
 				>
 					<SafeAreaView style={ModalStyles.container}>
-						<SearchComponent
-							searchText={searchPlaceholderText}
-							placeholderTextColor={searchInputTextColor}
-							onClose={this.onClose.bind(this)}
-							onBackRequest={this.onBackRequest.bind(this)}
-							forceSelect={requireSelection}
-							setText={(text: string) => this.setText(text)}
-							backButtonDisabled={backButtonDisabled}
-							{...SearchInputProps}
-						/>
+						{
+							renderSearch ? renderSearch(
+									this.onClose.bind(this), 
+									this.onBackRequest.bind(this)
+								) : (
+								<SearchComponent
+									searchText={searchPlaceholderText}
+									placeholderTextColor={searchInputTextColor}
+									onClose={this.onClose.bind(this)}
+									onBackRequest={this.onBackRequest.bind(this)}
+									forceSelect={requireSelection}
+									setText={(text: string) => this.setText(text)}
+									backButtonDisabled={backButtonDisabled}
+									{...SearchInputProps}
+								/>
+							)
+						}
 						<KeyboardAvoidingView style={ModalStyles.keyboardContainer}
 							behavior={Platform.OS === 'ios' ? 'padding' : null}
 							enabled>

diff --git a/src/Interfaces/IModalProps.ts b/src/Interfaces/IModalProps.ts
@@ -41,7 +41,8 @@ export interface IModalProps {
 	requireSelection: boolean;
 	renderListItem?: (selectedItem: IModalListInDto, listItem: IModalListInDto) => JSX.Element
 	renderSelectView?: (disabled: boolean, selected: IModalListInDto, showModal: () => void) => React.ReactElement
-	backButtonDisabled?: boolean
+	backButtonDisabled?: boolean,
+	renderSearch?: (onClose: () => void, onBack: () => void ) =>  JSX.Element,
 }
 
 export interface IModalState {