Skip to content

Commit d32d908

Browse files
sarahdayansarahdayan
authored
docs(examples): add example with preview panel in a modal (#552)
1 parent 5613891 commit d32d908

File tree

8 files changed

+405
-0
lines changed

8 files changed

+405
-0
lines changed

‎.codesandbox/ci.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"/examples/github-repositories-custom-plugin",
77
"/examples/multiple-datasets-with-headers",
88
"/examples/playground",
9+
"/examples/preview-panel-in-modal",
910
"/examples/query-suggestions-with-categories",
1011
"/examples/query-suggestions-with-hits",
1112
"/examples/query-suggestions-with-inline-categories",

‎examples/preview-panel-in-modal/README.md

Whitespace-only changes.

‎examples/preview-panel-in-modal/app.tsx

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/** @jsx h */
2+
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
3+
import algoliasearch from 'algoliasearch/lite';
4+
import { h, render } from 'preact';
5+
6+
import '@algolia/autocomplete-theme-classic';
7+
8+
const searchClient = algoliasearch(
9+
'latency',
10+
'6be0576ff61c053d5f9a3225e2a90f76'
11+
);
12+
13+
autocomplete({
14+
container: '#autocomplete',
15+
detachedMediaQuery: '',
16+
defaultActiveItemId: 0,
17+
getSources() {
18+
return [
19+
{
20+
sourceId: 'hits',
21+
getItems({ query }) {
22+
return getAlgoliaResults({
23+
searchClient,
24+
queries: [
25+
{
26+
indexName: 'instant_search',
27+
query,
28+
params: {
29+
hitsPerPage: 8,
30+
},
31+
},
32+
],
33+
});
34+
},
35+
getItemUrl({ item }) {
36+
return item.url;
37+
},
38+
onActive({ item, setContext }) {
39+
setContext({ preview: item });
40+
},
41+
templates: {
42+
item({ item, components }) {
43+
return (
44+
<a className="aa-ItemLink" href={item.url}>
45+
<div className="aa-ItemContent">
46+
<div className="aa-ItemIcon">
47+
<img
48+
src={item.image}
49+
alt={item.name}
50+
width="40"
51+
height="40"
52+
/>
53+
</div>
54+
<div className="aa-ItemContentBody">
55+
<div className="aa-ItemContentTitle">
56+
<components.Highlight hit={item} attribute="name" />
57+
</div>
58+
</div>
59+
</div>
60+
</a>
61+
);
62+
},
63+
},
64+
},
65+
{
66+
sourceId: 'suggestions',
67+
getItems({ query }) {
68+
return getAlgoliaResults({
69+
searchClient,
70+
queries: [
71+
{
72+
indexName: 'instantsearch_query_suggestions',
73+
query,
74+
params: {
75+
hitsPerPage: 4,
76+
},
77+
},
78+
],
79+
});
80+
},
81+
onSelect({ item, setQuery, setIsOpen, refresh }) {
82+
setQuery(`${item.query} `);
83+
setIsOpen(true);
84+
refresh();
85+
},
86+
templates: {
87+
header({ items, Fragment }) {
88+
if (items.length === 0) {
89+
return null;
90+
}
91+
92+
return (
93+
<Fragment>
94+
<span className="aa-SourceHeaderTitle">
95+
Can't find what you're looking for?
96+
</span>
97+
<div className="aa-SourceHeaderLine" />
98+
</Fragment>
99+
);
100+
},
101+
item({ item, components }) {
102+
return (
103+
<div className="aa-QuerySuggestion">
104+
<components.ReverseHighlight hit={item} attribute="query" />
105+
</div>
106+
);
107+
},
108+
},
109+
},
110+
];
111+
},
112+
render({ children, state, Fragment, components }, root) {
113+
const { preview } = state.context;
114+
115+
render(
116+
<Fragment>
117+
<div className="aa-Grid">
118+
<div className="aa-Results aa-Column">{children}</div>
119+
<div className="aa-Preview aa-Column">
120+
<div className="aa-PreviewImage">
121+
<img src={preview.image} alt={preview.name} />
122+
</div>
123+
<div className="aa-PreviewTitle">
124+
<components.Highlight hit={preview} attribute="name" />
125+
</div>
126+
<div className="aa-PreviewPrice">${preview.price}</div>
127+
<div className="aa-PreviewDescription">
128+
<components.Highlight hit={preview} attribute="description" />
129+
</div>
130+
</div>
131+
</div>
132+
</Fragment>,
133+
root
134+
);
135+
},
136+
});

‎examples/preview-panel-in-modal/env.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as preact from 'preact';
2+
3+
// Parcel picks the `source` field of the monorepo packages and thus doesn't
4+
// apply the Babel config. We therefore need to manually override the constants
5+
// in the app, as well as the React pragmas.
6+
// See https://twitter.com/devongovett/status/1134231234605830144
7+
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
8+
(global as any).__TEST__ = false;
9+
(global as any).h = preact.h;
10+
(global as any).React = preact;

‎examples/preview-panel-in-modal/favicon.png

228 KB
Loading

‎examples/preview-panel-in-modal/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
6+
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
7+
<link rel="stylesheet" href="style.css" />
8+
9+
<title>Preview Panel in Modal | Autocomplete</title>
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div id="autocomplete"></div>
15+
16+
<div class="ais-Hits">
17+
<ul class="ais-Hits-list">
18+
<li class="ais-Hits-item"></li>
19+
<li class="ais-Hits-item"></li>
20+
<li class="ais-Hits-item"></li>
21+
</ul>
22+
<ul class="ais-Hits-list">
23+
<li class="ais-Hits-item"></li>
24+
<li class="ais-Hits-item"></li>
25+
<li class="ais-Hits-item"></li>
26+
</ul>
27+
<ul class="ais-Hits-list">
28+
<li class="ais-Hits-item"></li>
29+
<li class="ais-Hits-item"></li>
30+
<li class="ais-Hits-item"></li>
31+
</ul>
32+
<ul class="ais-Hits-list">
33+
<li class="ais-Hits-item"></li>
34+
<li class="ais-Hits-item"></li>
35+
<li class="ais-Hits-item"></li>
36+
</ul>
37+
<ul class="ais-Hits-list">
38+
<li class="ais-Hits-item"></li>
39+
<li class="ais-Hits-item"></li>
40+
<li class="ais-Hits-item"></li>
41+
</ul>
42+
</div>
43+
</div>
44+
45+
<script src="env.ts"></script>
46+
<script src="app.tsx"></script>
47+
</body>
48+
</html>

‎examples/preview-panel-in-modal/package.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "@algolia/autocomplete-example-preview-panel-in-modal",
3+
"description": "Autocomplete example with a preview panel in a modal",
4+
"version": "1.0.0-alpha.46",
5+
"private": true,
6+
"license": "MIT",
7+
"scripts": {
8+
"build": "parcel build index.html",
9+
"start": "parcel index.html"
10+
},
11+
"dependencies": {
12+
"@algolia/autocomplete-js": "1.0.0-alpha.46",
13+
"@algolia/autocomplete-theme-classic": "1.0.0-alpha.46",
14+
"algoliasearch": "4.9.0",
15+
"preact": "10.5.13",
16+
"qs": "6.10.1"
17+
},
18+
"devDependencies": {
19+
"@types/debounce-promise": "^3.1.3",
20+
"@types/qs": "^6.9.6",
21+
"parcel": "2.0.0-beta.2"
22+
},
23+
"keywords": [
24+
"algolia",
25+
"autocomplete",
26+
"javascript"
27+
]
28+
}

0 commit comments

Comments
 (0)