Modal

1
() => {
2
  const [visible, setVisible] = React.useState(false);
3
  const { Cluster } = KubeIcon;
4
  const ref = React.createRef();
5

6
  const openModal = () => {
7
    setVisible(true);
8
  };
9

10
  const closeModal = () => {
11
    console.log(ref.current);
12
    setVisible(false);
13
  };
14

15
  return (
16
    <>
17
      <Button onClick={openModal}>Open Modal</Button>
18
      <Modal
19
        ref={ref}
20
        visible={visible}
21
        title="Modal demo"
22
        description="Modal description"
23
        titleIcon={<Cluster size={40} />}
24
        onCancel={closeModal}
25
      >
26
        Modal content
27
      </Modal>
28
    </>
29
  );
30
}

1
() => {
2
  const modal = useModal();
3

4
  const openChildModal = () => {
5
    modal.open({
6
      title: 'Imperative Modal',
7
      description: 'description text',
8
      content: 'modal content',
9
    });
10
  };
11

12
  const content = <Button onClick={openChildModal}>Nest Imperative Modal</Button>;
13

14
  const openModal = () => {
15
    modal.open({
16
      title: 'Imperative Modal',
17
      description: 'description text',
18
      content,
19
    });
20
  };
21

22
  return <Button onClick={openModal}>Imperative Modal</Button>;
23
}

1
() => {
2
  const modal = useModal();
3
  return (
4
    <Button
5
      onClick={() => {
6
        modal.confirm({ title: 'confirm modal', content: 'confirm content' });
7
      }}
8
    >
9
      Imperative Modal
10
    </Button>
11
  );
12
}