Add reusable dialog (#459)

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/molecules/dialog/Dialog.jsx b/src/app/molecules/dialog/Dialog.jsx
index 93307dc789ac2aa6f518bc80a36f21b0a9603099..637766a9c854c122648bb9edd864f8fc447c3f31 100644 (file)
--- a/src/app/molecules/dialog/Dialog.jsx
+++ b/src/app/molecules/dialog/Dialog.jsx
@@ -12,6 +12,7 @@ import RawModal from '../../atoms/modal/RawModal';
 function Dialog({
   className, isOpen, title, onAfterOpen, onAfterClose,
   contentOptions, onRequestClose, closeFromOutside, children,
+  invisibleScroll,
 }) {
   return (
     <RawModal
@@ -36,7 +37,7 @@ function Dialog({
             {contentOptions}
           </Header>
           <div className="dialog__content__wrapper">
-            <ScrollView autoHide>
+            <ScrollView autoHide invisible={invisibleScroll}>
               <div className="dialog__content-container">
                 {children}
               </div>
@@ -55,6 +56,7 @@ Dialog.defaultProps = {
   onAfterClose: null,
   onRequestClose: null,
   closeFromOutside: true,
+  invisibleScroll: false,
 };
 
 Dialog.propTypes = {
@@ -67,6 +69,7 @@ Dialog.propTypes = {
   onRequestClose: PropTypes.func,
   closeFromOutside: PropTypes.bool,
   children: PropTypes.node.isRequired,
+  invisibleScroll: PropTypes.bool,
 };
 
 export default Dialog;

diff --git a/src/app/molecules/dialog/Dialog.scss b/src/app/molecules/dialog/Dialog.scss
index dd4c4336524199edee6ab94aa2ee3743b246b2e5..77e5f059c205b921fd247f8e0c931abd862aa6da 100644 (file)
--- a/src/app/molecules/dialog/Dialog.scss
+++ b/src/app/molecules/dialog/Dialog.scss
@@ -21,8 +21,3 @@
     flex-direction: column;
   }
 }
-
-.dialog__content-container {
-  padding-top: var(--sp-extra-tight);
-  padding-bottom: var(--sp-extra-loose);
-}
\ No newline at end of file

diff --git a/src/app/molecules/dialog/ReusableDialog.jsx b/src/app/molecules/dialog/ReusableDialog.jsx
new file mode 100644 (file)
index 0000000..b05cafc
--- /dev/null
+++ b/src/app/molecules/dialog/ReusableDialog.jsx
@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+import cons from '../../../client/state/cons';
+
+import navigation from '../../../client/state/navigation';
+import IconButton from '../../atoms/button/IconButton';
+import Dialog from './Dialog';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function ReusableDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const handleOpen = (title, render, afterClose) => {
+      setIsOpen(true);
+      setData({ title, render, afterClose });
+    };
+    navigation.on(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    return () => {
+      navigation.removeListener(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
+    };
+  }, []);
+
+  const handleAfterClose = () => {
+    data.afterClose();
+    setData(null);
+  };
+
+  const handleRequestClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title={data?.title || ''}
+      onAfterClose={handleAfterClose}
+      onRequestClose={handleRequestClose}
+      contentOptions={<IconButton src={CrossIC} onClick={handleRequestClose} tooltip="Close" />}
+      invisibleScroll
+    >
+      {data?.render(handleRequestClose) || <div />}
+    </Dialog>
+  );
+}
+
+export default ReusableDialog;

diff --git a/src/app/organisms/create-room/CreateRoom.scss b/src/app/organisms/create-room/CreateRoom.scss
index de9efdbd5a59f22a43ac5e2d59e703f101b5129f..ccd3ea3b1f0348dcc62e9ebb08ce6bc0f60ebb82 100644 (file)
--- a/src/app/organisms/create-room/CreateRoom.scss
+++ b/src/app/organisms/create-room/CreateRoom.scss
@@ -2,6 +2,7 @@
 @use '../../partials/dir';
 
 .create-room {
+  margin: var(--sp-normal);
   @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form > * {

diff --git a/src/app/organisms/pw/Dialogs.jsx b/src/app/organisms/pw/Dialogs.jsx
index 5c5e115cccb9e99f4cecb475c27cf265cfac33d5..f29a819215c77b7ca0c70ce9d43a8f9cddf7dfab 100644 (file)
--- a/src/app/organisms/pw/Dialogs.jsx
+++ b/src/app/organisms/pw/Dialogs.jsx
@@ -8,6 +8,8 @@ import Search from '../search/Search';
 import ViewSource from '../view-source/ViewSource';
 import CreateRoom from '../create-room/CreateRoom';
 
+import ReusableDialog from '../../molecules/dialog/ReusableDialog';
+
 function Dialogs() {
   return (
     <>
@@ -18,6 +20,8 @@ function Dialogs() {
       <CreateRoom />
       <SpaceAddExisting />
       <Search />
+
+      <ReusableDialog />
     </>
   );
 }

diff --git a/src/app/organisms/read-receipts/ReadReceipts.jsx b/src/app/organisms/read-receipts/ReadReceipts.jsx
index 715fafef71966a779b29a84aee86d99a9bb2b798..1e648e0b68bad0786951dc624381d15a0bb70f16 100644 (file)
--- a/src/app/organisms/read-receipts/ReadReceipts.jsx
+++ b/src/app/organisms/read-receipts/ReadReceipts.jsx
@@ -64,9 +64,11 @@ function ReadReceipts() {
       onRequestClose={() => setIsOpen(false)}
       contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
     >
-      {
-        readers.map(renderPeople)
-      }
+      <div style={{ marginTop: 'var(--sp-tight)', marginBottom: 'var(--sp-extra-loose)' }}>
+        {
+          readers.map(renderPeople)
+        }
+      </div>
     </Dialog>
   );
 }

diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js
index d94044d189d8844f74fc30ec2efce2291f936686..e16d25d29daae1663909e3e17f4ae0b7f8a116ee 100644 (file)
--- a/src/client/action/navigation.js
+++ b/src/client/action/navigation.js
@@ -150,3 +150,12 @@ export function openReusableContextMenu(placement, cords, render, afterClose) {
     afterClose,
   });
 }
+
+export function openReusableDialog(title, render, afterClose) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_REUSABLE_DIALOG,
+    title,
+    render,
+    afterClose,
+  });
+}

diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index f7ffc8f9c06c841b9f987b3fa77214e02897d2da..4e258ac3f80fe4e30cfae02d39ec85aa03e13f90 100644 (file)
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -47,6 +47,7 @@ const cons = {
       CLICK_REPLY_TO: 'CLICK_REPLY_TO',
       OPEN_SEARCH: 'OPEN_SEARCH',
       OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
+      OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
     },
     room: {
       JOIN: 'JOIN',
@@ -92,6 +93,7 @@ const cons = {
       REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
       SEARCH_OPENED: 'SEARCH_OPENED',
       REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED',
+      REUSABLE_DIALOG_OPENED: 'REUSABLE_DIALOG_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',

diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js
index 06871e92f3b7f9af47d558cd1d6255c96217baf7..eb59e7a228ff670667b9f991329a5b9da7ed15aa 100644 (file)
--- a/src/client/state/navigation.js
+++ b/src/client/state/navigation.js
@@ -174,6 +174,14 @@ class Navigation extends EventEmitter {
           action.afterClose,
         );
       },
+      [cons.actions.navigation.OPEN_REUSABLE_DIALOG]: () => {
+        this.emit(
+          cons.events.navigation.REUSABLE_DIALOG_OPENED,
+          action.title,
+          action.render,
+          action.afterClose,
+        );
+      },
     };
     actions[action.type]?.();
   }