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

useRef imported

Browse source
This commit is contained in:
svetlagasheva 2019-04-04 16:11:55 +03:00
parent baf97cb280
commit e21f88edd8
1 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/common/ShareModal/ShareModal.js
View file

@ -1,40 +1,39 @@
import React from 'react';
import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Input } from 'stremio-common';
import Icon from 'stremio-icons/dom';
import styles from './styles';
const textRef = React.createRef();
const renderInput = ({ className, href, icon, label }, url) => {
const renderInput = ({ className, href, icon, label }) => {
return (
<Input className={classnames(styles['button'], styles[className])} type={'link'} href={href + url} target={'_blank'}>
<Input className={classnames(styles['button'], styles[className])} type={'link'} href={href} target={'_blank'}>
<Icon className={styles['icon']} icon={icon} />{label}
</Input>
);
}
};
const renderUrl = (url) => {
if (url.length === 0) {
return null;
}
const inputRef = useRef(null);
const copyToClipboard = () => {
inputRef.current.select();
document.execCommand('copy');
};
return (
<div className={styles['url-container']}>
<Input ref={textRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={url} />
<Input ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={url} />
<div onClick={copyToClipboard} className={styles['copy-button']}>
<Icon className={styles['icon']} icon={'ic_link'} />
<div className={styles['label']}>Copy</div>
</div>
</div>
);
}
const copyToClipboard = () => {
textRef.current.select();
document.execCommand('copy');
}
};
const ShareModal = (props) => {
return (
@ -45,14 +44,14 @@ const ShareModal = (props) => {
<div className={styles['info-container']}>
<div className={styles['share-label']}>Share</div>
<div className={styles['buttons']}>
{renderInput({ className: 'facebook-button', href: 'https://www.facebook.com/sharer/sharer.php?u=', icon: 'ic_facebook', label: 'FACEBOOK' })}
{renderInput({ className: 'twitter-button', href: 'https://twitter.com/home?status=', icon: 'ic_twitter', label: 'TWITTER' })}
{renderInput({ className: 'facebook-button', href: `https://www.facebook.com/sharer/sharer.php?u=${props.url}`, icon: 'ic_facebook', label: 'FACEBOOK' })}
{renderInput({ className: 'twitter-button', href: `https://twitter.com/home?status=${props.url}`, icon: 'ic_twitter', label: 'TWITTER' })}
</div>
{renderUrl(props.url)}
</div>
</div>
);
}
};
ShareModal.propTypes = {
url: PropTypes.string.isRequired,