[SSE mobile] fill worksheets in taskbar

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

@@ -1,9 +1,79 @@
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import StatusbarView from '../view/Statusbar';
+import { inject } from 'mobx-react';
 
-const Statusbar = props => {
-    return <StatusbarView />
-};
+const Statusbar = inject('sheets')(props => {
+    const {sheets} = props;
+
+    useEffect(() => {
+        console.log("status bar did mount");
+
+        Common.Notifications.on('document:ready', onApiSheetsChanged);
+        Common.Notifications.on('engineCreated', api => {
+            api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged.bind(api));
+        });
+    }, []);
+
+    const onApiSheetsChanged = api => {
+        console.log('on api sheets changed');
+
+        !api && (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);
+
+        // this.updateTabsColors();
+    };
+
+    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 = () => {
+            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());
+    };
+
+    return <StatusbarView onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} />
+});
 
 export default Statusbar;

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

@@ -1,6 +1,9 @@
 
 @themeColor: #40865c;
 
+@import '../../../../common/mobile/resources/less/variables.less';
+@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
+
 @import '../../../../common/mobile/resources/less/_mixins.less';
 @import '../../../../common/mobile/resources/less/collaboration.less';
 @import '../../../../common/mobile/resources/less/common.less';
@@ -12,6 +15,7 @@
 @import './icons-material.less';
 @import './icons-common.less';
 @import './celleditor.less';
+@import './statusbar.less';
 
 .page[data-name='home'] {
     .page-content {

apps/spreadsheeteditor/mobile/src/less/statusbar.less

@@ -0,0 +1,58 @@
+@statusbar-height: 30px;
+@fontColor: #000;
+
+.statusbar {
+    .hairline(top, @border-regular-control);
+    height: @statusbar-height;
+    min-height: @statusbar-height;
+    background-color: @background-normal;
+
+    display: flex;
+
+    .tab {
+        border: 0 none;
+        border-radius: 0;
+        font-size: 18px;
+        line-height: inherit;
+        min-width: 48px;
+
+        display: inline-block;
+        padding: 0 10px;
+        text-align: center;
+        height: 100%;
+        position: relative;
+
+        .hairline(right, @border-regular-control);
+    }
+
+    .statusbar--box-tabs {
+        > ul {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            white-space: pre;
+            overflow: hidden;
+
+            > li {
+                a {
+                    font-size: 12px;
+                    padding: 0 10px 0;
+                    line-height: @statusbar-height;
+                    color: @text-normal;
+                }
+
+                &:not(.active) {
+                    a {
+                        opacity: 0.5;
+                    }
+                }
+            }
+        }
+    }
+
+    i.icon {
+        &.icon-plus {
+            .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{fontColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
+        }
+    }
+}

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

@@ -2,6 +2,7 @@
 // import {storeDocumentSettings} from './documentSettings';
 // import {storeFocusObjects} from "./focusObjects";
 import {storeUsers} from '../../../../common/mobile/lib/store/users';
+import {storeWorksheets} from './sheets';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -13,6 +14,7 @@ export const stores = {
     // storeFocusObjects: new storeFocusObjects(),
     // storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
+    sheets: new storeWorksheets()
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),

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

@@ -0,0 +1,52 @@
+
+import {observable, action} from 'mobx';
+
+class Worksheet {
+    @observable sheet = {
+        index       : -1,
+        active      : false,
+        name        : '',
+        locked      : false,
+        hidden      : false,
+        color       : ''
+    };
+
+    constructor(data = {}) {
+        this.sheet.merge(data);
+    }
+}
+
+export class storeWorksheets {
+    @observable sheets;
+
+    constructor() {
+        this.sheets = [];
+    }
+
+    @action reset(sheets) {
+        this.sheets = Object.values(sheets)
+    }
+
+    @action setActiveWorksheet(i) {
+        if ( !this.sheets[i].active ) {
+            this.sheets.forEach(model => {
+                if ( model.active )
+                    model.active = false;
+            });
+
+            this.sheets[i].active = true;
+        }
+    }
+
+    at(i) {
+        return this.sheets[i]
+    }
+
+    hasHiddenWorksheet() {
+        return this.sheets.some(model => model.hidden);
+    }
+
+    hiddenWorksheets() {
+        return this.sheets.filter(model => model.hidden);
+    }
+}

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

@@ -1,17 +1,34 @@
 import React from 'react';
-import { View, Toolbar, Link } from 'framework7-react';
+import { View, Toolbar, Link, Icon } from 'framework7-react';
+import { observer, inject } from "mobx-react";
 
 const viewStyle = {
     height: 30
 };
 
-const StatusbarView = props => {
-    return <View id="idx-statusbar" style={viewStyle}>
-                <Toolbar tabbar bottom>
-                    <Link>Sheet 1</Link>
-                    <Link>Sheet 2</Link>
-                </Toolbar>
+const StatusbarView = inject('sheets')(observer(props => {
+    const { sheets } = props;
+
+    const getTabClassList = model =>
+            `tab ${model.active ? 'active':''} ${model.locked ? 'locked':''}`;
+
+    return <View id="idx-statusbar" className="statusbar" style={viewStyle}>
+                <div id="idx-box-add-tab">
+                    <Link href="false" id="idx-btn-addtab" className="tab" onClick={e => props.onAddTabClicked()}>
+                        <Icon className="icon icon-plus" />
+                    </Link>
+                </div>
+                <div className="statusbar--box-tabs">
+                    <ul className="sheet-tabs bottom">
+                        {sheets.sheets.map((model,i) =>
+                            model.hidden ? null :
+                                <li className={getTabClassList(model)} key={i}>
+                                    <a onClick={e => props.onTabClicked(i)}>{model.name}</a>
+                                </li>
+                        )}
+                    </ul>
+                </div>
             </View>;
-};
+}));
 
 export default StatusbarView;