-
Notifications
You must be signed in to change notification settings - Fork 372
/
ScreenState.tsx
64 lines (57 loc) · 1.98 KB
/
ScreenState.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import {
AutocompleteApi,
AutocompleteState,
BaseItem,
} from '@algolia/autocomplete-core';
import React from 'react';
import { DocSearchProps } from './DocSearch';
import { ErrorScreen } from './ErrorScreen';
import { NoResultsScreen } from './NoResultsScreen';
import { ResultsScreen } from './ResultsScreen';
import { StartScreen } from './StartScreen';
import { StoredSearchPlugin } from './stored-searches';
import { InternalDocSearchHit, StoredDocSearchHit } from './types';
export interface ScreenStateProps<TItem extends BaseItem>
extends AutocompleteApi<
TItem,
React.FormEvent,
React.MouseEvent,
React.KeyboardEvent
> {
state: AutocompleteState<TItem>;
recentSearches: StoredSearchPlugin<StoredDocSearchHit>;
favoriteSearches: StoredSearchPlugin<StoredDocSearchHit>;
onItemClick(item: InternalDocSearchHit): void;
inputRef: React.MutableRefObject<null | HTMLInputElement>;
hitComponent: DocSearchProps['hitComponent'];
indexName: DocSearchProps['indexName'];
disableUserPersonalization: boolean;
resultsFooterComponent: DocSearchProps['resultsFooterComponent'];
}
export const ScreenState = React.memo(
(props: ScreenStateProps<InternalDocSearchHit>) => {
if (props.state.status === 'error') {
return <ErrorScreen />;
}
const hasCollections = props.state.collections.some(
(collection) => collection.items.length > 0
);
if (!props.state.query) {
return <StartScreen {...props} hasCollections={hasCollections} />;
}
if (hasCollections === false) {
return <NoResultsScreen {...props} />;
}
return <ResultsScreen {...props} />;
},
function areEqual(_prevProps, nextProps) {
// We don't update the screen when Autocomplete is loading or stalled to
// avoid UI flashes:
// - Empty screen → Results screen
// - NoResults screen → NoResults screen with another query
return (
nextProps.state.status === 'loading' ||
nextProps.state.status === 'stalled'
);
}
);