From b50002384f3fe281945cd0bf85be96bd815c9585 Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Thu, 10 Aug 2023 01:06:23 +0300
Subject: [PATCH] [DE PE mobile] Change routing and props

---
 .../src/controller/edit/EditHyperlink.jsx     |   4 +-
 apps/documenteditor/mobile/src/page/main.jsx  |   7 +-
 .../mobile/src/view/edit/EditingPage.jsx      |  16 +-
 .../mobile/src/controller/Preview.jsx         |   2 +-
 .../mobile/src/controller/add/AddLink.jsx     |   4 +-
 .../mobile/src/controller/edit/EditLink.jsx   |   4 +-
 .../mobile/src/page/main.jsx                  |  36 ++--
 .../mobile/src/view/add/Add.jsx               | 177 +++-------------
 .../mobile/src/view/add/AddingPage.jsx        | 110 ++++++++++
 .../mobile/src/view/edit/Edit.jsx             | 193 +++---------------
 .../mobile/src/view/edit/EditingPage.jsx      | 134 ++++++++++++
 11 files changed, 343 insertions(+), 344 deletions(-)
 create mode 100644 apps/presentationeditor/mobile/src/view/add/AddingPage.jsx
 create mode 100644 apps/presentationeditor/mobile/src/view/edit/EditingPage.jsx

