verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FIX] SearchBox background and unify usage (#4519)

This commit is contained in:
Reinaldo Neto 2022-09-22 23:03:02 -03:00 committed by GitHub
parent e10de8b209
commit 5771dbd066
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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\\":[\\"\\"]}]}]}]}"`;

5
app/containers/SearchBox/index.tsx
View File

@ -1,6 +1,7 @@
import React, { useCallback, useState } from 'react'; import React, { useCallback, useState } from 'react';
import { StyleSheet, TextInputProps, View } from 'react-native'; import { StyleSheet, TextInputProps, View } from 'react-native';
import { useTheme } from '../../theme';
import I18n from '../../i18n'; import I18n from '../../i18n';
import { FormTextInput } from '../TextInput'; import { FormTextInput } from '../TextInput';
@ -14,13 +15,15 @@ const styles = StyleSheet.create({
const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): JSX.Element => { const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): JSX.Element => {
const [text, setText] = useState(''); const [text, setText] = useState('');
const { colors } = useTheme();
const internalOnChangeText = useCallback(value => { const internalOnChangeText = useCallback(value => {
setText(value); setText(value);
onChangeText?.(value); onChangeText?.(value);
}, []); }, []);
return ( return (
<View testID='searchbox'> <View testID='searchbox' style={{ backgroundColor: colors.backgroundColor }}>
<FormTextInput <FormTextInput
autoCapitalize='none' autoCapitalize='none'
autoCorrect={false} autoCorrect={false}

13
app/views/AddExistingChannelView.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native'; import { RouteProp } from '@react-navigation/native';
import { FlatList, View } from 'react-native'; import { FlatList } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Q } from '@nozbe/watermelondb'; import { Q } from '@nozbe/watermelondb';
@ -145,14 +145,9 @@ class AddExistingChannelView extends React.Component<IAddExistingChannelViewProp
} }
}; };
renderHeader = () => { renderHeader = () => (
const { theme } = this.props; <SearchBox onChangeText={(text: string) => this.onSearchChangeText(text)} testID='add-existing-channel-view-search' />
return ( );
<View style={{ backgroundColor: themes[theme].auxiliaryBackground }}>
<SearchBox onChangeText={(text: string) => this.onSearchChangeText(text)} testID='add-existing-channel-view-search' />
</View>
);
};
isChecked = (rid: string) => { isChecked = (rid: string) => {
const { selected } = this.state; const { selected } = this.state;

4
app/views/RoomMembersView/index.tsx
View File

@ -379,9 +379,7 @@ const RoomMembersView = (): React.ReactElement => {
ListHeaderComponent={ ListHeaderComponent={
<> <>
<ActionsSection joined={params.joined as boolean} rid={state.room.rid} t={state.room.t} /> <ActionsSection joined={params.joined as boolean} rid={state.room.rid} t={state.room.t} />
<View style={{ backgroundColor: colors.backgroundColor }}> <SearchBox onChangeText={text => updateState({ filter: text.trim() })} testID='room-members-view-search' />
<SearchBox onChangeText={text => updateState({ filter: text.trim() })} testID='room-members-view-search' />
</View>
</> </>
} }
ListFooterComponent={() => (state.isLoading ? <ActivityIndicator /> : null)} ListFooterComponent={() => (state.isLoading ? <ActivityIndicator /> : null)}

9
app/views/SelectListView.tsx
View File

@ -107,14 +107,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
); );
}; };
renderSearch = () => { renderSearch = () => <SearchBox onChangeText={(text: string) => this.search(text)} testID='select-list-view-search' />;
const { theme } = this.props;
return (
<View style={{ backgroundColor: themes[theme].auxiliaryBackground }}>
<SearchBox onChangeText={(text: string) => this.search(text)} testID='select-list-view-search' />
</View>
);
};
search = async (text: string) => { search = async (text: string) => {
try { try {