yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Search shared documents (#3126)

Browse Source 
* provide a type-ahead search input on shared document pages that allow search of child document tree
* improve keyboard navigation handling of all search views
* improve coloring on dark mode list selection states
* refactor PaginatedList component to eliminate edge cases
This commit is contained in:
Nan Yu
2022-04-08 10:40:51 -07:00
committed by GitHub
parent 5fb5e69181
commit 75a868e5e8
22 changed files with 804 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/scenes/Search/Search.tsx
View File

@@ -100,9 +100,31 @@ class Search extends React.Component<Props> {
return this.goBack();
}
if (ev.key === "ArrowDown") {
if (ev.key === "ArrowUp") {
if (ev.currentTarget.value) {
const length = ev.currentTarget.value.length;
const selectionEnd = ev.currentTarget.selectionEnd || 0;
if (selectionEnd === 0) {
ev.currentTarget.selectionStart = 0;
ev.currentTarget.selectionEnd = length;
ev.preventDefault();
}
}
}
if (ev.key === "ArrowDown" && !ev.shiftKey) {
ev.preventDefault();
if (ev.currentTarget.value) {
const length = ev.currentTarget.value.length;
const selectionStart = ev.currentTarget.selectionStart || 0;
if (selectionStart < length) {
ev.currentTarget.selectionStart = length;
ev.currentTarget.selectionEnd = length;
return;
}
}
if (this.compositeRef) {
const linkItems = this.compositeRef.querySelectorAll(
"[href]"
@@ -269,7 +291,7 @@ class Search extends React.Component<Props> {
render() {
const { documents, notFound, t } = this.props;
const results = documents.searchResults(this.query);
const showEmpty = !this.isLoading && this.query && results.length === 0;
const showEmpty = !this.isLoading && this.query && results?.length === 0;
return (
<Scene textTitle={this.title}>
@@ -345,7 +367,7 @@ class Search extends React.Component<Props> {
aria-label={t("Search Results")}
>
{(compositeProps) =>
results.map((result) => {
results?.map((result) => {
const document = documents.data.get(result.document.id);
if (!document) {
return null;