src/components/AttachLink/AttachLink.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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 />}
    >
      Link
    </Button>
  );

  const child = children && React.Children.only(children);

  return (
    <>
      <Modal callback={callback} isOpen={isOpen} setIsOpen={setIsOpen} />
      {
        React.isValidElement(child)
          ? React.cloneElement(child, { onClick: handleOpen })
          : defaultButton
      }
    </>
  );
};

export default AttachLink;