|
1 | | -/** @jsx h */ |
2 | 1 | import { |
3 | 2 | createLocalStorageRecentSearchesPlugin, |
4 | 3 | search, |
5 | 4 | } from '@algolia/autocomplete-plugin-recent-searches'; |
6 | | -import { h } from 'preact'; |
7 | 5 |
|
8 | 6 | export const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({ |
9 | 7 | key: 'autocomplete-two-column-layout-example', |
10 | 8 | search(params) { |
11 | 9 | return search({ ...params, limit: params.query ? 1 : 4 }); |
12 | 10 | }, |
13 | | - transformSource({ source, onRemove, onTapAhead }) { |
14 | | - return { |
15 | | - ...source, |
16 | | - templates: { |
17 | | - ...source.templates, |
18 | | - item({ item, components }) { |
19 | | - return ( |
20 | | - <div className="aa-ItemWrapper"> |
21 | | - <div className="aa-ItemContent"> |
22 | | - <div className="aa-ItemIcon aa-ItemIcon--noBorder"> |
23 | | - <svg viewBox="0 0 24 24" fill="currentColor"> |
24 | | - <path d="M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z" /> |
25 | | - </svg> |
26 | | - </div> |
27 | | - <div className="aa-ItemContentBody"> |
28 | | - <div className="aa-ItemContentTitle"> |
29 | | - <components.ReverseHighlight hit={item} attribute="label" /> |
30 | | - {item.category && ( |
31 | | - <span className="aa-ItemContentSubtitle aa-ItemContentSubtitle--inline"> |
32 | | - <span className="aa-ItemContentSubtitleIcon" /> in{' '} |
33 | | - <span className="aa-ItemContentSubtitleCategory"> |
34 | | - {item.category} |
35 | | - </span> |
36 | | - </span> |
37 | | - )} |
38 | | - </div> |
39 | | - </div> |
40 | | - </div> |
41 | | - <div className="aa-ItemActions"> |
42 | | - <button |
43 | | - className="aa-ItemActionButton" |
44 | | - title="Remove this search" |
45 | | - onClick={(event) => { |
46 | | - event.preventDefault(); |
47 | | - event.stopPropagation(); |
48 | | - onRemove(item.id); |
49 | | - }} |
50 | | - > |
51 | | - <svg viewBox="0 0 24 24" fill="currentColor"> |
52 | | - <path d="M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z" /> |
53 | | - </svg> |
54 | | - </button> |
55 | | - <button |
56 | | - className="aa-ItemActionButton" |
57 | | - title={`Fill query with "${item.label}"`} |
58 | | - onClick={(event) => { |
59 | | - event.preventDefault(); |
60 | | - event.stopPropagation(); |
61 | | - onTapAhead(item); |
62 | | - }} |
63 | | - > |
64 | | - <svg viewBox="0 0 24 24" fill="currentColor"> |
65 | | - <path d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z" /> |
66 | | - </svg> |
67 | | - </button> |
68 | | - </div> |
69 | | - </div> |
70 | | - ); |
71 | | - }, |
72 | | - }, |
73 | | - }; |
74 | | - }, |
75 | 11 | }); |
0 commit comments