2022-10-30 16:56:26 +00:00
|
|
|
import { memo } from 'react';
|
2022-04-08 13:48:36 +00:00
|
|
|
import variables from 'modules/variables';
|
|
|
|
import { MdClose, MdEmail, MdContentCopy } from 'react-icons/md';
|
|
|
|
import { FaTwitter, FaFacebookF } from 'react-icons/fa';
|
|
|
|
import { AiFillWechat } from 'react-icons/ai';
|
|
|
|
import { SiTencentqq } from 'react-icons/si';
|
|
|
|
import Tooltip from '../tooltip/Tooltip';
|
|
|
|
import { toast } from 'react-toastify';
|
|
|
|
|
|
|
|
import './sharemodal.scss';
|
|
|
|
|
2022-10-30 16:56:26 +00:00
|
|
|
function ShareModal({ modalClose, data }) {
|
2022-04-08 13:48:36 +00:00
|
|
|
const copyLink = () => {
|
2022-04-21 22:14:46 +00:00
|
|
|
navigator.clipboard.writeText(data);
|
2022-08-26 09:45:32 +00:00
|
|
|
toast(variables.getMessage('modals.share.copy_link'));
|
2022-04-08 13:48:36 +00:00
|
|
|
};
|
|
|
|
|
2022-08-08 13:17:40 +00:00
|
|
|
// look into what's wrong with this
|
|
|
|
try {
|
|
|
|
if (!data.data) {
|
|
|
|
data.data.name = 'this image';
|
|
|
|
}
|
2022-08-21 11:41:05 +00:00
|
|
|
} catch (e) {}
|
2022-05-23 19:31:14 +00:00
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
return (
|
2022-04-24 20:12:49 +00:00
|
|
|
<div className="smallModal">
|
2022-04-08 13:48:36 +00:00
|
|
|
<div className="shareHeader">
|
2023-01-21 12:10:40 +00:00
|
|
|
<span className="title">{variables.getMessage('widgets.quote.share')}</span>
|
2022-08-26 09:45:32 +00:00
|
|
|
<Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
|
2022-04-08 13:48:36 +00:00
|
|
|
<div className="close" onClick={modalClose}>
|
|
|
|
<MdClose />
|
|
|
|
</div>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
<div className="buttons">
|
|
|
|
<Tooltip title="Twitter">
|
|
|
|
<button
|
|
|
|
onClick={() =>
|
|
|
|
window
|
|
|
|
.open(
|
2022-08-15 14:41:46 +00:00
|
|
|
`https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data}`,
|
2022-04-08 13:48:36 +00:00
|
|
|
'_blank',
|
|
|
|
)
|
|
|
|
.focus()
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<FaTwitter />
|
|
|
|
</button>
|
|
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Facebook">
|
|
|
|
<button
|
|
|
|
onClick={() =>
|
2022-04-21 22:14:46 +00:00
|
|
|
window.open(`https://www.facebook.com/sharer/sharer.php?u=${data}`, '_blank').focus()
|
2022-04-08 13:48:36 +00:00
|
|
|
}
|
|
|
|
>
|
|
|
|
<FaFacebookF />
|
|
|
|
</button>
|
|
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Email">
|
|
|
|
<button
|
|
|
|
onClick={() =>
|
|
|
|
window
|
|
|
|
.open(
|
2022-05-23 19:31:14 +00:00
|
|
|
'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
|
2022-04-08 13:48:36 +00:00
|
|
|
data.data.name +
|
|
|
|
'on Mue: ' +
|
2022-04-21 22:14:46 +00:00
|
|
|
data,
|
2022-04-08 13:48:36 +00:00
|
|
|
'_blank',
|
|
|
|
)
|
|
|
|
.focus()
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<MdEmail />
|
|
|
|
</button>
|
|
|
|
</Tooltip>
|
|
|
|
<Tooltip title="WeChat">
|
|
|
|
<button
|
|
|
|
onClick={() =>
|
|
|
|
window
|
|
|
|
.open(
|
2022-04-21 22:14:46 +00:00
|
|
|
`https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data}`,
|
2022-04-08 13:48:36 +00:00
|
|
|
'_blank',
|
|
|
|
)
|
|
|
|
.focus()
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<AiFillWechat />
|
|
|
|
</button>
|
|
|
|
</Tooltip>
|
|
|
|
<Tooltip title="Tencent QQ">
|
|
|
|
<button
|
|
|
|
onClick={() =>
|
|
|
|
window
|
2022-04-21 22:14:46 +00:00
|
|
|
.open(`http://connect.qq.com/widget/shareqq/index.html?url=${data}`, '_blank')
|
2022-04-08 13:48:36 +00:00
|
|
|
.focus()
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<SiTencentqq />
|
|
|
|
</button>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
<div className="copy">
|
2022-04-21 22:14:46 +00:00
|
|
|
<input type="text" value={data} className="left field" readOnly />
|
2022-08-26 09:45:32 +00:00
|
|
|
<Tooltip title={variables.getMessage('modals.share.copy_link')} placement="top">
|
2022-04-08 13:48:36 +00:00
|
|
|
<button onClick={() => copyLink()}>
|
|
|
|
<MdContentCopy />
|
|
|
|
</button>
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2022-10-30 16:56:26 +00:00
|
|
|
|
2022-11-06 11:59:59 +00:00
|
|
|
export default memo(ShareModal);
|