54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Typography } from 'antd';
|
|
import { TextProps } from 'antd/es/typography/Text';
|
|
import React, { useMemo } from 'react';
|
|
|
|
type CopyButtonProps = {
|
|
children?: React.ReactNode;
|
|
text: string;
|
|
fontSize?: string;
|
|
btnStyle?: React.CSSProperties;
|
|
style?: React.CSSProperties;
|
|
};
|
|
|
|
const CopyButton: React.FC<CopyButtonProps & TextProps> = ({
|
|
children,
|
|
text,
|
|
fontSize = '14px',
|
|
style,
|
|
btnStyle,
|
|
...rest
|
|
}) => {
|
|
const intl = useIntl();
|
|
|
|
const tooltips = useMemo(() => {
|
|
return [
|
|
intl.formatMessage({ id: 'common.button.copy' }),
|
|
intl.formatMessage({ id: 'common.button.copied' })
|
|
];
|
|
}, [intl]);
|
|
|
|
return (
|
|
<Typography.Text
|
|
style={{ ...btnStyle }}
|
|
{...rest}
|
|
copyable={{
|
|
text: text,
|
|
tooltips: tooltips,
|
|
icon: [
|
|
<CopyOutlined style={{ fontSize: fontSize, ...style }} key="copy" />,
|
|
<CheckCircleFilled
|
|
style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
|
|
key="check"
|
|
/>
|
|
]
|
|
}}
|
|
>
|
|
{children}
|
|
</Typography.Text>
|
|
);
|
|
};
|
|
|
|
export default CopyButton;
|