From 3bfca10bcd5ccb730d181336b24c556cbbb3bf3c Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Tue, 18 Oct 2022 21:51:12 +0400
Subject: [PATCH] [DE mobile] Correct creating searchbar

---
 apps/common/mobile/lib/view/Search.jsx         | 18 ++++++++++--------
 apps/documenteditor/mobile/src/app.js          |  8 ++++----
 .../mobile/src/controller/Search.jsx           | 12 ++++++------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx
index a5a66cfb2..9b17fd19d 100644
--- a/apps/common/mobile/lib/view/Search.jsx
+++ b/apps/common/mobile/lib/view/Search.jsx
@@ -1,12 +1,13 @@
 
 import React, { Component } from 'react';
-import { Searchbar, Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link } from 'framework7-react';
+import { Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link, f7 } from 'framework7-react';
 import { Toggle } from 'framework7-react';
-import { f7 } from 'framework7-react';
-import { Dom7 } from 'framework7';
+// import { f7 } from 'framework7-react/shared/f7.js';
+// import { Dom7 } from 'framework7';
 import { Device } from '../../../../common/mobile/utils/device';
 import { observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
+import Searchbar from 'framework7/components/searchbar'
 
 const searchOptions = observable({
     usereplace: false,
@@ -105,12 +106,13 @@ class SearchView extends Component {
         $editor.on('pointerdown', this.onEditorTouchStart);
         $editor.on('pointerup',   this.onEditorTouchEnd);
 
-        if( !this.searchbar ) {
-            this.searchbar = f7.searchbar.get('.searchbar');
-        }
+        // if(!this.searchbar) {
+        //     // f7.searchbar.get('.searchbar');
+        //     // this.searchbar = Searchbar.get('.searchbar');
+        // }
 
-        if( !this.searchbar ) {
-            this.searchbar = f7.searchbar.create({
+        if(!this.searchbar) {
+            this.searchbar = Searchbar.create({
                 el: '.searchbar',
                 customSearch: true,
                 expandable: true,
diff --git a/apps/documenteditor/mobile/src/app.js b/apps/documenteditor/mobile/src/app.js
index 9a7e2378d..52d790bfd 100644
--- a/apps/documenteditor/mobile/src/app.js
+++ b/apps/documenteditor/mobile/src/app.js
@@ -4,8 +4,8 @@ import { createRoot } from 'react-dom/client';
 
 // Import Framework7
 // framework7/lite-bundle
-import Framework7 from 'framework7';
-import { Dom7 } from 'framework7';
+import Framework7 from 'framework7/lite';
+import { Dom7 } from 'framework7/lite';
 window.$$ = Dom7;
 
 // Import Framework7-React Plugin
@@ -23,9 +23,9 @@ import('./less/app.less');
 
 // Import App Component
 
-import App from './view/app.jsx';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './lib/i18n.js';
+import App from './view/app.jsx';
 
 import { Provider } from 'mobx-react';
 import { stores } from './store/mainStore.js';
@@ -35,7 +35,7 @@ const container = document.getElementById('app');
 const root = createRoot(container); 
 
 // Init F7 React Plugin
-Framework7.use(Framework7React)
+Framework7.use(Framework7React);
 
 // Mount React App
 root.render(
diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/documenteditor/mobile/src/controller/Search.jsx
index a337ac6a4..ec53012a2 100644
--- a/apps/documenteditor/mobile/src/controller/Search.jsx
+++ b/apps/documenteditor/mobile/src/controller/Search.jsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
-import { List, ListItem, Toggle, Page, Navbar, NavRight, Link } from 'framework7-react';
+import { List, ListItem, Toggle, Page, Navbar, NavRight, Link, f7 } from 'framework7-react';
 import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
-import { f7 } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
 import { observer, inject } from "mobx-react";
+// import { f7 } from 'framework7-react/shared/f7.js';
 
 class SearchSettings extends SearchSettingsView {
     constructor(props) {
@@ -94,14 +94,14 @@ class DESearchView extends SearchView {
 const Search = withTranslation()(props => {
     const { t } = props;
     const _t = t('Settings', {returnObjects: true});
-
+    // f7.searchbar.get('.searchbar')?.enabled &&
     useEffect(() => {
-        if (f7.searchbar.get('.searchbar')?.enabled && Device.phone) {
+        if(Device.phone) {
             const api = Common.EditorApi.get();
             $$('.searchbar-input').focus();
-            api.asc_enableKeyEvents(false);
+            // api.asc_enableKeyEvents(false);
         }
-    });
+    }, []);
 
     const onSearchQuery = params => {
         const api = Common.EditorApi.get();