nikon/docsearch
1
0
Fork 0
Code Activity Actions

feat: update Autocomplete version

Browse source
This commit is contained in:
François Chalifour 2020-11-24 12:08:46 +01:00
parent 371c788ab7
commit 9a388427ca
12 changed files with 3419 additions and 3048 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc.js
View file

@ -24,6 +24,7 @@ module.exports = {
'react/no-unescaped-entities': 0,
'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
'import/extensions': 0,
'no-unused-expressions': 0,
complexity: 0,
'import/order': [
'error',

4
bundlesize.config.json
View file

@ -6,11 +6,11 @@
},
{
"path": "packages/docsearch-react/dist/umd/index.js",
"maxSize": "17 kB"
"maxSize": "18 kB"
},
{
"path": "packages/docsearch-js/dist/umd/index.js",
"maxSize": "24 kB"
"maxSize": "24.5 kB"
}
]
}

6
packages/docsearch-react/package.json
View file

@ -35,9 +35,9 @@
},
"dependencies": {
"@docsearch/css": "^1.0.0-alpha.28",
"@francoischalifour/autocomplete-core": "^1.0.0-alpha.28",
"@francoischalifour/autocomplete-preset-algolia": "^1.0.0-alpha.28",
"algoliasearch": "^4.0.0"
"@algolia/autocomplete-core": "^1.0.0-alpha.35",
"@algolia/autocomplete-preset-algolia": "^1.0.0-alpha.35",
"algoliasearch": "^4.8.0"
},
"peerDependencies": {
"react": "^16.8.0",

6
packages/docsearch-react/src/DocSearch.tsx
View file

@ -1,7 +1,7 @@
import {
AutocompleteState,
PublicAutocompleteOptions,
} from '@francoischalifour/autocomplete-core';
AutocompleteOptions,
} from '@algolia/autocomplete-core';
import React from 'react';
import { createPortal } from 'react-dom';
@ -16,7 +16,7 @@ import {
import { useDocSearchKeyboardEvents } from './useDocSearchKeyboardEvents';
export interface DocSearchProps
extends Pick<PublicAutocompleteOptions<InternalDocSearchHit>, 'navigator'> {
extends Pick<AutocompleteOptions<InternalDocSearchHit>, 'navigator'> {
appId?: string;
apiKey: string;
indexName: string;

62
packages/docsearch-react/src/DocSearchModal.tsx
View file

@ -1,8 +1,8 @@
import {
AutocompleteState,
createAutocomplete,
} from '@francoischalifour/autocomplete-core';
import { getAlgoliaResults } from '@francoischalifour/autocomplete-preset-algolia';
} from '@algolia/autocomplete-core';
import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
import React from 'react';
import { MAX_QUERY_SIZE } from './constants';
@ -47,8 +47,13 @@ export function DocSearchModal({
AutocompleteState<InternalDocSearchHit>
>({
query: '',
suggestions: [],
} as any);
collections: [],
completion: null,
context: {},
isOpen: false,
selectedItemId: null,
status: 'idle',
});
const containerRef = React.useRef<HTMLDivElement | null>(null);
const modalRef = React.useRef<HTMLDivElement | null>(null);
@ -134,33 +139,39 @@ export function DocSearchModal({
return [
{
onSelect({ suggestion }) {
saveRecentSearch(suggestion);
onClose();
onSelect({ item, event }) {
saveRecentSearch(item);
if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
onClose();
}
},
getSuggestionUrl({ suggestion }) {
return suggestion.url;
getItemUrl({ item }) {
return item.url;
},
getSuggestions() {
getItems() {
return recentSearches.getAll();
},
},
{
onSelect({ suggestion }) {
saveRecentSearch(suggestion);
onClose();
onSelect({ item, event }) {
saveRecentSearch(item);
if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
onClose();
}
},
getSuggestionUrl({ suggestion }) {
return suggestion.url;
getItemUrl({ item }) {
return item.url;
},
getSuggestions() {
getItems() {
return favoriteSearches.getAll();
},
},
];
}
return getAlgoliaResults({
return getAlgoliaResults<DocSearchHit>({
searchClient,
queries: [
{
@ -209,7 +220,7 @@ export function DocSearchModal({
throw error;
})
.then((results) => {
const hits: DocSearchHit[] = results[0].hits;
const hits = results[0].hits;
const nbHits: number = results[0].nbHits;
const sources = groupBy(hits, (hit) => hit.hierarchy.lvl0);
@ -228,14 +239,17 @@ export function DocSearchModal({
return Object.values<DocSearchHit[]>(sources).map((items) => {
return {
onSelect({ suggestion }) {
saveRecentSearch(suggestion);
onClose();
onSelect({ item, event }) {
saveRecentSearch(item);
if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
onClose();
}
},
getSuggestionUrl({ suggestion }) {
return suggestion.url;
getItemUrl({ item }) {
return item.url;
},
getSuggestions() {
getItems() {
return Object.values(
groupBy(items, (item) => item.hierarchy.lvl1)
)

17
packages/docsearch-react/src/Results.tsx
View file

@ -1,7 +1,4 @@
import {
AutocompleteApi,
AutocompleteState,
} from '@francoischalifour/autocomplete-core';
import { AutocompleteApi, AutocompleteState } from '@algolia/autocomplete-core';
import React from 'react';
import { DocSearchProps } from './DocSearch';
@ -16,7 +13,7 @@ interface ResultsProps<TItem>
React.KeyboardEvent
> {
title: string;
suggestion: AutocompleteState<TItem>['suggestions'][0];
collection: AutocompleteState<TItem>['collections'][0];
renderIcon(props: { item: TItem; index: number }): React.ReactNode;
renderAction(props: {
item: TItem;
@ -30,7 +27,7 @@ interface ResultsProps<TItem>
export function Results<TItem extends StoredDocSearchHit>(
props: ResultsProps<TItem>
) {
if (!props.suggestion || props.suggestion.items.length === 0) {
if (!props.collection || props.collection.items.length === 0) {
return null;
}
@ -38,8 +35,8 @@ export function Results<TItem extends StoredDocSearchHit>(
<section className="DocSearch-Hits">
<div className="DocSearch-Hit-source">{props.title}</div>
<ul {...props.getMenuProps()}>
{props.suggestion.items.map((item, index) => {
<ul {...props.getListProps()}>
{props.collection.items.map((item, index) => {
return (
<Result
key={[props.title, item.objectID].join(':')}
@ -66,7 +63,7 @@ function Result<TItem extends StoredDocSearchHit>({
renderAction,
getItemProps,
onItemClick,
suggestion,
collection,
hitComponent,
}: ResultProps<TItem>) {
const [isDeleting, setIsDeleting] = React.useState(false);
@ -102,7 +99,7 @@ function Result<TItem extends StoredDocSearchHit>({
}}
{...getItemProps({
item,
source: suggestion.source,
source: collection.source,
onClick() {
onItemClick(item);
},

10
packages/docsearch-react/src/ResultsScreen.tsx
View file

@ -10,19 +10,19 @@ type ResultsScreenProps = ScreenStateProps<InternalDocSearchHit>;
export function ResultsScreen(props: ResultsScreenProps) {
return (
<div className="DocSearch-Dropdown-Container">
{props.state.suggestions.map((suggestion, index) => {
if (suggestion.items.length === 0) {
{props.state.collections.map((collection, index) => {
if (collection.items.length === 0) {
return null;
}
const title = suggestion.items[0].hierarchy.lvl0;
const title = collection.items[0].hierarchy.lvl0;
return (
<Results
{...props}
key={index}
title={title}
suggestion={suggestion}
collection={collection}
renderIcon={({ item, index }) => (
<>
{item.__docsearch_parent && (
@ -35,7 +35,7 @@ export function ResultsScreen(props: ResultsScreenProps) {
strokeLinejoin="round"
>
{item.__docsearch_parent !==
suggestion.items[index + 1]?.__docsearch_parent ? (
collection.items[index + 1]?.__docsearch_parent ? (
<path d="M8 6v21M20 27H8.3" />
) : (
<path d="M8 6v42M20 27H8.3" />

13
packages/docsearch-react/src/ScreenState.tsx
View file

@ -1,7 +1,4 @@
import {
AutocompleteApi,
AutocompleteState,
} from '@francoischalifour/autocomplete-core';
import { AutocompleteApi, AutocompleteState } from '@algolia/autocomplete-core';
import React from 'react';
import { DocSearchProps } from './DocSearch';
@ -36,15 +33,15 @@ export const ScreenState = React.memo(
return <ErrorScreen />;
}
const hasSuggestions = props.state.suggestions.some(
(suggestion) => suggestion.items.length > 0
const hasCollections = props.state.collections.some(
(collection) => collection.items.length > 0
);
if (!props.state.query) {
return <StartScreen {...props} hasSuggestions={hasSuggestions} />;
return <StartScreen {...props} hasCollections={hasCollections} />;
}
if (hasSuggestions === false) {
if (hasCollections === false) {
return <NoResultsScreen {...props} />;
}

9
packages/docsearch-react/src/SearchBox.tsx
View file

@ -1,7 +1,4 @@
import {
AutocompleteApi,
AutocompleteState,
} from '@francoischalifour/autocomplete-core';
import { AutocompleteApi, AutocompleteState } from '@algolia/autocomplete-core';
import React, { MutableRefObject } from 'react';
import { MAX_QUERY_SIZE } from './constants';
@ -44,9 +41,6 @@ export function SearchBox(props: SearchBoxProps) {
return (
<>
<form
action=""
role="search"
noValidate
className="DocSearch-Form"
onSubmit={(event) => {
event.preventDefault();
@ -77,7 +71,6 @@ export function SearchBox(props: SearchBoxProps) {
title="Clear the query"
className="DocSearch-Reset"
hidden={!props.state.query}
onClick={onReset}
>
<ResetIcon />
</button>

10
packages/docsearch-react/src/StartScreen.tsx
View file

@ -6,11 +6,11 @@ import { ScreenStateProps } from './ScreenState';
import { InternalDocSearchHit } from './types';
interface StartScreenProps extends ScreenStateProps<InternalDocSearchHit> {
hasSuggestions: boolean;
hasCollections: boolean;
}
export function StartScreen(props: StartScreenProps) {
if (props.state.status === 'idle' && props.hasSuggestions === false) {
if (props.state.status === 'idle' && props.hasCollections === false) {
if (props.disableUserPersonalization) {
return null;
}
@ -22,7 +22,7 @@ export function StartScreen(props: StartScreenProps) {
);
}
if (props.hasSuggestions === false) {
if (props.hasCollections === false) {
return null;
}
@ -31,7 +31,7 @@ export function StartScreen(props: StartScreenProps) {
<Results
{...props}
title="Recent"
suggestion={props.state.suggestions[0]}
collection={props.state.collections[0]}
renderIcon={() => (
<div className="DocSearch-Hit-icon">
<RecentIcon />
@ -83,7 +83,7 @@ export function StartScreen(props: StartScreenProps) {
<Results
{...props}
title="Favorites"
suggestion={props.state.suggestions[1]}
collection={props.state.collections[1]}
renderIcon={() => (
<div className="DocSearch-Hit-icon">
<StarIcon />

2
packages/docsearch-react/src/useTouchEvents.ts
View file

@ -1,4 +1,4 @@
import { AutocompleteApi } from '@francoischalifour/autocomplete-core';
import { AutocompleteApi } from '@algolia/autocomplete-core';
import React from 'react';
interface UseTouchEventsProps {

6327
yarn.lock
View file

File diff suppressed because it is too large Load diff