Skip to content

Commit 572cd3c

Browse files
justinedelsonjustinedelson
authored
fix(plugins): add translations for query suggestions and recent searches plugins (#1283)
Closes #1282
1 parent b5b47d0 commit 572cd3c

File tree

13 files changed

+437
-12
lines changed

13 files changed

+437
-12
lines changed

‎packages/autocomplete-plugin-query-suggestions/src/__tests__/createQuerySuggestionsPlugin.test.ts

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -645,4 +645,140 @@ describe('createQuerySuggestionsPlugin', () => {
645645
},
646646
]);
647647
});
648+
649+
test('accepts translation', async () => {
650+
const querySuggestionsPlugin = createQuerySuggestionsPlugin({
651+
searchClient,
652+
indexName: 'indexName',
653+
translations: {
654+
fillQueryTitle: (query) => `TEST FILL "${query}"`,
655+
},
656+
});
657+
658+
const container = document.createElement('div');
659+
const panelContainer = document.createElement('div');
660+
661+
document.body.appendChild(panelContainer);
662+
663+
autocomplete({
664+
container,
665+
panelContainer,
666+
plugins: [querySuggestionsPlugin],
667+
});
668+
669+
const input = container.querySelector<HTMLInputElement>('.aa-Input');
670+
671+
fireEvent.input(input, { target: { value: 'a' } });
672+
673+
await waitFor(() => {
674+
expect(
675+
within(
676+
panelContainer.querySelector(
677+
'[data-autocomplete-source-id="querySuggestionsPlugin"]'
678+
)
679+
)
680+
.getAllByRole('option')
681+
.map((option) => option.children)
682+
).toMatchInlineSnapshot(`
683+
Array [
684+
HTMLCollection [
685+
<div
686+
class="aa-ItemWrapper"
687+
>
688+
<div
689+
class="aa-ItemContent"
690+
>
691+
<div
692+
class="aa-ItemIcon aa-ItemIcon--noBorder"
693+
>
694+
<svg
695+
fill="currentColor"
696+
viewBox="0 0 24 24"
697+
>
698+
<path
699+
d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
700+
/>
701+
</svg>
702+
</div>
703+
<div
704+
class="aa-ItemContentBody"
705+
>
706+
<div
707+
class="aa-ItemContentTitle"
708+
>
709+
cooktop
710+
</div>
711+
</div>
712+
</div>
713+
<div
714+
class="aa-ItemActions"
715+
>
716+
<button
717+
class="aa-ItemActionButton"
718+
title="TEST FILL \\"cooktop\\""
719+
>
720+
<svg
721+
fill="currentColor"
722+
viewBox="0 0 24 24"
723+
>
724+
<path
725+
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"
726+
/>
727+
</svg>
728+
</button>
729+
</div>
730+
</div>,
731+
],
732+
HTMLCollection [
733+
<div
734+
class="aa-ItemWrapper"
735+
>
736+
<div
737+
class="aa-ItemContent"
738+
>
739+
<div
740+
class="aa-ItemIcon aa-ItemIcon--noBorder"
741+
>
742+
<svg
743+
fill="currentColor"
744+
viewBox="0 0 24 24"
745+
>
746+
<path
747+
d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
748+
/>
749+
</svg>
750+
</div>
751+
<div
752+
class="aa-ItemContentBody"
753+
>
754+
<div
755+
class="aa-ItemContentTitle"
756+
>
757+
range
758+
</div>
759+
</div>
760+
</div>
761+
<div
762+
class="aa-ItemActions"
763+
>
764+
<button
765+
class="aa-ItemActionButton"
766+
title="TEST FILL \\"range\\""
767+
>
768+
<svg
769+
fill="currentColor"
770+
viewBox="0 0 24 24"
771+
>
772+
<path
773+
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"
774+
/>
775+
</svg>
776+
</button>
777+
</div>
778+
</div>,
779+
],
780+
]
781+
`);
782+
});
783+
});
648784
});

