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

62 lines
1.6 KiB
JavaScript

import React, { useState } from 'react';
import { Text } from 'react-native';
import PropTypes from 'prop-types';
import debounce from '../../utils/debounce';
import { avatarURL } from '../../utils/avatar';
import RocketChat from '../../lib/rocketchat';
import I18n from '../../i18n';
import { MultiSelect } from '../../containers/UIKit/MultiSelect';
import styles from './styles';
const SelectChannel = ({
server, token, userId, onChannelSelect, initial, theme
}) => {
const [channels, setChannels] = useState([]);
const getChannels = debounce(async(keyword = '') => {
try {
const res = await RocketChat.search({ text: keyword, filterUsers: false });
setChannels(res);
} catch {
// do nothing
}
}, 300);
const getAvatar = (text, type) => avatarURL({
text, type, userId, token, baseUrl: server
});
return (
<>
<Text style={styles.label}>{I18n.t('Parent_channel_or_group')}</Text>
<MultiSelect
theme={theme}
inputStyle={styles.inputStyle}
onChange={onChannelSelect}
onSearch={getChannels}
value={initial && [initial]}
disabled={initial}
options={channels.map(channel => ({
value: channel.rid,
text: { text: RocketChat.getRoomTitle(channel) },
imageUrl: getAvatar(RocketChat.getRoomAvatar(channel), channel.t)
}))}
onClose={() => setChannels([])}
placeholder={{ text: `${ I18n.t('Select_a_Channel') }...` }}
/>
</>
);
};
SelectChannel.propTypes = {
server: PropTypes.string,
token: PropTypes.string,
userId: PropTypes.string,
initial: PropTypes.object,
onChannelSelect: PropTypes.func,
theme: PropTypes.string
};
export default SelectChannel;