Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

ShareButton uses ModalDialog

Browse source
This commit is contained in:
nklhrstv 2020-03-06 09:57:34 +02:00
parent fa7aca6476
commit e6bfd40472
2 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/routes/Player/ControlBar/ShareButton/ShareButton.js
View file

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

7
src/routes/Player/ControlBar/ShareButton/styles.less
View file

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