[SSE mobile] Make Context Menu in Statusbar

apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx

@@ -1,20 +1,56 @@
 
-import React, { useEffect } from 'react';
-import StatusbarView from '../view/Statusbar';
+import React, { Fragment, useEffect } from 'react';
+import {StatusbarView, TabContextMenu} from '../view/Statusbar';
 import { inject } from 'mobx-react';
+import { f7 } from 'framework7-react';
+import { Dom7 } from 'framework7';
 
-const Statusbar = inject('sheets')(props => {
-    const {sheets} = props;
+const Statusbar = inject('sheets', 'storeAppOptions')(props => {
+    const {sheets, storeAppOptions} = props;
+    console.log(sheets);
+
+    let isEdit = storeAppOptions.isEdit;
+    let isDisconnected = undefined;
 
     useEffect(() => {
         console.log("status bar did mount");
 
         Common.Notifications.on('document:ready', onApiSheetsChanged);
+        Common.Notifications.on('api:disconnect', onApiDisconnect);
         Common.Notifications.on('engineCreated', api => {
+            api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
+            // api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked);
+            // api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
             api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged.bind(api));
+            api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect);
         });
     }, []);
 
+//     const onWorkbookLocked = locked => {
+//         this.statusbar.$btnAddTab.toggleClass('disabled', locked);
+//         return;
+
+//         this.statusbar.tabbar[locked?'addClass':'removeClass']('coauth-locked');
+//         this.statusbar.btnAddWorksheet.setDisabled(locked || this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.Chart ||
+//                                                              this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.FormatTable);
+//         var item, i = this.statusbar.tabbar.getCount();
+//         while (i-- > 0) {
+//             item = this.statusbar.tabbar.getAt(i);
+//             if (item.sheetindex >= 0) {
+// //              if (locked) item.reorderable = false;
+// //              else item.reorderable = !this.api.asc_isWorksheetLockedOrDeleted(item.sheetindex);
+//             } else {
+//                 item.disable(locked);
+//             }
+//         }
+//     };
+
+//     const onWorksheetLocked = (index, locked) => {
+//         let model = sheets.findWhere({index: index});
+//         if(model && model.get('locked') != locked)
+//             model.set('locked', locked);
+//     };
+
     const onApiSheetsChanged = api => {
         console.log('on api sheets changed');
 
@@ -39,8 +75,55 @@ const Statusbar = inject('sheets')(props => {
 
         sheets.reset(items);
         // this.hiddensheets.reset(hiddentems);
+        // updateTabsColors();
+    };
 
-        // this.updateTabsColors();
+    const loadTabColor = sheetindex => {
+        const api = Common.EditorApi.get();
+        let tab = sheets.findWhere({index: sheetindex});
+
+        if (tab) {
+            setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex));
+        }
+        
+    };
+
+    const onApiDisconnect = () => {
+        isDisconnected = true;
+    }
+
+    const onApiUpdateTabColor = index => {
+        loadTabColor(index);
+    }
+
+    const setTabLineColor = (tab, color) => {
+        if (tab) {
+            if (null !== color) {
+                color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+            } else {
+                color = '';
+            }
+
+            if (color.length) {
+                if (!tab.get('active')) {
+                    color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset';
+                } else {
+                    color = '0px 4px 0 ' + color + ' inset';
+                }
+
+                tab.get('el').find('a').css('box-shadow', color);
+            } else {
+                tab.get('el').find('a').css('box-shadow', '');
+            }
+        }
+    };
+
+    const updateTabsColors = () => {
+        const api = Common.EditorApi.get();
+
+        sheets.forEach(model => {
+            setTabLineColor(model, api.asc_getWorksheetTabColor(model.get('index')));
+        });
     };
 
     const onTabClicked = i => {
@@ -73,7 +156,37 @@ const Statusbar = inject('sheets')(props => {
         api.asc_addWorksheet(createSheetName());
     };
 
-    return <StatusbarView onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} />
+    const onTabClick = i => {
+        const api = Common.EditorApi.get();
+        const model = sheets.at(i);
+        const $$ = Dom7;
+
+        let opened = $$('.document-menu.modal-in').length;
+        f7.popover.close('.document-menu.modal-in');
+
+        if (i == api.asc_getActiveWorksheetIndex()) {
+            if (!opened) {
+                if (isEdit && !isDisconnected) {
+                    api.asc_closeCellEditor();
+                    // this.statusbar.showTabContextMenu(this._getTabMenuItems(model), model);
+                }
+            }
+        } else {
+            // this.api.asc_showWorksheet(i);
+            // this.statusbar.setActiveTab(index);
+            api.asc_showWorksheet(model.index);
+            sheets.setActiveWorksheet(i);
+            // Common.NotificationCenter.trigger('sheet:active', sdkindex);
+        }
+
+    }
+
+    return (
+        <Fragment>
+            <StatusbarView onTabClick={onTabClick} onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} />
+            <TabContextMenu />
+        </Fragment>
+    )
 });
 
 export default Statusbar;

apps/spreadsheeteditor/mobile/src/store/appOptions.js

@@ -3,11 +3,13 @@ import {action, observable, makeObservable} from 'mobx';
 export class storeAppOptions {
     constructor() {
         makeObservable(this, {
+            isEdit: observable,
             setConfigOptions: action,
             setPermissionOptions: action
         });
     }
 
+    isEdit = false;
     config = {};
 
     setConfigOptions (config) {

apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Toolbar, Link, Icon } from 'framework7-react';
+import { View, Toolbar, Link, Icon, Popover, List, ListButton } from 'framework7-react';
 import { observer, inject } from "mobx-react";
 
 const viewStyle = {
@@ -22,7 +22,7 @@ const StatusbarView = inject('sheets')(observer(props => {
                     <ul className="sheet-tabs bottom">
                         {sheets.sheets.map((model,i) =>
                             model.hidden ? null :
-                                <li className={getTabClassList(model)} key={i}>
+                                <li className={getTabClassList(model)} key={i} onClick={() => props.onTabClick(i)}>
                                     <a onClick={e => props.onTabClicked(i)}>{model.name}</a>
                                 </li>
                         )}
@@ -31,4 +31,23 @@ const StatusbarView = inject('sheets')(observer(props => {
             </View>;
 }));
 
-export default StatusbarView;
+const TabContextMenu = props => {
+    return (
+        <Popover id="idx-statusbar-context-menu-popover"
+                className="document-menu"
+                backdrop={false}
+                closeByBackdropClick={false}
+                closeByOutsideClick={false}
+                // onPopoverClosed={e => this.props.onMenuClosed()}
+            >
+                <List className="list-block">
+                    <ListButton title="Duplicate" onClick={() => this.props.onTabMenu('copy')} />
+                    <ListButton title="Delete" onClick={() => this.props.onTabMenu('del')} />
+                    <ListButton title="Rename" onClick={() => this.props.onTabMenu('ren')} />
+                    <ListButton title="Hide" onClick={() => this.props.onTabMenu('hide')} />
+                </List>
+        </Popover>
+    )
+}
+
+export {StatusbarView, TabContextMenu};