Merge branch 'feature/mobile-apps-on-reactjs-pe' into feature/mobile-apps-on-reactjs

apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx

@@ -67,7 +67,7 @@ class EditLinkController extends Component {
                     let mask = "ppaction://hlinksldjumpslide",
                         indSlide = url.indexOf(mask);
                     if (0 == indSlide) {
-                        slideNum = parseInt(url.substring(mask.length));
+                        this.slideNum = parseInt(url.substring(mask.length));
                         if (slideNum < 0) this.slideNum = 0;
                         if (slideNum >= slidesCount) this.slideNum = slidesCount - 1;
                     } else this.slideNum = 0;
@@ -121,7 +121,7 @@ class EditLinkController extends Component {
                     break;
                 case 1:
                     url = url + "showjump?jump=previousslide";
-                    slidetip = _t.textPrevSlide;
+                    slidetip = _t.textPreviousSlide;
                     break;
                 case 2:
                     url = url + "showjump?jump=firstslide";
@@ -137,12 +137,12 @@ class EditLinkController extends Component {
                     break;
             }
             props.put_Value(url);
-            props.put_ToolTip(!tip ? slidetip : tip);
+            props.put_ToolTip(tip === '' ? slidetip : tip);
             def_display = slidetip;
         }
 
         if (!linkInfo.displayDisabled) {
-            props.put_Text(!display ? def_display : display);
+            props.put_Text(display === '' ? def_display : display);
         } else
             props.put_Text(null);
         

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

@@ -1,4 +1,4 @@
-import {makeObservable, action, observable} from 'mobx';
+import {action, observable, makeObservable} from 'mobx';
 
 export class storeAppOptions {
     constructor() {
@@ -11,6 +11,7 @@ export class storeAppOptions {
 
     isEdit = false;
     config = {};
+
     setConfigOptions (config) {
         this.config = config;
         this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);
@@ -33,6 +34,7 @@ export class storeAppOptions {
         this.canBack = this.canBackToFolder === true;
         this.canPlugins = false;
     }
+
     setPermissionOptions (document, licType, params, permissions) {
         this.review = (permissions.review === undefined) ? (permissions.edit !== false) : permissions.review;
         this.canAnalytics = params.asc_getIsAnalyticsEnable();

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

@@ -1,20 +1,30 @@
-import {action, observable} from 'mobx';
+import {action, observable, makeObservable} from 'mobx';
 
 export class storeApplicationSettings {
-   
+    constructor() {
-    @observable unitMeasurement = 1;
+        makeObservable(this, {
-    @observable isSpellChecking = true;
+            unitMeasurement: observable,
-    @observable macrosMode = 0;
+            isSpellChecking: observable,
+            macrosMode: observable,
+            changeUnitMeasurement: action,
+            changeSpellCheck: action,
+            changeMacrosSettings: action
+        });
+    }
+
+    unitMeasurement = 1;
+    isSpellChecking = true;
+    macrosMode = 0;
     
-    @action changeUnitMeasurement(value) {
+    changeUnitMeasurement(value) {
         this.unitMeasurement = +value;
     }
 
-    @action changeSpellCheck(value) {
+    changeSpellCheck(value) {
         this.isSpellChecking = value;
     }
 
-    @action changeMacrosSettings(value) {
+    changeMacrosSettings(value) {
         this.macrosMode = +value;
     }
 }

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

@@ -1,20 +1,35 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
 
 export class storeChartSettings {
+    constructor() {
+        makeObservable(this, {
+            chartStyles: observable,
+            fillColor: observable,
+            borderColor: observable,
+            clearChartStyles: action,
+            updateChartStyles: action,
+            styles: computed,
+            types: computed,
+            setFillColor: action,
+            getFillColor: action,
+            setBorderColor: action,
+            initBorderColor: action
+        });
+    }
     
     // Style
     
-    @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
@@ -32,7 +47,7 @@ export class storeChartSettings {
         return styles;
     }
 
-    @computed get types () {
+    get types () {
         const types = [
             { type: Asc.c_oAscChartTypeSettings.barNormal,               thumb: 'chart-03.png'},
             { type: Asc.c_oAscChartTypeSettings.barStacked,              thumb: 'chart-02.png'},
@@ -75,7 +90,7 @@ export class storeChartSettings {
 
     // Fill Color
 
-    @observable fillColor = undefined;
+    fillColor = undefined;
 
     setFillColor (color) {
         this.fillColor = color;
@@ -104,7 +119,7 @@ export class storeChartSettings {
 
     // Border size and border color
 
-    @observable borderColor;
+    borderColor;
 
     setBorderColor (color) {
         this.borderColor = color;

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

@@ -1,13 +1,30 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
 
 export class storeFocusObjects {
-    @observable _focusObjects = [];
+    constructor() {
+        makeObservable(this, {
+            _focusObjects: observable,
+            resetFocusObjects: action,
+            settings: computed,
+            slideObject: computed,
+            paragraphObject: computed,
+            paragraphLocked: computed,
+            shapeObject: computed,
+            imageObject: computed,
+            tableObject: computed,
+            isTableInStack: computed,
+            chartObject: computed,
+            linkObject: computed
+        });
+    }
 
-    @action resetFocusObjects(objects) {
+    _focusObjects = [];
+
+    resetFocusObjects(objects) {
         this._focusObjects = objects;
     }
 
-    @computed get settings() {
+    get settings() {
         const _settings = [];
         let no_text = true;
         for (let object of this._focusObjects) {
@@ -53,7 +70,7 @@ export class storeFocusObjects {
         return resultArr;
     }
 
-    @computed get slideObject() {
+    get slideObject() {
         const slides = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Slide) {
@@ -68,7 +85,7 @@ export class storeFocusObjects {
         }
     }
 
-    @computed get paragraphObject() {
+    get paragraphObject() {
         const paragraphs = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
@@ -83,7 +100,7 @@ export class storeFocusObjects {
         }
     }
 
-    @computed get paragraphLocked() {
+    get paragraphLocked() {
         let _paragraphLocked = false;
         for (let object of this._focusObjects) {
             if (Asc.c_oAscTypeSelectElement.Paragraph == object.get_ObjectType()) {
@@ -93,7 +110,7 @@ export class storeFocusObjects {
         return _paragraphLocked;
     }
 
-    @computed get shapeObject() {
+    get shapeObject() {
         const shapes = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Shape) {
@@ -108,7 +125,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 && object.get_ObjectValue()) {
@@ -123,7 +140,7 @@ export class storeFocusObjects {
         }
     }
 
-    @computed get tableObject() {
+    get tableObject() {
         const tables = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
@@ -138,7 +155,7 @@ export class storeFocusObjects {
         }
     }
 
-    @computed get isTableInStack() {
+    get isTableInStack() {
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
                 return true;
@@ -147,7 +164,7 @@ export class storeFocusObjects {
         return false;
     }
 
-    @computed get chartObject() {
+    get chartObject() {
         const charts = [];
         
         for (let object of this._focusObjects) {
@@ -164,7 +181,7 @@ export class storeFocusObjects {
         }
     }
 
-    @computed get linkObject() {
+    get linkObject() {
         const links = [];
         for (let object of this._focusObjects) {
             if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {

apps/presentationeditor/mobile/src/store/linkSettings.js

@@ -1,8 +1,16 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, makeObservable} from 'mobx';
 
 export class storeLinkSettings {
-    @observable canAddLink;
+    constructor() {
-    @action canAddHyperlink (value) {
+        makeObservable(this, {
+            canAddLink: observable,
+            canAddHyperlink: action
+        });
+    }
+
+    canAddLink;
+
+    canAddHyperlink (value) {
         this.canAddLink = value;
     }
 }

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

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

apps/presentationeditor/mobile/src/store/presentationInfo.js

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

apps/presentationeditor/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 = [
@@ -140,7 +150,7 @@ export class storeShapeSettings {
 
     // Fill Color
 
-    @observable fillColor = undefined;
+    fillColor = undefined;
 
     setFillColor (color) {
         this.fillColor = color;
@@ -169,7 +179,7 @@ export class storeShapeSettings {
 
     // Border size and color
 
-    @observable borderColorView;
+    borderColorView;
 
     setBorderColor (color) {
         this.borderColorView = color;

apps/presentationeditor/mobile/src/store/slideSettings.js

@@ -1,17 +1,30 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
 
 export class storeSlideSettings {
+    constructor() {
+        makeObservable(this, {
+            arrayLayouts: observable,
+            slideLayoutIndex: observable,
+            fillColor: observable,
+            arrayThemes: observable,
+            slideThemeIndex: observable,
+            getFillColor: action,
+            changeFillColor: action,
+            addArrayLayouts: action,
+            slideLayouts: computed,
+            changeSlideLayoutIndex: action,
+            addArrayThemes: action,
+            changeSlideThemeIndex: action,
+        });
+    }
+
+    arrayLayouts;
+    slideLayoutIndex = -1;
+    fillColor = undefined;
+    arrayThemes;
+    slideThemeIndex;
     
-    @observable arrayLayouts;
+    getFillColor (slideObject) {
-    @observable slideLayoutIndex = -1;
-    @observable fillColor = undefined;
-    @observable arrayThemes;
-    @observable slideThemeIndex;
-    @observable effect;
-    @observable type;
-    
-    @action getFillColor (slideObject) {
-    
         let color = 'transparent';
         let fill = slideObject.get_background(),
             fillType = fill.get_type();
@@ -34,14 +47,15 @@ export class storeSlideSettings {
         return color;
     }
 
-    @action changeFillColor (color) {
+    changeFillColor (color) {
         this.fillColor = color;
     }
 
-    @action addArrayLayouts(array) {
+    addArrayLayouts(array) {
         this.arrayLayouts = array;
     }
-    @computed get slideLayouts () {
+
+    get slideLayouts () {
         const layouts = [];
         const columns = 2;
         let row = -1;
@@ -60,23 +74,15 @@ export class storeSlideSettings {
         return layouts;
     }
 
-    @action changeSlideLayoutIndex(index) {
+    changeSlideLayoutIndex(index) {
         this.slideLayoutIndex = index;
     }
 
-    @action addArrayThemes(array) {
+    addArrayThemes(array) {
         this.arrayThemes = array;
     }
 
-    @action changeSlideThemeIndex(index) {
+    changeSlideThemeIndex(index) {
         this.slideThemeIndex = index;
     }
-
-    @action changeEffect(value) {
-        this.effect = value;
-    }
-
-    @action changeType(value) {
-        this.type = value;
-    }
 }

apps/presentationeditor/mobile/src/store/tableSettings.js

@@ -1,15 +1,27 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
 import {f7} from 'framework7-react';
 
 export class storeTableSettings {
+    constructor() {
+        makeObservable(this, {
+            _templates: observable,
+            cellBorders: observable,
+            cellBorderWidth: observable,
+            cellBorderColor: observable,
+            initTableTemplates: action,
+            styles: computed,
+            updateCellBorderWidth: action,
+            updateCellBorderColor: action,
+        });
+    }
 
-    @observable _templates = [];
+    _templates = [];
 
-    @action initTableTemplates (templates) {
+    initTableTemplates (templates) {
         this._templates = templates;
     }
 
-    @computed get styles () {
+    get styles () {
         let styles = [];
         for (let template of this._templates) {
             styles.push({
@@ -52,9 +64,9 @@ export class storeTableSettings {
 
     // Border style
 
-    @observable cellBorders;
+    cellBorders;
-    @observable cellBorderWidth = 0.5;
+    cellBorderWidth = 0.5;
-    @observable cellBorderColor = '000000';
+    cellBorderColor = '000000';
 
     borderSizeTransform () {
         const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];

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

@@ -1,27 +1,69 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable, computed, makeObservable} from 'mobx';
 
 export class storeTextSettings {
+    constructor() {
+        makeObservable(this, {
+            fontsArray: observable,
+            fontName: observable,
+            fontSize: observable,
+            isBold: observable,
+            isItalic: observable,
+            isUnderline: observable,
+            isStrikethrough: observable,
+            typeBaseline: observable,
+            listType: observable,
+            typeBullets: observable,
+            typeNumbers: observable,
+            paragraphAlign: observable,
+            paragraphValign: observable,
+            canIncreaseIndent: observable,
+            canDecreaseIndent: observable,
+            textColor: observable,
+            customTextColors: observable,
+            lineSpacing: observable,
+            initEditorFonts: action,
+            resetFontName: action,
+            resetFontSize: action,
+            resetIsBold: action,
+            resetIsItalic: action,
+            resetIsUnderline: action,
+            resetIsStrikeout: action,
+            resetIncreaseIndent: action,
+            resetDecreaseIndent: action,
+            resetTypeBaseline: action,
+            isSuperscript: computed,
+            isSubscript: computed,
+            resetListType: action,
+            resetBullets: action,
+            resetNumbers: action,
+            resetParagraphAlign: action,
+            resetParagraphValign: action,
+            resetTextColor: action,
+            changeCustomTextColors: action,
+            resetLineSpacing: action
+        });
+    }
 
-    @observable fontsArray = [];
+    fontsArray = [];
-    @observable fontName = '';
+    fontName = '';
-    @observable fontSize = undefined;
+    fontSize = undefined;
-    @observable isBold = false;
+    isBold = false;
-    @observable isItalic = false;
+    isItalic = false;
-    @observable isUnderline = false;
+    isUnderline = false;
-    @observable isStrikethrough = false;
+    isStrikethrough = false;
-    @observable typeBaseline = undefined;
+    typeBaseline = undefined;
-    @observable listType = undefined;
+    listType = undefined;
-    @observable typeBullets = undefined;
+    typeBullets = undefined;
-    @observable typeNumbers = undefined;
+    typeNumbers = undefined;
-    @observable paragraphAlign = undefined;
+    paragraphAlign = undefined;
-    @observable paragraphValign = undefined;
+    paragraphValign = undefined;
-    @observable canIncreaseIndent = undefined;
+    canIncreaseIndent = undefined;
-    @observable canDecreaseIndent = undefined;
+    canDecreaseIndent = undefined;
-    @observable textColor = undefined;
+    textColor = undefined;
-    @observable customTextColors = [];
+    customTextColors = [];
-    @observable lineSpacing = undefined;
+    lineSpacing = undefined;
 
-    @action initEditorFonts (fonts, select) {
+    initEditorFonts (fonts, select) {
         let array = [];
         for (let font of fonts) {
             let fontId = font.asc_getFontId();
@@ -35,59 +77,71 @@ export class storeTextSettings {
         }
         this.fontsArray = array;
     }
-    @action resetFontName (font) {
+
+    resetFontName (font) {
         let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
         this.fontName = name;
     }
-    @action resetFontSize (size) {
+
+    resetFontSize (size) {
         this.fontSize = size;
     }
-    @action resetIsBold (isBold) {
+
+    resetIsBold (isBold) {
         this.isBold = isBold;
     }
-    @action resetIsItalic (isItalic) {
+
+    resetIsItalic (isItalic) {
         this.isItalic = isItalic;
     }
-    @action resetIsUnderline (isUnderline) {
+
+    resetIsUnderline (isUnderline) {
         this.isUnderline = isUnderline;
     }
-    @action resetIsStrikeout (isStrikethrough) {
+
+    resetIsStrikeout (isStrikethrough) {
         this.isStrikethrough = isStrikethrough;
     }
 
     // Indent 
 
-    @action resetIncreaseIndent(value) {
+    resetIncreaseIndent(value) {
         this.canIncreaseIndent = value;
     }
 
-    @action resetDecreaseIndent(value) {
+    resetDecreaseIndent(value) {
         this.canDecreaseIndent = value;
     }
 
     // vertical align
-    @action resetTypeBaseline (typeBaseline) {
+
+    resetTypeBaseline (typeBaseline) {
         this.typeBaseline = typeBaseline;
     }
-    @computed get isSuperscript() {
+
+    get isSuperscript() {
         return (this.typeBaseline === 1);
     }
-    @computed get isSubscript() {
+
+    get isSubscript() {
         return (this.typeBaseline === 2);
     }
 
     // bullets
-    @action resetListType (type) {
+
+    resetListType (type) {
         this.listType = type;
     }
-    @action resetBullets (type) {
+
+    resetBullets (type) {
         this.typeBullets = type;
     }
-    @action resetNumbers (type) {
+
+    resetNumbers (type) {
         this.typeNumbers = type;
     }
 
-    @action resetParagraphAlign (align) {
+    resetParagraphAlign (align) {
         let value;
         switch (align) {
             case 0:
@@ -106,7 +160,7 @@ export class storeTextSettings {
         this.paragraphAlign = value;
     }
 
-    @action resetParagraphValign (align) {
+    resetParagraphValign (align) {
         let value;
         switch (align) {
             case 0:
@@ -122,7 +176,7 @@ export class storeTextSettings {
         this.paragraphValign = value;
     }
 
-    @action resetTextColor (color) {
+    resetTextColor (color) {
         let value;
         if (color) {
             if (color.get_auto()) {
@@ -141,11 +195,11 @@ export class storeTextSettings {
         this.textColor = value;
     }
 
-    @action changeCustomTextColors (colors) {
+    changeCustomTextColors (colors) {
         this.customTextColors = colors;
     }
 
-    @action resetLineSpacing (vc) {
+    resetLineSpacing (vc) {
         let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
         this.lineSpacing = line;
     }

apps/presentationeditor/mobile/src/view/edit/EditLink.jsx

@@ -13,8 +13,8 @@ const PageTypeLink = props => {
         <Page>
             <Navbar title={_t.textLinkType} backLink={_t.textBack}/>
             <List>
-                <ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1); props.initLink();}}></ListItem>
+                <ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1);}}></ListItem>
-                <ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0); props.initLink();}}></ListItem>
+                <ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0);}}></ListItem>
             </List>
         </Page>
     )
@@ -32,7 +32,7 @@ const PageLinkTo = props => {
         props.changeTo(type);
     };
 
-    const [stateNumberTo, setNumberTo] = useState(0);
+    const [stateNumberTo, setNumberTo] = useState(props.numberTo);
 
     const changeNumber = (curNumber, isDecrement) => {
         setTypeTo(4);
@@ -139,6 +139,7 @@ const PageLink = props => {
                     <ListItem link={'/edit-link-to/'} title={_t.textLinkTo} after={displayTo} routeProps={{
                         changeTo: changeTo,
                         curTo: linkTo,
+                        numberTo: numberTo,
                         initLink: props.initLink,
                         slidesCount: props.slidesCount
                     }}/>

apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx

@@ -212,20 +212,12 @@ const PageTransition = props => {
     };
 
     const storeFocusObjects = props.storeFocusObjects;
-    const storeSlideSettings = props.storeSlideSettings;
     const transitionObj = storeFocusObjects.slideObject.get_transition();
 
-    if(!storeSlideSettings.effect) {
+    const [_effect, setEffect] = useState(transitionObj.get_TransitionType());
-        storeSlideSettings.changeEffect(transitionObj.get_TransitionType());
-    }
-
-    const _effect = storeSlideSettings.effect;
     const valueEffectTypes = fillEffectTypes(_effect);
+    const [type, setType] = useState(valueEffectTypes);
 
-    if(!storeSlideSettings.type) {
-        storeSlideSettings.changeType(valueEffectTypes);
-    }
-    
     let _effectDelay = transitionObj.get_SlideAdvanceDuration();
 
     const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
@@ -248,13 +240,19 @@ const PageTransition = props => {
                 <ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
                     _arrEffect,
                     onEffectClick: props.onEffectClick,
-                    fillEffectTypes
+                    fillEffectTypes,
+                    _effect,
+                    setEffect,
+                    setType
                 }}></ListItem>
                 <ListItem link="/type/" title={_t.textType} 
                     after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''} 
                     disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{
                         _arrCurrentEffectTypes, 
-                        onEffectTypeClick: props.onEffectTypeClick
+                        onEffectTypeClick: props.onEffectTypeClick,
+                        _effect,
+                        type,
+                        setType
                     }}>
                 </ListItem>
                 <ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
@@ -285,11 +283,11 @@ const PageTransition = props => {
             <List>
                 <ListItem>
                     <span>{_t.textStartOnClick}</span>
-                    <Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
+                    <Toggle checked={isStartOnClick} onChange={() => {props.onStartClick(!isStartOnClick)}} />
                 </ListItem>
                 <ListItem>
                     <span>{_t.textDelay}</span>
-                    <Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
+                    <Toggle checked={isDelay} onChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
                 </ListItem>
                 <ListItem>
                     <div slot='inner' style={{width: '100%'}}>
@@ -316,8 +314,8 @@ const PageTransition = props => {
 const PageEffect = props => {
     const { t } = useTranslation();
     const _t = t("View.Edit", { returnObjects: true });
-    const storeSlideSettings = props.storeSlideSettings;
+    const _effect = props._effect;
-    const _effect = storeSlideSettings.effect;
+    const [currentEffect, setEffect] = useState(_effect);
     const _arrEffect = props._arrEffect;
 
     return (
@@ -328,10 +326,11 @@ const PageEffect = props => {
                     {_arrEffect.map((elem, index) => {
                         return (
                             <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value} 
-                                checked={elem.value === _effect} onChange={() => {
+                                checked={elem.value === currentEffect} onChange={() => {
-                                    storeSlideSettings.changeEffect(elem.value);
+                                    setEffect(elem.value);
+                                    props.setEffect(elem.value);
                                     let valueEffectTypes = props.fillEffectTypes(elem.value);
-                                    storeSlideSettings.changeType(valueEffectTypes);
+                                    props.setType(valueEffectTypes);
                                     props.onEffectClick(elem.value, valueEffectTypes);
                                 }}></ListItem>
                         )
@@ -346,9 +345,9 @@ const PageType= props => {
     const { t } = useTranslation();
     const _t = t("View.Edit", { returnObjects: true });
     const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
-    const storeSlideSettings = props.storeSlideSettings;
+    const _effect = props._effect;
-    const _effect = storeSlideSettings.effect;
+    const type = props.type;
-    const type = storeSlideSettings.type;
+    const [currentType, setType] = useState(type);
 
     return (
         <Page className="style-type">
@@ -362,8 +361,9 @@ const PageType= props => {
                     {_arrCurrentEffectTypes.map((elem, index) => {
                         return (
                             <ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
-                                checked={elem.value === type} onChange={() => {
+                                checked={elem.value === currentType} onChange={() => {
-                                    storeSlideSettings.changeType(elem.value);
+                                    setType(elem.value);
+                                    props.setType(elem.value);
                                     props.onEffectTypeClick(elem.value, _effect);
                                 }}>
                             </ListItem>

apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 const PagePresentationSettings = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });
+    // props.initSlideSize();
     const storePresentationSettings = props.storePresentationSettings;
     const slideSizeArr = storePresentationSettings.slideSizes;
     const slideSizeIndex = storePresentationSettings.slideSizeIndex;