-
Notifications
You must be signed in to change notification settings - Fork 329
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add recent-searches plugin (#316)
* feat: add recent-searches plugin * WIP * fix rollup error (peerDeps) * chore: exclude website from codesandbox ci builds * expose getRecentSearches * add getSources back * build only esm for codesandbox ci * add getSuggestions * remove peerDependency * renames * rename methods * resolve getSources from plugins too * call onSubmit and onSelect for plugins * update ci * Apply suggestions from code review Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com> * add key to distinguish multiple stores of recent searches * early return * named export * apply feedbacks * wrap plugin specific methods with data * run onSubmit for plugins at getDefaultProps * Update packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com> * add TData to plugins * forward onSelect plugin calls in getDefaultProps * Update packages/autocomplete-core/src/getDefaultProps.ts Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com> * rename payload to params * add to store only when data exists * use query as a fallback for queryID * get input value from source * fix type errors Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
- Loading branch information
1 parent
7783bc6
commit 858637e
Showing
11 changed files
with
314 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,6 @@ | ||
{ | ||
"packages": [ | ||
"packages/autocomplete-core", | ||
"packages/autocomplete-preset-algolia", | ||
"packages/autocomplete-js", | ||
"packages/autocomplete-plugin-recent-searches" | ||
], | ||
"packages": ["packages/autocomplete-*"], | ||
"buildCommand": false, | ||
"^": "buildCommand is false because `yarn prepare` is going to build packages anyway.", | ||
"sandboxes": ["github/algolia/autocomplete.js/tree/next/examples/js"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
# @algolia/autocomplete-plugin-recent-searches | ||
|
||
A plugin to add recent searches to Algolia Autocomplete. | ||
|
||
## Installation | ||
|
||
```sh | ||
yarn add @algolia/autocomplete-plugin-recent-searches@alpha | ||
# or | ||
npm install @algolia/autocomplete-plugin-recent-searches@alpha | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
{ | ||
"name": "@algolia/autocomplete-plugin-recent-searches", | ||
"description": "A plugin to add recent searches to Algolia Autocomplete.", | ||
"version": "1.0.0-alpha.28", | ||
"license": "MIT", | ||
"source": "src/index.ts", | ||
"types": "dist/esm/index.d.ts", | ||
"module": "dist/esm/index.js", | ||
"main": "dist/umd/index.js", | ||
"umd:main": "dist/umd/index.js", | ||
"unpkg": "dist/umd/index.js", | ||
"jsdelivr": "dist/umd/index.js", | ||
"peerDependencies": { | ||
"@algolia/autocomplete-core": "^1.0.0-alpha.28" | ||
}, | ||
"scripts": { | ||
"build:clean": "rm -rf ./dist", | ||
"build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm", | ||
"build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm", | ||
"build:umd": "rollup --config", | ||
"build": "rm -rf ./dist && yarn build:umd && yarn build:esm && yarn build:types", | ||
"on:change": "concurrently \"yarn build:esm\" \"yarn build:types\"", | ||
"prepare": "yarn run build:esm", | ||
"watch": "watch \"yarn on:change\" --ignoreDirectoryPattern \"/dist/\"" | ||
}, | ||
"homepage": "https://github.com/algolia/autocomplete.js", | ||
"repository": "algolia/autocomplete.js", | ||
"author": { | ||
"name": "Algolia, Inc.", | ||
"url": "https://www.algolia.com" | ||
}, | ||
"sideEffects": false, | ||
"files": [ | ||
"dist/" | ||
] | ||
} |
17 changes: 17 additions & 0 deletions
17
packages/autocomplete-plugin-recent-searches/rollup.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { plugins } from '../../rollup.base.config'; | ||
import { getBundleBanner } from '../../scripts/getBundleBanner'; | ||
|
||
import pkg from './package.json'; | ||
|
||
export default { | ||
input: 'src/index.ts', | ||
output: { | ||
file: 'dist/umd/index.js', | ||
format: 'umd', | ||
sourcemap: true, | ||
name: pkg.name, | ||
banner: getBundleBanner(pkg), | ||
}, | ||
external: ['@algolia/autocomplete-core'], | ||
plugins, | ||
}; |
96 changes: 96 additions & 0 deletions
96
packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
import { AutocompletePlugin } from '@algolia/autocomplete-core'; | ||
|
||
import { createRecentSearchesStore } from './createRecentSearchesStore'; | ||
|
||
type PluginOptions = { | ||
/** | ||
* The number of searches to store. | ||
* | ||
* @default 5 | ||
*/ | ||
limit?: number; | ||
|
||
/** | ||
* The key to distinguish multiple stores of recent searches. | ||
* | ||
* @example | ||
* // 'top_searchbar' | ||
*/ | ||
key: string; | ||
}; | ||
|
||
type RecentSearchItem = { | ||
objectID: string; | ||
query: string; | ||
}; | ||
|
||
type PluginData = { | ||
getFacetFilters: () => string[]; | ||
}; | ||
|
||
export function createRecentSearchesPlugin({ | ||
key, | ||
limit = 5, | ||
}: PluginOptions): AutocompletePlugin<RecentSearchItem, PluginData> { | ||
const store = createRecentSearchesStore({ | ||
key: ['AUTOCOMPLETE_RECENT_SEARCHES', key].join('__'), | ||
limit, | ||
}); | ||
|
||
return { | ||
getSources: ({ query }) => { | ||
if (query) { | ||
return []; | ||
} | ||
|
||
return [ | ||
{ | ||
getInputValue: ({ suggestion }) => suggestion.query, | ||
getSuggestions() { | ||
return store.getAll(); | ||
}, | ||
templates: { | ||
item({ item }) { | ||
return ` | ||
<div class="autocomplete-item"> | ||
<div> | ||
<svg viewBox="0 0 22 22" width="16" height="16" fill="currentColor"> | ||
<path d="M0 0h24v24H0z" fill="none"/> | ||
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/> | ||
</svg> | ||
<span>${item.query}</span> | ||
</div> | ||
</div> | ||
`; | ||
}, | ||
}, | ||
}, | ||
]; | ||
}, | ||
onSubmit: ({ state }) => { | ||
const { query } = state; | ||
if (query) { | ||
store.add({ | ||
objectID: query, | ||
query, | ||
}); | ||
} | ||
}, | ||
onSelect: ({ suggestion, state, source }) => { | ||
const inputValue = source.getInputValue({ suggestion, state }); | ||
const { objectID } = suggestion as any; | ||
if (inputValue) { | ||
store.add({ | ||
objectID: objectID || inputValue, | ||
query: inputValue, | ||
}); | ||
} | ||
}, | ||
data: { | ||
getFacetFilters: () => { | ||
return store.getAll().map((item) => [`objectID:-${item.query}`]); | ||
}, | ||
}, | ||
}; | ||
} |
Oops, something went wrong.