[SSE mobile] Corrected positioning and add functions in Context Menu

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

@@ -1,262 +1,15 @@
 
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import {StatusbarView, TabContextMenu} from '../view/Statusbar';
 import { inject } from 'mobx-react';
 import { f7 } from 'framework7-react';
 import { Dom7 } from 'framework7';
 import { useTranslation } from 'react-i18next';
-import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu';
-import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu';
 import { Device } from '../../../../common/mobile/utils/device';
 
-// @inject (stores => ({
-//     isEdit: stores.storeAppOptions.isEdit,
-//     sheets: stores.sheets,
-// }))
-// class Statusbar extends ContextMenuController {
-//     constructor(props) {
-//         super(props);
-
-//         this.loadTabColor = this.loadTabColor.bind(this);
-//         this.onTabClick = this.onTabClick.bind(this);
-//         this.onTabClicked = this.onTabClicked.bind(this);
-//         this.onApiUpdateTabColor = this.onApiUpdateTabColor.bind(this);
-//         this.onApiSheetsChanged = this.onApiSheetsChanged.bind(this);
-//         this.onApiDisconnect = this.onApiDisconnect.bind(this);
-//     };
-
-//     onDocumentReady() {
-//         super.onDocumentReady();
-
-//         const api = Common.EditorApi.get();
-//         api.asc_registerCallback('asc_onUpdateTabColor', this.onApiUpdateTabColor);
-//         api.asc_registerCallback('asc_onSheetsChanged', this.onApiSheetsChanged);
-//         api.asc_registerCallback('asc_onCoAuthoringDisconnect', this.onApiDisconnect);
-//     };
-
-//     componentWillUnmount() {
-//         super.componentWillUnmount();
-
-//         const api = Common.EditorApi.get();
-//         api.asc_registerCallback('asc_onUpdateTabColor', this.onApiUpdateTabColor);
-//         api.asc_registerCallback('asc_onSheetsChanged', this.onApiSheetsChanged);
-//         api.asc_registerCallback('asc_onCoAuthoringDisconnect', this.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);
-//     //     };
-
-//     onApiSheetsChanged() {
-//         console.log('on api sheets changed');
-
-//         const {sheets} = this.props;
-//         const api = Common.EditorApi.get();
-//         const sheets_count = api.asc_getWorksheetsCount();
-//         const active_index = api.asc_getActiveWorksheetIndex();
-
-//         let i = -1,  items = [];
-
-//         while ( ++i < sheets_count ) {
-//             const tab = {
-//                 index       : i,
-//                 active      : active_index == i,
-//                 name        : api.asc_getWorksheetName(i),
-//                 locked      : api.asc_isWorksheetLockedOrDeleted(i),
-//                 hidden      : api.asc_isWorksheetHidden(i),
-//                 color       : api.asc_getWorksheetTabColor(i)
-//             };
-
-//             items.push(tab);
-//         }
-
-//         sheets.reset(items);
-//         // this.hiddensheets.reset(hiddentems);
-//         // updateTabsColors();
-//     };
-
-//     loadTabColor(sheetindex) {
-//         const api = Common.EditorApi.get();
-//         const {sheets} = this.props;
-//         let tab = sheets.findWhere({index: sheetindex});
-
-//         if (tab) {
-//             this.setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex));
-//         }
-        
-//     };
-
-//     onApiDisconnect() {
-//         this.isDisconnected = true;
-//     };
-
-//     onApiUpdateTabColor(index) {
-//         this.loadTabColor(index);
-//     };
-
-//     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', '');
-//             }
-//         }
-//     };
-
-//     updateTabsColors() {
-//         const api = Common.EditorApi.get();
-//         const {sheets} = this.props;
-
-//         sheets.forEach(model => {
-//             setTabLineColor(model, api.asc_getWorksheetTabColor(model.get('index')));
-//         });
-//     };
-
-//     onTabClicked(i) {
-//         const {sheets} = this.props;
-//         const model = sheets.at(i);
-//         const api = Common.EditorApi.get();
-
-//         api.asc_showWorksheet(model.index);
-//         sheets.setActiveWorksheet(i);
-//     };
-
-//     onAddTabClicked() {
-//         const api = Common.EditorApi.get();
-//         api.asc_closeCellEditor();
-
-//         const createSheetName = () => {
-//             let items = [], wc = api.asc_getWorksheetsCount();
-//             while (wc--) {
-//                 items.push(api.asc_getWorksheetName(wc).toLowerCase());
-//             }
-
-//             let index = 0, name;
-//             while(++index < 1000) {
-//                 name = /*this.strSheet*/ 'Sheet' + index;
-//                 if (items.indexOf(name.toLowerCase()) < 0) break;
-//             }
-
-//             return name;
-//         };
-
-//         api.asc_addWorksheet(createSheetName());
-//     };
-
-//     _getTabMenuItems(model) {
-//         const api = Common.EditorApi.get();
-//         let wbLocked = api.asc_isWorkbookLocked();
-//         let shLocked = api.asc_isWorksheetLockedOrDeleted(model.index);
-
-//         let items = [{
-//                 caption: _t.textDuplicate,
-//                 event: 'copy',
-//                 locked: wbLocked || shLocked
-//             },{
-//                 caption: _t.textDelete,
-//                 event: 'del',
-//                 locked: wbLocked || shLocked
-//             },{
-//                 caption: _t.textRename,
-//                 event: 'ren',
-//                 locked: wbLocked || shLocked
-//             },{
-//                 caption: _t.textHide,
-//                 event: 'hide',
-//                 locked: wbLocked || shLocked
-//             }];
-
-
-//         // if (!wbLocked && !shLocked && this.hiddensheets.length) {
-//         //     items.push({
-//         //         caption: _t.textUnhide,
-//         //         event: 'unhide'
-//         //     });
-//         // }
-
-//         // if (Common.SharedSettings.get('phone') && items.length > 3) {
-//         //     this._moreAction = items.slice(2);
-
-//         //     items = items.slice(0, 2);
-//         //     items.push({
-//         //         caption: this.menuMore,
-//         //         event: 'showMore'
-//         //     });
-//         // }
-
-//         return items;
-//     };
-
-//     onTabClick(i) {
-//         const api = Common.EditorApi.get();
-//         const {sheets} = this.props;
-//         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 (!this.isDisconnected) {
-//                     api.asc_closeCellEditor();
-//                     // const items = _getTabMenuItems(model);
-//                     // this.statusbar.showTabContextMenu(this._getTabMenuItems(model), model);
-//                     // f7.popover.open('#idx-tab-context-menu-popover');
-//                 }
-//             }
-//         } else {
-//             this.onTabClicked(i);
-//             // Common.NotificationCenter.trigger('sheet:active', sdkindex);
-//         }
-//     }
-
-//     render() {
-//         return (
-//             <Fragment>
-//                 <StatusbarView onTabClick={this.onTabClick} onTabClicked={this.onTabClicked} onAddTabClicked={this.onAddTabClicked} />
-//                 <TabContextMenu />
-//             </Fragment>
-//         );
-//     }
-// }
-
 const Statusbar = inject('sheets', 'storeAppOptions')(props => {
     const {sheets, storeAppOptions} = props;
+    const $$ = Dom7;
     const {t} = useTranslation();
     const _t = t('Statusbar', {returnObjects: true});
     console.log(props);
@@ -267,34 +20,20 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
     useEffect(() => {
         console.log("status bar did mount");
 
-        // Common.Notifications.on('document:ready', onDocumentReady);
         Common.Notifications.on('api:disconnect', onApiDisconnect);
+        Common.Notifications.on('document:ready', onApiSheetsChanged);
         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_onSheetsChanged', onApiSheetsChanged);
-            // api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect);
+            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) => {
@@ -303,13 +42,13 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
 //             model.set('locked', locked);
 //     };
 
-    const onApiSheetsChanged = api => {
+    const onApiSheetsChanged = () => {
         console.log('on api sheets changed');
 
-        !api && (api = Common.EditorApi.get());
+        const api = Common.EditorApi.get();
-
         const sheets_count = api.asc_getWorksheetsCount();
         const active_index = api.asc_getActiveWorksheetIndex();
+
         let i = -1,  items = [];
 
         while ( ++i < sheets_count ) {
@@ -332,7 +71,7 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
 
     const loadTabColor = sheetindex => {
         const api = Common.EditorApi.get();
-        let tab = sheets.findWhere({index: sheetindex});
+        let tab = sheets.sheets.find(sheet => sheet.index === sheetindex);
 
         if (tab) {
             setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex));
@@ -342,11 +81,11 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
 
     const onApiDisconnect = () => {
         isDisconnected = true;
-    }
+    };
 
     const onApiUpdateTabColor = index => {
         loadTabColor(index);
-    }
+    };
 
     const setTabLineColor = (tab, color) => {
         if (tab) {
@@ -370,27 +109,25 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
         }
     };
 
-    const updateTabsColors = () => {
+    // const updateTabsColors = () => {
-        const api = Common.EditorApi.get();
+    //     const api = Common.EditorApi.get();
 
-        sheets.forEach(model => {
+    //     sheets.sheets.forEach(model => {
-            setTabLineColor(model, api.asc_getWorksheetTabColor(model.get('index')));
+    //         setTabLineColor(model, api.asc_getWorksheetTabColor(model.index));
-        });
+    //     });
-    };
+    // };
 
     const onTabClicked = i => {
         const model = sheets.at(i);
-
         const api = Common.EditorApi.get();
+
         api.asc_showWorksheet(model.index);
         sheets.setActiveWorksheet(i);
     };
 
-    const onAddTabClicked = () => {
-        const api = Common.EditorApi.get();
-        api.asc_closeCellEditor();
-
     const createSheetName = () => {
+        const api = Common.EditorApi.get();
+
         let items = [], wc = api.asc_getWorksheetsCount();
         while (wc--) {
             items.push(api.asc_getWorksheetName(wc).toLowerCase());
@@ -405,31 +142,37 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
         return name;
     };
 
+    const onAddTabClicked = () => {
+        const api = Common.EditorApi.get();
+        api.asc_closeCellEditor();
+        f7.popover.close('#idx-tab-context-menu-popover');
+
+        createSheetName();
         api.asc_addWorksheet(createSheetName());
     };
 
-    const _getTabMenuItems = model => {
+    // const _getTabMenuItems = model => {
-        const api = Common.EditorApi.get();
+    //     const api = Common.EditorApi.get();
-        let wbLocked = api.asc_isWorkbookLocked();
+    //     let wbLocked = api.asc_isWorkbookLocked();
-        let shLocked = api.asc_isWorksheetLockedOrDeleted(model.index);
+    //     let shLocked = api.asc_isWorksheetLockedOrDeleted(model.index);
 
-        let items = [{
+    //     let items = [{
-                caption: _t.textDuplicate,
+    //             caption: _t.textDuplicate,
-                event: 'copy',
+    //             event: 'copy',
-                locked: wbLocked || shLocked
+    //             locked: wbLocked || shLocked
-            },{
+    //         },{
-                caption: _t.textDelete,
+    //             caption: _t.textDelete,
-                event: 'del',
+    //             event: 'del',
-                locked: wbLocked || shLocked
+    //             locked: wbLocked || shLocked
-            },{
+    //         },{
-                caption: _t.textRename,
+    //             caption: _t.textRename,
-                event: 'ren',
+    //             event: 'ren',
-                locked: wbLocked || shLocked
+    //             locked: wbLocked || shLocked
-            },{
+    //         },{
-                caption: _t.textHide,
+    //             caption: _t.textHide,
-                event: 'hide',
+    //             event: 'hide',
-                locked: wbLocked || shLocked
+    //             locked: wbLocked || shLocked
-            }];
+    //         }];
 
 
     //     if (!wbLocked && !shLocked && this.hiddensheets.length) {
@@ -449,39 +192,200 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
     //         });
     //     }
 
-        return items;
+    //     return items;
-    };
+    // };
 
-    const onTabClick = i => {
+    const onTabClick = (i, target) => {
         const api = Common.EditorApi.get();
         const model = sheets.at(i);
-        const $$ = Dom7;
+        console.log(model);
 
         let opened = $$('.document-menu.modal-in').length;
+        let index = model.index;
+
         f7.popover.close('.document-menu.modal-in');
 
-        // const $targetEl = $$(idCntextMenuTargetElement);
+        if (index == api.asc_getActiveWorksheetIndex()) {
-        // console.log($targetEl);
-
-        if (i == api.asc_getActiveWorksheetIndex()) {
             if (!opened) {
                 if (!isDisconnected) {
                     api.asc_closeCellEditor();
                     // const items = _getTabMenuItems(model);
                     // this.statusbar.showTabContextMenu(this._getTabMenuItems(model), model);
-                    f7.popover.open('#idx-tab-context-menu-popover');
+                    f7.popover.open('#idx-tab-context-menu-popover', target);
                 }
             }
         } else {
+            f7.popover.close('#idx-tab-context-menu-popover');
             onTabClicked(i);
-            // Common.NotificationCenter.trigger('sheet:active', sdkindex);
+            Common.Notifications.trigger('sheet:active', index);
+        }
+    };
+
+    const deleteWorksheet = () => {
+        const api = Common.EditorApi.get();
+        const countVisibleSheets = sheets.sheets.filter(sheet => !sheet.hidden);
+
+        if (sheets.sheets.length == 1 || countVisibleSheets.length == 1) {
+            f7.dialog.alert(_t.textErrorLastSheet, _t.notcriticalErrorTitle);
+        } else {
+            f7.dialog.confirm(
+                _t.textWarnDeleteSheet,
+                _t.notcriticalErrorTitle,
+                () => {
+                    if (!api.asc_deleteWorksheet()) {
+                        f7.dialog.alert(_t.textErrorRemoveSheet, _t.notcriticalErrorTitle);
                     }
                 }
+            );
+        }
+    };
+
+    const renameWorksheet = () => {
+        const api = Common.EditorApi.get();
+
+        if (api.asc_getWorksheetsCount() > 0) {
+            let sindex = api.asc_getActiveWorksheetIndex();
+
+            if (api.asc_isWorksheetLockedOrDeleted(sindex)) {
+                return;
+            }
+
+            let current = api.asc_getWorksheetName(api.asc_getActiveWorksheetIndex());
+
+            f7.dialog.create({
+                title: _t.textRenameSheet,
+                content:
+                    '<div class="input-field"><input type="text" name="modal-sheet-name" placeholder="' + _t.textSheetName + '" class="modal-text-input"></div>',
+                buttons: [
+                    {
+                        text: 'OK',
+                        bold: true,
+                        onClick: function () {
+                            let s = $$('.modal-text-input[name="modal-sheet-name"]').val(),
+                                wc = api.asc_getWorksheetsCount(), items = [],
+                                err = !s.trim().length ? _t.textErrNotEmpty : ((s.length > 2 && s[0] == '"' && s[s.length-1] == '"' || !/[:\\\/\*\?\[\]\']/.test(s)) ? null : _t.textErrNameWrongChar);
+                            if (!err) {
+                                while (wc--) {
+                                    if (sindex !== wc) {
+                                        items.push(api.asc_getWorksheetName(wc).toLowerCase());
+                                    }
+                                }
+                                if (items) {
+                                    let testval = s.toLowerCase();
+                                    for (var i = items.length - 1; i >= 0; --i) {
+                                        if (items[i] === testval) {
+                                            err = _t.textErrNameExists;
+                                        }
+                                    }
+                                }
+                            }
+                            if (err) {
+                                f7.dialog.alert(err, _t.notcriticalErrorTitle, () => {
+                                    renameWorksheet();
+                                });
+                            } else if (s != current)
+                                api.asc_renameWorksheet(s);
+                        }
+                    },
+                    {
+                        text: _t.textCancel
+                    }
+                ]
+            }).open();
+        }
+    };
+
+    const createCopyName = (orig) => {
+        const api = Common.EditorApi.get();
+        let wc = api.asc_getWorksheetsCount(), names = [];
+
+        while (wc--) {
+            names.push(api.asc_getWorksheetName(wc).toLowerCase());
+        }
+
+        let re = /^(.*)\((\d)\)$/.exec(orig);
+        let first = re ? re[1] : orig + ' ';
+        let index = 1, name;
+
+        while(++index < 1000) {
+            name = first + '(' + index + ')';
+            if (names.indexOf(name.toLowerCase()) < 0) break;
+        }
+
+        return name;
+    };
+
+    const hideWorksheet = (hide, index) => {
+        const api = Common.EditorApi.get();
+        const countVisibleSheets = sheets.sheets.filter(sheet => !sheet.hidden);
+
+        if(hide) {
+            countVisibleSheets.length == 1 ? 
+                f7.dialog.alert(_t.textErrorLastSheet, _t.notcriticalErrorTitle) :
+                api['asc_hideWorksheet']([index]);
+        } else {
+            api['asc_showWorksheet'](index);
+            loadTabColor(index);
+        }
+    };
+
+    const onTabMenu = (event) => {
+        const api = Common.EditorApi.get();
+        let index = sheets.sheets.find(sheet => sheet.active).index;
+        f7.popover.close('#idx-tab-context-menu-popover');
+
+        switch (event) {
+            case 'del': deleteWorksheet(); break;
+            case 'hide': hideWorksheet(true, index); break;
+            case 'ins': api.asc_insertWorksheet(createSheetName()); break;
+            case 'copy':
+                let name = createCopyName(api.asc_getWorksheetName(api.asc_getActiveWorksheetIndex()));
+                api.asc_copyWorksheet(index, name);
+                break;
+            case 'ren': renameWorksheet(); break;
+            // case 'unhide':
+            //     var items = [];
+            //     _.each(this.hiddensheets.models, function (item) {
+            //         items.push({
+            //             caption: item.get('name'),
+            //             event: 'reveal:' + item.get('index')
+            //         })
+            //     });
+            //     _.defer(function () {
+            //         me.statusbar.showTabContextMenu(items, model);
+            //     });
+            //     break;
+            // case 'showMore':
+            //     if (me._moreAction.length > 0) {
+            //         _.delay(function () {
+            //             _.each(me._moreAction, function (action) {
+            //                 action.text = action.caption;
+            //                 action.onClick = function () {
+            //                     me.onTabMenu(null, action.event, model)
+            //                 }
+            //             });
+
+            //             uiApp.actions([me._moreAction, [
+            //                 {
+            //                     text: me.cancelButtonText,
+            //                     bold: true
+            //                 }
+            //             ]]);
+            //         }, 100);
+            //     }
+            //     break;
+            // default:
+            //     var _re = /reveal\:(\d+)/.exec(event);
+            //     if ( _re && !!_re[1] ) {
+            //         me.hideWorksheet(false, parseInt(_re[1]));
+            //     }
+        }
+    };
 
     return (
         <Fragment>
             <StatusbarView onTabClick={onTabClick} onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} />
-            <TabContextMenu />
+            <TabContextMenu onTabMenu={onTabMenu} />
         </Fragment>
     )
 });

apps/spreadsheeteditor/mobile/src/less/app-ios.less

@@ -1,5 +1,23 @@
 
 .device-ios {
-
+    input.modal-text-input {
+        box-sizing: border-box;
+        height: 26px;
+        background: #fff;
+        margin: 0;
+        margin-top: 15px;
+        padding: 0 5px;
+        border: 1px solid rgba(0,0,0,.3);
+        border-radius: 0;
+        width: 100%;
+        font-size: 14px;
+        font-family: inherit;
+        display: block;
+        box-shadow: 0 0 0 transparent;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        -ms-appearance: none;
+        appearance: none;
+    }
 
 }

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

@@ -9,8 +9,7 @@ const viewStyle = {
 const StatusbarView = inject('sheets')(observer(props => {
     const { sheets } = props;
 
-    const getTabClassList = model =>
+    const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
-            `tab ${model.active ? 'active':''} ${model.locked ? 'locked':''}`;
 
     return <View id="idx-statusbar" className="statusbar" style={viewStyle}>
                 <div id="idx-box-add-tab">
@@ -22,8 +21,8 @@ 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} onClick={() => props.onTabClick(i)}>
+                                <li className={getTabClassList(model)} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
-                                    <a onClick={e => props.onTabClicked(i)}>{model.name}</a>
+                                    <a /*onClick={e => props.onTabClicked(i)} */>{model.name}</a>
                                 </li>
                         )}
                     </ul>
@@ -38,7 +37,6 @@ const TabContextMenu = props => {
                 backdrop={false}
                 closeByBackdropClick={false}
                 closeByOutsideClick={false}
-                // onPopoverClosed={e => this.props.onMenuClosed()}
             >
                 <List className="list-block">
                     <ListButton title="Duplicate" onClick={() => props.onTabMenu('copy')} />
@@ -48,6 +46,6 @@ const TabContextMenu = props => {
                 </List>
         </Popover>
     )
-}
+};
 
 export {StatusbarView, TabContextMenu};