From 2ec1448841e126cf5aede5da752a79012cfe8f88 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 2 Dec 2019 10:37:21 +0200
Subject: [PATCH] Multiselect compatible with native data props

---
 src/common/Multiselect/Multiselect.js         | 26 +++++++++----------
 .../MultiselectSingleValue.js                 |  5 ++++
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/common/Multiselect/Multiselect.js b/src/common/Multiselect/Multiselect.js
index 24e3db096..d69f6577b 100644
--- a/src/common/Multiselect/Multiselect.js
+++ b/src/common/Multiselect/Multiselect.js
@@ -7,21 +7,19 @@ const Popup = require('stremio/common/Popup');
 const useBinaryState = require('stremio/common/useBinaryState');
 const styles = require('./styles');
 
-const Multiselect = ({ className, direction, title, options, selected, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect }) => {
-    options = Array.isArray(options) ?
-        options.filter(option => option && typeof option.value === 'string')
-        :
-        [];
-    selected = Array.isArray(selected) ?
-        selected.filter(value => typeof value === 'string')
-        :
-        [];
+const Multiselect = ({ className, direction, title, options, selected, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => {
+    options = Array.isArray(options) ? options.filter((option) => option && typeof option.value === 'string') : [];
+    selected = Array.isArray(selected) ? selected.filter((value) => typeof value === 'string') : [];
     const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
     const popupLabelOnClick = React.useCallback((event) => {
+        if (typeof props.onClick === 'function') {
+            props.onClick(event);
+        }
+
         if (!event.nativeEvent.togglePopupPrevented) {
             toggleMenu();
         }
-    }, [toggleMenu]);
+    }, [props.onClick, toggleMenu]);
     const popupMenuOnClick = React.useCallback((event) => {
         event.nativeEvent.togglePopupPrevented = true;
     }, []);
@@ -42,7 +40,7 @@ const Multiselect = ({ className, direction, title, options, selected, disabled,
         if (!event.nativeEvent.closeMenuPrevented) {
             closeMenu();
         }
-    }, [onSelect, dataset]);
+    }, [dataset, onSelect]);
     React.useLayoutEffect(() => {
         if (menuOpen) {
             if (typeof onOpen === 'function') {
@@ -65,8 +63,8 @@ const Multiselect = ({ className, direction, title, options, selected, disabled,
             open={menuOpen}
             direction={direction}
             onCloseRequest={closeMenu}
-            renderLabel={({ ref, className: popupLabelClassName, children }) => (
-                <Button ref={ref} className={classnames(className, popupLabelClassName, styles['label-container'], { 'active': menuOpen })} title={title} disabled={disabled} onClick={popupLabelOnClick}>
+            renderLabel={(popupProps) => (
+                <Button {...popupProps} {...props} className={classnames(className, popupProps.className, styles['label-container'], { 'active': menuOpen })} title={title} disabled={disabled} onClick={popupLabelOnClick}>
                     {
                         typeof renderLabelContent === 'function' ?
                             renderLabelContent()
@@ -92,7 +90,7 @@ const Multiselect = ({ className, direction, title, options, selected, disabled,
                                 <Icon className={styles['icon']} icon={'ic_arrow_down'} />
                             </React.Fragment>
                     }
-                    {children}
+                    {popupProps.children}
                 </Button>
             )}
             renderMenu={() => (
diff --git a/storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js b/storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js
index f143e5f8b..9bf58f2f9 100644
--- a/storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js
+++ b/storybook/stories/Multiselect/MultiselectSingleValue/MultiselectSingleValue.js
@@ -10,6 +10,9 @@ storiesOf('Multiselect', module).add('MultiselectSingleValue', () => {
         action('onSelect')(event);
         setSelected([event.value]);
     }, []);
+    const domEventHandler = React.useCallback((event) => {
+        action('domEventHandler')(event.currentTarget.dataset);
+    }, []);
     return (
         <Multiselect
             className={styles['label-container']}
@@ -28,6 +31,8 @@ storiesOf('Multiselect', module).add('MultiselectSingleValue', () => {
             onOpen={action('onOpen')}
             onClose={action('onClose')}
             onSelect={onSelect}
+            data-prop={'data-value'}
+            onClick={domEventHandler}
         />
     );
 });
\ No newline at end of file