import axios from 'axios';
import PropTypes from 'prop-types';
import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Form, ListGroup } from 'react-bootstrap';
+import { Alert, Button, Form, ListGroup } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import Icon from './Icon';
import GuildBox from '../discord-guilds/Box';
import debounce from '../../helpers/debounce';
const [showResults, setShowResults] = useState(false);
const ref = useRef(null);
+ const { t } = useTranslation();
useEffect(() => {
const handleEventOutside = e => {
}, [value]);
if (value) {
- return <div>{resolved ? <GuildBox guild={resolved} /> : value}</div>;
+ return <div className="d-flex align-items-center justify-content-between">
+ <span>{resolved ? <GuildBox guild={resolved} /> : value}</span>
+ <Button
+ className="ms-2"
+ onClick={() => onChange({ guild: null, target: { value: '' }})}
+ title={t('button.unset')}
+ variant="outline-danger"
+ >
+ <Icon.REMOVE title="" />
+ </Button>
+ </div>;
}
return <div className={`discord-select ${showResults ? 'expanded' : 'collapsed'}`} ref={ref}>
<Form.Control
value={search}
/>
<div className="search-results-holder">
- <ListGroup className="search-results">
- {results.map(result =>
- <ListGroup.Item
- action
- key={result.id}
- onClick={() => onChange({ target: { value: result.guild_id }})}
- >
- <GuildBox guild={result} />
- </ListGroup.Item>
- )}
- </ListGroup>
+ {results.length ?
+ <ListGroup className="search-results">
+ {results.map(result =>
+ <ListGroup.Item
+ action
+ key={result.id}
+ onClick={() => onChange({
+ guild: result,
+ target: { value: result.guild_id },
+ })}
+ >
+ <GuildBox guild={result} />
+ </ListGroup.Item>
+ )}
+ </ListGroup>
+ :
+ <Alert className="search-results" variant="info">
+ {t('search.noResults')}
+ </Alert>
+ }
</div>
</div>;
};