Refactor CopyInput out into it's own component
This commit is contained in:
parent
39250211b6
commit
75ca7667d8
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue