From 3f9bc53dd346a0bc2dff06d76e6384286c9eba9f Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Sat, 8 Jan 2022 10:17:05 +0500
Subject: [PATCH] fix table cell and row properties not showing properly

---
 .../src/components/GeneralSheet/index.js      |  1 +
 apps/mobile/src/views/Editor/Functions.js     | 15 ++------
 .../src/views/Editor/TableCellProperties.js   | 36 +++++++++++++++++--
 .../src/views/Editor/TableRowProperties.js    | 25 ++++++++++++-
 4 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/apps/mobile/src/components/GeneralSheet/index.js b/apps/mobile/src/components/GeneralSheet/index.js
index 0c780ee5c..acdf6d0fc 100644
--- a/apps/mobile/src/components/GeneralSheet/index.js
+++ b/apps/mobile/src/components/GeneralSheet/index.js
@@ -52,6 +52,7 @@ const GeneralSheet = ({context}) => {
       gestureEnabled={!dialogData.progress}
       closeOnTouchBackdrop={!dialogData.progress}
       onClose={() => {
+        dialogData.onClose && dialogData.onClose();
         if (!dialogData.progress) {
           setVisible(false);
           setDialogData(null);
diff --git a/apps/mobile/src/views/Editor/Functions.js b/apps/mobile/src/views/Editor/Functions.js
index 6af146b94..95faf18c4 100644
--- a/apps/mobile/src/views/Editor/Functions.js
+++ b/apps/mobile/src/views/Editor/Functions.js
@@ -36,6 +36,7 @@ import {
   IMAGE_TOOLTIP_CONFIG,
   TABLE_TOOLTIP_CONFIG
 } from './tiny/toolbar/config';
+import { focusEditor, reFocusEditor } from './tiny/toolbar/constants';
 
 export let EditorWebView = createRef();
 export const editorTitleInput = createRef();
@@ -482,20 +483,10 @@ export const _onMessage = async evt => {
       showTableOptionsTooltip();
       break;
     case 'tablecelloptions':
-      eSendEvent('updatecell', message.value);
-      safeKeyboardDismiss();
-      await sleep(100);
-      presentSheet({
-        component: <TableCellProperties data={message.value} />
-      });
+      TableCellProperties.present(message.value);
       break;
     case 'tablerowoptions':
-      eSendEvent('updaterow', message.value);
-      safeKeyboardDismiss();
-      await sleep(100);
-      presentSheet({
-        component: <TableRowProperties data={message.value} />
-      });
+      TableRowProperties.present(message.value);
       break;
     case 'selectionvalue':
       eSendEvent('selectionvalue', message.value);
diff --git a/apps/mobile/src/views/Editor/TableCellProperties.js b/apps/mobile/src/views/Editor/TableCellProperties.js
index 7b9d210d0..ac61b55c8 100644
--- a/apps/mobile/src/views/Editor/TableCellProperties.js
+++ b/apps/mobile/src/views/Editor/TableCellProperties.js
@@ -7,7 +7,13 @@ import {PressableButton} from '../../components/PressableButton';
 import Heading from '../../components/Typography/Heading';
 import Paragraph from '../../components/Typography/Paragraph';
 import {useTracked} from '../../provider';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  presentSheet
+} from '../../services/EventManager';
+import { editing } from '../../utils';
 import layoutmanager from '../../utils/layout-manager';
 import {SIZE} from '../../utils/SizeUtils';
 import {EditorWebView} from './Functions';
@@ -215,7 +221,9 @@ export const TableCellProperties = ({data}) => {
           title="Body"
         />
       </View>
-      <Heading size={SIZE.md}>Cell background color(${cellOptions.backgroundColor})</Heading>
+      <Heading size={SIZE.md}>
+        Cell background color(${cellOptions.backgroundColor})
+      </Heading>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
@@ -227,7 +235,7 @@ export const TableCellProperties = ({data}) => {
           <ColorItem
             value={item}
             key={item}
-            checked={item === (rgbToHex(cellOptions.backgroundColor))}
+            checked={item === rgbToHex(cellOptions.backgroundColor)}
             onCustomPress={color => {
               tiny.call(
                 EditorWebView,
@@ -245,3 +253,25 @@ export const TableCellProperties = ({data}) => {
     </View>
   );
 };
+TableCellProperties.isPresented = false;
+TableCellProperties.present = data => {
+  eSendEvent('updaterow', data);
+ if (TableCellProperties.isPresented) return;
+  let refocus = false;
+  if (editing.keyboardState) {
+    tiny.call(EditorWebView, tiny.cacheRange);
+    tiny.call(EditorWebView, tiny.blur);
+    refocus = true;
+  }
+  TableCellProperties.isPresented = true;
+  presentSheet({
+    component: <TableCellProperties data={data} />,
+    onClose: () => {
+      TableCellProperties.isPresented = false;
+      if (!refocus) return;
+      tiny.call(EditorWebView, tiny.focusEditor);
+      tiny.call(EditorWebView, tiny.restoreRange);
+      tiny.call(EditorWebView, tiny.clearRange);
+    }
+  });
+};
diff --git a/apps/mobile/src/views/Editor/TableRowProperties.js b/apps/mobile/src/views/Editor/TableRowProperties.js
index 1a3c315d4..3da9eeac2 100644
--- a/apps/mobile/src/views/Editor/TableRowProperties.js
+++ b/apps/mobile/src/views/Editor/TableRowProperties.js
@@ -4,7 +4,8 @@ import {ScrollView} from 'react-native-gesture-handler';
 import {Button} from '../../components/Button';
 import Heading from '../../components/Typography/Heading';
 import {useTracked} from '../../provider';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {eSendEvent, eSubscribeEvent, eUnSubscribeEvent, presentSheet} from '../../services/EventManager';
+import { editing } from '../../utils';
 import layoutmanager from '../../utils/layout-manager';
 import {SIZE} from '../../utils/SizeUtils';
 import {EditorWebView} from './Functions';
@@ -168,3 +169,25 @@ export const TableRowProperties = ({data}) => {
     </View>
   );
 };
+TableRowProperties.isPresented = false;
+TableRowProperties.present = data => {
+  eSendEvent('updatecell', data);
+  if (TableRowProperties.isPresented) return;
+  let refocus = false;
+  if (editing.keyboardState) {
+    tiny.call(EditorWebView,tiny.cacheRange);
+    tiny.call(EditorWebView,tiny.blur);
+    refocus = true;
+  }
+  TableRowProperties.isPresented = true;
+  presentSheet({
+    component: <TableRowProperties data={data} />,
+    onClose: () => {
+      TableRowProperties.isPresented = false;
+      if (!refocus) return;
+      tiny.call(EditorWebView,tiny.focusEditor);
+      tiny.call(EditorWebView,tiny.restoreRange);
+      tiny.call(EditorWebView,tiny.clearRange);
+    }
+  });
+};