diff --git a/frontend/src/components/search/ai-search.js b/frontend/src/components/search/ai-search.js index 4e79eee904..990728319c 100644 --- a/frontend/src/components/search/ai-search.js +++ b/frontend/src/components/search/ai-search.js @@ -1,6 +1,7 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import isHotkey from 'is-hotkey'; +import classnames from 'classnames'; import MediaQuery from 'react-responsive'; import { seafileAPI } from '../../utils/seafile-api'; import searchAPI from '../../utils/search-api'; @@ -142,9 +143,9 @@ export default class AISearch extends Component { onUp = (e) => { e.preventDefault(); e.stopPropagation(); + const { highlightIndex, resultItems } = this.state; if (this.state.showRecent) { - const { highlightIndex } = this.state; if (highlightIndex > 0) { this.setState({ highlightIndex: highlightIndex - 1 }, () => { if (this.highlightRef) { @@ -158,6 +159,23 @@ export default class AISearch extends Component { return; } + // global searching, searched repos needs to support up and down keys + if (!this.props.repoID && resultItems.length > 0) { + let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex - 1; + if (highlightSearchTypesIndex < 0) { + highlightSearchTypesIndex = resultItems.length; + } + this.setState({ highlightSearchTypesIndex }, () => { + if (this.highlightRef) { + const { top, height } = this.highlightRef.getBoundingClientRect(); + if (top - height < 0) { + this.searchResultListContainerRef.current.scrollTop -= height; + } + } + }); + return; + } + if (!this.state.isResultGetted) { let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex - 1; if (highlightSearchTypesIndex < 0) { @@ -167,7 +185,6 @@ export default class AISearch extends Component { return; } - const { highlightIndex } = this.state; if (highlightIndex > 0) { this.setState({ highlightIndex: highlightIndex - 1 }, () => { if (this.highlightRef) { @@ -183,10 +200,10 @@ export default class AISearch extends Component { onDown = (e) => { e.preventDefault(); e.stopPropagation(); + const { highlightIndex, resultItems } = this.state; if (this.state.showRecent) { const visitedItems = JSON.parse(localStorage.getItem(this.storeKey)) || []; - const { highlightIndex } = this.state; if (highlightIndex < visitedItems.length - 1) { this.setState({ highlightIndex: highlightIndex + 1 }, () => { if (this.highlightRef) { @@ -202,6 +219,25 @@ export default class AISearch extends Component { return; } + // global searching, searched repos needs to support up and down keys + if (!this.props.repoID && resultItems.length > 0) { + let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex + 1; + if (highlightSearchTypesIndex > resultItems.length) { + highlightSearchTypesIndex = 0; + } + this.setState({ highlightSearchTypesIndex }, () => { + if (this.highlightRef) { + const { top, height } = this.highlightRef.getBoundingClientRect(); + const outerHeight = 300; + if (top > outerHeight) { + const newScrollTop = this.searchResultListContainerRef.current.scrollTop + height; + this.searchResultListContainerRef.current.scrollTop = newScrollTop; + } + } + }); + return; + } + if (!this.state.isResultGetted) { let highlightSearchTypesIndex = this.state.highlightSearchTypesIndex + 1; if (highlightSearchTypesIndex > this.state.searchTypesMax) { @@ -211,7 +247,6 @@ export default class AISearch extends Component { return; } - const { highlightIndex, resultItems } = this.state; if (highlightIndex < resultItems.length - 1) { this.setState({ highlightIndex: highlightIndex + 1 }, () => { if (this.highlightRef) { @@ -241,6 +276,22 @@ export default class AISearch extends Component { return; } + // global searching, searched repos needs to support enter + const { highlightSearchTypesIndex, resultItems } = this.state; + if (!this.props.repoID && resultItems.length > 0) { + if (highlightSearchTypesIndex === 0) { + this.searchAllRepos(); + } else { + let item = this.state.resultItems[highlightSearchTypesIndex - 1]; + if (item) { + if (document.activeElement) { + document.activeElement.blur(); + } + this.onItemClickHandler(item); + } + } + } + if (!this.state.isResultGetted) { let highlightDom = document.querySelector('.search-types-highlight'); if (highlightDom) { @@ -489,10 +540,10 @@ export default class AISearch extends Component { const { resultItems } = this.state; if (!this.props.repoID) { return ( -