This is an automated email from the ASF dual-hosted git repository.
jeffreyh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new f9cd8736da5 fix:fix search bar (#1469)
f9cd8736da5 is described below
commit f9cd8736da579843a831ad2c91d3afc220c192d2
Author: yangon <[email protected]>
AuthorDate: Fri Dec 6 13:21:10 2024 +0800
fix:fix search bar (#1469)
Co-authored-by: liyang <[email protected]>
---
src/theme/SearchBar/SearchBar.jsx | 8 ++++----
src/theme/SearchBar/SearchBar.module.css | 20 ++++++++++++++++++++
src/theme/SearchBar/SuggestionTemplate.js | 19 ++++++++++++-------
src/theme/SearchBar/icons.js | 21 +++++++--------------
4 files changed, 43 insertions(+), 25 deletions(-)
diff --git a/src/theme/SearchBar/SearchBar.jsx
b/src/theme/SearchBar/SearchBar.jsx
index bb972bf88b9..a82ab78e15e 100644
--- a/src/theme/SearchBar/SearchBar.jsx
+++ b/src/theme/SearchBar/SearchBar.jsx
@@ -61,7 +61,7 @@ export default function SearchBar({ handleSearchBarToggle, })
{
const history = useHistory();
const location = useLocation();
const searchBarRef = useRef(null);
- const indexState = useRef('empty'); // empty, loaded, done
+ const indexStateMap = useRef(new Map());
// Should the input be focused after the index is loaded?
const focusAfterIndexLoaded = useRef(false);
const [loading, setLoading] = useState(false);
@@ -228,11 +228,11 @@ export default function SearchBar({
handleSearchBarToggle, }) {
if (focusAfterIndexLoaded.current) {
const input = searchBarRef.current;
if (input.value) {
- search.current.autocomplete.open();
+ search.current?.autocomplete.open();
}
input.focus();
}
- }, [baseUrl, versionUrl, history]);
+ }, [hidden, searchContext, versionUrl, baseUrl, history]);
useEffect(() => {
if (!Mark) {
return;
@@ -258,7 +258,7 @@ export default function SearchBar({ handleSearchBarToggle,
}) {
setInputValue(keywords.join(" "));
search.current?.autocomplete.setVal(keywords.join(" "));
});
- }, [location.search, location.pathname]);
+ }, [isBrowser, location.search, location.pathname]);
const [focused, setFocused] = useState(false);
const onInputFocus = useCallback(() => {
focusAfterIndexLoaded.current = true;
diff --git a/src/theme/SearchBar/SearchBar.module.css
b/src/theme/SearchBar/SearchBar.module.css
index a3e2c1d6d8f..077a0dd8bed 100644
--- a/src/theme/SearchBar/SearchBar.module.css
+++ b/src/theme/SearchBar/SearchBar.module.css
@@ -250,6 +250,26 @@ html[data-theme="dark"] .noResultsIcon {
}
}
+html[dir="rtl"] .searchHintContainer {
+ right: auto;
+ left: 10px;
+}
+
+html[dir="rtl"] .searchBarContainer .searchClearButton {
+ right: auto;
+ left: 0.8rem;
+}
+
+html[dir="rtl"] .searchBarContainer .searchBarLoadingRing {
+ left: auto;
+ right: 10px;
+}
+
+html[dir="rtl"] :global(.navbar__search-input) {
+ padding: 0 2.25em 0 0.5em;
+}
+
+/* For autocomplete.js only. */
.input {
}
.hint {
diff --git a/src/theme/SearchBar/SuggestionTemplate.js
b/src/theme/SearchBar/SuggestionTemplate.js
index d11f8c76357..427a6a6b225 100644
--- a/src/theme/SearchBar/SuggestionTemplate.js
+++ b/src/theme/SearchBar/SuggestionTemplate.js
@@ -1,3 +1,4 @@
+import { SearchDocumentType, } from "../../../shared/interfaces";
import { concatDocumentPath } from "../../utils/concatDocumentPath";
import { getStemmedPositions } from "../../utils/getStemmedPositions";
import { highlight } from "../../utils/highlight";
@@ -6,8 +7,10 @@ import { explicitSearchResultPath } from
"../../utils/proxiedGenerated";
import { iconAction, iconContent, iconHeading, iconTitle, iconTreeInter,
iconTreeLast, } from "./icons";
import styles from "./SearchBar.module.css";
export function SuggestionTemplate({ document, type, page, metadata, tokens,
isInterOfTree, isLastOfTree, }) {
- const isTitle = type === 0;
- const isHeading = type === 1;
+ const isTitle = type === SearchDocumentType.Title;
+ const isKeywords = type === SearchDocumentType.Keywords;
+ const isTitleRelated = isTitle || isKeywords;
+ const isHeading = type === SearchDocumentType.Heading;
const tree = [];
if (isInterOfTree) {
tree.push(iconTreeInter);
@@ -16,20 +19,22 @@ export function SuggestionTemplate({ document, type, page,
metadata, tokens, isI
tree.push(iconTreeLast);
}
const treeWrapper = tree.map((item) => `<span
class="${styles.hitTree}">${item}</span>`);
- const icon = `<span class="${styles.hitIcon}">${isTitle ? iconTitle :
isHeading ? iconHeading : iconContent}</span>`;
+ const icon = `<span class="${styles.hitIcon}">${isTitleRelated ? iconTitle
: isHeading ? iconHeading : iconContent}</span>`;
const wrapped = [
- `<span class="${styles.hitTitle}">${highlightStemmed(document.t,
getStemmedPositions(metadata, "t"), tokens)}</span>`,
+ `<span class="${styles.hitTitle}">${isKeywords
+ ? highlight(document.s, tokens)
+ : highlightStemmed(document.t, getStemmedPositions(metadata, "t"),
tokens)}</span>`,
];
const needsExplicitHitPath = !isInterOfTree && !isLastOfTree &&
explicitSearchResultPath;
if (needsExplicitHitPath) {
const pathItems = page
- ? (page.b ?? [])
- .concat(page.t)
+ ? page.b
+ ?.concat(page.t)
.concat(!document.s || document.s === page.t ? [] : document.s)
: document.b;
wrapped.push(`<span
class="${styles.hitPath}">${concatDocumentPath(pathItems ?? [])}</span>`);
}
- else if (!isTitle) {
+ else if (!isTitleRelated) {
wrapped.push(`<span class="${styles.hitPath}">${highlight(page.t ||
// Todo(weareoutman): This is for EasyOps only.
// istanbul ignore next
diff --git a/src/theme/SearchBar/icons.js b/src/theme/SearchBar/icons.js
index 9812a54eb45..d5380213e98 100644
--- a/src/theme/SearchBar/icons.js
+++ b/src/theme/SearchBar/icons.js
@@ -1,14 +1,7 @@
-export const iconTitle =
- '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M17 6v12c0
.52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51
0-.87-.34-.87-.87V4" stroke="currentColor" fill="none" fill-rule="evenodd"
strokeLinejoin="round"></path></svg>';
-export const iconHeading =
- '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M13
13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z"
stroke="currentColor" fill="none" fill-rule="evenodd" strokeLinecap="round"
strokeLinejoin="round"></path></svg>';
-export const iconContent =
- '<svg width="20" height="20" viewBox="0 0 20 20"><path d="M17 5H3h14zm0
5H3h14zm0 5H3h14z" stroke="currentColor" fill="none" fill-rule="evenodd"
strokeLinejoin="round"></path></svg>';
-export const iconAction =
- '<svg width="20" height="20" viewBox="0 0 20 20"><g stroke="currentColor"
fill="none" fill-rule="evenodd" strokeLinecap="round"
strokeLinejoin="round"><path d="M18 3v4c0 2-2 4-4 4H2"></path><path d="M8
17l-6-6 6-6"></path></g></svg>';
-export const iconNoResults =
- '<svg width="40" height="40" viewBox="0 0 20 20" fill="none"
fill-rule="evenodd" stroke="currentColor" strokeLinecap="round"
strokeLinejoin="round"><path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8
7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"></path></svg>';
-export const iconTreeInter =
- '<svg viewBox="0 0 24 54"><g stroke="currentColor" fill="none"
fill-rule="evenodd" strokeLinecap="round" strokeLinejoin="round"><path d="M8
6v42M20 27H8.3"></path></g></svg>';
-export const iconTreeLast =
- '<svg viewBox="0 0 24 54"><g stroke="currentColor" fill="none"
fill-rule="evenodd" strokeLinecap="round" strokeLinejoin="round"><path d="M8
6v21M20 27H8.3"></path></g></svg>';
+export const iconTitle = '<svg width="20" height="20" viewBox="0 0 20
20"><path d="M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5
5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4" stroke="currentColor" fill="none"
fill-rule="evenodd" stroke-linejoin="round"></path></svg>';
+export const iconHeading = '<svg width="20" height="20" viewBox="0 0 20
20"><path d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z"
stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round"
stroke-linejoin="round"></path></svg>';
+export const iconContent = '<svg width="20" height="20" viewBox="0 0 20
20"><path d="M17 5H3h14zm0 5H3h14zm0 5H3h14z" stroke="currentColor" fill="none"
fill-rule="evenodd" stroke-linejoin="round"></path></svg>';
+export const iconAction = '<svg width="20" height="20" viewBox="0 0 20 20"><g
stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round"
stroke-linejoin="round"><path d="M18 3v4c0 2-2 4-4 4H2"></path><path d="M8
17l-6-6 6-6"></path></g></svg>';
+export const iconNoResults = '<svg width="40" height="40" viewBox="0 0 20 20"
fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round"><path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3
4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18
2"></path></svg>';
+export const iconTreeInter = '<svg viewBox="0 0 24 54"><g
stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round"
stroke-linejoin="round"><path d="M8 6v42M20 27H8.3"></path></g></svg>';
+export const iconTreeLast = '<svg viewBox="0 0 24 54"><g stroke="currentColor"
fill="none" fill-rule="evenodd" stroke-linecap="round"
stroke-linejoin="round"><path d="M8 6v21M20 27H8.3"></path></g></svg>';
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
