restyle url sharing
This commit is contained in:
parent
dfbea0b6ab
commit
5eb36c1e15
|
@ -4,7 +4,7 @@ import { Formik, FormikHelpers } from 'formik';
|
|||
import * as Yup from 'yup';
|
||||
import Form from 'react-bootstrap/Form';
|
||||
import FormControl from 'react-bootstrap/FormControl';
|
||||
import { Button, Col, Table } from 'react-bootstrap';
|
||||
import { Button, Col, Row, Table } from 'react-bootstrap';
|
||||
import { DeadCenter, GalleryContext } from 'pages/gallery';
|
||||
import { User } from 'types/user';
|
||||
import {
|
||||
|
@ -18,8 +18,8 @@ import SubmitButton from './SubmitButton';
|
|||
import MessageDialog from './MessageDialog';
|
||||
import { Collection } from 'types/collection';
|
||||
import { transformShareURLForHost } from 'utils/collection';
|
||||
import { IconButton, Row, Value } from './Container';
|
||||
import CloseIcon from './icons/CloseIcon';
|
||||
import CopyIcon from './icons/CopyIcon';
|
||||
import { IconButton, Value } from './Container';
|
||||
|
||||
interface Props {
|
||||
show: boolean;
|
||||
|
@ -83,7 +83,8 @@ function CollectionShare(props: Props) {
|
|||
};
|
||||
|
||||
const createSharableURLHelper = async () => {
|
||||
await createShareableURL(props.collection);
|
||||
const publicURL = await createShareableURL(props.collection);
|
||||
props.collection.publicURLs = [publicURL];
|
||||
await props.syncWithRemote();
|
||||
};
|
||||
|
||||
|
@ -105,6 +106,14 @@ function CollectionShare(props: Props) {
|
|||
});
|
||||
};
|
||||
|
||||
const handleCollectionPublicSharing = () => {
|
||||
if (props.collection.publicURLs?.length > 0) {
|
||||
deleteSharableLink();
|
||||
} else {
|
||||
createSharableURLHelper();
|
||||
}
|
||||
};
|
||||
|
||||
const ShareeRow = ({ sharee, collectionUnshare }: ShareeProps) => (
|
||||
<tr>
|
||||
<td>{sharee.email}</td>
|
||||
|
@ -130,7 +139,7 @@ function CollectionShare(props: Props) {
|
|||
}
|
||||
return (
|
||||
<MessageDialog
|
||||
show={props.show}
|
||||
show={true}
|
||||
onHide={props.onHide}
|
||||
attributes={{ title: constants.SHARE_COLLECTION }}>
|
||||
<DeadCenter style={{ width: '85%', margin: 'auto' }}>
|
||||
|
@ -190,13 +199,18 @@ function CollectionShare(props: Props) {
|
|||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
{props.collection.publicURLs?.length === 0 && (
|
||||
<Button
|
||||
variant="outline-success"
|
||||
onClick={createSharableURLHelper}>
|
||||
Create New Shareable URL
|
||||
</Button>
|
||||
)}
|
||||
<Row style={{ padding: '10px' }}>
|
||||
<Value width="100%" style={{ paddingTop: '10px' }}>
|
||||
Public sharing
|
||||
</Value>
|
||||
<Form.Switch
|
||||
style={{ marginLeft: '20px' }}
|
||||
checked={props.collection.publicURLs?.length > 0}
|
||||
id="collection-public-sharing-toggler"
|
||||
className="custom-switch-md"
|
||||
onChange={handleCollectionPublicSharing}
|
||||
/>
|
||||
</Row>
|
||||
<div
|
||||
style={{
|
||||
height: '1px',
|
||||
|
@ -205,13 +219,14 @@ function CollectionShare(props: Props) {
|
|||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
|
||||
{props.collection.publicURLs?.length > 0 && (
|
||||
<div style={{ width: '100%', wordBreak: 'break-all' }}>
|
||||
<p>{constants.PUBLIC_URL}</p>
|
||||
|
||||
{props.collection.publicURLs?.map((publicURL) => (
|
||||
<Row key={publicURL.url}>
|
||||
<Value width="80%">
|
||||
<Value width="85%">
|
||||
{
|
||||
<a
|
||||
href={transformShareURLForHost(
|
||||
|
@ -228,19 +243,17 @@ function CollectionShare(props: Props) {
|
|||
}
|
||||
</Value>
|
||||
<Value
|
||||
width="20%"
|
||||
style={{
|
||||
justifyContent: 'space-around',
|
||||
}}>
|
||||
<IconButton onClick={deleteSharableLink}>
|
||||
<CloseIcon />
|
||||
width="15%"
|
||||
style={{ justifyContent: 'space-around' }}>
|
||||
<IconButton>
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
</Value>
|
||||
</Row>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{props.collection.sharees?.length > 0 ? (
|
||||
{props.collection.sharees?.length > 0 && (
|
||||
<>
|
||||
<p>{constants.SHAREES}</p>
|
||||
|
||||
|
@ -256,7 +269,9 @@ function CollectionShare(props: Props) {
|
|||
</tbody>
|
||||
</Table>
|
||||
</>
|
||||
) : (
|
||||
)}
|
||||
{props.collection.sharees?.length > 0 &&
|
||||
props.collection.publicURLs?.length > 0 && (
|
||||
<div style={{ marginTop: '12px' }}>
|
||||
{constants.ZERO_SHAREES()}
|
||||
</div>
|
||||
|
|
19
src/components/icons/CopyIcon.tsx
Normal file
19
src/components/icons/CopyIcon.tsx
Normal file
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function CopyIcon(props) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
viewBox={props.viewBox}
|
||||
width={props.width}>
|
||||
<path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
CopyIcon.defaultProps = {
|
||||
height: 20,
|
||||
width: 20,
|
||||
viewBox: '0 0 24 24',
|
||||
};
|
Loading…
Reference in a new issue