import PropTypes from 'prop-types'; import { PureComponent } from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { Link } from 'react-router-dom'; import ArrowRightAltIcon from '@material-symbols/svg-600/outlined/arrow_right_alt.svg?react'; import ContentCopyIcon from '@material-symbols/svg-600/outlined/content_copy.svg?react'; import SwipeableViews from 'react-swipeable-views'; import { ColumnBackButton } from 'mastodon/components/column_back_button'; import { Icon } from 'mastodon/components/icon'; import { me, domain } from 'mastodon/initial_state'; import { useAppSelector } from 'mastodon/store'; const messages = defineMessages({ shareableMessage: { id: 'onboarding.share.message', defaultMessage: 'I\'m {username} on #Mastodon! Come follow me at {url}' }, }); class CopyPasteText extends PureComponent { static propTypes = { value: PropTypes.string, }; state = { copied: false, focused: false, }; setRef = c => { this.input = c; }; handleInputClick = () => { this.setState({ copied: false }); this.input.focus(); this.input.select(); this.input.setSelectionRange(0, this.props.value.length); }; handleButtonClick = e => { e.stopPropagation(); const { value } = this.props; navigator.clipboard.writeText(value); this.input.blur(); this.setState({ copied: true }); this.timeout = setTimeout(() => this.setState({ copied: false }), 700); }; handleFocus = () => { this.setState({ focused: true }); }; handleBlur = () => { this.setState({ focused: false }); }; componentWillUnmount () { if (this.timeout) clearTimeout(this.timeout); } render () { const { value } = this.props; const { copied, focused } = this.state; return (