[mobile-react] Edit sheet

apps/documenteditor/mobile/locale/en.json

@@ -13,5 +13,19 @@
   },
   "Collaboration": {
     "textEditUser": "Users who are editing the file:"
+  },
+  "Edit": {
+    "textClose": "Close",
+    "textText": "Text",
+    "textParagraph": "Paragraph",
+    "textTable": "Table",
+    "textFooter": "Footer",
+    "textHeader": "Header",
+    "textShape": "Shape",
+    "textImage": "Image",
+    "textChart": "Chart",
+    "textHyperlink": "Hyperlink",
+    "textSelectObjectToEdit": "Select object to edit",
+    "textSettings": "Settings"
   }
 }

apps/documenteditor/mobile/src/components/edit/Edit.jsx

@@ -1,57 +1,140 @@
-import React, {Component} from 'react';
-import {
-    Page,
-    Navbar,
-    NavRight,
-    NavLeft,
-    Link,
-    Popup,
-    Tabs,
-    Tab
-} from 'framework7-react';
+import React from 'react';
+import {observer, inject} from "mobx-react";
+import { Page, Navbar, NavRight, NavLeft, NavTitle, Link, Sheet, Tabs, Tab, View } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
 import EditText from "./EditText";
 import EditParagraph from "./EditParagraph";
 
