Refactor PopupMenu and SearchBox components; remove console logs, enhance search state handling, and improve book selection logic

- Removed debug console logs from PopupMenu component.
- Updated SearchBox to handle navigation search state more effectively after search results are processed.
- Introduced handleIndexFilter method in SelectBook to streamline book selection based on search results.
- Adjusted state mapping in SelectBook index to include search-related props.
- Enhanced book location handling in CardList to include chapter information for PDF format.
- Added mouse leave event handling in NavigationPanel to manage search state.
- Cleaned up unnecessary console logs in SyncSetting component.
- Improved highlighter rendering logic in Viewer to accommodate PDF format and chapter indexing.
- Simplified conditionals in Reader component related to navigation locking.

src/components/popups/popupMenu/component.tsx

@@ -103,7 +103,6 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
         this.props.rendition.getPageSize().sectionWidth +
         this.props.rendition.getPageSize().gap;
     }
-    console.log("chapterDocIndex:", this.props.chapterDocIndex, posX, posY);
     if (
       this.props.currentBook.format === "PDF" &&
       this.props.readerMode === "scroll" &&
@@ -121,7 +120,6 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
     if (posY > this.props.rendition.getPageSize().height - 188) {
       posY = this.props.rendition.getPageSize().height - 188;
     }
-    console.log("posX, posY:", posX, posY);
     return { posX, posY } as any;
   }
 

src/components/searchBox/component.tsx

@@ -41,6 +41,7 @@ class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
     if (results) {
       this.props.handleSearchResults(results);
       this.props.handleSearch(true);
+      this.props.handleNavSearchState("done");
     }
   };
   handleKey = (event: any) => {
@@ -67,6 +68,7 @@ class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
     if (results) {
       this.props.handleSearchResults(results);
       this.props.handleSearch(true);
+      this.props.handleNavSearchState("done");
     }
   };
   search = async (q: string) => {
@@ -82,11 +84,13 @@ class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
         return item;
       })
     );
