12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- import LinkIcon from 'material-icons-svg/components/baseline/Link';
- import React, { Component } from 'react';
- import styled from 'styled-components';
- import { TalkyButton } from '../styles/button';
- const Button = styled(TalkyButton)({
- gridArea: 'invite',
- backgroundColor: '#00b0eb',
- color: 'white',
- '&:hover': {
- backgroundColor: 'rgb(0, 158, 230)'
- },
- '& svg': {
- fill: 'white'
- }
- });
- interface State {
- copied: boolean;
- }
- export default class InviteButton extends Component<{}, State> {
- constructor(props: {}) {
- super(props);
- this.state = { copied: false };
- }
- public render() {
- return (
- <Button onClick={this.onClick}>
- <LinkIcon />
- <span>{this.state.copied ? 'Copied Link!' : 'Invite'}</span>
- </Button>
- );
- }
- private onClick = async () => {
- try {
- if ('clipboard' in navigator) {
- await (navigator as any).clipboard.writeText(window.location.href);
- } else {
- const el = document.createElement('textarea');
- el.style.fontSize = '12pt';
- // Reset box model
- el.style.border = '0';
- el.style.padding = '0';
- el.style.margin = '0';
- // Move element out of screen horizontally
- el.style.position = 'absolute';
- el.style.left = '-9999px';
- // Move element to the same position vertically
- const yPosition =
- window.pageYOffset || document.documentElement.scrollTop;
- el.style.top = `${yPosition}px`;
- document.body.appendChild(el);
- el.setAttribute('readonly', '');
- el.value = window.location.href;
- el.select();
- document.execCommand('copy');
- document.body.removeChild(el);
- }
- this.setState({ copied: true });
- } catch (err) {
- console.error(err);
- }
- };
- }
|