diff --git a/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx b/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx
index 63f9b84b1c..c2a80e58c9 100644
--- a/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx
+++ b/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx
@@ -90,7 +90,7 @@ class EditHyperlinkController extends Component {
         return (
             !this.props.isNavigate ?
                 Device.phone ?
-                    <Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
+                    <Popup id="edit-link-popup" onPopupClosed={() => this.props.closeOptions('edit-link')}>
                         <EditHyperlink 
                             onEditLink={this.onEditLink}
                             onRemoveLink={this.onRemoveLink}
@@ -99,7 +99,7 @@ class EditHyperlinkController extends Component {
                         />
                     </Popup>
                 :
-                    <Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
+                    <Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('edit-link')}>
                         <View style={{height: '410px'}}>
                             <EditHyperlink 
                                 onEditLink={this.onEditLink}
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index d422022ec3..5d56831059 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -230,9 +230,10 @@ class MainPage extends Component {
                             closeOptions={this.handleOptionsViewClosed.bind(this)} 
                         />
                     }
-                    {
-                        !this.state.editLinkSettingsVisible ? null :
-                            <EditHyperlink onClosed={this.handleOptionsViewClosed.bind(this)} />
+                    {!this.state.editLinkSettingsVisible ? null :
+                        <EditHyperlink 
+                            closeOptions={this.handleOptionsViewClosed.bind(this)}
+                        />
                     }
                     {!this.state.settingsVisible ? null : <SettingsController />}
                     {!this.state.collaborationVisible ? null : 
diff --git a/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx b/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx
index 80350c643f..3ea6566ac9 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx
@@ -34,14 +34,14 @@ const EditLayoutNavbar = ({ editors }) => {
 
     return (
         <Navbar>
-        {editors.length > 1 ?
-            <div className='tab-buttons tabbar'>
-                {editors.map((item, index) => <Link key={"de-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
-                {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
-            </div> :
-            <NavTitle>{editors[0].caption}</NavTitle>
-        }
-        {Device.phone && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight>}
+            {editors.length > 1 ?
+                <div className='tab-buttons tabbar'>
+                    {editors.map((item, index) => <Link key={"de-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
+                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
+                </div> :
+                <NavTitle>{editors[0].caption}</NavTitle>
+            }
+            {Device.phone && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight>}
         </Navbar>
     )
 };
diff --git a/apps/presentationeditor/mobile/src/controller/Preview.jsx b/apps/presentationeditor/mobile/src/controller/Preview.jsx
index bd9e4fe6fa..f7b2ec0db9 100644
--- a/apps/presentationeditor/mobile/src/controller/Preview.jsx
+++ b/apps/presentationeditor/mobile/src/controller/Preview.jsx
@@ -86,7 +86,7 @@ const PreviewController = props => {
     // API Handlers
 
     const onEndDemonstration = () => {
-        props.onclosed();
+        props.closeOptions('preview');
     };
 
     return (
diff --git a/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx b/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx
index 599130ed10..102956adf1 100644
--- a/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx
+++ b/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx
@@ -138,13 +138,13 @@ class AddLinkController extends Component {
         return (
             !this.props.isNavigate ?
                 Device.phone ?
-                    <Popup id="add-link-popup" onPopupClosed={() => this.props.onClosed('add-link')}>
+                    <Popup id="add-link-popup" onPopupClosed={() => this.props.closeOptions('add-link')}>
                         <View routes={routes} style={{height: '100%'}}>
                             <PageLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getTextDisplay={this.getTextDisplay} isNavigate={this.props.isNavigate} />
                         </View>
                     </Popup>
                 :
-                    <Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('add-link')}>
+                    <Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('add-link')}>
                         <View routes={routes} style={{height: '410px'}}>
                             <PageLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getTextDisplay={this.getTextDisplay} isNavigate={this.props.isNavigate}/>
                         </View>
diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
index 32f2aafa0d..124b787b4d 100644
--- a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
+++ b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx
@@ -188,7 +188,7 @@ class EditLinkController extends Component {
         return (
             !this.props.isNavigate ?
                 Device.phone ?
-                    <Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
+                    <Popup id="edit-link-popup" onPopupClosed={() => this.props.closeOptions('edit-link')}>
                         <View routes={routes} style={{height: '100%'}}>
                             <EditLink 
                                 initLink={this.initLink}
@@ -207,7 +207,7 @@ class EditLinkController extends Component {
                         </View>
                     </Popup>
                 :
-                    <Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
+                    <Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('edit-link')}>
                         <View routes={routes} style={{height: '410px'}}>
                             <EditLink
                                 initLink={this.initLink}
diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx
index 9a6b2e7cee..4cb3cbab64 100644
--- a/apps/presentationeditor/mobile/src/page/main.jsx
+++ b/apps/presentationeditor/mobile/src/page/main.jsx
@@ -2,8 +2,6 @@ import React, { Component, createContext } from 'react';
 import { f7, Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
 import { observer, inject } from "mobx-react";
 import { Device } from '../../../../common/mobile/utils/device';
-import EditOptions from '../view/edit/Edit';
-import AddOptions from '../view/add/Add';
 import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx';
 import { Preview } from "../controller/Preview";
 import { Search, SearchSettings } from '../controller/Search';
@@ -12,6 +10,8 @@ import { Toolbar } from "../controller/Toolbar";
 import { AddLinkController } from '../controller/add/AddLink';
 import { EditLinkController } from '../controller/edit/EditLink';
 import SettingsController from '../controller/settings/Settings';
+import AddView from '../view/add/Add';
+import EditView from '../view/edit/Edit';
 
 export const MainContext = createContext();
 
@@ -136,7 +136,9 @@ class MainPage extends Component {
                 closeOptions: this.handleOptionsViewClosed.bind(this),
                 showPanels: this.state.addShowOptions,
             }}>
-                {!this.state.previewVisible ? null : <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />}
+                {!this.state.previewVisible ? null : 
+                    <Preview closeOptions={this.handleOptionsViewClosed.bind(this)} />
+                }
                 <Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
                     {/* Top Navbar */}
                     <Navbar id='editor-navbar' className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
@@ -175,21 +177,17 @@ class MainPage extends Component {
 
                     <SearchSettings useSuspense={false} />
 
-                    {
-                        !this.state.editOptionsVisible ? null :
-                            <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
+                    {!this.state.editOptionsVisible ? null : <EditView />}
+                    {!this.state.addOptionsVisible ? null : <AddView />}
+                    {!this.state.addLinkSettingsVisible ? null :
+                        <AddLinkController 
+                            closeOptions={this.handleOptionsViewClosed.bind(this)} 
+                        />
                     }
-                    {
-                        !this.state.addOptionsVisible ? null :
-                            <AddOptions onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
-                    }
-                    {
-                        !this.state.addLinkSettingsVisible ? null :
-                            <AddLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
-                    }
-                    {
-                        !this.state.editLinkSettingsVisible ? null :
-                            <EditLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
+                    {!this.state.editLinkSettingsVisible ? null :
+                        <EditLinkController 
+                            closeOptions={this.handleOptionsViewClosed.bind(this)}  
+                        />
                     }
                     {!this.state.settingsVisible ? null : <SettingsController />}
                     {!this.state.collaborationVisible ? null : 
@@ -198,7 +196,9 @@ class MainPage extends Component {
                         />
                     }
                     {appOptions.isDocReady && 
-                        <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
+                        <ContextMenu 
+                            openOptions={this.handleClickToOpenOptions.bind(this)} 
+                        />
                     }   
                 </Page>
             </MainContext.Provider>
diff --git a/apps/presentationeditor/mobile/src/view/add/Add.jsx b/apps/presentationeditor/mobile/src/view/add/Add.jsx
index b1aecb4f19..6798b68744 100644
--- a/apps/presentationeditor/mobile/src/view/add/Add.jsx
+++ b/apps/presentationeditor/mobile/src/view/add/Add.jsx
@@ -1,22 +1,21 @@
-import React, {Component, useEffect} from 'react';
-import {View,Page,Navbar,NavRight, NavTitle, Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react';
-import { useTranslation } from 'react-i18next';
-import {f7} from 'framework7-react';
-import { observer, inject } from "mobx-react";
-import {Device} from '../../../../../common/mobile/utils/device';
-
-import AddSlideController from "../../controller/add/AddSlide";
-import AddShapeController from "../../controller/add/AddShape";
-import {AddImageController} from "../../controller/add/AddImage";
-import {PageImageLinkSettings} from "./AddImage";
-import {AddOtherController} from "../../controller/add/AddOther";
-import {PageAddTable} from "./AddOther";
-import {AddLinkController} from "../../controller/add/AddLink";
+import React, { useContext, useEffect } from 'react';
+import { View, Popup, Popover, f7 } from 'framework7-react';
+import { Device } from '../../../../../common/mobile/utils/device';
+import { AddImageController } from "../../controller/add/AddImage";
+import { PageImageLinkSettings } from "./AddImage";
+import { PageAddTable } from "./AddOther";
+import { AddLinkController } from "../../controller/add/AddLink";
 import { PageTypeLink, PageLinkTo } from "./AddLink";
 import { EditLinkController } from '../../controller/edit/EditLink';
 import { PageEditTypeLink, PageEditLinkTo } from '../../view/edit/EditLink';
+import AddingPage from './AddingPage';
+import { MainContext } from '../../page/main';
 
 const routes = [
+    {
+        path: '/adding-page/',
+        component: AddingPage
+    },
     // Image
     {
         path: '/add-image-from-url/',
@@ -68,138 +67,30 @@ routes.forEach(route => {
     };
 });
 
-const AddLayoutNavbar = ({ tabs, inPopover }) => {
-    const isAndroid = Device.android;
-    return (
-        <Navbar>
-            {tabs.length > 1 ?
-                <div className='tab-buttons tabbar'>
-                    {tabs.map((item, index) =>
-                        <Link key={"pe-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
-                            <Icon slot="media" icon={item.icon}></Icon>
-                        </Link>)}
-                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
-                </div> :
-                <NavTitle>{tabs[0].caption}</NavTitle>
-            }
-            { !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
-        </Navbar>
-    )
-};
+const AddView = () => {
+    const mainContext = useContext(MainContext);
 
-const AddLayoutContent = ({ tabs }) => {
-    return (
-        <Tabs animated>
-            {tabs.map((item, index) =>
-                <Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
-                    {item.component}
-                </Tab>
-            )}
-        </Tabs>
-    )
-};
-
-const AddTabs = props => {
-    const { t } = useTranslation();
-    const _t = t('View.Add', {returnObjects: true});
-    const api = Common.EditorApi.get();
-    const countPages = api.getCountPages();
-    const showPanels = props.showPanels;
-    const tabs = [];
-    if (!showPanels && countPages) {
-        tabs.push({
-            caption: _t.textSlide,
-            id: 'add-slide',
-            icon: 'icon-add-slide',
-            component: <AddSlideController />
-        });
-        tabs.push({
-            caption: _t.textShape,
-            id: 'add-shape',
-            icon: 'icon-add-shape',
-            component: <AddShapeController/>
-        });
-
-        // tabs.push({
-        //     caption: _t.textImage,
-        //     id: 'add-image',
-        //     icon: 'icon-add-image',
-        //     component: <AddImageController/>
-        // });
-
-        tabs.push({
-            caption: _t.textOther,
-            id: 'add-other',
-            icon: 'icon-add-other',
-            component: <AddOtherController onCloseLinkSettings={props.onCloseLinkSettings} />
-        });
-    }
-    if(!showPanels && !countPages) {
-        tabs.push({
-            caption: _t.textSlide,
-            id: 'add-slide',
-            icon: 'icon-add-slide',
-            component: <AddSlideController />
-        });
-    }
-
-    // if (showPanels && showPanels === 'link') {
-    //     tabs.push({
-    //         caption: _t.textAddLink,
-    //         id: 'add-link',
-    //         component: <AddLinkController noNavbar={true}/>
-    //     });
-    // }
+    useEffect(() => {
+        if(Device.phone) {
+            f7.popup.open('.add-popup');
+        } else {
+            f7.popover.open('#add-popover', '#btn-add');
+        }
+    }, []);
 
     return (
-        <View style={props.style} routes={routes}>
-            <Page pageContent={false}>
-                <AddLayoutNavbar tabs={tabs} inPopover={props.inPopover}/>
-                <AddLayoutContent tabs={tabs} />
-            </Page>
-        </View>
+        !Device.phone ?
+            <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('add')}>
+                <View routes={routes} url='/adding-page/' style={{ height: '410px' }}>
+                    <AddingPage />
+                </View>
+            </Popover> :
+            <Popup className="add-popup" onPopupClosed={() => mainContext.closeOptions('add')}>
+                <View routes={routes} url='/adding-page/'>
+                    <AddingPage />
+                </View>
+            </Popup>
     )
-};
-
-class AddView extends Component {
-    constructor(props) {
-        super(props);
-
-        this.onoptionclick = this.onoptionclick.bind(this);
-    }
-    onoptionclick(page){
-        f7.views.current.router.navigate(page);
-    }
-    render() {
-        const show_popover = this.props.usePopover;
-        return (
-            show_popover ?
-                <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
-                    <AddTabs inPopover={true} onOptionClick={this.onoptionclick} onCloseLinkSettings={this.props.onCloseLinkSettings} style={{height: '410px'}} showPanels={this.props.showPanels} />
-                </Popover> :
-                <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <AddTabs onOptionClick={this.onoptionclick} onCloseLinkSettings={this.props.onCloseLinkSettings} showPanels={this.props.showPanels} />
-                </Popup>
-        )
-    }
 }
 
-const Add = props => {
-    useEffect(() => {
-        if ( Device.phone )
-            f7.popup.open('.add-popup');
-        else f7.popover.open('#add-popover', '#btn-add');
-
-        return () => {
-            // component will unmount
-        }
-    });
-    const onviewclosed = () => {
-        if ( props.onclosed ) {
-            props.onclosed();
-        }
-    };
-    return <AddView usePopover={!Device.phone} onCloseLinkSettings={props.onCloseLinkSettings} onclosed={onviewclosed} showPanels={props.showOptions} />
-};
-
-export default Add;
\ No newline at end of file
+export default AddView;
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx b/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx
new file mode 100644
index 0000000000..27215a97db
--- /dev/null
+++ b/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx
@@ -0,0 +1,110 @@
+import React, { useContext, useEffect } from 'react';
+import { Page, Navbar, NavRight, NavTitle, Link, Icon, Tabs, Tab, f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import { Device } from '../../../../../common/mobile/utils/device';
+import AddSlideController from "../../controller/add/AddSlide";
+import AddShapeController from "../../controller/add/AddShape";
+import { AddOtherController } from "../../controller/add/AddOther";
+import { MainContext } from '../../page/main';
+
+const AddLayoutNavbar = ({ tabs }) => {
+    const isAndroid = Device.android;
+
+    return (
+        <Navbar>
+            {tabs.length > 1 ?
+                <div className='tab-buttons tabbar'>
+                    {tabs.map((item, index) =>
+                        <Link key={"pe-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
+                            <Icon slot="media" icon={item.icon}></Icon>
+                        </Link>)}
+                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
+                </div> :
+                <NavTitle>{tabs[0].caption}</NavTitle>
+            }
+            {Device.phone && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
+        </Navbar>
+    )
+};
+
+const AddLayoutContent = ({ tabs }) => {
+    return (
+        <Tabs animated>
+            {tabs.map((item, index) =>
+                <Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                    {item.component}
+                </Tab>
+            )}
+        </Tabs>
+    )
+};
+
+const AddingPage = () => {
+    const { t } = useTranslation();
+    const _t = t('View.Add', {returnObjects: true});
+    const api = Common.EditorApi.get();
+    const countPages = api.getCountPages();
+    const mainContext = useContext(MainContext);
+    const showPanels = mainContext.showPanels;
+    const tabs = [];
+
+    useEffect(() => {
+        f7.tab.show('#add-other', false);
+    }, []);
+    
+    if (!showPanels && countPages) {
+        tabs.push({
+            caption: _t.textSlide,
+            id: 'add-slide',
+            icon: 'icon-add-slide',
+            component: <AddSlideController />
+        });
+
+        tabs.push({
+            caption: _t.textShape,
+            id: 'add-shape',
+            icon: 'icon-add-shape',
+            component: <AddShapeController/>
+        });
+
+        // tabs.push({
+        //     caption: _t.textImage,
+        //     id: 'add-image',
+        //     icon: 'icon-add-image',
+        //     component: <AddImageController/>
+        // });
+
+        tabs.push({
+            caption: _t.textOther,
+            id: 'add-other',
+            icon: 'icon-add-other',
+            component: <AddOtherController />
+        });
+    }
+
+    if(!showPanels && !countPages) {
+        tabs.push({
+            caption: _t.textSlide,
+            id: 'add-slide',
+            icon: 'icon-add-slide',
+            component: <AddSlideController />
+        });
+    }
+
+    // if (showPanels && showPanels === 'link') {
+    //     tabs.push({
+    //         caption: _t.textAddLink,
+    //         id: 'add-link',
+    //         component: <AddLinkController noNavbar={true}/>
+    //     });
+    // }
+
+    return (
+        <Page pageContent={false}>
+            <AddLayoutNavbar tabs={tabs} />
+            <AddLayoutContent tabs={tabs} />
+        </Page>
+    )
+};
+
+export default AddingPage;
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx
index f57aad6bf1..ae3b8acc83 100644
--- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx
@@ -1,29 +1,24 @@
-import React, {useState, useEffect} from 'react';
-import {observer, inject} from "mobx-react";
-import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react';
-import { f7 } from 'framework7-react';
-import { useTranslation } from 'react-i18next';
-import {Device} from '../../../../../common/mobile/utils/device';
-
-import EditSlideController from "../../controller/edit/EditSlide";
-import EditTextController from "../../controller/edit/EditText";
-import EditShapeController from "../../controller/edit/EditShape";
-import EditImageController from "../../controller/edit/EditImage";
-import EditTableController from "../../controller/edit/EditTable";
-import EditChartController from "../../controller/edit/EditChart";
+import React, { useContext, useEffect } from 'react';
+import { Popover, Sheet, View, f7 } from 'framework7-react';
+import { Device } from '../../../../../common/mobile/utils/device';
 import { EditLinkController } from "../../controller/edit/EditLink";
-
 import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
 import { PageTextFonts, PageTextFontColor, PageTextHighlightColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextBulletsLinkSettings } from './EditText';
 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
 import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
 import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
 import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart'
+import EditingPage from './EditingPage';
+import { MainContext } from '../../page/main';
 
 const routes = [
+    {
+        path: '/editing-page/',
+        component: EditingPage,
+        keepAlive: true
+    },
 
     // Slides
-
     {
         path: '/layout/',
         component: Layout
@@ -232,162 +227,30 @@ routes.forEach(route => {
     };
 });
 
-const EmptyEditLayout = () => {
-    const { t } = useTranslation();
-    const _t = t('View.Edit', {returnObjects: true});
-    return (
-        <Page>
-            <div className="content-block inset">
-                <div className="content-block-inner">
-                    <p>{_t.textSelectObjectToEdit}</p>
-                </div>
-            </div>
-        </Page>
-    )
-};
+const EditView = () => {
+    const mainContext = useContext(MainContext);
 
-const EditLayoutNavbar = ({ editors, inPopover }) => {
-    const isAndroid = Device.android;
-    return (
-        <Navbar>
-            {
-                editors.length > 1 ?
-                    <div className='tab-buttons tabbar'>
-                        {editors.map((item, index) => <Link key={"pe-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
-                        {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
-                    </div> :
-                    <NavTitle>{ editors[0].caption }</NavTitle>
-            }
-            { !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
-        </Navbar>
-    )
-};
-
-const EditLayoutContent = ({ editors }) => {
-    if (editors.length > 1) {
-        return (
-            <Tabs animated>
-                {editors.map((item, index) =>
-                    <Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
-                        {item.component}
-                    </Tab>
-                )}
-            </Tabs>
-        )
-    } else {
-        return (
-            <Page>
-                {editors[0].component}
-            </Page>
-        )
-    }
-};
-
-const EditTabs = props => {
-    const { t } = useTranslation();
-    const _t = t('View.Edit', {returnObjects: true});
-
-    const settings = props.storeFocusObjects.settings;
-    
-    let editors = [];
-    if (settings.length < 1) {
-        editors.push({
-            caption: _t.textSettings,
-            component: <EmptyEditLayout />
-        });
-    } else {
-        if (settings.indexOf('image') > -1) {
-            editors.push({
-                caption: _t.textImage,
-                id: 'edit-image',
-                component: <EditImageController />
-            })
+    useEffect(() => {
+        if(Device.phone) {
+            f7.sheet.open('#edit-sheet');
+        } else {
+            f7.popover.open('#edit-popover', '#btn-edit');
         }
-        if (settings.indexOf('shape') > -1) {
-            editors.push({
-                 caption: _t.textShape,
-                 id: 'edit-shape',
-                 component: <EditShapeController />
-             })
-        }
-        if (settings.indexOf('table') > -1) {
-            editors.push({
-                caption: _t.textTable,
-                id: 'edit-table',
-                component: <EditTableController />
-            })
-        }
-        if (settings.indexOf('chart') > -1) {
-            editors.push({
-                caption: _t.textChart,
-                id: 'edit-chart',
-                component: <EditChartController />
-            })
-        }
-        if (settings.indexOf('text') > -1) {
-            editors.push({
-                caption: _t.textText,
-                id: 'edit-text',
-                component: <EditTextController />
-            })
-        }
-        if (settings.indexOf('slide') > -1) {
-            editors.push({
-                caption: _t.textSlide,
-                id: 'edit-slide',
-                component: <EditSlideController />
-            })
-        }
-    }
+    }, []);
 
     return (
-        <View style={props.style} routes={routes}>
-            <Page pageContent={false}>
-                <EditLayoutNavbar editors={editors} inPopover={props.inPopover}/>
-                <EditLayoutContent editors={editors} />
-            </Page>
-        </View>
-    )
-};
-
-const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs));
-
-const EditView = props => {
-    const onOptionClick = (page) => {
-        $f7.views.current.router.navigate(page);
-    };
-    const show_popover = props.usePopover;
-    return (
-        show_popover ?
-            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}>
-                <EditTabsContainer inPopover={true} onOptionClick={onOptionClick} style={{height: '410px'}} />
+        !Device.phone ?
+            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
+                <View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
+                    <EditingPage />
+                </View>
             </Popover> :
-            <Sheet id="edit-sheet" onSheetClosed={() => props.onClosed()}>
-                <EditTabsContainer onOptionClick={onOptionClick} />
+            <Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')}>
+                <View routes={routes} url='/editing-page/'>
+                    <EditingPage />
+                </View>
             </Sheet>
     )
 };
 
-const EditOptions = props => {
-    useEffect(() => {
-        if ( Device.phone )
-            f7.sheet.open('#edit-sheet');
-        else f7.popover.open('#edit-popover', '#btn-edit');
-
-        return () => {
-            // component will unmount
-        }
-    });
-
-    const onviewclosed = () => {
-        if ( props.onclosed ) {
-            props.onclosed();
-        }
-    };
-
-    return (
-        <EditView usePopover={!Device.phone} onClosed={onviewclosed} />
-    )
-};
-
-export default EditOptions;
\ No newline at end of file
+export default EditView;
\ No newline at end of file
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditingPage.jsx b/apps/presentationeditor/mobile/src/view/edit/EditingPage.jsx
new file mode 100644
index 0000000000..7449624b67
--- /dev/null
+++ b/apps/presentationeditor/mobile/src/view/edit/EditingPage.jsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, NavRight, NavTitle, Tabs, Tab, Link } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import { Device } from '../../../../../common/mobile/utils/device';
+import EditSlideController from "../../controller/edit/EditSlide";
+import EditTextController from "../../controller/edit/EditText";
+import EditShapeController from "../../controller/edit/EditShape";
+import EditImageController from "../../controller/edit/EditImage";
+import EditTableController from "../../controller/edit/EditTable";
+import EditChartController from "../../controller/edit/EditChart";
+
+const EmptyEditLayout = () => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    return (
+        <Page>
+            <div className="content-block inset">
+                <div className="content-block-inner">
+                    <p>{_t.textSelectObjectToEdit}</p>
+                </div>
+            </div>
+        </Page>
+    )
+};
+
+const EditLayoutNavbar = ({ editors }) => {
+    const isAndroid = Device.android;
+
+    return (
+        <Navbar>
+            {editors.length > 1 ?
+                <div className='tab-buttons tabbar'>
+                    {editors.map((item, index) => <Link key={"pe-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
+                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
+                </div> :
+                <NavTitle>{ editors[0].caption }</NavTitle>
+            }
+            {Device.phone && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
+        </Navbar>
+    )
+};
+
+const EditLayoutContent = ({ editors }) => {
+    if (editors.length > 1) {
+        return (
+            <Tabs animated>
+                {editors.map((item, index) =>
+                    <Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                        {item.component}
+                    </Tab>
+                )}
+            </Tabs>
+        )
+    } else {
+        return (
+            <Page>
+                {editors[0].component}
+            </Page>
+        )
+    }
+};
+
+const EditingPage = inject('storeFocusObjects')(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const settings = props.storeFocusObjects.settings;
+    let editors = [];
+
+    if (settings.length < 1) {
+        editors.push({
+            caption: _t.textSettings,
+            component: <EmptyEditLayout />
+        });
+    } else {
+        if (settings.indexOf('image') > -1) {
+            editors.push({
+                caption: _t.textImage,
+                id: 'edit-image',
+                component: <EditImageController />
+            })
+        }
+
+        if (settings.indexOf('shape') > -1) {
+            editors.push({
+                caption: _t.textShape,
+                id: 'edit-shape',
+                component: <EditShapeController />
+            })
+        }
+
+        if (settings.indexOf('table') > -1) {
+            editors.push({
+                caption: _t.textTable,
+                id: 'edit-table',
+                component: <EditTableController />
+            })
+        }
+
+        if (settings.indexOf('chart') > -1) {
+            editors.push({
+                caption: _t.textChart,
+                id: 'edit-chart',
+                component: <EditChartController />
+            })
+        }
+
+        if (settings.indexOf('text') > -1) {
+            editors.push({
+                caption: _t.textText,
+                id: 'edit-text',
+                component: <EditTextController />
+            })
+        }
+
+        if (settings.indexOf('slide') > -1) {
+            editors.push({
+                caption: _t.textSlide,
+                id: 'edit-slide',
+                component: <EditSlideController />
+            })
+        }
+    }
+
+    return (
+        <Page pageContent={false}>
+            <EditLayoutNavbar editors={editors} />
+            <EditLayoutContent editors={editors} />
+        </Page>
+    )
+}));
+
+export default EditingPage;
\ No newline at end of file