[SSE] Fix Bug 53055

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

@@ -1,4 +1,4 @@
-import React, {Fragment, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {observer, inject} from "mobx-react";
 import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, ListButton} from 'framework7-react';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@@ -208,21 +208,25 @@ const PageTransition = props => {
     const storeFocusObjects = props.storeFocusObjects;
     const transitionObj = storeFocusObjects.slideObject.get_transition();
 
-    const [_effect, setEffect] = useState(transitionObj.get_TransitionType());
-    const valueEffectTypes = fillEffectTypes(_effect);
-    const [type, setType] = useState(valueEffectTypes);
-
     let _effectDelay = transitionObj.get_SlideAdvanceDuration();
 
     const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
     const isDelay = transitionObj.get_SlideAdvanceAfter();
     const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick();
+
+    const _effect = transitionObj.get_TransitionType();
     const nameEffect = getEffectName(_effect);
+    if(_effect != Asc.c_oAscSlideTransitionTypes.None) fillEffectTypes(_effect);
 
     const _effectType = transitionObj.get_TransitionOption();
     const nameEffectType = getEffectTypeName(_effectType);
+
     const _effectDuration = transitionObj.get_TransitionDuration();
 
+    useEffect(() => {
+        changeRange((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
+    }, [_effectDelay])
+
     return (
         <Page className="slide-transition">
             <Navbar title={t('View.Edit.textTransitions')} backLink={_t.textBack}>
@@ -240,8 +244,6 @@ const PageTransition = props => {
                     onEffectClick: props.onEffectClick,
                     fillEffectTypes,
                     _effect,
-                    setEffect,
-                    setType
                 }}></ListItem>
                 <ListItem link="/type/" title={_t.textType} 
                     after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''} 
@@ -249,8 +251,7 @@ const PageTransition = props => {
                         _arrCurrentEffectTypes, 
                         onEffectTypeClick: props.onEffectTypeClick,
                         _effect,
-                        type,
+                        _effectType,
-                        setType
                     }}>
                 </ListItem>
                 <ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
@@ -312,8 +313,7 @@ const PageTransition = props => {
 const PageEffect = props => {
     const { t } = useTranslation();
     const _t = t("View.Edit", { returnObjects: true });
-    const _effect = props._effect;
+    const [currentEffect, setEffect] = useState(props._effect);
-    const [currentEffect, setEffect] = useState(_effect);
     const _arrEffect = props._arrEffect;
 
     return (
@@ -334,9 +334,7 @@ const PageEffect = props => {
                             <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value} 
                                 checked={elem.value === currentEffect} onChange={() => {
                                     setEffect(elem.value);
-                                    props.setEffect(elem.value);
                                     let valueEffectTypes = props.fillEffectTypes(elem.value);
-                                    props.setType(valueEffectTypes);
                                     props.onEffectClick(elem.value, valueEffectTypes);
                                 }}></ListItem>
                         )
@@ -351,9 +349,7 @@ const PageType= props => {
     const { t } = useTranslation();
     const _t = t("View.Edit", { returnObjects: true });
     const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
-    const _effect = props._effect;
+    const [currentType, setType] = useState(props._effectType);
-    const type = props.type;
-    const [currentType, setType] = useState(type);
 
     return (
         <Page className="style-type">
@@ -373,8 +369,7 @@ const PageType= props => {
                             <ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
                                 checked={elem.value === currentType} onChange={() => {
                                     setType(elem.value);
-                                    props.setType(elem.value);
+                                    props.onEffectTypeClick(elem.value, props._effect);
-                                    props.onEffectTypeClick(elem.value, _effect);
                                 }}>
                             </ListItem>
                         )