diff --git a/packages/react-instantsearch-hooks-web/src/ui/Stats.tsx b/packages/react-instantsearch-hooks-web/src/ui/Stats.tsx index ba75db70b9..d73e5cddad 100644 --- a/packages/react-instantsearch-hooks-web/src/ui/Stats.tsx +++ b/packages/react-instantsearch-hooks-web/src/ui/Stats.tsx @@ -9,7 +9,7 @@ export type StatsProps = React.ComponentProps<'div'> & { areHitsSorted?: boolean; classNames?: Partial; translations: { - stats: StatsTranslations; + rootElementText: StatsTranslations; }; }; @@ -49,7 +49,7 @@ export function Stats({ className={cx('ais-Stats', classNames.root, props.className)} > - {translations.stats(translationOptions)} + {translations.rootElementText(translationOptions)} ); diff --git a/packages/react-instantsearch-hooks-web/src/ui/__tests__/Stats.test.tsx b/packages/react-instantsearch-hooks-web/src/ui/__tests__/Stats.test.tsx index 0262266b91..8ab737eae3 100644 --- a/packages/react-instantsearch-hooks-web/src/ui/__tests__/Stats.test.tsx +++ b/packages/react-instantsearch-hooks-web/src/ui/__tests__/Stats.test.tsx @@ -17,7 +17,7 @@ describe('Stats', () => { areHitsSorted: false, nbSortedHits: 100, translations: { - stats: ({ + rootElementText: ({ nbHits, processingTimeMS, nbSortedHits, @@ -153,7 +153,9 @@ describe('Stats', () => { test('renders with translations', () => { const translationFn = ({ areHitsSorted }: StatsTranslationOptions) => areHitsSorted ? 'Sorted' : 'Unsorted'; - let props = createProps({ translations: { stats: translationFn } }); + let props = createProps({ + translations: { rootElementText: translationFn }, + }); const { getByText, rerender } = render(); @@ -163,7 +165,7 @@ describe('Stats', () => { areHitsSorted: true, nbSortedHits: 1, nbHits: 2, - translations: { stats: translationFn }, + translations: { rootElementText: translationFn }, }); rerender(); diff --git a/packages/react-instantsearch-hooks-web/src/widgets/Stats.tsx b/packages/react-instantsearch-hooks-web/src/widgets/Stats.tsx index e83e8ddb15..15382e7b1e 100644 --- a/packages/react-instantsearch-hooks-web/src/widgets/Stats.tsx +++ b/packages/react-instantsearch-hooks-web/src/widgets/Stats.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useStats } from 'react-instantsearch-hooks'; +import { useStats, warn } from 'react-instantsearch-hooks'; import { Stats as StatsUiComponent } from '../ui/Stats'; @@ -19,7 +19,14 @@ type UiProps = Pick< >; export type StatsProps = Omit & - UseStatsProps & { translations?: Partial }; + UseStatsProps & { + translations?: Partial & { + /** + * @deprecated Use `rootElementText` instead. + */ + stats?: Partial['rootElementText']; + }; + }; export function Stats({ translations, ...props }: StatsProps) { const { nbHits, nbSortedHits, processingTimeMS, areHitsSorted } = useStats( @@ -27,6 +34,11 @@ export function Stats({ translations, ...props }: StatsProps) { { $$widgetType: 'ais.stats' } ); + warn( + !translations?.stats, + 'The `stats` translation is deprecated. Please use `rootElementText` instead.' + ); + const statsTranslation = (options: StatsTranslationOptions): string => options.areHitsSorted ? `${options.nbSortedHits!.toLocaleString()} relevant results sorted out of ${options.nbHits.toLocaleString()} found in ${options.processingTimeMS.toLocaleString()}ms` @@ -38,7 +50,7 @@ export function Stats({ translations, ...props }: StatsProps) { processingTimeMS, areHitsSorted, translations: { - stats: statsTranslation, + rootElementText: translations?.stats || statsTranslation, ...translations, }, }; diff --git a/packages/react-instantsearch-hooks-web/src/widgets/__tests__/Stats.test.tsx b/packages/react-instantsearch-hooks-web/src/widgets/__tests__/Stats.test.tsx index 7763f6c010..7c5f982995 100644 --- a/packages/react-instantsearch-hooks-web/src/widgets/__tests__/Stats.test.tsx +++ b/packages/react-instantsearch-hooks-web/src/widgets/__tests__/Stats.test.tsx @@ -143,7 +143,7 @@ describe('Stats', () => { 'Nice stats', + rootElementText: () => 'Nice stats', }} /> @@ -168,6 +168,45 @@ describe('Stats', () => { }); }); + test('renders with deprecated translations (with a deprecation warning)', async () => { + const client = createMockedSearchClient(); + let result: ReturnType | undefined = undefined; + + expect(() => { + result = render( + + 'Nice stats', + }} + /> + + ); + }).toWarnDev( + '[InstantSearch] The `stats` translation is deprecated. Please use `rootElementText` instead.' + ); + + await waitFor(() => { + expect(client.search).toHaveBeenCalledTimes(1); + }); + + const { container } = result!; + + await waitFor(() => { + expect(container.querySelector('.ais-Stats')).toMatchInlineSnapshot(` +
+ + Nice stats + +
+ `); + }); + }); + test('forwards custom class names and `div` props to the root element', () => { const { container } = render( diff --git a/packages/react-instantsearch-hooks/src/index.ts b/packages/react-instantsearch-hooks/src/index.ts index d036391ed3..1eea5858da 100644 --- a/packages/react-instantsearch-hooks/src/index.ts +++ b/packages/react-instantsearch-hooks/src/index.ts @@ -28,3 +28,4 @@ export * from './connectors/useStats'; export * from './connectors/useToggleRefinement'; export * from './hooks/useConnector'; export * from './hooks/useInstantSearch'; +export * from './lib/warn';