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

new Popup integrated in MetaItem

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-10 08:05:02 +03:00
parent f8fa18f51c
commit 33fcda7f0c
2 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/common/MetaItem/MetaItem.js
View file

@ -15,14 +15,17 @@ const ICON_FOR_TYPE = Object.assign(Object.create(null), {
});
const MetaItem = React.memo(({ className, id, type, name, posterShape = 'square', poster = '', title = '', subtitle = '', progress = 0, playIcon = false, menuOptions = [], onClick, menuOptionOnSelect }) => {
const menuRef = React.useRef(null);
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const onContextMenu = React.useCallback((event) => {
if (!event.ctrlKey && menuRef.current !== null) {
event.preventDefault();
menuOpen ? menuRef.current.close() : menuRef.current.open();
if (!event.ctrlKey && Array.isArray(menuOptions) && menuOptions.length > 0) {
if (menuOpen) {
closeMenu();
} else {
openMenu();
event.preventDefault();
}
}
}, [menuOpen]);
}, [menuOpen, menuOptions]);
return (
<Button className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onContextMenu={onContextMenu} onClick={onClick}>
<div className={styles['poster-image-container']}>
@ -74,22 +77,34 @@ const MetaItem = React.memo(({ className, id, type, name, posterShape = 'square'
}
{
Array.isArray(menuOptions) && menuOptions.length > 0 ?
<Popup ref={menuRef} onOpen={onMenuOpen} onClose={onMenuClose}>
<Popup.Label>
<Button className={classnames(styles['menu-button-container'], { 'active': menuOpen })} tabIndex={-1}>
<Popup
open={menuOpen}
onCloseRequest={closeMenu}
renderLabel={({ ref, onClick }) => (
<Button ref={ref}
className={classnames(styles['menu-button-container'], { 'active': menuOpen })}
tabIndex={-1}
onClick={(event) => {
onClick(event);
toggleMenu();
}}>
<Icon className={styles['menu-icon']} icon={'ic_more'} />
</Button>
</Popup.Label>
<Popup.Menu>
<div className={styles['menu-buttons-container']}>
)}
renderMenu={({ ref, className, onClick }) => (
<div ref={ref} className={classnames(className, styles['menu-container'])} onClick={onClick}>
{menuOptions.map(({ label, type }) => (
<Button key={type} className={styles['menu-button']} data-id={id} data-type={type} onClick={menuOptionOnSelect}>
<Button key={type}
className={styles['menu-item']}
data-id={id}
data-type={type}
onClick={menuOptionOnSelect}>
{label}
</Button>
))}
</div>
</Popup.Menu>
</Popup>
)}
/>
:
null
}

4
src/common/MetaItem/styles.less
View file

@ -158,12 +158,12 @@
}
}
.menu-buttons-container {
.menu-container {
min-width: 8rem;
max-width: 12rem;
background-color: var(--color-surfacelighter);
.menu-button {
.menu-item {
font-size: 1.1rem;
padding: 0.5rem;
color: var(--color-backgrounddarker);