ui: create reusable copy button

css/buttons/copy.scss

@@ -0,0 +1,37 @@
+.copy-button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 8px 8px 16px;
+    margin-top: 8px;
+    width: calc(100% - 24px);
+    height: 24px;
+
+    background: #0376DA;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+        background: #278ADF;
+        font-weight: 600;
+    }
+
+    &-content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 292px;
+
+        &.selected {
+            font-weight: 600;
+        }
+    }
+
+    &.clicked {
+        background: #31B76A;
+    }
+
+    & > div > svg > path {
+        fill: #fff;
+    }
+}

css/main.scss

@@ -33,6 +33,7 @@ $flagsImagePath: "../images/";
 @import 'inlay';
 @import 'reload_overlay/reload_overlay';
 @import 'mini_toolbox';
+@import 'buttons/copy.scss';
 @import 'modals/desktop-picker/desktop-picker';
 @import 'modals/device-selection/device-selection';
 @import 'modals/dialog';

css/modals/invite/_invite_more.scss

@@ -67,44 +67,6 @@
             }
         }
 
-        &.copy-link {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 8px 8px 8px 16px;
-            margin-top: 8px;
-            width: calc(100% - 24px);
-            height: 24px;
-
-            background: #0376DA;
-            border-radius: 4px;
-            cursor: pointer;
-
-            &:hover {
-                background: #278ADF;
-                font-weight: 600;
-            }
-
-            &-text {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                max-width: 292px;
-
-                &.selected {
-                    font-weight: 600;
-                }
-            }
-
-            &.clicked {
-                background: #31B76A;
-            }
-
-            & > div > svg > path {
-                fill: #fff;
-            }
-        }
-
         &.separator {
             margin: 24px 0 24px -20px;
             padding: 0 20px;

react/features/base/buttons/CopyButton.js

@@ -0,0 +1,125 @@
+// @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 = {
+
+    /**
+     * Css class to apply on container
+     */
+    className: string,
+
+    /**
+     * The displayed text
+     */
+    displayedText: string,
+
+    /**
+     * The text that needs to be copied (might differ from the displayedText)
+     */
+    textToCopy: string,
+
+    /**
+     * The text displayed on mouse hover
+     */
+    textOnHover: string,
+
+    /**
+     * The text displayed on copy success
+     */
+    textOnCopySuccess: string
+};
+
+/**
+ * Component meant to enable users to copy the conference URL.
+ *
+ * @returns {React$Element<any>}
+ */
+function CopyButton({ className, displayedText, textToCopy, textOnHover, textOnCopySuccess }: Props) {
+    const [ isClicked, setIsClicked ] = useState(false);
+    const [ isHovered, setIsHovered ] = useState(false);
+
+    /**
+     * Click handler for the element.
+     *
+     * @returns {void}
+     */
+    function onClick() {
+        setIsHovered(false);
+        if (copyText(textToCopy)) {
+            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<any>}
+     */
+    function renderContent() {
+        if (isClicked) {
+            return (
+                <>
+                    <div className = 'copy-button-content selected'>
+                        {textOnCopySuccess}
+                    </div>
+                    <Icon src = { IconCheck } />
+                </>
+            );
+        }
+
+        return (
+            <>
+                <div className = 'copy-button-content'>
+                    {isHovered ? textOnHover : displayedText}
+                </div>
+                <Icon src = { IconCopy } />
+            </>
+        );
+    }
+
+    return (
+        <div
+            className = { `${className} copy-button${isClicked ? ' clicked' : ''}` }
+            onClick = { onClick }
+            onMouseOut = { onHoverOut }
+            onMouseOver = { onHoverIn }>
+            { renderContent() }
+        </div>
+    );
+}
+
+CopyButton.defaultProps = {
+    className: ''
+};
+
+export default translate(CopyButton);

react/features/invite/components/add-people-dialog/web/CopyMeetingLinkSection.js

@@ -1,10 +1,10 @@
 // @flow
 
-import React, { useState } from 'react';
+import React from 'react';
 
+import CopyButton from '../../../../base/buttons/CopyButton';
 import { translate } from '../../../../base/i18n';
-import { Icon, IconCheck, IconCopy } from '../../../../base/icons';
-import { copyText, getDecodedURI } from '../../../../base/util';
+import { getDecodedURI } from '../../../../base/util';
 
 
 type Props = {
@@ -26,84 +26,15 @@ type Props = {
  * @returns {React$Element<any>}
  */
 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<any>}
-     */
-    function renderLinkContent() {
-        if (isClicked) {
-            return (
-                <>
-                    <div className = 'invite-more-dialog copy-link-text selected'>
-                        {t('addPeople.linkCopied')}
-                    </div>
-                    <Icon src = { IconCheck } />
-                </>
-            );
-        }
-
-        const displayUrl = getDecodedURI(url);
-
-        return (
-            <>
-                <div className = 'invite-more-dialog invite-more-dialog-conference-url copy-link-text'>
-                    {isHovered ? t('addPeople.copyLink') : displayUrl}
-                </div>
-                <Icon src = { IconCopy } />
-            </>
-        );
-    }
-
     return (
         <>
             <span>{t('addPeople.shareLink')}</span>
-            <div
-                className = { `invite-more-dialog copy-link${isClicked ? ' clicked' : ''}` }
-                onClick = { onClick }
-                onMouseOut = { onHoverOut }
-                onMouseOver = { onHoverIn }>
-                { renderLinkContent() }
-            </div>
+            <CopyButton
+                className = 'invite-more-dialog-conference-url'
+                displayedText = { getDecodedURI(url) }
+                textOnCopySuccess = { t('addPeople.linkCopied') }
+                textOnHover = { t('addPeople.copyLink') }
+                textToCopy = { url } />
         </>
     );
 }