From 0fa56cd60b2ef3037a0c92ed08ff962ec8109886 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 15 Mar 2021 16:39:45 +0300 Subject: [PATCH] [SSE mobile] Corrected stores according to mobx v. 6 --- apps/common/mobile/lib/view/Search.jsx | 6 +- .../mobile/src/store/appOptions.js | 15 ++++- .../mobile/src/store/applicationSettings.js | 41 +++++++------ .../mobile/src/store/cellSettings.js | 58 +++++++++--------- .../mobile/src/store/chartSettings.js | 37 ++++++++---- .../mobile/src/store/focusObjects.js | 36 +++++++---- .../mobile/src/store/functions.js | 14 ++++- .../mobile/src/store/palette.js | 13 +++- .../mobile/src/store/shapeSettings.js | 20 +++++-- .../mobile/src/store/sheets.js | 18 ++++-- .../mobile/src/store/spreadsheetInfo.js | 14 +++-- .../mobile/src/store/spreadsheetSettings.js | 42 +++++++++---- .../mobile/src/store/textSettings.js | 59 +++++++++++++------ 13 files changed, 245 insertions(+), 128 deletions(-) diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 225e8f175..fbc0f9665 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/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}; \ No newline at end of file +const SearchViewWithObserver = observer(SearchView); + +export {SearchViewWithObserver as SearchView, SearchSettingsView}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/appOptions.js b/apps/spreadsheeteditor/mobile/src/store/appOptions.js index 16cb50352..70d85c02d 100644 --- a/apps/spreadsheeteditor/mobile/src/store/appOptions.js +++ b/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(); diff --git a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js index ac459aa5a..faea20f77 100644 --- a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js +++ b/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(); diff --git a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js b/apps/spreadsheeteditor/mobile/src/store/cellSettings.js index 2ee0fbe9f..f4b7e4e81 100644 --- a/apps/spreadsheeteditor/mobile/src/store/cellSettings.js +++ b/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 = { diff --git a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js b/apps/spreadsheeteditor/mobile/src/store/chartSettings.js index 40db02f77..3d1ea1dbb 100644 --- a/apps/spreadsheeteditor/mobile/src/store/chartSettings.js +++ b/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'}, diff --git a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js index 6addcb154..a5d710292 100644 --- a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js +++ b/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) { diff --git a/apps/spreadsheeteditor/mobile/src/store/functions.js b/apps/spreadsheeteditor/mobile/src/store/functions.js index b719d5583..7c5b90a6d 100644 --- a/apps/spreadsheeteditor/mobile/src/store/functions.js +++ b/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 = {}; diff --git a/apps/spreadsheeteditor/mobile/src/store/palette.js b/apps/spreadsheeteditor/mobile/src/store/palette.js index 01ec9aa24..0633a3140 100644 --- a/apps/spreadsheeteditor/mobile/src/store/palette.js +++ b/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; } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js b/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js index 7a4ea1929..f9cdad438 100644 --- a/apps/spreadsheeteditor/mobile/src/store/shapeSettings.js +++ b/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 { if ( model.active ) diff --git a/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js b/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js index c1c4b27f6..406bda2ec 100644 --- a/apps/spreadsheeteditor/mobile/src/store/spreadsheetInfo.js +++ b/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; } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js b/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js index f466f3c6d..9d2757b44 100644 --- a/apps/spreadsheeteditor/mobile/src/store/spreadsheetSettings.js +++ b/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; } diff --git a/apps/spreadsheeteditor/mobile/src/store/textSettings.js b/apps/spreadsheeteditor/mobile/src/store/textSettings.js index 674239912..38dc619da 100644 --- a/apps/spreadsheeteditor/mobile/src/store/textSettings.js +++ b/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; } } \ No newline at end of file