set channel on GG controls open

[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 2fbb2c1958f02a61c93bde7048440e7d11c643b4..a69662f423b34e571255e660d86f8775c21e9219 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 = ({ autoSelect, 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('');
@@ -78,14 +85,16 @@ const ChannelSelect = ({ autoSelect, 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}>
@@ -94,6 +103,7 @@ const ChannelSelect = ({ autoSelect, 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}
                />
@@ -127,6 +137,7 @@ ChannelSelect.propTypes = {
        joinable: PropTypes.bool,
        manageable: PropTypes.bool,
        onChange: PropTypes.func,
+       readOnly: PropTypes.bool,
        value: PropTypes.oneOfType([
                PropTypes.number,
                PropTypes.string,