respond to whispers

[alttp.git] / resources / js / components / common / DiscordSelect.js

diff --git a/resources/js/components/common/DiscordSelect.js b/resources/js/components/common/DiscordSelect.js
index a279cdef83a332668ad6bed14c512cd3deb9c025..9ac7b5689cd41d769d768b6dc87e3f19c12beca7 100644 (file)
--- a/resources/js/components/common/DiscordSelect.js
+++ b/resources/js/components/common/DiscordSelect.js
@@ -1,8 +1,10 @@
 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';
 
@@ -13,6 +15,7 @@ const DiscordSelect = ({ onChange, value }) => {
        const [showResults, setShowResults] = useState(false);
 
        const ref = useRef(null);
+       const { t } = useTranslation();
 
        useEffect(() => {
                const handleEventOutside = e => {
@@ -20,10 +23,10 @@ const DiscordSelect = ({ onChange, value }) => {
                                setShowResults(false);
                        }
                };
-               document.addEventListener('click', handleEventOutside, true);
+               document.addEventListener('mousedown', handleEventOutside, true);
                document.addEventListener('focus', handleEventOutside, true);
                return () => {
-                       document.removeEventListener('click', handleEventOutside, true);
+                       document.removeEventListener('mousedown', handleEventOutside, true);
                        document.removeEventListener('focus', handleEventOutside, true);
                };
        }, []);
@@ -66,7 +69,17 @@ const DiscordSelect = ({ onChange, value }) => {
        }, [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
@@ -78,17 +91,26 @@ const DiscordSelect = ({ onChange, value }) => {
                        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>;
 };