Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 03:22:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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 { Button } = require('stremio/common');
const styles = require('./styles'); 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(); const focusable = useRouteFocused();
React.useEffect(() => { React.useEffect(() => {
const onKeyUp = (event) => { const onKeyUp = (event) => {
@ -22,7 +22,7 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
}; };
}, [cancel, focusable]); }, [cancel, focusable]);
return ( 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}> <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={cancel}>
<Icon className={styles['icon']} icon={'ic_x'} /> <Icon className={styles['icon']} icon={'ic_x'} />
</Button> </Button>
@ -104,7 +104,7 @@ const AddonPrompt = ({ className, id, name, logo, description, types, catalogs,
} }
</div> </div>
<div className={styles['buttons-container']}> <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> <div className={styles['label']}>Cancel</div>
</Button> </Button>
<Button className={classnames(styles['button-container'], installed ? styles['uninstall-button'] : styles['install-button'])} title={installed ? 'Uninstall' : 'Install'}> <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); setQuery(event.currentTarget.value);
}, []); }, []);
const [addons, dropdowns] = useAddons(urlParams, queryParams); 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) => { const addonPromptModalBackgroundOnClick = React.useCallback((event) => {
if (!event.nativeEvent.clearSelectedAddonPrevented) { if (!event.nativeEvent.clearSelectedAddonPrevented) {
clearSelectedAddon(); clearSelectedAddon();
@ -53,15 +53,15 @@ const Addons = ({ urlParams, queryParams }) => {
(typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase())) (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
)) ))
.map((addon, index) => ( .map((addon, index) => (
<Addon {...addon.manifest} key={index} className={styles['addon']} /> <Addon {...addon.manifest} key={index} className={styles['addon']} toggle={() => setSelectedAddon(addon)} />
)) ))
} }
</div> </div>
{ {
selectedAddon !== null ? selectedAddon !== null ?
<Modal className={styles['addon-prompt-modal-container']} onClick={addonPromptModalBackgroundOnClick}> <Modal className={styles['addon-prompt-modal-container']} onClick={addonPromptModalBackgroundOnClick}>
<div className={styles['addon-prompt-container']} onClick={addonPromptOnClick}> <div className={styles['addon-prompt-container']}>
<AddonPrompt {...selectedAddon} className={styles['addon-prompt']} cancel={clearSelectedAddon} /> <AddonPrompt {...selectedAddon.manifest} transportUrl={selectedAddon.transportUrl} official={selectedAddon.flags.official} className={styles['addon-prompt']} cancel={clearSelectedAddon} onClick={addonPromptOnClick} />
</div> </div>
</Modal> </Modal>
: :

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

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