[SSE mobile] Corrected stores according to mobx v. 6

apps/common/mobile/lib/view/Search.jsx

@@ -74,7 +74,7 @@ class SearchSettingsView extends Component {
     }
 }
 
-@observer
+// @observer
 class SearchView extends Component {
     constructor(props) {
         super(props);
@@ -304,4 +304,6 @@ class SearchView extends Component {
     }
 }
 
-export {SearchView, SearchSettingsView};
+const SearchViewWithObserver = observer(SearchView);
+
+export {SearchViewWithObserver as SearchView, SearchSettingsView};

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

@@ -1,8 +1,16 @@
-import {action, observable} from 'mobx';
+import {action, observable, makeObservable} from 'mobx';
 
 export class storeAppOptions {
+    constructor() {
+        makeObservable(this, {
+            setConfigOptions: action,
+            setPermissionOptions: action
+        });
+    }
+
     config = {};
-    @action setConfigOptions (config) {
+
+    setConfigOptions (config) {
         this.config = config;
         this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);
         this.isDesktopApp = config.targetApp == 'desktop';
@@ -27,7 +35,8 @@ export class storeAppOptions {
         this.canBack = this.canBackToFolder === true;
         this.canPlugins = false;
     }
-    @action setPermissionOptions (document, licType, params, permissions) {
+
+    setPermissionOptions (document, licType, params, permissions) {
         permissions.edit = params.asc_getRights() !== Asc.c_oRights.Edit ? false : true;
         this.canAutosave = true;
         this.canAnalytics = params.asc_getIsAnalyticsEnable();

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

@@ -3,27 +3,26 @@ import {makeObservable, action, observable} from 'mobx';
 export class storeApplicationSettings {
     constructor() {
         makeObservable(this, {
-            unitMeasurement: observable
-            , macrosMode: observable
-            , formulaLang: observable
-            , regCode: observable
-            , regExample: observable
-            , regData: observable
-            , isRefStyle: observable
-            , isComments: observable
-            , isResolvedComments: observable
-            , initRegData: action
-            , getRegCode: action
-            , changeRegCode: action
-            , setRegExample: action
-            , changeUnitMeasurement: action
-            , changeMacrosSettings: action
-            , changeDisplayComments: action
-            , changeDisplayResolved: action
-            , changeRefStyle: action
-            , changeFormulaLang: action
-
-        })
+            unitMeasurement: observable, 
+            macrosMode: observable, 
+            formulaLang: observable, 
+            regCode: observable, 
+            regExample: observable, 
+            regData: observable, 
+            isRefStyle: observable, 
+            isComments: observable, 
+            isResolvedComments: observable, 
+            initRegData: action, 
+            getRegCode: action, 
+            changeRegCode: action, 
+            setRegExample: action, 
+            changeUnitMeasurement: action, 
+            changeMacrosSettings: action, 
+            changeDisplayComments: action, 
+            changeDisplayResolved: action, 
+            changeRefStyle: action, 
+            changeFormulaLang: action
+        });
     }
 
     unitMeasurement = Common.Utils.Metric.getCurrentMetric();

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

@@ -3,35 +3,35 @@ import {makeObservable, action, observable, computed} from 'mobx';
 export class storeCellSettings {
     constructor() {
         makeObservable(this, {
-            styleSize: observable
-            , borderInfo: observable
-            , borderStyle: observable
-            , cellStyles: observable
-            , fontsArray: observable
-            , fontInfo: observable
-            , fillColor: observable
-            , fontColor: observable
-            , styleName: observable
-            , isBold: observable
-            , isItalic: observable
-            , isUnderline: observable
-            , hAlignStr: observable
-            , vAlignStr: observable
-            , isWrapText: observable
-            , orientationStr: observable
-            , initCellSettings: action
-            , initTextFormat: action
-            , initTextOrientation: action
-            , initFontSettings: action
-            , initEditorFonts: action
-            , initCellStyles: action
-            , initFontInfo: action
-            , changeFontColor: action
-            , changeFillColor: action
-            , changeBorderColor: action
-            , changeBorderSize: action
-            , changeBorderStyle: action
-        })
+            styleSize: observable, 
+            borderInfo: observable, 
+            borderStyle: observable, 
+            cellStyles: observable, 
+            fontsArray: observable, 
+            fontInfo: observable, 
+            fillColor: observable, 
+            fontColor: observable, 
+            styleName: observable, 
+            isBold: observable, 
+            isItalic: observable, 
+            isUnderline: observable, 
+            hAlignStr: observable, 
+            vAlignStr: observable, 
+            isWrapText: observable, 
+            orientationStr: observable, 
+            initCellSettings: action, 
+            initTextFormat: action, 
+            initTextOrientation: action, 
+            initFontSettings: action, 
+            initEditorFonts: action, 
+            initCellStyles: action, 
+            initFontInfo: action, 
+            changeFontColor: action, 
+            changeFillColor: action, 
+            changeBorderColor: action, 
+            changeBorderSize: action, 
+            changeBorderStyle: action
+        });
     }
 
     styleSize = {

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

@@ -1,25 +1,40 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
 
 export class storeChartSettings {
-
-    @observable borderColor = undefined;
+    constructor() {
+        makeObservable(this, {
+            borderColor: observable,
+            fillColor: observable,
+            chartStyles: observable,
+            setBorderColor: action,
+            initBorderColor: action,
+            setFillColor: action,
+            getFillColor: action,
+            clearChartStyles: action,
+            updateChartStyles: action,
+            styles: computed,
+            types: computed,
+        });
+    }
+    
+    borderColor = undefined;
 
     setBorderColor (color) {
         this.borderColor = color;
     }
 
-    @action initBorderColor(shapeProperties) {
+    initBorderColor(shapeProperties) {
         let stroke = shapeProperties.get_stroke();
         this.borderColor = (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) ? this.resetColor(stroke.get_color()) : 'transparent';
     }
 
-    @observable fillColor = undefined;
+    fillColor = undefined;
 
     setFillColor (color) {
         this.fillColor = color;
     }
 
-    @action getFillColor (shapeProperties) {
+    getFillColor (shapeProperties) {
         const fill = shapeProperties.asc_getFill();
         const fillType = fill.asc_getType();
 
@@ -30,17 +45,17 @@ export class storeChartSettings {
         return this.fillColor;
     }
 
-    @observable chartStyles = null;
+    chartStyles = null;
 
-    @action clearChartStyles () {
+    clearChartStyles () {
         this.chartStyles = null;
     }
 
-    @action updateChartStyles (styles) {
+    updateChartStyles (styles) {
         this.chartStyles = styles;
     }
 
-    @computed get styles () {
+    get styles () {
         if (!this.chartStyles) return null;
         const widthContainer = document.querySelector(".page-content").clientWidth;
         const columns = parseInt(widthContainer / 70); // magic
@@ -58,7 +73,7 @@ export class storeChartSettings {
         return styles;
     }
 
-    @computed get types () {
+    get types () {
         const _types = [
             { type: Asc.c_oAscChartTypeSettings.barNormal,               thumb: 'bar-normal'},
             { type: Asc.c_oAscChartTypeSettings.barStacked,              thumb: 'bar-stacked'},

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

@@ -1,16 +1,30 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
 
 export class storeFocusObjects {
-    @observable focusOn = undefined;
+    constructor() {
+        makeObservable(this, {
+            focusOn: observable,
+            _focusObjects: observable,
+            _cellInfo: observable,
+            resetFocusObjects: action,
+            objects: computed,
+            resetCellInfo: action,
+            selections: computed,
+            shapeObject: computed,
+            imageObject: computed,
+            chartObject: computed
+        });
+    }
 
-    @observable _focusObjects = [];
+    focusOn = undefined;
+    _focusObjects = [];
 
-    @action resetFocusObjects(objects) {
+    resetFocusObjects(objects) {
         this.focusOn = 'obj';
         this._focusObjects = objects;
     }
 
-    @computed get objects() {
+    get objects() {
         const _objects = [];
         for (let object of this._focusObjects) {
             const type = object.get_ObjectType();
@@ -39,14 +53,14 @@ export class storeFocusObjects {
         return resultArr;
     }
 
-    @observable _cellInfo;
+    _cellInfo;
 
-    @action resetCellInfo (cellInfo) {
+    resetCellInfo (cellInfo) {
         this.focusOn = 'cell';
         this._cellInfo = cellInfo;
     }
 
-    @computed get selections () {
+    get selections () {
         const _selections = [];
 
         let isCell, isRow, isCol, isAll, isChart, isImage, isTextShape, isShape, isTextChart,
@@ -134,7 +148,7 @@ export class storeFocusObjects {
         return _selections;
     }
 
-    @computed get shapeObject() {
+    get shapeObject() {
         const shapes = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
@@ -151,7 +165,7 @@ export class storeFocusObjects {
         }
     }
 
-    @computed get imageObject() {
+    get imageObject() {
         const images = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
@@ -166,7 +180,7 @@ export class storeFocusObjects {
         }
     }
 
-    @computed get chartObject() {
+    get chartObject() {
         const charts = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {

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

@@ -1,11 +1,19 @@
-import {action, computed} from 'mobx';
+import {action, computed, makeObservable} from 'mobx';
 
 export class storeFunctions {
-    @action initFunctions (groups, data) {
+    constructor() {
+        makeObservable(this, {
+            initFunctions: action,
+            functions: computed
+        });
+    }
+
+    initFunctions (groups, data) {
         this.groups = groups;
         this.data = data;
     }
-    @computed get functions () {
+
+    get functions () {
         const groups = this.groups;
         const data = this.data;
         const functions = {};

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

@@ -1,9 +1,16 @@
-import {action, observable} from 'mobx';
+import {action, makeObservable, observable} from 'mobx';
 
 export class storePalette {
-    @observable customColors = [];
+    constructor() {
+        makeObservable(this, {
+            customColors: observable,
+            changeCustomColors: action
+        });
+    }
+    
+    customColors = [];
 
-    @action changeCustomColors (colors) {
+    changeCustomColors (colors) {
         this.customColors = colors;
     }
 }

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

@@ -1,6 +1,16 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
 
 export class storeShapeSettings {
+    constructor() {
+        makeObservable(this, {
+            fillColor: observable,
+            borderColorView: observable,
+            setFillColor: action,
+            getFillColor: action,
+            setBorderColor: action,
+            initBorderColorView: action
+        });
+    }
 
     getStyleGroups () {
         const styles = [
@@ -125,8 +135,10 @@ export class storeShapeSettings {
                 type: 'cloudCallout'
             }
         ];
+
         const groups = [];
         let i = 0;
+
         for (let row=0; row<Math.floor(styles.length/4); row++) {
             const group = [];
             for (let cell=0; cell<4; cell++) {
@@ -135,12 +147,13 @@ export class storeShapeSettings {
             }
             groups.push(group);
         }
+
         return groups;
     }
 
     // Fill Color
 
-    @observable fillColor = undefined;
+    fillColor = undefined;
 
     setFillColor (color) {
         this.fillColor = color;
@@ -169,7 +182,7 @@ export class storeShapeSettings {
 
     // Border size and color
 
-    @observable borderColorView;
+    borderColorView;
 
     setBorderColor (color) {
         this.borderColorView = color;
@@ -220,5 +233,4 @@ export class storeShapeSettings {
             }
         }
     }
-
 }

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

@@ -1,8 +1,8 @@
 
-import {observable, action} from 'mobx';
+import {observable, action, makeObservable} from 'mobx';
 
 class Worksheet {
-    @observable sheet = {
+    sheet = {
         index       : -1,
         active      : false,
         name        : '',
@@ -12,22 +12,30 @@ class Worksheet {
     };
 
     constructor(data = {}) {
+        makeObservable(this, {
+            sheet: observable
+        });
         this.sheet.merge(data);
     }
 }
 
 export class storeWorksheets {
-    @observable sheets;
+    sheets;
 
     constructor() {
+        makeObservable(this, {
+            sheets: observable,
+            reset: action,
+            setActiveWorksheet: action
+        });
         this.sheets = [];
     }
 
-    @action reset(sheets) {
+    reset(sheets) {
         this.sheets = Object.values(sheets)
     }
 
-    @action setActiveWorksheet(i) {
+    setActiveWorksheet(i) {
         if ( !this.sheets[i].active ) {
             this.sheets.forEach(model => {
                 if ( model.active )

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

@@ -1,10 +1,16 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, makeObservable} from 'mobx';
 
 export class storeSpreadsheetInfo {
-   
-    @observable dataDoc;
+    constructor() {
+        makeObservable(this, {
+            dataDoc: observable,
+            setDataDoc: action
+        })
+    }
+    
+    dataDoc;
 
-    @action setDataDoc(obj) {
+    setDataDoc(obj) {
         this.dataDoc = obj;
     }
 }

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

@@ -1,19 +1,35 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
 
 export class storeSpreadsheetSettings {
+    constructor() {
+        makeObservable(this, {
+            isPortrait: observable,
+            widthDocument: observable,
+            heightDocument: observable,
+            allSchemes: observable,
+            isHideHeadings: observable,
+            isHideGridlines: observable,
+            resetPortrait: action,
+            changeDocSize: action,
+            pageSizesIndex: computed,
+            addSchemes: action,
+            changeHideHeadings: action,
+            changeHideGridlines: action
+        })
+    }
 
-    @observable isPortrait = true;
+    isPortrait = true;
 
-    @action resetPortrait (isPortrait) {
+    resetPortrait (isPortrait) {
         this.isPortrait = isPortrait === true;
     }
 
     // Spreadsheet Formats
 
-    @observable widthDocument;
-    @observable heightDocument;
+    widthDocument;
+    heightDocument;
 
-    @action changeDocSize (width, height) {
+    changeDocSize (width, height) {
         this.widthDocument = width;
         this.heightDocument = height;
     }
@@ -43,7 +59,7 @@ export class storeSpreadsheetSettings {
         return pageSizes;
     }
 
-    @computed get pageSizesIndex () {
+    get pageSizesIndex () {
         let w = this.widthDocument;
         let h = this.heightDocument;
         let ind;
@@ -60,20 +76,20 @@ export class storeSpreadsheetSettings {
 
     // Color Schemes
 
-    @observable allSchemes;
+    allSchemes;
 
-    @action addSchemes(arr) {
+    addSchemes(arr) {
         this.allSchemes = arr;
     }
 
-    @observable isHideHeadings;
-    @observable isHideGridlines;
+    isHideHeadings;
+    isHideGridlines;
 
-    @action changeHideHeadings(value) {
+    changeHideHeadings(value) {
         this.isHideHeadings = value;
     }
 
-    @action changeHideGridlines(value) {
+    changeHideGridlines(value) {
         this.isHideGridlines = value;
     }
 

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

@@ -1,21 +1,42 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, makeObservable, computed} from 'mobx';
 
 export class storeTextSettings {
+    constructor() {
+        makeObservable(this, {
+            fontsArray: observable,
+            fontInfo: observable,
+            fontName: observable,
+            fontSize: observable,
+            isBold: observable,
+            isItalic: observable,
+            isUnderline: observable,
+            textColor: observable,
+            customTextColors: observable,
+            paragraphAlign: observable,
+            paragraphValign: observable,
+            textIn: observable,
+            initTextSettings: action,
+            initEditorFonts: action,
+            initFontInfo: action,
+            changeTextColor: action,
+            changeCustomTextColors: action
+        });
+    }
+    
+    fontsArray = [];
+    fontInfo = {};
+    fontName = '';
+    fontSize = undefined;
+    isBold = false;
+    isItalic = false;
+    isUnderline = false;
+    textColor = undefined;
+    customTextColors = [];
+    paragraphAlign = undefined;
+    paragraphValign = undefined;
+    textIn = undefined;
 
-    @observable fontsArray = [];
-    @observable fontInfo = {};
-    @observable fontName = '';
-    @observable fontSize = undefined;
-    @observable isBold = false;
-    @observable isItalic = false;
-    @observable isUnderline = false;
-    @observable textColor = undefined;
-    @observable customTextColors = [];
-    @observable paragraphAlign = undefined;
-    @observable paragraphValign = undefined;
-    @observable textIn = undefined;
-
-    @action initTextSettings(cellInfo) {
+    initTextSettings(cellInfo) {
         let xfs = cellInfo.asc_getXfs();
         let selectType = cellInfo.asc_getSelectionType();
 
@@ -40,7 +61,7 @@ export class storeTextSettings {
         this.paragraphValign = xfs.asc_getVertAlign();
     }
 
-    @action initEditorFonts (fonts, select) {
+    initEditorFonts (fonts, select) {
         let array = [];
         for (let font of fonts) {
             let fontId = font.asc_getFontId();
@@ -56,11 +77,11 @@ export class storeTextSettings {
         this.fontsArray = array;
     }
 
-    @action initFontInfo(fontObj) {
+    initFontInfo(fontObj) {
         this.fontInfo = fontObj;
     }
 
-    @action changeTextColor(value) {
+    changeTextColor(value) {
         this.textColor = value;
     }
 
@@ -85,7 +106,7 @@ export class storeTextSettings {
         return value;
     }
 
-    @action changeCustomTextColors (colors) {
+    changeCustomTextColors (colors) {
         this.customTextColors = colors;
     }
 }