2017-05-12 00:23:56 +00:00
|
|
|
|
// @flow
|
2018-05-05 23:16:08 +00:00
|
|
|
|
import * as React from 'react';
|
2017-06-01 03:23:09 +00:00
|
|
|
|
import ReactDOM from 'react-dom';
|
2017-07-16 16:24:45 +00:00
|
|
|
|
import keydown from 'react-keydown';
|
2020-01-02 04:36:42 +00:00
|
|
|
|
import { Waypoint } from 'react-waypoint';
|
2019-04-23 14:31:20 +00:00
|
|
|
|
import { withRouter, Link } from 'react-router-dom';
|
2019-08-09 06:09:09 +00:00
|
|
|
|
import type { Location, RouterHistory } from 'react-router-dom';
|
2019-10-06 03:06:48 +00:00
|
|
|
|
import { PlusIcon } from 'outline-icons';
|
2017-09-13 06:30:18 +00:00
|
|
|
|
import { observable, action } from 'mobx';
|
2017-09-04 21:48:56 +00:00
|
|
|
|
import { observer, inject } from 'mobx-react';
|
2018-12-05 06:24:30 +00:00
|
|
|
|
import { debounce } from 'lodash';
|
2019-04-23 14:31:20 +00:00
|
|
|
|
import queryString from 'query-string';
|
2017-06-01 03:23:09 +00:00
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
|
2016-07-19 07:30:47 +00:00
|
|
|
|
|
2018-12-05 06:24:30 +00:00
|
|
|
|
import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';
|
|
|
|
|
import DocumentsStore from 'stores/DocumentsStore';
|
2019-04-23 14:31:20 +00:00
|
|
|
|
import UsersStore from 'stores/UsersStore';
|
2019-10-06 03:06:48 +00:00
|
|
|
|
import { newDocumentUrl, searchUrl } from 'utils/routeHelpers';
|
2019-03-10 04:00:45 +00:00
|
|
|
|
import { meta } from 'utils/keyboard';
|
2018-12-05 06:24:30 +00:00
|
|
|
|
|
2017-10-29 22:02:24 +00:00
|
|
|
|
import Flex from 'shared/components/Flex';
|
2019-10-06 03:06:48 +00:00
|
|
|
|
import Button from 'components/Button';
|
2018-12-05 06:24:30 +00:00
|
|
|
|
import Empty from 'components/Empty';
|
2019-03-10 00:10:53 +00:00
|
|
|
|
import Fade from 'components/Fade';
|
|
|
|
|
import HelpText from 'components/HelpText';
|
2017-07-12 08:05:28 +00:00
|
|
|
|
import CenteredContent from 'components/CenteredContent';
|
2017-07-16 16:24:45 +00:00
|
|
|
|
import LoadingIndicator from 'components/LoadingIndicator';
|
2017-05-10 07:02:11 +00:00
|
|
|
|
import DocumentPreview from 'components/DocumentPreview';
|
2019-10-06 03:06:48 +00:00
|
|
|
|
import NewDocumentMenu from 'menus/NewDocumentMenu';
|
2017-05-26 19:56:10 +00:00
|
|
|
|
import PageTitle from 'components/PageTitle';
|
2018-12-05 06:24:30 +00:00
|
|
|
|
import SearchField from './components/SearchField';
|
2019-04-23 14:31:20 +00:00
|
|
|
|
import StatusFilter from './components/StatusFilter';
|
|
|
|
|
import CollectionFilter from './components/CollectionFilter';
|
|
|
|
|
import UserFilter from './components/UserFilter';
|
|
|
|
|
import DateFilter from './components/DateFilter';
|
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,
|
2017-05-22 06:02:53 +00:00
|
|
|
|
match: Object,
|
2019-08-09 06:09:09 +00:00
|
|
|
|
location: Location,
|
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> {
|
2018-11-07 05:58:32 +00:00
|
|
|
|
firstDocument: ?DocumentPreview;
|
2016-07-19 07:30:47 +00:00
|
|
|
|
|
2017-11-12 18:55:13 +00:00
|
|
|
|
@observable query: string = '';
|
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
|
|
|
|
}
|
|
|
|
|
|
2017-07-16 16:24:45 +00:00
|
|
|
|
@keydown('esc')
|
|
|
|
|
goBack() {
|
|
|
|
|
this.props.history.goBack();
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-22 06:02:53 +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 = () => {
|
2019-10-28 05:34:11 +00:00
|
|
|
|
const query = decodeURIComponent(this.props.match.params.term || '');
|
2018-02-05 01:27:57 +00:00
|
|
|
|
this.query = query ? query : '';
|
|
|
|
|
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();
|
|
|
|
|
};
|
|
|
|
|
|
2019-04-23 14:31:20 +00:00
|
|
|
|
handleFilterChange = search => {
|
|
|
|
|
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() {
|
|
|
|
|
return this.params.get('includeArchived') === 'true';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get collectionId() {
|
|
|
|
|
const id = this.params.get('collectionId');
|
|
|
|
|
return id ? id : undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get userId() {
|
|
|
|
|
const id = this.params.get('userId');
|
|
|
|
|
return id ? id : undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get dateFilter() {
|
|
|
|
|
const id = this.params.get('dateFilter');
|
|
|
|
|
return id ? id : undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get isFiltered() {
|
|
|
|
|
return (
|
|
|
|
|
this.dateFilter ||
|
|
|
|
|
this.userId ||
|
|
|
|
|
this.collectionId ||
|
|
|
|
|
this.includeArchived
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get title() {
|
|
|
|
|
const query = this.query;
|
|
|
|
|
const title = 'Search';
|
|
|
|
|
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,
|
|
|
|
|
});
|
|
|
|
|
|
2017-11-12 18:55:13 +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
|
|
|
|
};
|
|
|
|
|
|
2017-06-01 03:23:09 +00:00
|
|
|
|
setFirstDocumentRef = ref => {
|
|
|
|
|
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}
|
|
|
|
|
onSelect={includeArchived =>
|
|
|
|
|
this.handleFilterChange({ includeArchived })
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<CollectionFilter
|
|
|
|
|
collectionId={this.collectionId}
|
|
|
|
|
onSelect={collectionId =>
|
|
|
|
|
this.handleFilterChange({ collectionId })
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
<UserFilter
|
|
|
|
|
userId={this.userId}
|
|
|
|
|
onSelect={userId => this.handleFilterChange({ userId })}
|
|
|
|
|
/>
|
|
|
|
|
<DateFilter
|
|
|
|
|
dateFilter={this.dateFilter}
|
|
|
|
|
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>
|
|
|
|
|
No documents found for your search filters. <br />Create a
|
|
|
|
|
new document?
|
|
|
|
|
</HelpText>
|
|
|
|
|
<Wrapper>
|
|
|
|
|
{this.collectionId ? (
|
|
|
|
|
<Button
|
|
|
|
|
onClick={this.handleNewDoc}
|
|
|
|
|
icon={<PlusIcon />}
|
|
|
|
|
primary
|
|
|
|
|
>
|
|
|
|
|
New doc
|
|
|
|
|
</Button>
|
|
|
|
|
) : (
|
|
|
|
|
<NewDocumentMenu />
|
|
|
|
|
)}
|
|
|
|
|
<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
|
2018-11-07 05:58:32 +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);
|
|
|
|
|
top: ${props => (props.pinToTop ? '0%' : '50%')};
|
|
|
|
|
margin-top: ${props => (props.pinToTop ? '40px' : '-75px')};
|
|
|
|
|
width: 100%;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const ResultList = styled(Flex)`
|
|
|
|
|
margin-bottom: 150px;
|
|
|
|
|
opacity: ${props => (props.visible ? '1' : '0')};
|
|
|
|
|
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;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
2019-04-09 16:20:30 +00:00
|
|
|
|
`;
|
|
|
|
|
|
2019-01-20 02:14:10 +00:00
|
|
|
|
export default withRouter(inject('documents')(Search));
|