import Icon from './Icon';
import debounce from '../../helpers/debounce';
-const ChannelSelect = ({ joinable, manageable, onChange, value }) => {
+const ChannelSelect = ({
+ autoSelect,
+ joinable,
+ manageable,
+ onChange,
+ readOnly,
+ value,
+}) => {
const [resolved, setResolved] = useState(null);
const [results, setResults] = useState([]);
const [search, setSearch] = useState('');
});
ctrl = null;
setResults(response.data);
+ if (autoSelect && !phrase && response.data.length === 1) {
+ onChange({
+ channel: response.data[0],
+ target: { value: response.data[0].id },
+ });
+ }
} catch (e) {
ctrl = null;
console.error(e);
}
- }, 300), [manageable]);
+ }, 300), [autoSelect, joinable, manageable]);
useEffect(() => {
fetch(search);
if (value) {
return <div className="d-flex align-items-center justify-content-between">
<span>{resolved ? resolved.title : value}</span>
- <Button
- className="ms-2"
- onClick={() => onChange({ channel: null, target: { value: '' }})}
- title={t('button.unset')}
- variant="outline-danger"
- >
- <Icon.REMOVE title="" />
- </Button>
+ {!readOnly ?
+ <Button
+ className="ms-2"
+ onClick={() => onChange({ channel: null, target: { value: '' }})}
+ title={t('button.unset')}
+ variant="outline-danger"
+ >
+ <Icon.REMOVE title="" />
+ </Button>
+ : null}
</div>;
}
return <div className={`channel-select ${showResults ? 'expanded' : 'collapsed'}`} ref={ref}>
name={Math.random().toString(20).substr(2, 10)}
onChange={e => setSearch(e.target.value)}
onFocus={() => setShowResults(true)}
+ readOnly={readOnly}
type="search"
value={search}
/>
};
ChannelSelect.propTypes = {
+ autoSelect: PropTypes.bool,
joinable: PropTypes.bool,
manageable: PropTypes.bool,
onChange: PropTypes.func,
+ readOnly: PropTypes.bool,
value: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,