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;
|
|
}
|