1
/*
2
Easily show a global popconfirm modal at any point in cocalc by doing
3

4
   await redux.getActions("page").popconfirm(...open, title, cancelText, okText, description )
5

6
It will return true on OK and false on Cancel.
7

8
One twist is that the OK button is focused automatically, so the user can
9
just hit enter to select OK, without having to use the mouse.
10
*/
11

12
import { Modal } from "antd";
13
import {
14
  useActions,
15
  useEffect,
16
  useRedux,
17
  useRef,
18
} from "@cocalc/frontend/app-framework";
19

20
// Ensure the billing Actions and Store are created, which are needed for purchases, etc., to work...
21
import "@cocalc/frontend/billing/actions";
22

23
export default function PopconfirmModal({}) {
24
  const actions = useActions("page");
25
  const popconfirm = useRedux("page", "popconfirm")?.toJS() ?? {};
26

27
  const handleCancel = () => {
28
    actions.setState({ popconfirm: { open: false, ok: false } });
29
  };
30
  const handleOk = () => {
31
    actions.setState({ popconfirm: { open: false, ok: true } });
32
  };
33

34
  const okButtonRef = useRef(undefined);
35
  useEffect(() => {
36
    if (popconfirm.open) {
37
      // @ts-ignore
38
      setTimeout(() => okButtonRef.current?.focus(), 1);
39
    }
40
  }, [popconfirm.open]);
41

42
  // destroyOnHidden so values in quota input, etc. get updated
43
  return (
44
    <Modal
45
      key="app-modal"
46
      width={"600px"}
47
      destroyOnHidden
48
      open={popconfirm.open}
49
      title={popconfirm.title}
50
      onCancel={handleCancel}
51
      onOk={handleOk}
52
      cancelText={popconfirm.cancelText ?? "No"}
53
      okText={popconfirm.okText ?? "Yes"}
54
      okButtonProps={{
55
        // @ts-ignore
56
        ref: okButtonRef,
57
      }}
58
    >
59
      {popconfirm.description}
60
    </Modal>
61
  );
62
}
63

64