From d2bb8869ba1909fc178deccbea072cf1913485a2 Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Mon, 31 Oct 2022 18:37:09 +0400
Subject: [PATCH] [DE mobile] Correct the display and hide of the notification
 window

---
 apps/documenteditor/mobile/src/page/main.jsx  | 53 +++++++++++--------
 .../mobile/src/view/Toolbar.jsx               |  6 +--
 .../mobile/src/view/settings/Settings.jsx     |  6 +--
 3 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index d2b849bcc..a461573c0 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@@ -28,10 +28,10 @@ class MainPage extends Component {
             navigationVisible: false,
             addLinkSettingsVisible: false,
             editLinkSettingsVisible: false,
-            snackbarVisible: false,
+            isModeChanged: false,
+            isCurrentPageChanged: false,
             countPages: 0,
-            currentPageNumber: 0,
-            isCurrentPageChanged: false
+            currentPageNumber: 0
         };
     }
 
@@ -63,9 +63,9 @@ class MainPage extends Component {
             } else if( opts === 'edit-link') {
                 this.state.editLinkSettingsVisible && (opened = true);
                 newState.editLinkSettingsVisible = true;
-            } else if( opts === 'snackbar') {
-                this.state.snackbarVisible && (opened = true);
-                newState.snackbarVisible = true;
+            } else if( opts === 'change-mode') {
+                this.state.isModeChanged && (opened = true);
+                newState.isModeChanged = true;
             }
 
             for (let key in this.state) {
@@ -89,22 +89,24 @@ class MainPage extends Component {
     handleOptionsViewClosed = opts => {
         setTimeout(() => {
             this.setState(state => {
-                if ( opts == 'edit' )
+                if ( opts === 'edit' )
                     return {editOptionsVisible: false};
-                else if ( opts == 'add' )
+                else if ( opts === 'add' )
                     return {addOptionsVisible: false, addShowOptions: null};
-                else if ( opts == 'settings' )
+                else if ( opts === 'settings' )
                     return {settingsVisible: false};
-                else if ( opts == 'coauth' )
+                else if ( opts === 'coauth' )
                     return {collaborationVisible: false};
-                else if( opts == 'navigation')
+                else if( opts === 'navigation')
                     return {navigationVisible: false};
                 else if ( opts === 'add-link') 
                     return {addLinkSettingsVisible: false};
                 else if( opts === 'edit-link') 
                     return {editLinkSettingsVisible: false};
-                else if( opts == 'snackbar')
-                    return {snackbarVisible: false}
+                else if( opts === 'change-mode')
+                    return {isModeChanged: false}
+                else if( opts === 'change-page')
+                    return {isCurrentPageChanged: false}
             });
             if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
                 f7.navbar.show('.main-navbar');
@@ -132,11 +134,11 @@ class MainPage extends Component {
                     })
                 }
             });
-            api.asc_registerCallback('asc_onCountPages', count => {
-                this.setState({
-                    countPages: count
-                })
-            });
+            // api.asc_registerCallback('asc_onCountPages', count => {
+            //     this.setState({
+            //         countPages: count
+            //     })
+            // });
         });
     }
 
@@ -215,7 +217,7 @@ class MainPage extends Component {
                 {/* {
                   Device.phone ? null : <SearchSettings />
               } */}
-                <SearchSettings useSuspense={false}/>
+                <SearchSettings useSuspense={false} />
                 {
                     !this.state.editOptionsVisible ? null :
                         <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')}/>
@@ -248,11 +250,18 @@ class MainPage extends Component {
                 }
                 {
                     <CSSTransition
-                        in={this.state.snackbarVisible}
-                        timeout={500}
+                        in={this.state.isModeChanged}
+                        timeout={1500}
                         classNames="snackbar"
                         mountOnEnter
                         unmountOnExit
+                        onEntered={(node, isAppearing) => {
+                            if(!isAppearing) {
+                                this.setState({
+                                    isModeChanged: false
+                                });
+                            }
+                        }}
                     >
                         <Snackbar
                             text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} />
@@ -261,7 +270,7 @@ class MainPage extends Component {
                 {
                     <CSSTransition
                         in={this.state.isCurrentPageChanged}
-                        timeout={500}
+                        timeout={1500}
                         classNames="snackbar"
                         mountOnEnter
                         unmountOnExit
diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx
index 0e8025401..b0f6d22d1 100644
--- a/apps/documenteditor/mobile/src/view/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx
@@ -48,10 +48,8 @@ const ToolbarView = props => {
                 })}
                 {(isViewer || !Device.phone) && isAvailableExt && !props.disabledControls && <Link icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={async e => {
                     await props.changeMobileView();
-                    await props.openOptions('snackbar');
-                    setTimeout(() => {
-                        props.closeOptions('snackbar');
-                    },  1500);
+                    await props.closeOptions('change-page');
+                    await props.openOptions('change-mode');
                 }}></Link>}
                 {(props.showEditDocument && !isViewer) &&
                     <Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
index 32ed242c6..76943e9fa 100644
--- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
@@ -174,10 +174,8 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
                             <Toggle checked={isMobileView} onToggleChange={async () => {
                                 await props.onChangeMobileView();
                                 await closeModal();
-                                await props.openOptions('snackbar');
-                                setTimeout(() => {
-                                    props.closeOptions('snackbar');
-                                },  1500);
+                                await props.closeOptions('change-page');
+                                await props.openOptions('change-mode');
                             }} />
                         </ListItem>
                     }