From 6d76f309a2a1bfc79ebe1cfdabf4638575201df4 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 11 Oct 2019 15:59:44 +0300
Subject: [PATCH] dataset integrated in Multiselect component

---
 src/common/Multiselect/Multiselect.js | 24 ++++++++++++++++++------
 src/common/Multiselect/styles.less    |  4 ++--
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js
index a02e5476b..75333f072 100644
--- a/src/common/Multiselect/Multiselect.js
+++ b/src/common/Multiselect/Multiselect.js
@@ -5,6 +5,7 @@ const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
 const Popup = require('stremio/common/Popup');
 const useBinaryState = require('stremio/common/useBinaryState');
+const useDataset = require('stremio/common/useDataset');
 const styles = require('./styles');
 
 const Multiselect = ({ className, direction, title, renderLabelContent, options, selected, onOpen, onClose, onSelect, ...props }) => {
@@ -16,6 +17,7 @@ const Multiselect = ({ className, direction, title, renderLabelContent, options,
         selected.filter(value => typeof value === 'string')
         :
         [];
+    const dataset = useDataset(props);
     const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
     const popupLabelOnClick = React.useCallback((event) => {
         if (!event.nativeEvent.togglePopupPrevented) {
@@ -27,21 +29,31 @@ const Multiselect = ({ className, direction, title, renderLabelContent, options,
     }, []);
     const optionOnClick = React.useCallback((event) => {
         if (typeof onSelect === 'function') {
-            onSelect(event);
+            onSelect({
+                type: 'select',
+                nativeEvent: event.nativeEvent,
+                dataset: dataset
+            });
         }
 
         if (!event.nativeEvent.closeMenuPrevented) {
             closeMenu();
         }
-    }, [onSelect]);
-    React.useEffect(() => {
+    }, [onSelect, dataset]);
+    React.useLayoutEffect(() => {
         if (menuOpen) {
             if (typeof onOpen === 'function') {
-                onOpen();
+                onOpen({
+                    type: 'open',
+                    dataset: dataset
+                });
             }
         } else {
             if (typeof onClose === 'function') {
-                onClose();
+                onClose({
+                    type: 'close',
+                    dataset: dataset
+                });
             }
         }
     }, [menuOpen]);
@@ -51,7 +63,7 @@ const Multiselect = ({ className, direction, title, renderLabelContent, options,
             direction={direction}
             onCloseRequest={closeMenu}
             renderLabel={({ ref, className: popupLabelClassName, children }) => (
-                <Button {...props} ref={ref} className={classnames(className, popupLabelClassName, styles['label-container'], { 'active': menuOpen })} title={title} onClick={popupLabelOnClick}>
+                <Button ref={ref} className={classnames(className, popupLabelClassName, styles['label-container'], { 'active': menuOpen })} title={title} onClick={popupLabelOnClick}>
                     {
                         typeof renderLabelContent === 'function' ?
                             renderLabelContent()
diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less
index cc946e659..c88dae55f 100644
--- a/src/common/Multiselect/styles.less
+++ b/src/common/Multiselect/styles.less
@@ -24,7 +24,6 @@
     .label {
         flex: 1;
         max-height: 2.4em;
-        margin-right: 1rem;
         color: var(--color-surfacelighter);
     }
 
@@ -32,6 +31,7 @@
         flex: none;
         width: 1rem;
         height: 1rem;
+        margin-left: 1rem;
         fill: var(--color-surfacelighter);
     }
 
@@ -61,7 +61,6 @@
                 .label {
                     flex: 1;
                     max-height: 4.8em;
-                    margin-right: 1rem;
                     color: var(--color-surfacelighter);
                 }
 
@@ -70,6 +69,7 @@
                     display: none;
                     width: 1rem;
                     height: 1rem;
+                    margin-left: 1rem;
                     fill: var(--color-surfacelighter);
                 }
             }