From 96bd43ebe47aa50d688a37858a34e33dd9a9d86d Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 16 Aug 2019 21:48:02 +0300
Subject: [PATCH] MetaItem adapted to the new Popup api

---
 src/common/MetaItem/MetaItem.js | 50 +++++++++++++++++++--------------
 src/common/MetaItem/styles.less | 16 +++++------
 2 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index edd1e5237..721077f88 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -14,16 +14,29 @@ const ICON_FOR_TYPE = Object.assign(Object.create(null), {
     'tv': 'ic_tv'
 });
 
-const MetaItem = React.memo(({ className, id, type, name, posterShape = 'square', poster = '', title = '', subtitle = '', progress = 0, playIcon = false, menuOptions = [], onClick, menuOptionOnSelect }) => {
-    const [menuOpen, openMenu, closeMenu] = useBinaryState(false);
+const MetaItem = React.memo(({ className, id, type, name, posterShape = 'square', poster = '', title = '', subtitle = '', progress = 0, playIcon = false, menuOptions = [], onSelect, menuOptionOnSelect }) => {
+    const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
+    const metaItemOnClick = React.useCallback((event) => {
+        if (!event.nativeEvent.selectItemPrevented && typeof onSelect === 'function') {
+            onSelect(event);
+        }
+    }, [onSelect]);
+    const menuLabelOnClick = React.useCallback((event) => {
+        toggleMenu();
+        event.nativeEvent.selectItemPrevented = true;
+    }, [toggleMenu]);
+    const menuOptionOnClick = React.useCallback((event) => {
+        if (typeof menuOptionOnSelect === 'function') {
+            menuOptionOnSelect(event);
+        }
+
+        event.nativeEvent.selectItemPrevented = true;
+    }, [menuOptionOnSelect]);
     return (
-        <Button className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onClick={onClick}>
+        <Button className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onClick={metaItemOnClick}>
             <div className={styles['poster-image-container']}>
                 <div className={styles['placeholder-image-layer']}>
-                    <Icon
-                        className={styles['placeholder-image']}
-                        icon={ICON_FOR_TYPE[type] || 'ic_movies'}
-                    />
+                    <Icon className={styles['placeholder-image']} icon={ICON_FOR_TYPE[type] || 'ic_movies'} />
                 </div>
                 {
                     typeof poster === 'string' && poster.length > 0 ?
@@ -48,8 +61,8 @@ const MetaItem = React.memo(({ className, id, type, name, posterShape = 'square'
                 }
                 {
                     progress > 0 ?
-                        <div className={styles['progress-bar-container']}>
-                            <div className={styles['progress']} style={{ width: `${Math.min(progress, 1) * 100}%` }} />
+                        <div className={styles['progress-bar-layer']}>
+                            <div className={styles['progress-bar']} style={{ width: `${Math.min(progress, 1) * 100}%` }} />
                         </div>
                         :
                         null
@@ -70,20 +83,15 @@ const MetaItem = React.memo(({ className, id, type, name, posterShape = 'square'
                                     <Popup
                                         open={menuOpen}
                                         onCloseRequest={closeMenu}
-                                        renderLabel={(props) => (
-                                            <Button {...props} className={classnames(styles['menu-button-container'], { 'active': menuOpen })} tabIndex={-1} onClick={openMenu}>
+                                        renderLabel={(ref) => (
+                                            <Button ref={ref} className={classnames(styles['menu-label-container'], { 'active': menuOpen })} tabIndex={-1} onClick={menuLabelOnClick}>
                                                 <Icon className={styles['menu-icon']} icon={'ic_more'} />
-                                                {props.children}
                                             </Button>
                                         )}
                                         renderMenu={() => (
                                             <div className={styles['menu-container']}>
                                                 {menuOptions.map(({ label, type }) => (
-                                                    <Button key={type}
-                                                        className={styles['menu-item']}
-                                                        data-id={id}
-                                                        data-type={type}
-                                                        onClick={menuOptionOnSelect}>
+                                                    <Button key={type} className={styles['menu-item']} data-id={id} data-type={type} onClick={menuOptionOnClick}>
                                                         {label}
                                                     </Button>
                                                 ))}
@@ -114,9 +122,9 @@ MetaItem.displayName = 'MetaItem';
 
 MetaItem.propTypes = {
     className: PropTypes.string,
-    id: PropTypes.string,
-    type: PropTypes.string,
-    name: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
     posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']),
     poster: PropTypes.string,
     title: PropTypes.string,
@@ -127,7 +135,7 @@ MetaItem.propTypes = {
         label: PropTypes.string.isRequired,
         type: PropTypes.string.isRequired
     })),
-    onClick: PropTypes.func,
+    onSelect: PropTypes.func,
     menuOptionOnSelect: PropTypes.func
 };
 
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 1970bfc1a..1ffb39a7f 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -2,7 +2,7 @@
     background-color: var(--color-backgroundlight);
 
     &:hover, &:focus, &:global(.active) {
-        outline-offset: initial;
+        outline-offset: 0;
         outline: 0.2rem solid var(--color-surfacelighter);
         background-color: var(--color-surfacelight);
 
@@ -11,7 +11,7 @@
                 color: var(--color-backgrounddarker);
             }
 
-            .menu-button-container {
+            .menu-label-container {
                 .menu-icon {
                     fill: var(--color-backgrounddarker);
                 }
@@ -102,17 +102,16 @@
             }
         }
 
-        .progress-bar-container {
+        .progress-bar-layer {
             position: absolute;
             right: 0;
             bottom: 0;
             left: 0;
             z-index: 3;
-            height: 0.5rem;
             background-color: var(--color-backgroundlighter);
 
-            .progress {
-                height: 100%;
+            .progress-bar {
+                height: 0.5rem;
                 background-color: var(--color-primary);
             }
         }
@@ -128,17 +127,16 @@
         .title {
             flex: 1;
             padding-left: 0.5rem;
-            line-height: 2.4em;
-            color: var(--color-surfacelighter);
             white-space: nowrap;
             text-overflow: ellipsis;
+            color: var(--color-surfacelighter);
 
             &:only-child {
                 padding-right: 0.5rem;
             }
         }
 
-        .menu-button-container {
+        .menu-label-container {
             flex: none;
             width: 2.5rem;
             height: 2.5rem;