[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
RocketChat · Sep 12, 2022 · a97b15e · a97b15e
1 parent c413fbb
commit a97b15e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/app/containers/UIKit/MultiSelect/Items.tsx b/app/containers/UIKit/MultiSelect/Items.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 import FastImage from 'react-native-fast-image';
 import { FlatList } from 'react-native-gesture-handler';
 
-import Check from '../../Check';
 import * as List from '../../List';
 import { textParser } from '../utils';
 import styles from './styles';
 import { IItemData } from '.';
 import { useTheme } from '../../../theme';
+import { CustomIcon } from '../../CustomIcon';
 
 interface IItem {
 	item: IItemData;
@@ -30,21 +30,27 @@ const Item = ({ item, selected, onSelect }: IItem) => {
 	const itemName = item.value?.name || item.text.text.toLowerCase();
 	const { colors } = useTheme();
 	return (
-		<Touchable testID={`multi-select-item-${itemName}`} key={itemName} onPress={() => onSelect(item)} style={[styles.item]}>
-			<>
-				{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
-				<Text style={{ color: colors.titleText }}>{textParser([item.text])}</Text>
-				{selected ? <Check /> : null}
-			</>
+		<Touchable testID={`multi-select-item-${itemName}`} key={itemName} onPress={() => onSelect(item)}>
+			<View style={styles.item}>
+				<View style={styles.flexZ}>
+					{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : 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>
 	);
 };
 
 const Items = ({ items, selected, onSelect }: IItems) => (
 	<FlatList
 		data={items}
-		style={[styles.items]}
-		contentContainerStyle={[styles.itemContent]}
+		style={styles.items}
+		contentContainerStyle={styles.itemContent}
 		keyboardShouldPersistTaps='always'
 		ItemSeparatorComponent={List.Separator}
 		keyExtractor={keyExtractor}

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

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