‎packages/autocomplete-plugin-query-suggestions/src/constants.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { AutocompleteSuggestionsPluginTranslations } from './types';
2+
3+
export const defaultTranslations: Required<AutocompleteSuggestionsPluginTranslations> =
4+
{
5+
fillQueryTitle: (text: string) => `Fill query with "${text}"`,
6+
};

‎packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,13 @@ import { getAttributeValueByPath } from '@algolia/autocomplete-shared';
88
import { SearchOptions } from '@algolia/client-search';
99
import { SearchClient } from 'algoliasearch/lite';
1010

11+
import { defaultTranslations } from './constants';
1112
import { getTemplates } from './getTemplates';
12-
import { AutocompleteQuerySuggestionsHit, QuerySuggestionsHit } from './types';
13+
import {
14+
AutocompleteQuerySuggestionsHit,
15+
AutocompleteSuggestionsPluginTranslations,
16+
QuerySuggestionsHit,
17+
} from './types';
1318

1419
export type CreateQuerySuggestionsPluginParams<
1520
TItem extends QuerySuggestionsHit
@@ -64,6 +69,13 @@ export type CreateQuerySuggestionsPluginParams<
6469
* @link https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-query-suggestions/createQuerySuggestionsPlugin/#param-categoriesperitem
6570
*/
6671
categoriesPerItem?: number;
72+
73+
/**
74+
* A mapping of translation strings.
75+
*
76+
* Defaults to English values.
77+
*/
78+
translations?: Partial<AutocompleteSuggestionsPluginTranslations>;
6779
};
6880

6981
export function createQuerySuggestionsPlugin<
@@ -79,6 +91,7 @@ export function createQuerySuggestionsPlugin<
7991
categoryAttribute,
8092
itemsWithCategories,
8193
categoriesPerItem,
94+
translations,
8295
} = getOptions(options);
8396

8497
return {
@@ -156,7 +169,7 @@ export function createQuerySuggestionsPlugin<
156169
},
157170
});
158171
},
159-
templates: getTemplates({ onTapAhead }),
172+
templates: getTemplates({ onTapAhead, translations }),
160173
},
161174
onTapAhead,
162175
state: state as AutocompleteState<TItem>,
@@ -176,5 +189,9 @@ function getOptions<TItem extends AutocompleteQuerySuggestionsHit>(
176189
itemsWithCategories: 1,
177190
categoriesPerItem: 1,
178191
...options,
192+
translations: {
193+
...defaultTranslations,
194+
...options.translations,
195+
},
179196
};
180197
}

‎packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@
22
/** @jsx createElement */
33
import { SourceTemplates } from '@algolia/autocomplete-js';
44

5-
import { QuerySuggestionsHit } from './types';
5+
import {
6+
AutocompleteSuggestionsPluginTranslations,
7+
QuerySuggestionsHit,
8+
} from './types';
69

710
export type GetTemplatesParams<TItem extends QuerySuggestionsHit> = {
811
onTapAhead(item: TItem): void;
12+
translations: AutocompleteSuggestionsPluginTranslations;
913
};
1014

1115
export function getTemplates<TItem extends QuerySuggestionsHit>({
1216
onTapAhead,
17+
translations,
1318
}: GetTemplatesParams<TItem>): SourceTemplates<TItem> {
1419
return {
1520
item({ item, createElement, components }) {
@@ -48,7 +53,7 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
4853
<div className="aa-ItemActions">
4954
<button
5055
className="aa-ItemActionButton"
51-
title={`Fill query with "${item.query}"`}
56+
title={translations.fillQueryTitle(item.query)}
5257
onClick={(event) => {
5358
event.preventDefault();
5459
event.stopPropagation();

‎packages/autocomplete-plugin-query-suggestions/src/types/Translations.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export type AutocompleteSuggestionsPluginTranslations = {
2+
fillQueryTitle: (text: string) => string;
3+
};

‎packages/autocomplete-plugin-query-suggestions/src/types/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './QuerySuggestionsHit';
2+
export * from './Translations';

0 commit comments

Comments
 (0)