jiti-meet/react/features/base/buttons/CopyButton.web.tsx

209 lines
5.0 KiB
TypeScript
Raw Normal View History

2021-11-04 21:10:43 +00:00
/* eslint-disable react/jsx-no-bind */
2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { makeStyles } from 'tss-react/mui';
2020-07-16 13:59:26 +00:00
import Icon from '../icons/components/Icon';
import { IconCheck, IconCopy } from '../icons/svg';
import { withPixelLineHeight } from '../styles/functions.web';
import { copyText } from '../util/copyText.web';
2020-07-16 13:59:26 +00:00
const useStyles = makeStyles()((theme: Theme) => {
return {
copyButton: {
...withPixelLineHeight(theme.typography.bodyLongRegular),
borderRadius: theme.shape.borderRadius,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '8px 8px 8px 16px',
marginTop: 5,
width: 'calc(100% - 24px)',
height: 24,
background: theme.palette.action01,
cursor: 'pointer',
'&:hover': {
backgroundColor: theme.palette.action01Hover,
fontWeight: 600
},
'&.clicked': {
background: theme.palette.success02
},
'& > div > svg > path': {
fill: theme.palette.text01
}
},
content: {
overflow: 'hidden',
textOverflow: 'ellipsis',
2022-09-13 07:36:00 +00:00
whiteSpace: 'nowrap' as const,
maxWidth: 292,
marginRight: theme.spacing(3),
'&.selected': {
fontWeight: 600
}
}
};
});
let mounted: boolean;
2020-07-16 13:59:26 +00:00
type Props = {
/**
* Css class to apply on container.
*/
className: string;
2020-07-16 13:59:26 +00:00
/**
2021-11-04 21:10:43 +00:00
* The displayed text.
2020-07-16 13:59:26 +00:00
*/
displayedText: string;
2020-07-16 13:59:26 +00:00
/**
* The id of the button.
2020-07-16 13:59:26 +00:00
*/
id?: string;
2020-07-16 13:59:26 +00:00
/**
* The text displayed on copy success.
2020-07-16 13:59:26 +00:00
*/
textOnCopySuccess: string;
2020-07-16 13:59:26 +00:00
/**
* The text displayed on mouse hover.
2020-07-16 13:59:26 +00:00
*/
textOnHover: string;
/**
* The text that needs to be copied (might differ from the displayedText).
*/
textToCopy: string;
2020-07-16 13:59:26 +00:00
};
/**
* Component meant to enable users to copy the conference URL.
*
* @returns {React$Element<any>}
*/
function CopyButton({ className = '', displayedText, textToCopy, textOnHover, textOnCopySuccess, id }: Props) {
const { classes, cx } = useStyles();
2020-07-16 13:59:26 +00:00
const [ isClicked, setIsClicked ] = useState(false);
const [ isHovered, setIsHovered ] = useState(false);
useEffect(() => {
mounted = true;
return () => {
mounted = false;
};
}, []);
2020-07-16 13:59:26 +00:00
/**
* Click handler for the element.
*
* @returns {void}
*/
2021-03-03 21:04:00 +00:00
async function onClick() {
2020-07-16 13:59:26 +00:00
setIsHovered(false);
2021-03-03 21:04:00 +00:00
const isCopied = await copyText(textToCopy);
if (isCopied) {
2020-07-16 13:59:26 +00:00
setIsClicked(true);
setTimeout(() => {
// avoid: Can't perform a React state update on an unmounted component
if (mounted) {
setIsClicked(false);
}
2020-07-16 13:59:26 +00:00
}, 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);
}
/**
* KeyPress handler for accessibility.
*
* @param {React.KeyboardEventHandler<HTMLDivElement>} e - The key event to handle.
*
* @returns {void}
*/
function onKeyPress(e: React.KeyboardEvent) {
if (onClick && (e.key === ' ' || e.key === 'Enter')) {
e.preventDefault();
onClick();
}
}
2020-07-16 13:59:26 +00:00
/**
* Renders the content of the link based on the state.
*
* @returns {React$Element<any>}
*/
function renderContent() {
if (isClicked) {
return (
<>
<div className = { cx(classes.content, 'selected') }>
<span role = { 'alert' }>{ textOnCopySuccess }</span>
2020-07-16 13:59:26 +00:00
</div>
<Icon src = { IconCheck } />
</>
);
}
return (
<>
<div className = { classes.content }>
<span> { isHovered ? textOnHover : displayedText } </span>
2020-07-16 13:59:26 +00:00
</div>
<Icon src = { IconCopy } />
</>
);
}
return (
<div
aria-label = { textOnHover }
className = { cx(className, classes.copyButton, isClicked ? ' clicked' : '') }
id = { id }
onBlur = { onHoverOut }
2020-07-16 13:59:26 +00:00
onClick = { onClick }
onFocus = { onHoverIn }
onKeyPress = { onKeyPress }
2020-07-16 13:59:26 +00:00
onMouseOut = { onHoverOut }
onMouseOver = { onHoverIn }
role = 'button'
tabIndex = { 0 }>
2020-07-16 13:59:26 +00:00
{ renderContent() }
</div>
);
}
export default CopyButton;