75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
|
import React, { useRef } from 'react';
|
||
|
|
import { FlatList, View, Text, StyleSheet } from 'react-native';
|
||
|
|
|
||
|
|
import { themes } from '../../lib/constants';
|
||
|
|
import SearchBox from '../../containers/SearchBox';
|
||
|
|
import I18n from '../../i18n';
|
||
|
|
import { ISelectedUser } from '../../reducers/selectedUsers';
|
||
|
|
import { useTheme } from '../../theme';
|
||
|
|
import sharedStyles from '../Styles';
|
||
|
|
import { useAppSelector } from '../../lib/hooks';
|
||
|
|
import Chip from '../../containers/Chip';
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
selectedText: {
|
||
|
|
marginLeft: 16,
|
||
|
|
marginBottom: 12,
|
||
|
|
fontSize: 12,
|
||
|
|
...sharedStyles.textRegular
|
||
|
|
},
|
||
|
|
contentContainerList: {
|
||
|
|
paddingHorizontal: 16,
|
||
|
|
marginBottom: 16
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const Header = ({
|
||
|
|
onChangeText,
|
||
|
|
useRealName,
|
||
|
|
onPressItem
|
||
|
|
}: {
|
||
|
|
useRealName: boolean;
|
||
|
|
onChangeText: (text: string) => void;
|
||
|
|
onPressItem: (userItem: ISelectedUser) => void;
|
||
|
|
}) => {
|
||
|
|
const flatlist = useRef<FlatList>();
|
||
|
|
const { theme } = useTheme();
|
||
|
|
const { users } = useAppSelector(state => ({
|
||
|
|
users: state.selectedUsers.users
|
||
|
|
}));
|
||
|
|
|
||
|
|
const onContentSizeChange = () => flatlist?.current?.scrollToEnd({ animated: true });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={{ backgroundColor: themes[theme].backgroundColor }}>
|
||
|
|
<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='select-users-view-search' />
|
||
|
|
{users.length === 0 ? null : (
|
||
|
|
<View>
|
||
|
|
<Text style={[styles.selectedText, { color: themes[theme].auxiliaryTintColor }]}>
|
||
|
|
{I18n.t('N_Selected_members', { n: users.length })}
|
||
|
|
</Text>
|
||
|
|
<FlatList
|
||
|
|
data={users}
|
||
|
|
ref={(ref: FlatList) => (flatlist.current = ref)}
|
||
|
|
onContentSizeChange={onContentSizeChange}
|
||
|
|
keyExtractor={item => item._id}
|
||
|
|
renderItem={({ item }) => {
|
||
|
|
const name = useRealName && item.fname ? item.fname : item.name;
|
||
|
|
const username = item.search ? (item.username as string) : item.name;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Chip text={name} avatar={username} onPress={() => onPressItem(item)} testID={`selected-user-${item.name}`} />
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
keyboardShouldPersistTaps='always'
|
||
|
|
contentContainerStyle={styles.contentContainerList}
|
||
|
|
horizontal
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
)}
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Header;
|