-export default class EditContainer extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            popupOpened: false,
-        };
-    }
-    render() {
-        const editors = ['text', 'paragraph'];//, 'table', 'header', 'shape', 'image', 'chart', 'hyperlink'];
-        const tabLinks = editors.map((item, index) =>
-            <Link key={"de-tablink-" + item}  tabLink={"#" + item} tabLinkActive={index === 0}>{item}</Link>
-        );
-        const tabs = editors.map((item, index) =>
-            <Tab key={"de-tab-" + item} id={item} className="page-content" tabActive={index === 0}>
-                {item === 'text' && <EditText />}
-                {item === 'paragraph' && <EditParagraph />}
-                {/*{item === 'table' && <EditTable />}
-                  {item === 'header' && <EditHeader />}
-                  {item === 'shape' && <EditShape />}
-                  {item === 'image' && <EditImage />}
-                  {item === 'chart' && <EditChart />}
-                  {item === 'hyperlink' && <EditHyperlink />}*/}
-            </Tab>
-        );
+const EmptyEditLayout = () => {
+    const { t } = useTranslation();
+    return (
+        <Page>
+            <div className="content-block inset">
+                <div className="content-block-inner">
+                    <p>{t("Edit.textSelectObjectToEdit")}</p>
+                </div>
+            </div>
+        </Page>
+    )
+};
+
+const EditLayoutNavbar = ({ editors }) => {
+    const { t } = useTranslation();
     return (
-            <Popup className="edit-popup" opened={this.state.popupOpened} onPopupClosed={() => this.setState({popupOpened : false})}>
-                <Page pageContent={false}>
         <Navbar>
+        {
+            editors.length > 1 ?
                 <NavLeft tabbar>
-                            {tabLinks}
-                        </NavLeft>
+                    {editors.map((item, index) => <Link key={"de-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
+                </NavLeft> :
+                <NavTitle>{ editors[0].caption }</NavTitle>
+        }
             <NavRight>
-                            <Link popupClose=".edit-popup">Close</Link>
+                <Link sheetClose>{t("Edit.textClose")}</Link>
             </NavRight>
         </Navbar>
+    )
+};
+
+const EditLayoutContent = ({ editors }) => {
+    if (editors.length > 1) {
+        return (
             <Tabs animated>
-                        {tabs}
+                {editors.map((item, index) =>
+                    <Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                        {item.component}
+                    </Tab>
+                )}
             </Tabs>
+        )
+    } else {
+        return (
+            <Page>
+                {editors[0].component}
             </Page>
-            </Popup>
         )
     }
 };
+
+const EditSheet = props => {
+    const { t } = useTranslation();
+
+    const settings = props.storeFocusObjects.focusObjects;
+    const headerType = props.storeFocusObjects.headerType;
+    let editors = [];
+    if (settings.length < 1) {
+        editors.push({
+            caption: t("Edit.textSettings"),
+            component: <EmptyEditLayout />
+        });
+    } else {
+        if (settings.indexOf('text') > -1) {
+            editors.push({
+                caption: t("Edit.textText"),
+                id: 'edit-text',
+                component: <EditText />
+            })
+        }
+        if (settings.indexOf('paragraph') > -1) {
+            editors.push({
+                caption: t("Edit.textParagraph"),
+                id: 'edit-paragraph',
+                component: <EditParagraph />
+            })
+        }
+        /*if (settings.indexOf('table') > -1) {
+            editors.push({
+                caption: t("Edit.textTable"),
+                id: 'edit-table',
+                component: <EditTable />
+            })
+        }
+        if (settings.indexOf('header') > -1) {
+            editors.push({
+                caption: headerType==2 ? t("Edit.textFooter") : t("Edit.textHeader"),
+                id: 'edit-header',
+                component: <EditHeader />
+            })
+        }
+        if (settings.indexOf('shape') > -1) {
+            editors.push({
+                caption: t("Edit.textShape"),
+                id: 'edit-shape',
+                component: <EditShape />
+            })
+        }
+        if (settings.indexOf('image') > -1) {
+            editors.push({
+                caption: t("Edit.textImage"),
+                id: 'edit-image',
+                component: <EditImage />
+            })
+        }
+        if (settings.indexOf('chart') > -1) {
+            editors.push({
+                caption: t("Edit.textChart"),
+                id: 'edit-chart',
+                component: <EditChart />
+            })
+        }
+        if (settings.indexOf('hyperlink') > -1) {
+            editors.push({
+                caption: t("Edit.textHyperlink"),
+                id: 'edit-link',
+                component: <EditHyperlink />
+            })
+        }*/
+    }
+    return (
+        <Sheet className="edit__sheet" push>
+            <View>
+                <Page pageContent={false}>
+                    <EditLayoutNavbar editors={editors} />
+                    <EditLayoutContent editors={editors} />
+                </Page>
+            </View>
+        </Sheet>
+    )
+};
+
+export default inject("storeFocusObjects")(observer(EditSheet));

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -3,7 +3,7 @@ import React, {Component} from 'react'
 import {inject} from "mobx-react";
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
-@inject("storeDocumentSettings")
+@inject("storeDocumentSettings", "storeFocusObjects")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -162,6 +162,10 @@ class MainController extends Component {
         this.api.asc_registerCallback('asc_onPageOrient', isPortrait => {
             storeSettings.isPortrait = isPortrait === true;
         });
+        const storeFocusObjects = this.props.storeFocusObjects;
+        this.api.asc_registerCallback('asc_onFocusObject', objects => {
+            storeFocusObjects.resetFocusObjects(objects);
+        });
     }
 
     render() {

apps/documenteditor/mobile/src/pages/home.jsx

@@ -1,25 +1,7 @@
 import React, { Component } from 'react';
-import {
-  Page,
-  View,
-  Navbar,
-  NavLeft,
-  NavTitle,
-  NavTitleLarge,
-  NavRight,
-  Link,
-  Toolbar,
-  Block,
-  BlockTitle,
-  List,
-  ListItem,
-  Row,
-  Col,
-  Button,
-  Icon, Popup
-} from 'framework7-react';
+import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
 
-import EditPopup from '../components/edit/Edit.jsx';
+import EditSheet from '../components/edit/Edit.jsx';
 import SettingsPopup from '../components/settings/Settings.jsx';
 import { CollaborationPopover, CollaborationSheet } from '../../../../common/mobile/lib/view/Collaboration.jsx'
 
@@ -39,7 +21,7 @@ export default class Home extends Component {
               <Link>Redu</Link>
             </NavLeft>
             <NavRight>
-              <Link href={false} popupOpen=".edit-popup">Edit</Link>
+              <Link href={false} sheetOpen=".edit__sheet">Edit</Link>
               {/*<Link href={false} popoverOpen=".collab__popover">Users</Link>*/}
               <Link href={false} sheetOpen=".collab__sheet">Users</Link>
               <Link href={false} popupOpen=".settings-popup">Settings</Link>
@@ -48,7 +30,7 @@ export default class Home extends Component {
           {/* Page content */}
           <View id="editor_sdk">
           </View>
-          <EditPopup />
+          <EditSheet />
           <SettingsPopup />
           <CollaborationPopover />
           <CollaborationSheet />

apps/documenteditor/mobile/src/store/focusObjects.js

@@ -0,0 +1,37 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeFocusObjects {
+    @observable focusObjects = [];
+    @observable headerType = 1;
+
+    @action resetFocusObjects (objects) {
+        this.focusObjects = objects;
+        let _settings = [];
+        for (let object of objects) {
+            var type = object.get_ObjectType();
+            if (Asc.c_oAscTypeSelectElement.Paragraph === type) {
+                _settings.push('text', 'paragraph');
+            } else if (Asc.c_oAscTypeSelectElement.Table === type) {
+                _settings.push('table');
+            } else if (Asc.c_oAscTypeSelectElement.Image === type) {
+                if (object.get_ObjectValue().get_ChartProperties()) {
+                    _settings.push('chart');
+                } else if (object.get_ObjectValue().get_ShapeProperties()) {
+                    _settings.push('shape');
+                } else {
+                    _settings.push('image');
+                }
+            } else if (Asc.c_oAscTypeSelectElement.Hyperlink === type) {
+                _settings.push('hyperlink');
+            } else if (Asc.c_oAscTypeSelectElement.Header === type) {
+                _settings.push('header');
+                this.headerType = object.get_ObjectValue().get_Type();
+            }
+        }
+        // Exclude shapes if chart exist
+        if (_settings.indexOf('chart') > -1) {
+            _settings = _settings.filter((value) => value !== 'shape');
+        }
+        this.focusObjects = _settings.filter((value, index, self) => self.indexOf(value) === index);
+    }
+}

apps/documenteditor/mobile/src/store/mainStore.js

@@ -1,8 +1,10 @@
 
 import {storeDocumentSettings} from './documentSettings'
+import {storeFocusObjects} from "./focusObjects";
 import {storeUsers} from '../../../../common/mobile/lib/store/users'
 
 export const stores = {
+    storeFocusObjects: new storeFocusObjects(),
     storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers()
 };