zecfoundation
/
zcash-grant-system
mirror of https://github.com/ZcashFoundation/zcash-grant-system.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor CopyInput out into it's own component

This commit is contained in:
Daniel Ternyak 2019-02-17 15:57:06 -06:00
parent 39250211b6
commit 75ca7667d8
No known key found for this signature in database
GPG Key ID: DF212D2DC5D0E245
2 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/client/components/ContributionModal/PaymentInfo.tsx
View File

@ -1,13 +1,13 @@
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import classnames from 'classnames'; 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 { RadioChangeEvent } from 'antd/lib/radio';
import QRCode from 'qrcode.react'; import QRCode from 'qrcode.react';
import CopyToClipboard from 'react-copy-to-clipboard'; import { formatZcashCLI, formatZcashURI } from 'utils/formatters';
import { formatZcashURI, formatZcashCLI } from 'utils/formatters';
import { ContributionWithAddresses } from 'types'; import { ContributionWithAddresses } from 'types';
import Loader from 'components/Loader'; import Loader from 'components/Loader';
import './PaymentInfo.less'; import './PaymentInfo.less';
import CopyInput from 'components/CopyInput';
interface Props { interface Props {
contribution?: ContributionWithAddresses | Falsy; contribution?: ContributionWithAddresses | Falsy;
@ -110,41 +110,3 @@ export default class PaymentInfo extends React.Component<Props, State> {
this.setState({ sendType: ev.target.value }); 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>
);

44
frontend/client/components/CopyInput.tsx Normal file
View File

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