ShareButton uses ModalDialog

src/routes/Player/ControlBar/ShareButton/ShareButton.js

@@ -2,32 +2,37 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { Button, Popup, useBinaryState } = require('stremio/common');
+const { Button, ModalDialog, SharePrompt, useBinaryState } = require('stremio/common');
 const styles = require('./styles');
 
-const ShareButton = ({ className, modalContainerClassName }) => {
-    const [popupOpen, openPopup, closePopup, togglePopup] = useBinaryState(false);
+const ShareButton = ({ className, url }) => {
+    const [modalOpen, openModal, closeModal] = useBinaryState(false);
+    const labelButtonOnClick = React.useCallback((event) => {
+        if (!event.nativeEvent.openModalPrevented) {
+            openModal();
+        }
+    }, []);
+    const modalDialogOnClick = React.useCallback((event) => {
+        event.nativeEvent.openModalPrevented = true;
+    }, []);
     return (
-        <Popup
-            open={popupOpen}
-            menuModalClassName={classnames(modalContainerClassName, styles['share-modal-container'])}
-            menuRelativePosition={false}
-            renderLabel={(ref) => (
-                <Button ref={ref} className={classnames(className, { 'active': popupOpen })} tabIndex={-1} onClick={togglePopup}>
-                    <Icon className={'icon'} icon={'ic_share'} />
-                </Button>
-            )}
-            renderMenu={() => (
-                <div className={styles['share-dialog-container']} />
-            )}
-            onCloseRequest={closePopup}
-        />
+        <Button className={classnames(className, { 'disabled': typeof url !== 'string' })} tabIndex={-1} onClick={labelButtonOnClick}>
+            <Icon className={'icon'} icon={'ic_share'} />
+            {
+                modalOpen ?
+                    <ModalDialog title={'Share'} onCloseRequest={closeModal} onClick={modalDialogOnClick}>
+                        <SharePrompt className={styles['share-prompt']} url={url} />
+                    </ModalDialog>
+                    :
+                    null
+            }
+        </Button>
     );
 };
 
 ShareButton.propTypes = {
     className: PropTypes.string,
-    modalContainerClassName: PropTypes.string
+    url: PropTypes.string
 };
 
 module.exports = ShareButton;

src/routes/Player/ControlBar/ShareButton/styles.less

@@ -1,6 +1,3 @@
-.share-modal-container {
-    .share-dialog-container {
-        width: 10rem;
-        height: 5rem;
-    }
+.share-prompt {
+    width: 24rem;
 }