// @flow import React, { useState } from 'react'; import { translate } from '../../../../base/i18n'; import { Icon, IconCheck, IconCopy } from '../../../../base/icons'; import { copyText } from '../../../../base/util'; type Props = { /** * Invoked to obtain translated strings. */ t: Function, /** * The URL of the conference. */ url: string }; /** * Component meant to enable users to copy the conference URL. * * @returns {React$Element} */ function CopyMeetingLinkSection({ t, url }: Props) { const [ isClicked, setIsClicked ] = useState(false); const [ isHovered, setIsHovered ] = useState(false); /** * Click handler for the element. * * @returns {void} */ function onClick() { setIsHovered(false); if (copyText(url)) { setIsClicked(true); setTimeout(() => { setIsClicked(false); }, 2500); } } /** * Hover handler for the element. * * @returns {void} */ function onHoverIn() { if (!isClicked) { setIsHovered(true); } } /** * Hover handler for the element. * * @returns {void} */ function onHoverOut() { setIsHovered(false); } /** * Renders the content of the link based on the state. * * @returns {React$Element} */ function renderLinkContent() { if (isClicked) { return ( <>
{t('addPeople.linkCopied')}
); } const displayUrl = decodeURI(url.replace(/^https?:\/\//i, '')); return ( <>
{isHovered ? t('addPeople.copyLink') : displayUrl}
); } return ( <> {t('addPeople.shareLink')}
{ renderLinkContent() }
); } export default translate(CopyMeetingLinkSection);