Merge pull request #219 from grant-project/modal-sharing-links

Modal Sharing Links

frontend/client/components/ContributionModal/PaymentInfo.tsx

@@ -1,13 +1,13 @@
 import React, { ReactNode } from 'react';
 import classnames from 'classnames';
-import { Form, Input, Button, Icon, Radio, message } from 'antd';
+import { Button, Form, Icon, Radio } from 'antd';
 import { RadioChangeEvent } from 'antd/lib/radio';
 import QRCode from 'qrcode.react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { formatZcashURI, formatZcashCLI } from 'utils/formatters';
+import { formatZcashCLI, formatZcashURI } from 'utils/formatters';
 import { ContributionWithAddresses } from 'types';
 import Loader from 'components/Loader';
 import './PaymentInfo.less';
+import CopyInput from 'components/CopyInput';
 
 interface Props {
   contribution?: ContributionWithAddresses | Falsy;
@@ -110,41 +110,3 @@ export default class PaymentInfo extends React.Component<Props, State> {
     this.setState({ sendType: ev.target.value });
   };
 }
-
-interface CopyInputProps {
-  label: string;
-  value: string | undefined;
-  className?: string;
-  help?: string;
-  isTextarea?: boolean;
-}
-
-const CopyInput: React.SFC<CopyInputProps> = ({
-  label,
-  value,
-  help,
-  className,
-  isTextarea,
-}) => (
-  <Form.Item
-    className={classnames('CopyInput', className, isTextarea && 'is-textarea')}
-    label={label}
-    help={help}
-  >
-    {isTextarea ? (
-      <>
-        <Input.TextArea value={value} readOnly rows={3} />
-        <CopyToClipboard text={value || ''} onCopy={() => message.success('Copied!', 2)}>
-          <Button icon="copy" />
-        </CopyToClipboard>
-      </>
-    ) : (
-      <>
-        <Input value={value} readOnly />
-        <CopyToClipboard text={value || ''} onCopy={() => message.success('Copied!', 2)}>
-          <Button icon="copy" />
-        </CopyToClipboard>
-      </>
-    )}
-  </Form.Item>
-);

frontend/client/components/CopyInput.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button, Form, Input, message } from 'antd';
+import classnames from 'classnames';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+interface CopyInputProps {
+  label: string;
+  value: string | undefined;
+  className?: string;
+  help?: string;
+  isTextarea?: boolean;
+}
+
+const CopyInput: React.SFC<CopyInputProps> = ({
+  label,
+  value,
+  help,
+  className,
+  isTextarea,
+}) => (
+  <Form.Item
+    className={classnames('CopyInput', className, isTextarea && 'is-textarea')}
+    label={label}
+    help={help}
+  >
+    {isTextarea ? (
+      <>
+        <Input.TextArea value={value} readOnly rows={3} />
+        <CopyToClipboard text={value || ''} onCopy={() => message.success('Copied!', 2)}>
+          <Button icon="copy" />
+        </CopyToClipboard>
+      </>
+    ) : (
+      <>
+        <Input value={value} readOnly />
+        <CopyToClipboard text={value || ''} onCopy={() => message.success('Copied!', 2)}>
+          <Button icon="copy" />
+        </CopyToClipboard>
+      </>
+    )}
+  </Form.Item>
+);
+
+export default CopyInput;

frontend/client/components/SocialShare.less

@@ -28,4 +28,19 @@
     .social-mixin(facebook, @facebook-color);
     .social-mixin(linkedin, @linkedin-color);
   }
+
+  &-icon {
+    display: inline;
+    cursor: default;
+
+    .social-mixin(@name, @color) {
+      &.is-@{name} {
+        color: @color;
+      }
+    }
+    .social-mixin(twitter, @twitter-color);
+    .social-mixin(reddit, @reddit-color);
+    .social-mixin(facebook, @facebook-color);
+    .social-mixin(linkedin, @linkedin-color);
+  }
 }

frontend/client/components/SocialShare.tsx

@@ -1,28 +1,35 @@
 import React from 'react';
 import './SocialShare.less';
+import { Modal } from 'antd';
+import CopyInput from 'components/CopyInput';
 
 interface TypeOptions {
   className: string;
+  humanName: string;
   url: (url: string, title: string, text: string) => string;
 }
 
 const types: { [index: string]: TypeOptions } = {
   twitter: {
-    className: 'fab fa-twitter-square',
+    humanName: 'Twitter',
+    className: 'fab fa-twitter',
     url: (url: string, _: string, text: string) =>
       `https://twitter.com/intent/tweet?url=${url}&text=${text}`,
   },
   reddit: {
-    className: 'fab fa-reddit-square',
+    humanName: 'Reddit',
+    className: 'fab fa-reddit',
     url: (url: string, title: string) =>
       `https://reddit.com/submit?url=${url}&title=${title}`,
   },
   facebook: {
-    className: 'fab fa-facebook-square',
+    humanName: 'Facebook',
+    className: 'fab fa-facebook',
     url: (url: string) => `http://www.facebook.com/sharer.php?u=${url}`,
   },
   linkedin: {
-    className: 'fab fa-linkedin-square',
+    humanName: 'LinkedIn',
+    className: 'fab fa-linkedin',
     url: (url: string, title: string, text: string) =>
       `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}&summary=${text}`,
   },
@@ -34,27 +41,58 @@ interface OwnProps {
   title: string;
 }
 
+interface State {
+  openModal: boolean;
+  socialKey: string;
+}
+
 type Props = OwnProps;
 
-export default class SocialShare extends React.Component<Props> {
+export default class SocialShare extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      openModal: false,
+      socialKey: 'twitter',
+    };
+  }
+
   render() {
     let { url, title, text } = this.props;
+    const { openModal, socialKey } = this.state;
     url = url.replace(`localhost:${process.env.PORT}`, 'grants.zfnd.org');
     url = encodeURIComponent(url);
     title = encodeURIComponent(title);
     text = encodeURIComponent(text);
     return (
       <div className="SocialShare">
+        <Modal
+          title={
+            <a className={`SocialShare-icon is-${socialKey}`}>
+              <i className={types[socialKey].className} />
+              {' ' + types[socialKey].humanName}
+            </a>
+          }
+          visible={openModal}
+          footer={null}
+          onCancel={() => this.setState({ openModal: false })}
+        >
+          <CopyInput label={''} value={types[socialKey].url(url, title, text)} />
+        </Modal>
         {Object.keys(types).map(key => {
           const opts = types[key];
           return (
             <a
-              target="popup"
-              onClick={() => windowOpen(opts.url(url, title, text))}
+              onClick={() =>
+                this.setState({
+                  openModal: true,
+                  socialKey: key,
+                })
+              }
               key={key}
               className={`SocialShare-button is-${key}`}
             >
-              <i className={opts.className} />
+              <i className={opts.className + '-square'} />
             </a>
           );
         })}
@@ -62,36 +100,3 @@ export default class SocialShare extends React.Component<Props> {
     );
   }
 }
-
-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;
-}