add copy to clipboard option
This commit is contained in:
parent
0284830085
commit
3ca08bd4f6
|
@ -4,7 +4,14 @@ import { Formik, FormikHelpers } from 'formik';
|
||||||
import * as Yup from 'yup';
|
import * as Yup from 'yup';
|
||||||
import Form from 'react-bootstrap/Form';
|
import Form from 'react-bootstrap/Form';
|
||||||
import FormControl from 'react-bootstrap/FormControl';
|
import FormControl from 'react-bootstrap/FormControl';
|
||||||
import { Button, Col, Row, Table } from 'react-bootstrap';
|
import {
|
||||||
|
Button,
|
||||||
|
Col,
|
||||||
|
OverlayTrigger,
|
||||||
|
Row,
|
||||||
|
Table,
|
||||||
|
Tooltip,
|
||||||
|
} from 'react-bootstrap';
|
||||||
import { DeadCenter, GalleryContext } from 'pages/gallery';
|
import { DeadCenter, GalleryContext } from 'pages/gallery';
|
||||||
import { User } from 'types/user';
|
import { User } from 'types/user';
|
||||||
import {
|
import {
|
||||||
|
@ -20,6 +27,7 @@ import { Collection } from 'types/collection';
|
||||||
import { transformShareURLForHost } from 'utils/collection';
|
import { transformShareURLForHost } from 'utils/collection';
|
||||||
import CopyIcon from './icons/CopyIcon';
|
import CopyIcon from './icons/CopyIcon';
|
||||||
import { IconButton, Value } from './Container';
|
import { IconButton, Value } from './Container';
|
||||||
|
import TickIcon from './icons/TickIcon';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
show: boolean;
|
show: boolean;
|
||||||
|
@ -37,8 +45,9 @@ interface ShareeProps {
|
||||||
|
|
||||||
function CollectionShare(props: Props) {
|
function CollectionShare(props: Props) {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const galleryContext = useContext(GalleryContext);
|
const galleryContext = useContext(GalleryContext);
|
||||||
|
const [copied, setCopied] = useState<boolean>(false);
|
||||||
|
|
||||||
const collectionShare = async (
|
const collectionShare = async (
|
||||||
{ email }: formValues,
|
{ email }: formValues,
|
||||||
{ resetForm, setFieldError }: FormikHelpers<formValues>
|
{ resetForm, setFieldError }: FormikHelpers<formValues>
|
||||||
|
@ -114,6 +123,12 @@ function CollectionShare(props: Props) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const copyToClipboardHelper = () => {
|
||||||
|
navigator.clipboard.writeText(props.collection.publicURLs[0].url);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 1000);
|
||||||
|
};
|
||||||
|
|
||||||
const ShareeRow = ({ sharee, collectionUnshare }: ShareeProps) => (
|
const ShareeRow = ({ sharee, collectionUnshare }: ShareeProps) => (
|
||||||
<tr>
|
<tr>
|
||||||
<td>{sharee.email}</td>
|
<td>{sharee.email}</td>
|
||||||
|
@ -134,12 +149,25 @@ function CollectionShare(props: Props) {
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const RenderCopiedMessage = (props) => {
|
||||||
|
const { style, ...rest } = props;
|
||||||
|
return (
|
||||||
|
<Tooltip
|
||||||
|
{...rest}
|
||||||
|
style={{ ...style, zIndex: 2001 }}
|
||||||
|
id="button-tooltip">
|
||||||
|
copied
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
if (!props.collection) {
|
if (!props.collection) {
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<MessageDialog
|
<MessageDialog
|
||||||
show={true}
|
show={props.show}
|
||||||
onHide={props.onHide}
|
onHide={props.onHide}
|
||||||
attributes={{ title: constants.SHARE_COLLECTION }}>
|
attributes={{ title: constants.SHARE_COLLECTION }}>
|
||||||
<DeadCenter style={{ width: '85%', margin: 'auto' }}>
|
<DeadCenter style={{ width: '85%', margin: 'auto' }}>
|
||||||
|
@ -245,9 +273,27 @@ function CollectionShare(props: Props) {
|
||||||
<Value
|
<Value
|
||||||
width="15%"
|
width="15%"
|
||||||
style={{ justifyContent: 'space-around' }}>
|
style={{ justifyContent: 'space-around' }}>
|
||||||
<IconButton>
|
<OverlayTrigger
|
||||||
|
show={copied}
|
||||||
|
placement="bottom"
|
||||||
|
trigger={'click'}
|
||||||
|
overlay={RenderCopiedMessage}
|
||||||
|
delay={{ show: 200, hide: 800 }}>
|
||||||
|
<IconButton
|
||||||
|
onClick={copyToClipboardHelper}
|
||||||
|
style={{
|
||||||
|
background: 'none',
|
||||||
|
...(copied
|
||||||
|
? { color: '#51cd7c' }
|
||||||
|
: {}),
|
||||||
|
}}>
|
||||||
|
{copied ? (
|
||||||
|
<TickIcon />
|
||||||
|
) : (
|
||||||
<CopyIcon />
|
<CopyIcon />
|
||||||
|
)}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
</OverlayTrigger>
|
||||||
</Value>
|
</Value>
|
||||||
</Row>
|
</Row>
|
||||||
))}
|
))}
|
||||||
|
|
Loading…
Reference in a new issue