respond to whispers

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

diff --git a/resources/js/components/common/ChannelSelect.js b/resources/js/components/common/ChannelSelect.js
index 701f196591e1402e4cbd4936de7994b40a1e780f..355b02b50d82824d0a3ff7ec6bc1901289c9ee9d 100644 (file)
--- a/resources/js/components/common/ChannelSelect.js
+++ b/resources/js/components/common/ChannelSelect.js
@@ -7,7 +7,14 @@ import { useTranslation } from 'react-i18next';
 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('');
@@ -22,10 +29,10 @@ const ChannelSelect = ({ joinable, manageable, 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);
                };
        }, []);
@@ -47,11 +54,17 @@ const ChannelSelect = ({ joinable, manageable, onChange, value }) => {
                        });
                        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);
@@ -72,14 +85,16 @@ const ChannelSelect = ({ joinable, manageable, onChange, value }) => {
        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}>
@@ -88,6 +103,7 @@ const ChannelSelect = ({ joinable, manageable, onChange, value }) => {
                        name={Math.random().toString(20).substr(2, 10)}
                        onChange={e => setSearch(e.target.value)}
                        onFocus={() => setShowResults(true)}
+                       readOnly={readOnly}
                        type="search"
                        value={search}
                />
@@ -117,9 +133,11 @@ const ChannelSelect = ({ joinable, manageable, onChange, value }) => {
 };
 
 ChannelSelect.propTypes = {
+       autoSelect: PropTypes.bool,
        joinable: PropTypes.bool,
        manageable: PropTypes.bool,
        onChange: PropTypes.func,
+       readOnly: PropTypes.bool,
        value: PropTypes.oneOfType([
                PropTypes.number,
                PropTypes.string,