From 7c1577505e734041136fdef630ef5f6ba84eff2a Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Wed, 11 Oct 2023 15:58:06 +0800
Subject: [PATCH 1/2] 00 search result support keyboard

---
 .../components/search/search-result-item.js   | 14 ++++++--
 frontend/src/components/search/search.js      | 33 ++++++++++++++++++-
 frontend/src/css/search.css                   |  4 +--
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/search/search-result-item.js b/frontend/src/components/search/search-result-item.js
index 200dcea2e11..e9c4f7a71bf 100644
--- a/frontend/src/components/search/search-result-item.js
+++ b/frontend/src/components/search/search-result-item.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
   item: PropTypes.object.isRequired,
   onItemClickHandler: PropTypes.func.isRequired,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  isHighlight: PropTypes.bool,
 };
 
 class SearchResultItem extends React.Component {
@@ -16,7 +20,6 @@ class SearchResultItem extends React.Component {
 
   render() {
     let item = this.props.item;
-    let className = item.link_content ? 'item-img' : 'lib-item-img';
     let folderIconUrl = item.link_content ? Utils.getFolderIconUrl(false, 192) : Utils.getDefaultLibIconUrl(true);
     let fileIconUrl = item.is_dir ? folderIconUrl : Utils.getFileIconUrl(item.name, 192);
 
@@ -25,8 +28,13 @@ class SearchResultItem extends React.Component {
     }
 
     return (
-      <li className="search-result-item" onClick={this.onClickHandler}>
-        <img className={className} src={fileIconUrl} alt="" />
+      <li
+        className={classnames('search-result-item', {'search-result-item-highlight': this.props.isHighlight })}
+        onClick={this.onClickHandler}
+        onMouseEnter={this.props.onMouseEnter}
+        onMouseLeave={this.props.onMouseLeave}
+      >
+        <img className={item.link_content ? 'item-img' : 'lib-item-img'} src={fileIconUrl} alt="" />
         <div className="item-content">
           <div className="item-name ellipsis">{item.name}</div>
           <div className="item-link ellipsis">{item.repo_name}/{item.link_content}</div>
diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index 785cade1894..19f6cff85e9 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -28,6 +28,7 @@ class Search extends Component {
       width: 'default',
       value: '',
       resultItems: [],
+      highlightIndex: 0,
       page: 0,
       isLoading: false,
       hasMore: true,
@@ -64,6 +65,26 @@ class Search extends Component {
       e.preventDefault();
       this.resetToDefault();
     }
+    else if (isHotkey('enter', e)) {
+      e.preventDefault();
+      let item = this.state.resultItems[this.state.highlightIndex];
+      if (item) {
+        if (document.activeElement) {
+          document.activeElement.blur();
+        }
+        this.onItemClickHandler(item);
+      }
+    }
+    else if (isHotkey('up', e)) {
+      this.setState({
+        highlightIndex: Math.max(this.state.highlightIndex - 1, 0),
+      });
+    }
+    else if (isHotkey('down', e)) {
+      this.setState({
+        highlightIndex: Math.min(this.state.highlightIndex + 1, this.state.resultItems.length - 1),
+      });
+    }
   };
 
   onFocusHandler = () => {
@@ -94,6 +115,7 @@ class Search extends Component {
 
     if (this.inputValue === '' || _this.getValueLength(this.inputValue) < 3) {
       this.setState({
+        highlightIndex: 0,
         resultItems: [],
         isResultShow: false,
         isResultGetted: false
@@ -122,6 +144,7 @@ class Search extends Component {
       isResultShow: true,
       isResultGetted: false,
       resultItems: [],
+      highlightIndex: 0,
     });
     this.source = seafileAPI.getSource();
     this.sendRequest(queryData, this.source.token, 1);
@@ -136,6 +159,7 @@ class Search extends Component {
         this.source = null;
         if (res.data.total > 0) {
           this.setState({
+            highlightIndex: 0,
             resultItems: [...this.state.resultItems, this.formatResultItems(res.data.results)],
             isResultGetted: true,
             page: page + 1,
@@ -144,6 +168,7 @@ class Search extends Component {
           });
         } else {
           this.setState({
+            highlightIndex: 0,
             resultItems: [],
             isLoading: false,
             isResultGetted: true,
@@ -163,6 +188,7 @@ class Search extends Component {
         this.source = null;
         if (res.data.total > 0) {
           this.setState({
+            highlightIndex: 0,
             resultItems: [...this.state.resultItems, ...this.formatResultItems(res.data.results)],
             isResultGetted: true,
             isLoading: false,
@@ -171,6 +197,7 @@ class Search extends Component {
           });
         } else {
           this.setState({
+            highlightIndex: 0,
             resultItems: [],
             isLoading: false,
             isResultGetted: true,
@@ -252,12 +279,13 @@ class Search extends Component {
       isResultShow: false,
       isResultGetted: false,
       resultItems: [],
+      highlightIndex: 0,
       isSearchInputShow: false,
     });
   }
 
   renderSearchResult() {
-    const { resultItems } = this.state;
+    const { resultItems, highlightIndex } = this.state;
     if (!this.state.isResultShow) {
       return;
     }
@@ -279,6 +307,9 @@ class Search extends Component {
               key={index}
               item={item}
               onItemClickHandler={this.onItemClickHandler}
+              onMouseEnter={(e) => this.setState({ highlightIndex: index })}
+              onMouseLeave={(e) => this.setState({ highlightIndex: -1 })}
+              isHighlight={index === highlightIndex}
             />
           );
         })}
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index 310e50e5cbe..a278db614a1 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -102,11 +102,11 @@
   font-size: 0.8125rem;
   cursor: pointer;
   margin-right: 1rem;
+  border-radius: 4px;
 }
 
-.search-result-container .search-result-item:hover {
+.search-result-container .search-result-item.search-result-item-highlight {
   background-color: #f0f0f0;
-  border-radius: 4px;
 }
 
 .search-result-item .item-img {

From 716efbd9292307cc4a2533710e8e34baf4668b53 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Wed, 11 Oct 2023 16:40:18 +0800
Subject: [PATCH 2/2] change mouse enter logic

---
 frontend/src/components/search/search-result-item.js | 4 ----
 frontend/src/components/search/search.js             | 2 --
 frontend/src/css/search.css                          | 1 +
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/frontend/src/components/search/search-result-item.js b/frontend/src/components/search/search-result-item.js
index e9c4f7a71bf..844d279247f 100644
--- a/frontend/src/components/search/search-result-item.js
+++ b/frontend/src/components/search/search-result-item.js
@@ -6,8 +6,6 @@ import { Utils } from '../../utils/utils';
 const propTypes = {
   item: PropTypes.object.isRequired,
   onItemClickHandler: PropTypes.func.isRequired,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
   isHighlight: PropTypes.bool,
 };
 
@@ -31,8 +29,6 @@ class SearchResultItem extends React.Component {
       <li
         className={classnames('search-result-item', {'search-result-item-highlight': this.props.isHighlight })}
         onClick={this.onClickHandler}
-        onMouseEnter={this.props.onMouseEnter}
-        onMouseLeave={this.props.onMouseLeave}
       >
         <img className={item.link_content ? 'item-img' : 'lib-item-img'} src={fileIconUrl} alt="" />
         <div className="item-content">
diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index 19f6cff85e9..438519d38f7 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -307,8 +307,6 @@ class Search extends Component {
               key={index}
               item={item}
               onItemClickHandler={this.onItemClickHandler}
-              onMouseEnter={(e) => this.setState({ highlightIndex: index })}
-              onMouseLeave={(e) => this.setState({ highlightIndex: -1 })}
               isHighlight={index === highlightIndex}
             />
           );
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index a278db614a1..8cbb4185197 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -105,6 +105,7 @@
   border-radius: 4px;
 }
 
+.search-result-container .search-result-item:hover,
 .search-result-container .search-result-item.search-result-item-highlight {
   background-color: #f0f0f0;
 }