fix(Gallery): do not call useTranslation() hook in gallery action builders

Author: d3m1d0v

src/components/Gallery/GalleryItem.tsx

@@ -2,14 +2,16 @@ import * as React from 'react';
 
 import {ButtonProps} from '@gravity-ui/uikit';
 
+import type {TProps, WithTFn} from './i18n';
+
 export type GalleryItemAction = {
     id: string;
-    title: string;
+    title: string | WithTFn;
     hotkey?: string;
     onClick?: () => void;
     href?: string;
     icon: React.ReactNode;
-    render?: (props: ButtonProps) => React.ReactNode;
+    render?: (props: ButtonProps, tProps: TProps) => React.ReactNode;
 };
 
 export type GalleryItemProps = {

src/components/Gallery/components/DesktopGalleryHeader/DesktopGalleryHeader.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {ArrowLeft, ArrowRight, Xmark} from '@gravity-ui/icons';
 import type {ButtonProps} from '@gravity-ui/uikit';
 import {ActionTooltip, Button, Flex, Icon, Text, useDirection} from '@gravity-ui/uikit';
+import isFunction from 'lodash/isFunction';
 
 import {block} from '../../../utils/cn';
 import type {GalleryItemAction} from '../../GalleryItem';
@@ -63,23 +64,24 @@ export const DesktopGalleryHeader = ({
             )}
             <div className={cnDesktopGalleryHeader('actions')}>
                 {actions?.map((action) => {
+                    const title = isFunction(action.title) ? action.title({t}) : action.title;
                     const buttonProps: ButtonProps = {
                         type: 'button',
                         size: 'l',
                         view: 'flat',
                         onClick: action.onClick,
                         href: action.href,
                         target: '__blank',
-                        'aria-label': action.title,
+                        'aria-label': title,
                         children: action.icon,
                     };
 
                     return action.render ? (
                         <React.Fragment key={action.id}>
-                            {action.render(buttonProps)}
+                            {action.render(buttonProps, {t})}
                         </React.Fragment>
                     ) : (
-                        <ActionTooltip key={action.id} title={action.title} hotkey={action.hotkey}>
+                        <ActionTooltip key={action.id} title={title} hotkey={action.hotkey}>
                             <Button {...buttonProps} />
                         </ActionTooltip>
                     );

src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 
 import {Button, ButtonProps, Flex, List, Sheet} from '@gravity-ui/uikit';
+import isFunction from 'lodash/isFunction';
 
 import {block} from '../../../utils/cn';
 import type {GalleryItemAction, GalleryItemProps} from '../../GalleryItem';
+import {i18n} from '../../i18n';
 
 import './MobileGalleryActions.scss';
 
@@ -16,35 +18,47 @@ export type MobileGalleryActionsProps = {
 };
 
 export const MobileGalleryActions = ({open, actions = [], onClose}: MobileGalleryActionsProps) => {
-    const renderListItem = React.useCallback((item: GalleryItemAction) => {
-        const buttonProps: ButtonProps = {
-            type: 'button',
-            size: 'xl',
-            view: 'flat',
-            onClick: item.onClick,
-            href: item.href,
-            target: '__blank',
-            'aria-label': item.title,
-            className: cnMobileGalleryActions('list-item'),
-            width: 'max',
-            children: (
-                <Flex alignItems="center" gap={3} className={cnMobileGalleryActions('custom-item')}>
-                    {item.icon}
-                    {item.title}
-                </Flex>
-            ),
-        };
-
-        return (
-            <React.Fragment>
-                {item.render ? (
-                    <React.Fragment key={item.id}>{item.render(buttonProps)}</React.Fragment>
-                ) : (
-                    <Button {...buttonProps} />
-                )}
-            </React.Fragment>
-        );
-    }, []);
+    const {t} = i18n.useTranslation();
+
+    const renderListItem = React.useCallback(
+        (item: GalleryItemAction) => {
+            const title = isFunction(item.title) ? item.title({t}) : item.title;
+            const buttonProps: ButtonProps = {
+                type: 'button',
+                size: 'xl',
+                view: 'flat',
+                onClick: item.onClick,
+                href: item.href,
+                target: '__blank',
+                'aria-label': title,
+                className: cnMobileGalleryActions('list-item'),
+                width: 'max',
+                children: (
+                    <Flex
+                        alignItems="center"
+                        gap={3}
+                        className={cnMobileGalleryActions('custom-item')}
+                    >
+                        {item.icon}
+                        {title}
+                    </Flex>
+                ),
+            };
+
+            return (
+                <React.Fragment>
+                    {item.render ? (
+                        <React.Fragment key={item.id}>
+                            {item.render(buttonProps, {t})}
+                        </React.Fragment>
+                    ) : (
+                        <Button {...buttonProps} />
+                    )}
+                </React.Fragment>
+            );
+        },
+        [t],
+    );
 
     return (
         <Sheet className={cnMobileGalleryActions()} visible={open} onClose={onClose}>

src/components/Gallery/i18n/index.ts

@@ -6,3 +6,7 @@ import en from './en.json';
 import ru from './ru.json';
 
 export const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}gallery`);
+
+export type TFn = ReturnType<(typeof i18n)['useTranslation']>['t'];
+export type TProps = {t: TFn};
+export type WithTFn = (props: TProps) => string;

src/components/Gallery/utils/getGalleryItemCopyLinkAction.tsx

@@ -2,7 +2,6 @@ import {Link} from '@gravity-ui/icons';
 import {ActionTooltip, Button, CopyToClipboard, Icon} from '@gravity-ui/uikit';
 
 import {GalleryItemAction} from '../GalleryItem';
-import {i18n} from '../i18n';
 
 export type GetGalleryItemCopyLinkActionArgs = {
     copyUrl: string;
@@ -13,13 +12,11 @@ export function getGalleryItemCopyLinkAction({
     copyUrl,
     onCopy,
 }: GetGalleryItemCopyLinkActionArgs): GalleryItemAction {
-    const {t} = i18n.useTranslation();
-
     return {
         id: 'copy-url',
-        title: t('copy-link'),
+        title: ({t}) => t('copy-link'),
         icon: <Icon data={Link} />,
-        render: (props) => (
+        render: (props, {t}) => (
             <CopyToClipboard text={copyUrl} onCopy={onCopy}>
                 {() => (
                     <div>

src/components/Gallery/utils/getGalleryItemDownloadAction.tsx

@@ -2,7 +2,6 @@ import {ArrowDownToLine} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 
 import {GalleryItemAction} from '../GalleryItem';
-import {i18n} from '../i18n';
 
 export type GetGalleryItemDownloadActionArgs = {
     downloadUrl: string;
@@ -13,16 +12,14 @@ export function getGalleryItemDownloadAction({
     downloadUrl,
     onClick,
 }: GetGalleryItemDownloadActionArgs): GalleryItemAction {
-    const {t} = i18n.useTranslation();
-
     const handleClick = (event?: MouseEvent) => {
         event?.stopPropagation();
         onClick?.();
     };
 
     return {
         id: 'download',
-        title: t('download'),
+        title: ({t}) => t('download'),
         icon: <Icon data={ArrowDownToLine} />,
         href: downloadUrl,
         onClick: handleClick,