From 5771dbd066150a49b6b396420beb594d6a73af3f Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Thu, 22 Sep 2022 23:03:02 -0300 Subject: [PATCH] [FIX] SearchBox background and unify usage (#4519) --- .../__snapshots__/SearchBox.stories.storyshot | 2 +- app/containers/SearchBox/index.tsx | 5 ++++- app/views/AddExistingChannelView.tsx | 13 ++++--------- app/views/RoomMembersView/index.tsx | 4 +--- app/views/SelectListView.tsx | 9 +-------- 5 files changed, 11 insertions(+), 22 deletions(-) diff --git a/__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot b/__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot index d9eb4d88..82085d88 100644 --- a/__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot +++ b/__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\",\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":2,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\"},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`; +exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\",\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\",\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":2,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\"},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`; diff --git a/app/containers/SearchBox/index.tsx b/app/containers/SearchBox/index.tsx index acae9675..c1d1243d 100644 --- a/app/containers/SearchBox/index.tsx +++ b/app/containers/SearchBox/index.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useState } from 'react'; import { StyleSheet, TextInputProps, View } from 'react-native'; +import { useTheme } from '../../theme'; import I18n from '../../i18n'; import { FormTextInput } from '../TextInput'; @@ -14,13 +15,15 @@ const styles = StyleSheet.create({ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): JSX.Element => { const [text, setText] = useState(''); + const { colors } = useTheme(); + const internalOnChangeText = useCallback(value => { setText(value); onChangeText?.(value); }, []); return ( - + { - const { theme } = this.props; - return ( - - this.onSearchChangeText(text)} testID='add-existing-channel-view-search' /> - - ); - }; + renderHeader = () => ( + this.onSearchChangeText(text)} testID='add-existing-channel-view-search' /> + ); isChecked = (rid: string) => { const { selected } = this.state; diff --git a/app/views/RoomMembersView/index.tsx b/app/views/RoomMembersView/index.tsx index be7e70d9..80d4a337 100644 --- a/app/views/RoomMembersView/index.tsx +++ b/app/views/RoomMembersView/index.tsx @@ -379,9 +379,7 @@ const RoomMembersView = (): React.ReactElement => { ListHeaderComponent={ <> - - updateState({ filter: text.trim() })} testID='room-members-view-search' /> - + updateState({ filter: text.trim() })} testID='room-members-view-search' /> } ListFooterComponent={() => (state.isLoading ? : null)} diff --git a/app/views/SelectListView.tsx b/app/views/SelectListView.tsx index fedaeb9c..1a8d2fb9 100644 --- a/app/views/SelectListView.tsx +++ b/app/views/SelectListView.tsx @@ -107,14 +107,7 @@ class SelectListView extends React.Component { - const { theme } = this.props; - return ( - - this.search(text)} testID='select-list-view-search' /> - - ); - }; + renderSearch = () => this.search(text)} testID='select-list-view-search' />; search = async (text: string) => { try {