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] Big usernames during discussion creation bugs UI (#4499) 

* fix multiselect itens style

* remove useless brackets

* remove scroll from the top of the list items
This commit is contained in:
Gleidson Daniel Silva 2022-09-09 15:23:00 -03:00 committed by Diego Mello
parent c413fbb692
commit a97b15e1be
3 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/containers/UIKit/MultiSelect/Items.tsx
View File

@ -1,15 +1,15 @@
import React from 'react'; import React from 'react';
import { Text } from 'react-native'; import { Text, View } from 'react-native';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import FastImage from 'react-native-fast-image'; import FastImage from 'react-native-fast-image';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import Check from '../../Check';
import * as List from '../../List'; import * as List from '../../List';
import { textParser } from '../utils'; import { textParser } from '../utils';
import styles from './styles'; import styles from './styles';
import { IItemData } from '.'; import { IItemData } from '.';
import { useTheme } from '../../../theme'; import { useTheme } from '../../../theme';
import { CustomIcon } from '../../CustomIcon';
interface IItem { interface IItem {
item: IItemData; item: IItemData;
@ -30,12 +30,18 @@ const Item = ({ item, selected, onSelect }: IItem) => {
const itemName = item.value?.name || item.text.text.toLowerCase(); const itemName = item.value?.name || item.text.text.toLowerCase();
const { colors } = useTheme(); const { colors } = useTheme();
return ( return (
<Touchable testID={`multi-select-item-${itemName}`} key={itemName} onPress={() => onSelect(item)} style={[styles.item]}> <Touchable testID={`multi-select-item-${itemName}`} key={itemName} onPress={() => onSelect(item)}>
<> <View style={styles.item}>
{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null} <View style={styles.flexZ}>
<Text style={{ color: colors.titleText }}>{textParser([item.text])}</Text> {item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
{selected ? <Check /> : null} </View>
</> <View style={styles.flex}>
<Text numberOfLines={1} style={{ color: colors.titleText }}>
{textParser([item.text])}
</Text>
</View>
<View style={styles.flexZ}>{selected ? <CustomIcon color={colors.tintColor} size={22} name='check' /> : null}</View>
</View>
</Touchable> </Touchable>
); );
}; };
@ -43,8 +49,8 @@ const Item = ({ item, selected, onSelect }: IItem) => {
const Items = ({ items, selected, onSelect }: IItems) => ( const Items = ({ items, selected, onSelect }: IItems) => (
<FlatList <FlatList
data={items} data={items}
style={[styles.items]} style={styles.items}
contentContainerStyle={[styles.itemContent]} contentContainerStyle={styles.itemContent}
keyboardShouldPersistTaps='always' keyboardShouldPersistTaps='always'
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
keyExtractor={keyExtractor} keyExtractor={keyExtractor}

28
app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
View File

@ -65,19 +65,21 @@ export const MultiSelectContent = React.memo(
); );
return ( return (
<View style={[styles.actionSheetContainer]}> <View style={styles.actionSheetContainer}>
<FormTextInput <View style={styles.inputStyle}>
testID='multi-select-search' <FormTextInput
onChangeText={handleSearch} testID='multi-select-search'
placeholder={I18n.t('Search')} onChangeText={handleSearch}
inputStyle={{ backgroundColor: colors.focusedBackground }} placeholder={I18n.t('Search')}
bottomSheet={isIOS} inputStyle={{ backgroundColor: colors.focusedBackground }}
onSubmitEditing={() => { bottomSheet={isIOS}
setTimeout(() => { onSubmitEditing={() => {
hideActionSheet(); setTimeout(() => {
}, 150); hideActionSheet();
}} }, 150);
/> }}
/>
</View>
<Items items={items || []} selected={selected} onSelect={onSelect} /> <Items items={items || []} selected={selected} onSelect={onSelect} />
</View> </View>
); );

15
app/containers/UIKit/MultiSelect/styles.ts
View File

@ -9,7 +9,6 @@ export default StyleSheet.create({
justifyContent: 'flex-end' justifyContent: 'flex-end'
}, },
actionSheetContainer: { actionSheetContainer: {
padding: 16,
flex: 1 flex: 1
}, },
content: { content: {
@ -28,9 +27,9 @@ export default StyleSheet.create({
}, },
item: { item: {
height: 48, height: 48,
maxWidth: '85%',
alignItems: 'center', alignItems: 'center',
flexDirection: 'row' flexDirection: 'row',
flex: 1
}, },
input: { input: {
minHeight: 48, minHeight: 48,
@ -46,8 +45,12 @@ export default StyleSheet.create({
right: 16 right: 16
}, },
itemContent: { itemContent: {
paddingHorizontal: 16,
paddingBottom: 36 paddingBottom: 36
}, },
inputStyle: {
paddingHorizontal: 16
},
items: { items: {
height: 226 height: 226
}, },
@ -83,5 +86,11 @@ export default StyleSheet.create({
borderRadius: 2, borderRadius: 2,
width: 24, width: 24,
height: 24 height: 24
},
flex: {
flex: 1
},
flexZ: {
flex: 0
} }
}); });