X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fcommon%2FDiscordSelect.js;h=9ac7b5689cd41d769d768b6dc87e3f19c12beca7;hb=d650f944d661debb64954ac590d978b07619a431;hp=a279cdef83a332668ad6bed14c512cd3deb9c025;hpb=b940ecdcd62df84881f4d4555801672155c9dcce;p=alttp.git

diff --git a/resources/js/components/common/DiscordSelect.js b/resources/js/components/common/DiscordSelect.js
index a279cde..9ac7b56 100644
--- 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>;
 };