Rocket.Chat.ReactNative/app/views/CreateDiscussionView/SelectChannel.tsx

79 lines
2.0 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import { Text } from 'react-native';
import { MultiSelect } from '../../containers/UIKit/MultiSelect';
import { ISearchLocal } from '../../definitions';
import I18n from '../../i18n';
import { getAvatarURL } from '../../lib/methods/helpers/getAvatarUrl';
import { ICreateDiscussionViewSelectChannel } from './interfaces';
import styles from './styles';
import { localSearchSubscription } from '../../lib/methods';
import { getRoomAvatar, getRoomTitle } from '../../lib/methods/helpers';
import { useTheme } from '../../theme';
const SelectChannel = ({
server,
token,
userId,
onChannelSelect,
initial,
blockUnauthenticatedAccess,
serverVersion
}: ICreateDiscussionViewSelectChannel): React.ReactElement => {
const [channels, setChannels] = useState<ISearchLocal[]>([]);
const { colors } = useTheme();
const getChannels = async (keyword = '') => {
try {
const res = (await localSearchSubscription({ text: keyword, filterUsers: false })) as ISearchLocal[];
setChannels(res);
return res.map(channel => ({
value: channel,
text: { text: getRoomTitle(channel) },
imageUrl: getAvatar(channel)
}));
} catch {
// do nothing
}
};
useEffect(() => {
getChannels('');
}, []);
const getAvatar = (item: ISearchLocal) =>
getAvatarURL({
text: getRoomAvatar(item),
type: item.t,
userId,
token,
server,
avatarETag: item.avatarETag,
rid: item.rid,
blockUnauthenticatedAccess,
serverVersion
});
return (
<>
<Text style={[styles.label, { color: colors.titleText }]}>{I18n.t('Parent_channel_or_group')}</Text>
<MultiSelect
inputStyle={styles.inputStyle}
onChange={onChannelSelect}
onSearch={getChannels}
value={initial && [initial]}
disabled={!!initial}
options={channels.map(channel => ({
value: channel,
text: { text: getRoomTitle(channel) },
imageUrl: getAvatar(channel)
}))}
onClose={() => getChannels('')}
placeholder={{ text: `${I18n.t('Select_a_Channel')}...` }}
/>
</>
);
};
export default SelectChannel;