+    this.props.handleNavSearchState("done");
   };
 
   handleCancel = () => {
     if (this.props.isNavSearch) {
       this.props.handleSearchList(null);
+      this.props.handleNavSearchState("done");
     }
     this.props.handleSearch(false);
     (document.querySelector(".header-search-box") as HTMLInputElement).value =
@@ -105,8 +109,7 @@ class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
           }}
           onFocus={() => {
             this.setState({ isFocused: true });
-            this.props.mode === "nav" &&
-              this.props.handleNavSearchState("focused");
+            this.props.handleNavSearchState("focused");
           }}
           placeholder={
             this.props.isNavSearch || this.props.mode === "nav"
@@ -127,6 +130,7 @@ class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
               : {}
           }
           onCompositionStart={() => {
+            this.props.handleNavSearchState("focused");
             if (this.props.isNavLocked) {
               return;
             } else {

src/components/selectBook/component.tsx

@@ -64,6 +64,13 @@ class SelectBook extends React.Component<BookListProps, BookListState> {
     });
     return shelfItems;
   }
+  handleIndexFilter = (items: any, arr: number[]) => {
+    let itemArr: any[] = [];
+    arr.forEach((item) => {
+      items[item] && itemArr.push(items[item]);
+    });
+    return itemArr;
+  };
   render() {
     return (
       <div
@@ -93,15 +100,10 @@ class SelectBook extends React.Component<BookListProps, BookListState> {
                       this.props.selectedBooks.indexOf(item.key) > -1
                   ).length > 0
                 ) {
-                  ConfigService.setAllListConfig(
-                    this.props.books
-                      .filter(
-                        (item: BookModel) =>
-                          this.props.selectedBooks.indexOf(item.key) > -1
-                      )
-                      .map((item: BookModel) => item.key),
-                    "favoriteBooks"
-                  );
+                  this.props.selectedBooks.forEach((item) => {
+                    ConfigService.setListConfig(item, "favoriteBooks");
+                  });
+
                   this.props.handleSelectBook(!this.props.isSelectBook);
                   if (this.props.isSelectBook) {
                     this.props.handleSelectedBooks([]);
@@ -291,7 +293,14 @@ class SelectBook extends React.Component<BookListProps, BookListState> {
             <span
               className="book-manage-title select-book-action"
               onClick={() => {
-                if (
+                if (this.props.isSearch) {
+                  this.props.handleSelectedBooks(
+                    this.handleIndexFilter(
+                      this.props.books,
+                      this.props.searchResults
+                    ).map((item) => item.key)
+                  );
+                } else if (
                   this.props.selectedBooks.length ===
                   this.handleFilterShelfBook(this.props.books).length
                 ) {

src/components/selectBook/index.tsx

@@ -16,6 +16,8 @@ const mappropsToProps = (state: stateType) => {
     deletedBooks: state.manager.deletedBooks,
     selectedBooks: state.manager.selectedBooks,
     isCollapsed: state.sidebar.isCollapsed,
+    isSearch: state.manager.isSearch,
+    searchResults: state.manager.searchResults,
     shelfTitle: state.sidebar.shelfTitle,
     isSelectBook: state.manager.isSelectBook,
   };

src/components/selectBook/interface.tsx

@@ -6,7 +6,9 @@ export interface BookListProps extends RouteComponentProps<any> {
   notes: NoteModel[];
   shelfTitle: string;
   deletedBooks: BookModel[];
+  searchResults: number[];
   isSelectBook: boolean;
+  isSearch: boolean;
   isCollapsed: boolean;
   selectedBooks: string[];
   handleAddDialog: (isShow: boolean) => void;

src/containers/lists/cardList/component.tsx

@@ -55,6 +55,10 @@ class CardList extends React.Component<CardListProps, CardListStates> {
       bookLocation.cfi = note.cfi;
       bookLocation.chapterTitle = note.chapter;
     }
+    if (bookLocation.fingerprint) {
+      bookLocation.chapterDocIndex = bookLocation.page - 1 + "";
+      bookLocation.chapterHref = "title" + (bookLocation.page - 1);
+    }
     ConfigService.setObjectConfig(note.bookKey, bookLocation, "recordLocation");
 
     BookUtil.redirectBook(book);

src/containers/panels/navigationPanel/component.tsx

@@ -203,6 +203,12 @@ class NavigationPanel extends React.Component<
             ? ConfigService.getReaderConfig("textColor")
             : "",
         }}
+        onMouseLeave={(event) => {
+          if (this.state.searchState !== "done") {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }}
       >
         {this.state.searchState ? (
           <>

src/containers/settings/syncSetting/component.tsx

@@ -480,7 +480,6 @@ class SyncSetting extends React.Component<SettingInfoProps, SettingInfoState> {
                         let corsResult = await testCORS(
                           this.state.driveConfig.url
                         );
-                        console.log(corsResult, "sdf");
                         if (!corsResult) {
                           return;
                         }

src/containers/viewer/component.tsx

@@ -112,6 +112,19 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
         return item.chapterIndex === this.state.chapterDocIndex;
       }
     });
+    if (this.props.currentBook.format === "PDF") {
+      highlightersByChapter = highlightersByChapter.map((item: Note) => {
+        let cfi = JSON.parse(item.cfi);
+        if (cfi.fingerprint) {
+          item.chapterIndex = cfi.page - 1;
+          cfi.chapterDocIndex = cfi.page - 1 + "";
+          cfi.chapterHref = "title" + (cfi.page - 1);
+          item.cfi = JSON.stringify(cfi);
+        }
+
+        return item;
+      });
+    }
     await this.props.htmlBook.rendition.renderHighlighters(
       highlightersByChapter,
       this.handleNoteClick
@@ -126,9 +139,27 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
         if (item.bookKey !== this.props.currentBook.key) {
           return false;
         }
-
-        return item.chapterIndex === this.state.chapterDocIndex + 1;
+        let cfi = JSON.parse(item.cfi);
+        if (cfi.fingerprint) {
+          // pdf from 1.7.4 or older
+          return cfi.page === this.state.chapterDocIndex;
+        } else {
+          return item.chapterIndex === this.state.chapterDocIndex + 1;
+        }
       });
+      if (this.props.currentBook.format === "PDF") {
+        highlightersByChapter = highlightersByChapter.map((item: Note) => {
+          let cfi = JSON.parse(item.cfi);
+          if (cfi.fingerprint) {
+            item.chapterIndex = cfi.page - 1;
+            cfi.chapterDocIndex = cfi.page - 1 + "";
+            cfi.chapterHref = "title" + (cfi.page - 1);
+            item.cfi = JSON.stringify(cfi);
+          }
+
+          return item;
+        });
+      }
       await this.props.htmlBook.rendition.renderHighlighters(
         highlightersByChapter,
         this.handleNoteClick

src/pages/reader/component.tsx

@@ -138,8 +138,7 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
       case "left":
         if (
           this.props.isNavLocked ||
-          ConfigService.getReaderConfig("isTempLocked") === "yes" ||
-          this.props.isSearch
+          ConfigService.getReaderConfig("isTempLocked") === "yes"
         ) {
           break;
         } else {