Skip to content

Commit f1c4e5b

Browse files
francoischalifourfrancoischalifour
committed
feat: rely on the Component API
1 parent 6e0b9d1 commit f1c4e5b

File tree

11 files changed

+198
-328
lines changed

11 files changed

+198
-328
lines changed

‎bundlesize.config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
},
2727
{
2828
"path": "packages/autocomplete-layout-classic/dist/umd/index.production.js",
29-
"maxSize": "4 kB"
29+
"maxSize": "4.25 kB"
3030
},
3131
{
3232
"path": "packages/autocomplete-theme-classic/dist/theme.css",

‎examples/js/app.tsx‎

Lines changed: 0 additions & 167 deletions
This file was deleted.

‎examples/layouts/app.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/** @jsx h */
22
import { autocomplete } from '@algolia/autocomplete-js';
33
import {
4-
NavigationCommandsLayout,
5-
SearchByAlgoliaLayout,
4+
NavigationCommands,
5+
SearchByAlgolia,
66
} from '@algolia/autocomplete-layout-classic';
77
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
88
import algoliasearch from 'algoliasearch/lite';
@@ -30,27 +30,27 @@ autocomplete({
3030
openOnFocus: true,
3131
debug: true,
3232
plugins: [querySuggestionsPlugin],
33-
render({ sections, createElement, Fragment }, root) {
33+
components: {
34+
NavigationCommands,
35+
SearchByAlgolia,
36+
},
37+
render({ sections, Fragment, components }, root) {
3438
render(
3539
<Fragment>
3640
<div className="aa-PanelLayout aa-Panel--scrollable">{sections}</div>
3741
<footer className="aa-PanelFooter">
38-
{NavigationCommandsLayout({
39-
createElement,
40-
Fragment,
41-
translations: {
42+
<components.NavigationCommands
43+
translations={{
4244
toClose: 'pour fermer',
4345
toNavigate: 'pour naviguer',
4446
toSelect: 'pour sélectionner',
45-
},
46-
})}
47-
{SearchByAlgoliaLayout({
48-
createElement,
49-
Fragment,
50-
translations: {
47+
}}
48+
/>
49+
<components.SearchByAlgolia
50+
translations={{
5151
searchBy: 'Recherche par',
52-
},
53-
})}
52+
}}
53+
/>
5454
</footer>
5555
</Fragment>,
5656
root

‎packages/autocomplete-layout-classic/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@
3030
"prepare": "yarn build:esm && yarn build:types",
3131
"watch": "watch \"yarn on:change\" --ignoreDirectoryPattern \"/dist/\""
3232
},
33+
"dependencies": {
34+
"preact": "^10.0.0"
35+
},
3336
"devDependencies": {
3437
"@algolia/autocomplete-js": "1.0.0-alpha.44"
3538
}

‎packages/autocomplete-layout-classic/src/NavigationCommands.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { NavigationCommandsProps } from './NavigationCommands';
2+
3+
declare module '@algolia/autocomplete-js' {
4+
export interface AutocompleteComponents {
5+
NavigationCommands: (props: NavigationCommandsProps) => JSX.Element;
6+
}
7+
}

‎packages/autocomplete-layout-classic/src/NavigationCommands.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/** @jsx createElement */
2+
import type { AutocompleteRenderer } from '@algolia/autocomplete-js';
3+
import {
4+
createElement as preactCreateElement,
5+
Fragment as PreactFragment,
6+
} from 'preact';
7+
8+
type NavigationCommandsTranslations = {
9+
toSelect: string;
10+
toNavigate: string;
11+
toClose: string;
12+
};
13+
14+
const defaultTranslations: NavigationCommandsTranslations = {
15+
toSelect: 'to select',
16+
toNavigate: 'to navigate',
17+
toClose: 'to close',
18+
};
19+
20+
export type NavigationCommandsProps = {
21+
translations?: NavigationCommandsTranslations;
22+
};
23+
24+
export function createNavigationCommandsComponent({
25+
createElement,
26+
}: AutocompleteRenderer) {
27+
return function NavigationCommands({
28+
translations = defaultTranslations,
29+
}: NavigationCommandsProps): JSX.Element {
30+
return (
31+
<div className="aa-NavigationCommands">
32+
<ul className="aa-NavigationCommandList">
33+
<li className="aa-NavigationCommandListItem">
34+
<span className="aa-Key">
35+
<svg width="15" height="15">
36+
<g
37+
fill="none"
38+
stroke="currentColor"
39+
strokeLinecap="round"
40+
strokeLinejoin="round"
41+
strokeWidth="1.2"
42+
>
43+
<path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" />
44+
</g>
45+
</svg>
46+
</span>
47+
<span className="aa-NavigationCommandLabel">
48+
{translations.toSelect}
49+
</span>
50+
</li>
51+
<li className="aa-NavigationCommandListItem">
52+
<span className="aa-Key">
53+
<svg width="15" height="15">
54+
<g
55+
fill="none"
56+
stroke="currentColor"
57+
strokeLinecap="round"
58+
strokeLinejoin="round"
59+
strokeWidth="1.2"
60+
>
61+
<path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" />
62+
</g>
63+
</svg>
64+
</span>
65+
<span className="aa-Key">
66+
<svg width="15" height="15">
67+
<g
68+
fill="none"
69+
stroke="currentColor"
70+
strokeLinecap="round"
71+
strokeLinejoin="round"
72+
strokeWidth="1.2"
73+
>
74+
<path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" />
75+
</g>
76+
</svg>
77+
</span>
78+
<span className="aa-NavigationCommandLabel">
79+
{translations.toNavigate}
80+
</span>
81+
</li>
82+
<li className="aa-NavigationCommandListItem">
83+
<span className="aa-Key">
84+
<svg width="15" height="15">
85+
<g
86+
fill="none"
87+
stroke="currentColor"
88+
strokeLinecap="round"
89+
strokeLinejoin="round"
90+
strokeWidth="1.2"
91+
>
92+
<path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" />
93+
</g>
94+
</svg>
95+
</span>
96+
<span className="aa-NavigationCommandLabel">
97+
{translations.toClose}
98+
</span>
99+
</li>
100+
</ul>
101+
</div>
102+
);
103+
};
104+
}
105+
106+
export const NavigationCommands = createNavigationCommandsComponent({
107+
createElement: preactCreateElement,
108+
Fragment: PreactFragment,
109+
});

0 commit comments

Comments
 (0)