diff --git a/src/components/editorElements/selectCommunityModal/container/selectCommunityModalContainer.js b/src/components/editorElements/selectCommunityModal/container/selectCommunityModalContainer.js index 6a830c79b..83803fefd 100644 --- a/src/components/editorElements/selectCommunityModal/container/selectCommunityModalContainer.js +++ b/src/components/editorElements/selectCommunityModal/container/selectCommunityModalContainer.js @@ -15,7 +15,7 @@ import { fetchSubscribedCommunitiesSuccess, } from '../../../../redux/actions/communitiesAction'; -const SelectCommunityModalContainer = ({ onPressCommunity, currentAccount }) => { +const SelectCommunityModalContainer = ({ onPressCommunity, currentAccount, onCloseModal }) => { const dispatch = useDispatch(); const [searchedCommunities, setSearchedCommunities] = useState([]); @@ -58,6 +58,7 @@ const SelectCommunityModalContainer = ({ onPressCommunity, currentAccount }) => searchedCommunities={searchedCommunities} showSearchedCommunities={showSearchedCommunities} currentAccount={currentAccount} + onCloseModal={onCloseModal} /> ); diff --git a/src/components/editorElements/selectCommunityModal/view/selectCommunityModalView.js b/src/components/editorElements/selectCommunityModal/view/selectCommunityModalView.js index 9fe99da4c..058209f48 100644 --- a/src/components/editorElements/selectCommunityModal/view/selectCommunityModalView.js +++ b/src/components/editorElements/selectCommunityModal/view/selectCommunityModalView.js @@ -18,6 +18,7 @@ const SelectCommunityModalView = ({ searchedCommunities, showSearchedCommunities, currentAccount, + onCloseModal, intl, }) => { return ( @@ -27,7 +28,10 @@ const SelectCommunityModalView = ({ onChangeText={onChangeSearch} placeholder="search" autoFocus={false} + backEnabled={true} + onBackPress={onCloseModal} /> + {showSearchedCommunities ? ( } diff --git a/src/components/searchInput/view/searchInputStyles.js b/src/components/searchInput/view/searchInputStyles.js index ada0d828a..024cf76c6 100644 --- a/src/components/searchInput/view/searchInputStyles.js +++ b/src/components/searchInput/view/searchInputStyles.js @@ -1,6 +1,11 @@ import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + paddingLeft: 12, + }, inputWrapper: { marginTop: 20, backgroundColor: '$primaryLightBackground', @@ -31,4 +36,15 @@ export default EStyleSheet.create({ color: '$iconColor', fontSize: 22, }, + backIcon: { + fontSize: 24, + color: '$iconColor', + justifyContent: 'center', + }, + backButtonContainer: { + flex: 1, + marginTop: 20, + marginLeft: 12, + marginRight: 4, + }, }); diff --git a/src/components/searchInput/view/searchInputView.js b/src/components/searchInput/view/searchInputView.js index 24e98aab5..ac1a35d86 100644 --- a/src/components/searchInput/view/searchInputView.js +++ b/src/components/searchInput/view/searchInputView.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { SafeAreaView } from 'react-native'; +import { SafeAreaView, View } from 'react-native'; // Components import { Icon } from '../../icon'; @@ -26,6 +26,8 @@ const SearchInputView = ({ showClearButton = false, prefix = '', style, + backEnabled = false, + onBackPress, }) => { const [inputValue, setInputValue] = useState(value || ''); @@ -53,20 +55,35 @@ const SearchInputView = ({ /> ); + const inputWrapperFlex = { flex: backEnabled ? 16 : 1 }; + return ( - - - {handleOnModalClose && _renderCrossButton(() => handleOnModalClose())} - {showClearButton && _renderCrossButton(() => setInputValue(''))} + + {backEnabled && ( + + + + )} + + + + {handleOnModalClose && _renderCrossButton(() => handleOnModalClose())} + {showClearButton && _renderCrossButton(() => setInputValue(''))} + ); }; diff --git a/src/screens/editor/screen/editorScreen.js b/src/screens/editor/screen/editorScreen.js index 428d05858..3be398c5d 100644 --- a/src/screens/editor/screen/editorScreen.js +++ b/src/screens/editor/screen/editorScreen.js @@ -338,6 +338,9 @@ class EditorScreen extends Component { { + this.setState({ isCommunitiesListModalOpen: false }); + }} /> { return ( - - - - - - - - - - + + { return ( - - - - - - - - - - +