feat: support close all connections

for https://github.com/haishanh/yacd/issues/338

1 files changed, 44 insertions, 0 deletions

diff --git a/src/components/ModalCloseAllConnections.js b/src/components/ModalCloseAllConnections.js
new file mode 100644
index 0000000..8a06393
--- /dev/null
+++ b/src/components/ModalCloseAllConnections.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import Modal from 'react-modal';
+import Button from './Button';
+import cx from 'classnames';
+
+import modalStyle from './Modal.module.css';
+import s from './ModalCloseAllConnections.module.css';
+
+const { useRef, useCallback, useMemo } = React;
+
+export default function Comp({ isOpen, onRequestClose, primaryButtonOnTap }) {
+  const primaryButtonRef = useRef(null);
+  const onAfterOpen = useCallback(() => {
+    primaryButtonRef.current.focus();
+  }, []);
+  const className = useMemo(
+    () => ({
+      base: cx(modalStyle.content, s.cnt),
+      afterOpen: s.afterOpen,
+      beforeClose: ''
+    }),
+    []
+  );
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      onAfterOpen={onAfterOpen}
+      className={className}
+      overlayClassName={cx(modalStyle.overlay, s.overlay)}
+    >
+      <p>Are you sure you want to close all connections?</p>
+      <div className={s.btngrp}>
+        <Button onClick={primaryButtonOnTap} ref={primaryButtonRef}>
+          I'm sure
+        </Button>
+        {/* im lazy :) */}
+        <div style={{ width: 20 }} />
+        <Button onClick={onRequestClose}>No</Button>
+      </div>
+    </Modal>
+  );
+}