2017-05-12 00:23:56 +00:00
|
|
|
|
// @flow
|
2020-08-09 05:53:59 +00:00
|
|
|
|
import ArrowKeyNavigation from "boundless-arrow-key-navigation";
|
|
|
|
|
import { debounce } from "lodash";
|
|
|
|
|
import { observable, action } from "mobx";
|
|
|
|
|
import { observer, inject } from "mobx-react";
|
|
|
|
|
import { PlusIcon } from "outline-icons";
|
|
|
|
|
import queryString from "query-string";
|
2020-06-20 20:59:15 +00:00
|
|
|
|
import * as React from "react";
|
|
|
|
|
import ReactDOM from "react-dom";
|
|
|
|
|
import keydown from "react-keydown";
|
|
|
|
|
import { withRouter, Link } from "react-router-dom";
|
2020-08-12 01:59:57 +00:00
|
|
|
|
import type { RouterHistory, Match } from "react-router-dom";
|
2020-08-09 05:53:59 +00:00
|
|
|
|
import { Waypoint } from "react-waypoint";
|
2020-06-20 20:59:15 +00:00
|
|
|
|
import styled from "styled-components";
|
2020-08-17 07:08:22 +00:00
|
|
|
|
import breakpoint from "styled-components-breakpoint";
|
2020-06-20 20:59:15 +00:00
|
|
|
|
|
|
|
|
|
import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
|
|
|
|
|
import DocumentsStore from "stores/DocumentsStore";
|
|
|
|
|
import UsersStore from "stores/UsersStore";
|
|
|
|
|
|
|
|
|
|
import Button from "components/Button";
|
2020-08-09 05:53:59 +00:00
|
|
|
|
import CenteredContent from "components/CenteredContent";
|
|
|
|
|
import DocumentPreview from "components/DocumentPreview";
|
2020-06-20 20:59:15 +00:00
|
|
|
|
import Empty from "components/Empty";
|
|
|
|
|
import Fade from "components/Fade";
|
2020-08-09 05:53:59 +00:00
|
|
|
|
import Flex from "components/Flex";
|
2020-06-20 20:59:15 +00:00
|
|
|
|
import HelpText from "components/HelpText";
|
|
|
|
|
import LoadingIndicator from "components/LoadingIndicator";
|
|
|
|
|
import PageTitle from "components/PageTitle";
|
2020-08-09 05:53:59 +00:00
|
|
|
|
import CollectionFilter from "./components/CollectionFilter";
|
|
|
|
|
import DateFilter from "./components/DateFilter";
|
2020-06-20 20:59:15 +00:00
|
|
|
|
import SearchField from "./components/SearchField";
|
|
|
|
|
import StatusFilter from "./components/StatusFilter";
|
|
|
|
|
import UserFilter from "./components/UserFilter";
|
2020-08-09 05:53:59 +00:00
|
|
|
|
import NewDocumentMenu from "menus/NewDocumentMenu";
|
2020-08-12 01:59:57 +00:00
|
|
|
|
import { type LocationWithState } from "types";
|
2020-08-09 05:53:59 +00:00
|
|
|
|
import { meta } from "utils/keyboard";
|
|
|
|
|
import { newDocumentUrl, searchUrl } from "utils/routeHelpers";
|
2017-05-10 07:02:11 +00:00
|
|
|
|
|
2017-05-12 00:23:56 +00:00
|
|
|
|
type Props = {
|
2019-08-09 06:09:09 +00:00
|
|
|
|
history: RouterHistory,
|
2020-08-08 22:58:24 +00:00
|
|
|
|
match: Match,
|
2020-08-12 01:59:57 +00:00
|
|
|
|
location: LocationWithState,
|
2017-09-04 21:48:56 +00:00
|
|
|
|
documents: DocumentsStore,
|
2019-04-23 14:31:20 +00:00
|
|
|
|
users: UsersStore,
|
2017-05-17 07:11:13 +00:00
|
|
|
|
notFound: ?boolean,
|
2017-05-12 00:23:56 +00:00
|
|
|
|
};
|
|
|
|
|
|
2017-11-10 22:14:30 +00:00
|
|
|
|
@observer
|
2018-05-05 23:16:08 +00:00
|
|
|
|
class Search extends React.Component<Props> {
|
2020-08-12 01:59:57 +00:00
|
|
|
|
firstDocument: ?React.Component<typeof DocumentPreview>;
|
2016-07-19 07:30:47 +00:00
|
|
|
|
|
2020-01-10 03:14:34 +00:00
|
|
|
|
@observable
|
2020-06-20 20:59:15 +00:00
|
|
|
|
query: string = decodeURIComponent(this.props.match.params.term || "");
|
2019-04-23 14:31:20 +00:00
|
|
|
|
@observable params: URLSearchParams = new URLSearchParams();
|
2017-12-04 00:50:50 +00:00
|
|
|
|
@observable offset: number = 0;
|
|
|
|
|
@observable allowLoadMore: boolean = true;
|
2018-02-05 01:31:12 +00:00
|
|
|
|
@observable isFetching: boolean = false;
|
2019-04-23 14:31:20 +00:00
|
|
|
|
@observable pinToTop: boolean = !!this.props.match.params.term;
|
2017-09-04 21:48:56 +00:00
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
2019-04-23 14:31:20 +00:00
|
|
|
|
this.handleTermChange();
|
2019-04-23 14:51:02 +00:00
|
|
|
|
|
|
|
|
|
if (this.props.location.search) {
|
|
|
|
|
this.handleQueryChange();
|
|
|
|
|
}
|
2016-07-19 07:30:47 +00:00
|
|
|
|
}
|
|
|
|
|
|
2017-05-22 06:02:53 +00:00
|
|
|
|
componentDidUpdate(prevProps) {
|
2019-04-23 14:31:20 +00:00
|
|
|
|
if (prevProps.location.search !== this.props.location.search) {
|
2017-11-12 18:55:13 +00:00
|
|
|
|
this.handleQueryChange();
|
2017-05-22 06:02:53 +00:00
|
|
|
|
}
|
2019-04-23 14:31:20 +00:00
|
|
|
|
if (prevProps.match.params.term !== this.props.match.params.term) {
|
|
|
|
|
this.handleTermChange();
|
|
|
|
|
}
|
2017-05-22 06:02:53 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-06-20 20:59:15 +00:00
|
|
|
|
@keydown("esc")
|
2017-07-16 16:24:45 +00:00
|
|
|
|
goBack() {
|
|
|
|
|
this.props.history.goBack();
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-09 01:53:11 +00:00
|
|
|
|
handleKeyDown = (ev) => {
|
2017-07-16 16:24:45 +00:00
|
|
|
|
// Escape
|
2017-05-22 06:02:53 +00:00
|
|
|
|
if (ev.which === 27) {
|
|
|
|
|
ev.preventDefault();
|
2017-07-16 16:24:45 +00:00
|
|
|
|
this.goBack();
|
2017-05-22 06:02:53 +00:00
|
|
|
|
}
|
2017-07-16 16:24:45 +00:00
|
|
|
|
|
2017-06-01 03:23:09 +00:00
|
|
|
|
// Down
|
|
|
|
|
if (ev.which === 40) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
if (this.firstDocument) {
|
|
|
|
|
const element = ReactDOM.findDOMNode(this.firstDocument);
|
2017-11-12 18:55:13 +00:00
|
|
|
|
if (element instanceof HTMLElement) element.focus();
|
2017-06-01 03:23:09 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
2017-05-22 06:02:53 +00:00
|
|
|
|
};
|
|
|
|
|
|
2017-11-12 18:55:13 +00:00
|
|
|
|
handleQueryChange = () => {
|
2019-04-23 14:31:20 +00:00
|
|
|
|
this.params = new URLSearchParams(this.props.location.search);
|
|
|
|
|
this.offset = 0;
|
|
|
|
|
this.allowLoadMore = true;
|
|
|
|
|
|
|
|
|
|
// To prevent "no results" showing before debounce kicks in
|
|
|
|
|
this.isFetching = true;
|
|
|
|
|
|
|
|
|
|
this.fetchResultsDebounced();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleTermChange = () => {
|
2020-06-20 20:59:15 +00:00
|
|
|
|
const query = decodeURIComponent(this.props.match.params.term || "");
|
|
|
|
|
this.query = query ? query : "";
|
2018-02-05 01:27:57 +00:00
|
|
|
|
this.offset = 0;
|
2017-12-04 00:50:50 +00:00
|
|
|
|
this.allowLoadMore = true;
|
|
|
|
|
|
|
|
|
|
// To prevent "no results" showing before debounce kicks in
|
2019-01-10 05:57:17 +00:00
|
|
|
|
this.isFetching = !!this.query;
|
2017-12-04 00:50:50 +00:00
|
|
|
|
|
2017-11-12 18:55:13 +00:00
|
|
|
|
this.fetchResultsDebounced();
|
|
|
|
|
};
|
|
|
|
|
|
2020-08-09 01:53:11 +00:00
|
|
|
|
handleFilterChange = (search) => {
|
2019-04-23 14:31:20 +00:00
|
|
|
|
this.props.history.replace({
|
|
|
|
|
pathname: this.props.location.pathname,
|
|
|
|
|
search: queryString.stringify({
|
|
|
|
|
...queryString.parse(this.props.location.search),
|
|
|
|
|
...search,
|
|
|
|
|
}),
|
|
|
|
|
});
|
2019-04-09 16:20:30 +00:00
|
|
|
|
};
|
|
|
|
|
|
2019-10-06 03:06:48 +00:00
|
|
|
|
handleNewDoc = () => {
|
2019-10-08 15:01:30 +00:00
|
|
|
|
if (this.collectionId) {
|
|
|
|
|
this.props.history.push(newDocumentUrl(this.collectionId));
|
|
|
|
|
}
|
2019-10-06 03:06:48 +00:00
|
|
|
|
};
|
|
|
|
|
|
2019-04-23 14:31:20 +00:00
|
|
|
|
get includeArchived() {
|
2020-06-20 20:59:15 +00:00
|
|
|
|
return this.params.get("includeArchived") === "true";
|
2019-04-23 14:31:20 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get collectionId() {
|
2020-06-20 20:59:15 +00:00
|
|
|
|
const id = this.params.get("collectionId");
|
2019-04-23 14:31:20 +00:00
|
|
|
|
return id ? id : undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get userId() {
|
2020-06-20 20:59:15 +00:00
|
|
|
|
const id = this.params.get("userId");
|
2019-04-23 14:31:20 +00:00
|
|
|
|
return id ? id : undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get dateFilter() {
|
2020-06-20 20:59:15 +00:00
|
|
|
|
const id = this.params.get("dateFilter");
|
2019-04-23 14:31:20 +00:00
|
|
|
|
return id ? id : undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get isFiltered() {
|
|
|
|
|
return (
|
|
|
|
|
this.dateFilter ||
|
|
|
|
|
this.userId ||
|
|
|
|
|
this.collectionId ||
|
|
|
|
|
this.includeArchived
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get title() {
|
|
|
|
|
const query = this.query;
|
2020-06-20 20:59:15 +00:00
|
|
|
|
const title = "Search";
|
2019-04-23 14:31:20 +00:00
|
|
|
|
if (query) return `${query} – ${title}`;
|
|
|
|
|
return title;
|
|
|
|
|
}
|
|
|
|
|
|
2017-12-04 00:50:50 +00:00
|
|
|
|
@action
|
|
|
|
|
loadMoreResults = async () => {
|
2018-05-26 19:22:14 +00:00
|
|
|
|
// Don't paginate if there aren't more results or we’re in the middle of fetching
|
2017-12-04 00:50:50 +00:00
|
|
|
|
if (!this.allowLoadMore || this.isFetching) return;
|
|
|
|
|
|
|
|
|
|
// Fetch more results
|
|
|
|
|
await this.fetchResults();
|
|
|
|
|
};
|
2017-05-22 06:02:53 +00:00
|
|
|
|
|
2017-11-10 22:14:30 +00:00
|
|
|
|
@action
|
2017-11-12 18:55:13 +00:00
|
|
|
|
fetchResults = async () => {
|
|
|
|
|
if (this.query) {
|
2019-01-10 05:57:17 +00:00
|
|
|
|
this.isFetching = true;
|
|
|
|
|
|
2017-09-04 21:48:56 +00:00
|
|
|
|
try {
|
2018-08-05 01:32:56 +00:00
|
|
|
|
const results = await this.props.documents.search(this.query, {
|
2017-12-04 00:50:50 +00:00
|
|
|
|
offset: this.offset,
|
|
|
|
|
limit: DEFAULT_PAGINATION_LIMIT,
|
2019-04-23 14:31:20 +00:00
|
|
|
|
dateFilter: this.dateFilter,
|
2019-04-09 16:20:30 +00:00
|
|
|
|
includeArchived: this.includeArchived,
|
2020-01-06 01:24:57 +00:00
|
|
|
|
includeDrafts: true,
|
2019-04-23 14:31:20 +00:00
|
|
|
|
collectionId: this.collectionId,
|
|
|
|
|
userId: this.userId,
|
2017-12-04 00:50:50 +00:00
|
|
|
|
});
|
2018-08-05 01:32:56 +00:00
|
|
|
|
|
2019-10-28 05:12:18 +00:00
|
|
|
|
this.pinToTop = true;
|
|
|
|
|
|
2018-08-05 01:32:56 +00:00
|
|
|
|
if (results.length === 0 || results.length < DEFAULT_PAGINATION_LIMIT) {
|
2017-12-04 00:50:50 +00:00
|
|
|
|
this.allowLoadMore = false;
|
|
|
|
|
} else {
|
|
|
|
|
this.offset += DEFAULT_PAGINATION_LIMIT;
|
|
|
|
|
}
|
2019-01-10 05:57:17 +00:00
|
|
|
|
} finally {
|
|
|
|
|
this.isFetching = false;
|
2017-09-04 21:48:56 +00:00
|
|
|
|
}
|
|
|
|
|
} else {
|
2018-02-05 01:27:57 +00:00
|
|
|
|
this.pinToTop = false;
|
2017-09-04 21:48:56 +00:00
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2018-12-05 06:24:30 +00:00
|
|
|
|
fetchResultsDebounced = debounce(this.fetchResults, 350, {
|
|
|
|
|
leading: false,
|
|
|
|
|
trailing: true,
|
|
|
|
|
});
|
|
|
|
|
|
2020-08-09 01:53:11 +00:00
|
|
|
|
updateLocation = (query) => {
|
2019-04-23 14:31:20 +00:00
|
|
|
|
this.props.history.replace({
|
|
|
|
|
pathname: searchUrl(query),
|
|
|
|
|
search: this.props.location.search,
|
|
|
|
|
});
|
2017-05-22 06:02:53 +00:00
|
|
|
|
};
|
|
|
|
|
|
2020-08-09 01:53:11 +00:00
|
|
|
|
setFirstDocumentRef = (ref) => {
|
2020-08-12 01:59:57 +00:00
|
|
|
|
// $FlowFixMe
|
2017-06-01 03:23:09 +00:00
|
|
|
|
this.firstDocument = ref;
|
|
|
|
|
};
|
|
|
|
|
|
2016-07-18 03:59:32 +00:00
|
|
|
|
render() {
|
2019-03-10 00:10:53 +00:00
|
|
|
|
const { documents, notFound, location } = this.props;
|
2019-01-10 05:57:17 +00:00
|
|
|
|
const results = documents.searchResults(this.query);
|
|
|
|
|
const showEmpty = !this.isFetching && this.query && results.length === 0;
|
2019-03-10 00:10:53 +00:00
|
|
|
|
const showShortcutTip =
|
|
|
|
|
!this.pinToTop && location.state && location.state.fromMenu;
|
2016-07-19 07:30:47 +00:00
|
|
|
|
|
2016-07-18 03:59:32 +00:00
|
|
|
|
return (
|
2017-06-25 00:14:36 +00:00
|
|
|
|
<Container auto>
|
2017-07-16 16:24:45 +00:00
|
|
|
|
<PageTitle title={this.title} />
|
2017-09-04 21:48:56 +00:00
|
|
|
|
{this.isFetching && <LoadingIndicator />}
|
2017-11-10 22:14:30 +00:00
|
|
|
|
{notFound && (
|
2017-06-25 00:14:36 +00:00
|
|
|
|
<div>
|
|
|
|
|
<h1>Not Found</h1>
|
2018-06-08 04:35:40 +00:00
|
|
|
|
<Empty>We were unable to find the page you’re looking for.</Empty>
|
2017-11-10 22:14:30 +00:00
|
|
|
|
</div>
|
|
|
|
|
)}
|
2018-02-05 01:27:57 +00:00
|
|
|
|
<ResultsWrapper pinToTop={this.pinToTop} column auto>
|
2017-06-25 00:14:36 +00:00
|
|
|
|
<SearchField
|
|
|
|
|
onKeyDown={this.handleKeyDown}
|
2017-11-12 18:55:13 +00:00
|
|
|
|
onChange={this.updateLocation}
|
2018-09-30 06:10:07 +00:00
|
|
|
|
defaultValue={this.query}
|
2017-06-25 00:14:36 +00:00
|
|
|
|
/>
|
2019-03-10 00:10:53 +00:00
|
|
|
|
{showShortcutTip && (
|
|
|
|
|
<Fade>
|
|
|
|
|
<HelpText small>
|
2019-03-10 04:00:45 +00:00
|
|
|
|
Use the <strong>{meta}+K</strong> shortcut to search from
|
|
|
|
|
anywhere in Outline
|
2019-03-10 00:10:53 +00:00
|
|
|
|
</HelpText>
|
|
|
|
|
</Fade>
|
|
|
|
|
)}
|
2019-04-09 16:20:30 +00:00
|
|
|
|
{this.pinToTop && (
|
|
|
|
|
<Filters>
|
2019-04-23 14:31:20 +00:00
|
|
|
|
<StatusFilter
|
|
|
|
|
includeArchived={this.includeArchived}
|
2020-08-09 01:53:11 +00:00
|
|
|
|
onSelect={(includeArchived) =>
|
2019-04-23 14:31:20 +00:00
|
|
|
|
this.handleFilterChange({ includeArchived })
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<CollectionFilter
|
|
|
|
|
collectionId={this.collectionId}
|
2020-08-09 01:53:11 +00:00
|
|
|
|
onSelect={(collectionId) =>
|
2019-04-23 14:31:20 +00:00
|
|
|
|
this.handleFilterChange({ collectionId })
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<UserFilter
|
|
|
|
|
userId={this.userId}
|
2020-08-09 01:53:11 +00:00
|
|
|
|
onSelect={(userId) => this.handleFilterChange({ userId })}
|
2019-04-23 14:31:20 +00:00
|
|
|
|
/>
|
|
|
|
|
<DateFilter
|
|
|
|
|
dateFilter={this.dateFilter}
|
2020-08-09 01:53:11 +00:00
|
|
|
|
onSelect={(dateFilter) =>
|
|
|
|
|
this.handleFilterChange({ dateFilter })
|
|
|
|
|
}
|
2019-04-09 16:20:30 +00:00
|
|
|
|
/>
|
|
|
|
|
</Filters>
|
|
|
|
|
)}
|
2019-04-23 14:31:20 +00:00
|
|
|
|
{showEmpty && (
|
2019-10-06 03:06:48 +00:00
|
|
|
|
<Fade>
|
|
|
|
|
<Empty>
|
|
|
|
|
<Centered column>
|
|
|
|
|
<HelpText>
|
2020-08-09 01:53:11 +00:00
|
|
|
|
No documents found for your search filters. <br />
|
|
|
|
|
Create a new document?
|
2019-10-06 03:06:48 +00:00
|
|
|
|
</HelpText>
|
|
|
|
|
<Wrapper>
|
|
|
|
|
{this.collectionId ? (
|
|
|
|
|
<Button
|
|
|
|
|
onClick={this.handleNewDoc}
|
|
|
|
|
icon={<PlusIcon />}
|
|
|
|
|
primary
|
|
|
|
|
>
|
|
|
|
|
New doc
|
|
|
|
|
</Button>
|
|
|
|
|
) : (
|
|
|
|
|
<NewDocumentMenu />
|
2020-08-09 01:53:11 +00:00
|
|
|
|
)}
|
|
|
|
|
|
2019-10-06 03:06:48 +00:00
|
|
|
|
<Button as={Link} to="/search" neutral>
|
|
|
|
|
Clear filters
|
|
|
|
|
</Button>
|
|
|
|
|
</Wrapper>
|
|
|
|
|
</Centered>
|
|
|
|
|
</Empty>
|
|
|
|
|
</Fade>
|
2019-04-23 14:31:20 +00:00
|
|
|
|
)}
|
2018-02-05 01:27:57 +00:00
|
|
|
|
<ResultList column visible={this.pinToTop}>
|
2017-07-12 08:05:28 +00:00
|
|
|
|
<StyledArrowKeyNavigation
|
2017-07-02 00:16:18 +00:00
|
|
|
|
mode={ArrowKeyNavigation.mode.VERTICAL}
|
|
|
|
|
defaultActiveChildIndex={0}
|
|
|
|
|
>
|
2019-01-10 05:57:17 +00:00
|
|
|
|
{results.map((result, index) => {
|
2018-12-05 06:24:30 +00:00
|
|
|
|
const document = documents.data.get(result.document.id);
|
2017-09-23 22:58:34 +00:00
|
|
|
|
if (!document) return null;
|
2018-08-05 01:32:56 +00:00
|
|
|
|
|
2017-09-23 22:58:34 +00:00
|
|
|
|
return (
|
|
|
|
|
<DocumentPreview
|
2020-08-09 01:53:11 +00:00
|
|
|
|
ref={(ref) => index === 0 && this.setFirstDocumentRef(ref)}
|
2018-08-05 01:32:56 +00:00
|
|
|
|
key={document.id}
|
2017-09-23 22:58:34 +00:00
|
|
|
|
document={document}
|
2017-11-12 18:55:13 +00:00
|
|
|
|
highlight={this.query}
|
2018-08-05 01:32:56 +00:00
|
|
|
|
context={result.context}
|
2017-09-23 22:58:34 +00:00
|
|
|
|
showCollection
|
|
|
|
|
/>
|
|
|
|
|
);
|
2017-09-04 21:48:56 +00:00
|
|
|
|
})}
|
2017-07-12 08:05:28 +00:00
|
|
|
|
</StyledArrowKeyNavigation>
|
2017-12-04 00:50:50 +00:00
|
|
|
|
{this.allowLoadMore && (
|
|
|
|
|
<Waypoint key={this.offset} onEnter={this.loadMoreResults} />
|
|
|
|
|
)}
|
2017-07-02 00:16:18 +00:00
|
|
|
|
</ResultList>
|
2017-06-25 00:14:36 +00:00
|
|
|
|
</ResultsWrapper>
|
|
|
|
|
</Container>
|
2016-07-18 03:59:32 +00:00
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-06 03:06:48 +00:00
|
|
|
|
const Wrapper = styled(Flex)`
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Centered = styled(Flex)`
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin: 30vh auto 0;
|
|
|
|
|
max-width: 380px;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
`;
|
|
|
|
|
|
2019-04-09 16:20:30 +00:00
|
|
|
|
const Container = styled(CenteredContent)`
|
|
|
|
|
> div {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const ResultsWrapper = styled(Flex)`
|
|
|
|
|
position: absolute;
|
|
|
|
|
transition: all 300ms cubic-bezier(0.65, 0.05, 0.36, 1);
|
2020-08-09 01:53:11 +00:00
|
|
|
|
top: ${(props) => (props.pinToTop ? "0%" : "50%")};
|
|
|
|
|
margin-top: ${(props) => (props.pinToTop ? "40px" : "-75px")};
|
2019-04-09 16:20:30 +00:00
|
|
|
|
width: 100%;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const ResultList = styled(Flex)`
|
|
|
|
|
margin-bottom: 150px;
|
2020-08-09 01:53:11 +00:00
|
|
|
|
opacity: ${(props) => (props.visible ? "1" : "0")};
|
2019-04-09 16:20:30 +00:00
|
|
|
|
transition: all 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
flex: 1;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Filters = styled(Flex)`
|
2019-04-23 14:31:20 +00:00
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
opacity: 0.85;
|
|
|
|
|
transition: opacity 100ms ease-in-out;
|
2020-08-17 07:08:22 +00:00
|
|
|
|
overflow-y: auto;
|
|
|
|
|
padding: 8px 0;
|
|
|
|
|
|
|
|
|
|
${breakpoint("tablet")`
|
|
|
|
|
padding: 0;
|
|
|
|
|
`};
|
2019-04-23 14:31:20 +00:00
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
2019-04-09 16:20:30 +00:00
|
|
|
|
`;
|
|
|
|
|
|
2020-06-20 20:59:15 +00:00
|
|
|
|
export default withRouter(inject("documents")(Search));
|