98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
|
import React from 'react';
|
||
|
import './SocialShare.less';
|
||
|
|
||
|
interface TypeOptions {
|
||
|
className: string;
|
||
|
url: (url: string, title: string, text: string) => string;
|
||
|
}
|
||
|
|
||
|
const types: { [index: string]: TypeOptions } = {
|
||
|
twitter: {
|
||
|
className: 'fab fa-twitter-square',
|
||
|
url: (url: string, _: string, text: string) =>
|
||
|
`https://twitter.com/intent/tweet?url=${url}&text=${text}`,
|
||
|
},
|
||
|
reddit: {
|
||
|
className: 'fab fa-reddit-square',
|
||
|
url: (url: string, title: string) =>
|
||
|
`https://reddit.com/submit?url=${url}&title=${title}`,
|
||
|
},
|
||
|
facebook: {
|
||
|
className: 'fab fa-facebook-square',
|
||
|
url: (url: string) => `http://www.facebook.com/sharer.php?u=${url}`,
|
||
|
},
|
||
|
linkedin: {
|
||
|
className: 'fab fa-linkedin-square',
|
||
|
url: (url: string, title: string, text: string) =>
|
||
|
`https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}&summary=${text}`,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
interface OwnProps {
|
||
|
url: string;
|
||
|
text: string;
|
||
|
title: string;
|
||
|
}
|
||
|
|
||
|
type Props = OwnProps;
|
||
|
|
||
|
export default class SocialShare extends React.Component<Props> {
|
||
|
render() {
|
||
|
let { url, title, text } = this.props;
|
||
|
url = url.replace(`localhost:${process.env.PORT}`, 'demo.grant.io');
|
||
|
url = encodeURIComponent(url);
|
||
|
title = encodeURIComponent(title);
|
||
|
text = encodeURIComponent(text);
|
||
|
return (
|
||
|
<div className="SocialShare">
|
||
|
{Object.keys(types).map(key => {
|
||
|
const opts = types[key];
|
||
|
return (
|
||
|
<a
|
||
|
target="popup"
|
||
|
onClick={() => windowOpen(opts.url(url, title, text))}
|
||
|
key={key}
|
||
|
className={`SocialShare-button is-${key}`}
|
||
|
>
|
||
|
<i className={opts.className} />
|
||
|
</a>
|
||
|
);
|
||
|
})}
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function windowOpen(url: string, name = 'Share', width = 550, height = 500) {
|
||
|
const left =
|
||
|
window.outerWidth / 2 + (window.screenX || window.screenLeft || 0) - width / 2;
|
||
|
const top =
|
||
|
window.outerHeight / 2 + (window.screenY || window.screenTop || 0) - height / 2;
|
||
|
|
||
|
const config: { [index: string]: any } = {
|
||
|
height,
|
||
|
width,
|
||
|
left,
|
||
|
top,
|
||
|
location: 'no',
|
||
|
toolbar: 'no',
|
||
|
status: 'no',
|
||
|
directories: 'no',
|
||
|
menubar: 'no',
|
||
|
scrollbars: 'yes',
|
||
|
resizable: 'no',
|
||
|
centerscreen: 'yes',
|
||
|
chrome: 'yes',
|
||
|
};
|
||
|
|
||
|
const shareDialog = window.open(
|
||
|
url,
|
||
|
name,
|
||
|
Object.keys(config)
|
||
|
.map(key => `${key}=${config[key]}`)
|
||
|
.join(', '),
|
||
|
);
|
||
|
|
||
|
return shareDialog;
|
||
|
}
|