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

selected meta item in discover implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-23 17:20:58 +03:00
parent 517d8820e3
commit 5d46a6276a
1 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/routes/Discover/Discover.js
View file

@ -7,10 +7,20 @@ const styles = require('./styles');
const Discover = ({ urlParams, queryParams }) => { const Discover = ({ urlParams, queryParams }) => {
const [pickers, metaItems] = useCatalog(urlParams, queryParams); const [pickers, metaItems] = useCatalog(urlParams, queryParams);
const [selectedItem, setSelectedItem] = React.useState(metaItems[0]); const [selectedItem, setSelectedItem] = React.useState(null);
const changeMetaItem = React.useCallback((event) => { const metaItemsOnMouseDown = React.useCallback((event) => {
const { id: metaItemId } = event.currentTarget.dataset; event.nativeEvent.blurPrevented = true;
const metaItem = metaItems.find(({ id }) => id === metaItemId); }, []);
const metaItemsOnFocus = React.useCallback((event) => {
const metaItem = metaItems.find(({ id }) => {
return id === event.target.dataset.id;
});
if (metaItem) {
setSelectedItem(metaItem);
}
}, []);
React.useEffect(() => {
const metaItem = metaItems.length > 0 ? metaItems[0] : null;
setSelectedItem(metaItem); setSelectedItem(metaItem);
}, [metaItems]); }, [metaItems]);
return ( return (
@ -22,18 +32,17 @@ const Discover = ({ urlParams, queryParams }) => {
<PickerMenu {...picker} key={picker.name} className={'picker'} /> <PickerMenu {...picker} key={picker.name} className={'picker'} />
))} ))}
</div> </div>
<div className={styles['meta-items-container']} tabIndex={-1}> <div className={styles['meta-items-container']} tabIndex={-1} onFocusCapture={metaItemsOnFocus} onMouseDownCapture={metaItemsOnMouseDown}>
{metaItems.map((metaItem) => ( {metaItems.map((metaItem) => (
<MetaItem <MetaItem
{...metaItem} {...metaItem}
key={metaItem.id} key={metaItem.id}
className={classnames('meta-item', { 'active': metaItem.id === selectedItem.id })} className={classnames('meta-item', { 'active': selectedItem !== null && metaItem.id === selectedItem.id })}
onClick={changeMetaItem}
/> />
))} ))}
</div> </div>
{ {
selectedItem ? selectedItem !== null ?
<MetaPreview <MetaPreview
{...selectedItem} {...selectedItem}
className={styles['meta-preview-container']} className={styles['meta-preview-container']}