From 4109cd1b2fca7e4934f0aba1c3a7fabab62270bb Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 13 Aug 2020 20:50:31 +0300 Subject: feat: create AttachLink component --- src/components/AttachLink/AttachLink.tsx | 41 +++++++++++++++++ src/components/AttachLink/Modal.tsx | 76 ++++++++++++++++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 src/components/AttachLink/AttachLink.tsx create mode 100644 src/components/AttachLink/Modal.tsx (limited to 'src/components/AttachLink') diff --git a/src/components/AttachLink/AttachLink.tsx b/src/components/AttachLink/AttachLink.tsx new file mode 100644 index 0000000..b8742a2 --- /dev/null +++ b/src/components/AttachLink/AttachLink.tsx @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import { Button, } from '@material-ui/core'; +import LinkIcon from '@material-ui/icons/Link'; +import Modal from './Modal'; + +interface PropTypes { + callback: (url: string) => void; +} + +const AttachLink: React.FC = ({ callback, children }) => { + const [isOpen, setIsOpen] = useState(false); + + const handleOpen = (): void => { + setIsOpen(true); + }; + + const defaultButton = ( + + ); + + const child = children && React.Children.toArray(children)[0]; + + return ( + <> + + {React.isValidElement(child) + ? React.cloneElement(child, { onClick: handleOpen }) + : defaultButton + } + + ); +}; + +export default AttachLink; diff --git a/src/components/AttachLink/Modal.tsx b/src/components/AttachLink/Modal.tsx new file mode 100644 index 0000000..fa58fc4 --- /dev/null +++ b/src/components/AttachLink/Modal.tsx @@ -0,0 +1,76 @@ +import React, { useState } from 'react'; +import { + Button, + TextField, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle +} from '@material-ui/core'; + +interface PropTypes { + isOpen: boolean; + setIsOpen: (value: boolean) => void; + callback: (url: string) => void; +} + +const Modal: React.FC = ({ setIsOpen, isOpen, callback }) => { + const [url, setUrl] = useState(''); + + const handleClose = () => { + setIsOpen(false); + }; + + const handleSubmit = () => { + let result = url; + if (url.startsWith('https://www.instagram.com/')) { + const match = url.match('/p/(.*)/'); + const id = match && match[1]; + result = `https://www.instagram.com/p/${id}/media/?size=l`; + } else if (url.startsWith('https://drive.google.com/')) { + const match = url.match('/d/(.*)/'); + const fileId = match && match[1]; + result = `https://drive.google.com/uc?export=view&id=${fileId}`; + } + callback(result || ''); + handleClose(); + }; + + const handleChange = (event:React.ChangeEvent) => { + setUrl(event.target.value); + }; + + return ( +
+ + Upload via link + + + Provide a valid URL to your image: + + + + + + + + +
+ ); +}; + +export default Modal; -- cgit v1.2.3 From 625ae3280bdf83b66a66873344acad4103d30006 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 13 Aug 2020 21:33:03 +0300 Subject: feat: create FileUpload component --- src/components/AttachLink/AttachLink.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/components/AttachLink') diff --git a/src/components/AttachLink/AttachLink.tsx b/src/components/AttachLink/AttachLink.tsx index b8742a2..eb7aebd 100644 --- a/src/components/AttachLink/AttachLink.tsx +++ b/src/components/AttachLink/AttachLink.tsx @@ -13,9 +13,9 @@ const AttachLink: React.FC = ({ callback, children }) => { const handleOpen = (): void => { setIsOpen(true); }; - + const defaultButton = ( -