import React, { useState } from 'react'; import Button from '@material-ui/core/Button'; import LinkIcon from '@material-ui/icons/Link'; import Modal from './Modal'; interface PropTypes { callback: (url: string) => void; } const AttachLink: React.FC<PropTypes> = ({ callback, children }) => { const [isOpen, setIsOpen] = useState<boolean>(false); const handleOpen = (): void => { setIsOpen(true); }; const defaultButton = ( <Button onClick={handleOpen} variant="outlined" color="primary" startIcon={<LinkIcon />} > Attach a link </Button> ); const child = children && React.Children.toArray(children)[0]; return ( <> <Modal callback={callback} isOpen={isOpen} setIsOpen={setIsOpen} /> { React.isValidElement(child) ? React.cloneElement(child, { onClick: handleOpen }) : defaultButton } </> ); }; export default AttachLink;