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

SharePrompt reimplemented with hooks

Browse source
This commit is contained in:
svetlagasheva 2019-09-30 10:53:53 +03:00
parent 7c980b0800
commit 47ecf701cc
1 changed files with 25 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/common/SharePrompt/SharePrompt.js
View file

@ -2,38 +2,48 @@ 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 { useFocusable } = require('stremio-router');
const Button = require('stremio/common/Button'); const Button = require('stremio/common/Button');
const TextInput = require('stremio/common/TextInput'); const TextInput = require('stremio/common/TextInput');
const styles = require('./styles'); const styles = require('./styles');
const SharePrompt = (props) => { const SharePrompt = ({ className, label, url, close }) => {
const inputRef = React.useRef(null); const inputRef = React.useRef(null);
const copyToClipboard = () => { const focusable = useFocusable();
const copyToClipboard = React.useCallback(() => {
inputRef.current.select(); inputRef.current.select();
document.execCommand('copy'); document.execCommand('copy');
}; }, []);
React.useEffect(() => {
if (props.url.length === 0) { const onKeyUp = (event) => {
return null; if (event.key === 'Escape') {
} cancel();
}
};
if (focusable) {
window.addEventListener('keyup', onKeyUp);
}
return () => {
window.removeEventListener('keyup', onKeyUp);
};
}, [close, focusable]);
return ( return (
<div className={classnames(props.className, styles['share-prompt-container'])}> <div className={classnames(className, styles['share-prompt-container'])}>
<Button className={styles['close-button-container']}> <Button className={styles['close-button-container']}>
<Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} /> <Icon className={styles['icon']} icon={'ic_x'} onClick={close} />
</Button> </Button>
<div className={styles['share-prompt-content']}> <div className={styles['share-prompt-content']}>
<div className={styles['share-prompt-label']}>{props.label}</div> <div className={styles['share-prompt-label']}>{label}</div>
<div className={styles['buttons-container']}> <div className={styles['buttons-container']}>
<Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}> <Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
<Icon className={styles['icon']} icon={'ic_facebook'} />FACEBOOK <Icon className={styles['icon']} icon={'ic_facebook'} />FACEBOOK
</Button> </Button>
<Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}> <Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
<Icon className={styles['icon']} icon={'ic_twitter'} />TWITTER <Icon className={styles['icon']} icon={'ic_twitter'} />TWITTER
</Button> </Button>
</div> </div>
<div className={styles['url-container']}> <div className={styles['url-container']}>
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={props.url} readOnly /> <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
<Button className={styles['copy-button']} onClick={copyToClipboard}> <Button className={styles['copy-button']} onClick={copyToClipboard}>
<Icon className={styles['icon']} icon={'ic_link'} /> <Icon className={styles['icon']} icon={'ic_link'} />
<div className={styles['label']}>Copy</div> <div className={styles['label']}>Copy</div>
@ -48,7 +58,7 @@ SharePrompt.propTypes = {
className: PropTypes.string, className: PropTypes.string,
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
url: PropTypes.string.isRequired, url: PropTypes.string.isRequired,
onClose: PropTypes.func close: PropTypes.func
}; };
SharePrompt.defaultProps = { SharePrompt.defaultProps = {
label: 'Share', label: 'Share',