feat(Gallery): add default gallery file actions (#327)

Author: kseniya57

src/components/Gallery/README.md

@@ -57,6 +57,22 @@ import {
     {...getGalleryItemDocument({src, name, className})}
     actions={renderActions()}
 />
+
+// you can use the pre-defined file actions (copy and download)
+<GalleryItem
+    key={index}
+    {...getGalleryItemImage({src, name, className})}
+    actions={[
+        getGalleryItemCopyLinkAction({
+            copyUrl: 'https://example.jpg',
+            onCopy: () => console.log('link copied'),
+        }),
+        getGalleryItemDownloadAction({
+            downloadUrl:  'https://example.jpg',
+            onClick: () => console.log('download action clicked'),
+        }),
+    ]}
+/>
 ```
 
 ### Examples

src/components/Gallery/__stories__/Gallery.stories.tsx

@@ -19,7 +19,9 @@ import {
     Gallery,
     GalleryItem,
     GalleryItemAction,
+    getGalleryItemCopyLinkAction,
     getGalleryItemDocument,
+    getGalleryItemDownloadAction,
     getGalleryItemImage,
     getGalleryItemVideo,
 } from '../';
@@ -190,6 +192,53 @@ const FilesGalleryTemplate: StoryFn<GalleryProps> = () => {
 
 export const FilesGallery = FilesGalleryTemplate.bind({});
 
+const FilesGalleryWithPreDefinedActionsTemplate: StoryFn<GalleryProps> = () => {
+    const mobile = useMobile();
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleToggle = React.useCallback(() => {
+        setOpen(false);
+    }, []);
+
+    const handleOpen = React.useCallback(() => {
+        setOpen(true);
+    }, []);
+
+    return (
+        <React.Fragment>
+            <Button onClick={handleOpen} view="action" size="l">
+                Open gallery
+            </Button>
+            <ThemeProvider theme="dark">
+                <Gallery open={open} onOpenChange={handleToggle}>
+                    {files.map((file, index) => (
+                        <GalleryItem
+                            key={index}
+                            {...getGalleryItemFile(file, mobile)}
+                            actions={
+                                file.type === 'text'
+                                    ? []
+                                    : [
+                                          getGalleryItemCopyLinkAction({
+                                              copyUrl: file.url,
+                                          }),
+                                          getGalleryItemDownloadAction({
+                                              downloadUrl: file.url,
+                                          }),
+                                      ]
+                            }
+                            interactive={file.interactive}
+                        />
+                    ))}
+                </Gallery>
+            </ThemeProvider>
+        </React.Fragment>
+    );
+};
+
+export const FilesGalleryWithPreDefinedActions = FilesGalleryWithPreDefinedActionsTemplate.bind({});
+
 const EmptyGalleryTemplate: StoryFn<GalleryProps> = () => {
     const [open, setOpen] = React.useState(false);
 

src/components/Gallery/i18n/en.json

@@ -1,5 +1,7 @@
 {
   "close": "Close",
   "no-items": "No data",
-  "back": "Back"
+  "back": "Back",
+  "copy-link": "Copy link",
+  "download": "Download"
 }

src/components/Gallery/i18n/ru.json

@@ -1,5 +1,7 @@
 {
   "close": "Закрыть",
   "no-items": "Нет данных",
-  "back": "Назад"
+  "back": "Назад",
+  "copy-link": "Скопировать ссылку",
+  "download": "Скачать"
 }

src/components/Gallery/index.ts

@@ -5,3 +5,5 @@ export * from './components/GalleryItemName';
 export {getGalleryItemVideo} from './utils/getGalleryItemVideo';
 export {getGalleryItemImage} from './utils/getGalleryItemImage';
 export {getGalleryItemDocument} from './utils/getGalleryItemDocument';
+export {getGalleryItemDownloadAction} from './utils/getGalleryItemDownloadAction';
+export {getGalleryItemCopyLinkAction} from './utils/getGalleryItemCopyLinkAction';

src/components/Gallery/utils/getGalleryItemCopyLinkAction.tsx

@@ -0,0 +1,32 @@
+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;
+    onCopy?: () => void;
+};
+
+export function getGalleryItemCopyLinkAction({
+    copyUrl,
+    onCopy,
+}: GetGalleryItemCopyLinkActionArgs): GalleryItemAction {
+    return {
+        id: 'copy-url',
+        title: i18n('copy-link'),
+        icon: <Icon data={Link} />,
+        render: (props) => (
+            <CopyToClipboard text={copyUrl} onCopy={onCopy}>
+                {() => (
+                    <div>
+                        <ActionTooltip title={i18n('copy-link')}>
+                            <Button {...props} />
+                        </ActionTooltip>
+                    </div>
+                )}
+            </CopyToClipboard>
+        ),
+    };
+}

src/components/Gallery/utils/getGalleryItemDownloadAction.tsx

@@ -0,0 +1,28 @@
+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;
+    onClick?: (event?: MouseEvent) => void;
+};
+
+export function getGalleryItemDownloadAction({
+    downloadUrl,
+    onClick,
+}: GetGalleryItemDownloadActionArgs): GalleryItemAction {
+    const handleClick = (event?: MouseEvent) => {
+        event?.stopPropagation();
+        onClick?.();
+    };
+
+    return {
+        id: 'download',
+        title: i18n('download'),
+        icon: <Icon data={ArrowDownToLine} />,
+        href: downloadUrl,
+        onClick: handleClick,
+    };
+}