Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-12 23:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

open/close AddonPrompt fixed

Browse source
This commit is contained in:
svetlagasheva 2019-10-25 12:22:06 +03:00
parent 7ac98e1ad2
commit 29260cafaa
3 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/routes/Addons/AddonPrompt/AddonPrompt.js
View file

@ -6,7 +6,7 @@ const { useRouteFocused } = require('stremio-router');
const { Button } = require('stremio/common');
const styles = require('./styles');
const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel }) => {
const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel, onClick }) => {
const focusable = useRouteFocused();
React.useEffect(() => {
const onKeyUp = (event) => {
@ -22,7 +22,7 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
};
}, [cancel, focusable]);
return (
<div className={classnames(className, styles['addon-prompt-container'])}>
<div className={classnames(className, styles['addon-prompt-container'])} onClick={onClick}>
<Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={cancel}>
<Icon className={styles['icon']} icon={'ic_x'} />
</Button>
@ -104,7 +104,7 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
}
</div>
<div className={styles['buttons-container']}>
<Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'cancel'} onClick={cancel}>
<Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'Cancel'} onClick={cancel}>
<div className={styles['label']}>Cancel</div>
</Button>
<Button className={classnames(styles['button-container'], installed ? styles['uninstall-button'] : styles['install-button'])} title={installed ? 'Uninstall' : 'Install'}>

8
src/routes/Addons/Addons.js
View file

@ -14,7 +14,7 @@ const Addons = ({ urlParams, queryParams }) => {
setQuery(event.currentTarget.value);
}, []);
const [addons, dropdowns] = useAddons(urlParams, queryParams);
const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
const [selectedAddon, clearSelectedAddon, setSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
const addonPromptModalBackgroundOnClick = React.useCallback((event) => {
if (!event.nativeEvent.clearSelectedAddonPrevented) {
clearSelectedAddon();
@ -53,15 +53,15 @@ const Addons = ({ urlParams, queryParams }) => {
(typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
))
.map((addon, index) => (
<Addon {...addon.manifest} key={index} className={styles['addon']} />
<Addon {...addon.manifest} key={index} className={styles['addon']} toggle={() => setSelectedAddon(addon)} />
))
}
</div>
{
selectedAddon !== null ?
<Modal className={styles['addon-prompt-modal-container']} onClick={addonPromptModalBackgroundOnClick}>
<div className={styles['addon-prompt-container']} onClick={addonPromptOnClick}>
<AddonPrompt {...selectedAddon} className={styles['addon-prompt']} cancel={clearSelectedAddon} />
<div className={styles['addon-prompt-container']}>
<AddonPrompt {...selectedAddon.manifest} transportUrl={selectedAddon.transportUrl} official={selectedAddon.flags.official} className={styles['addon-prompt']} cancel={clearSelectedAddon} onClick={addonPromptOnClick} />
</div>
</Modal>
:

2
src/routes/Addons/useSelectedAddon.js
View file

@ -30,7 +30,7 @@ const useSelectedAddon = (transportUrl) => {
setAddon(null);
}
}, [active, locationHash]);
return [addon, clear];
return [addon, clear, setAddon];
};
module.exports = useSelectedAddon;