mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-12-05 13:39:04 +01:00
44 lines
1.2 KiB
React
44 lines
1.2 KiB
React
|
import PropTypes from 'prop-types';
|
||
|
import { useState, useCallback } from 'react';
|
||
|
|
||
|
import { defineMessages } from 'react-intl';
|
||
|
|
||
|
import classNames from 'classnames';
|
||
|
|
||
|
import { useDispatch } from 'react-redux';
|
||
|
|
||
|
import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
|
||
|
import { showAlert } from 'flavours/glitch/actions/alerts';
|
||
|
import { IconButton } from 'flavours/glitch/components/icon_button';
|
||
|
|
||
|
const messages = defineMessages({
|
||
|
copied: { id: 'copy_icon_button.copied', defaultMessage: 'Copied to clipboard' },
|
||
|
});
|
||
|
|
||
|
export const CopyIconButton = ({ title, value, className }) => {
|
||
|
const [copied, setCopied] = useState(false);
|
||
|
const dispatch = useDispatch();
|
||
|
|
||
|
const handleClick = useCallback(() => {
|
||
|
navigator.clipboard.writeText(value);
|
||
|
setCopied(true);
|
||
|
dispatch(showAlert({ message: messages.copied }));
|
||
|
setTimeout(() => setCopied(false), 700);
|
||
|
}, [setCopied, value, dispatch]);
|
||
|
|
||
|
return (
|
||
|
<IconButton
|
||
|
className={classNames(className, copied ? 'copied' : 'copyable')}
|
||
|
title={title}
|
||
|
onClick={handleClick}
|
||
|
iconComponent={ContentCopyIcon}
|
||
|
/>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
CopyIconButton.propTypes = {
|
||
|
title: PropTypes.string,
|
||
|
value: PropTypes.string,
|
||
|
className: PropTypes.string,
|
||
|
};
|