fix(Gallery): actions placement (#314)

Author: nikita-jpg

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

@@ -212,6 +212,7 @@ const EmptyGalleryTemplate: StoryFn<GalleryProps> = () => {
 export const EmptyGallery = EmptyGalleryTemplate.bind({});
 
 const SingleItemGalleryTemplate: StoryFn<GalleryProps> = () => {
+    const mobile = useMobile();
     const [open, setOpen] = React.useState(false);
 
     const handleToggle = React.useCallback(() => {
@@ -227,13 +228,60 @@ const SingleItemGalleryTemplate: StoryFn<GalleryProps> = () => {
         name: 'Corgi image',
     });
 
+    const renderActions = React.useCallback(
+        (file: GalleryFile) => {
+            const result: GalleryItemAction[] = [
+                {
+                    id: 'clipboard',
+                    title: file.type === 'text' ? 'Copy text' : 'Copy link',
+                    icon: <Icon data={Link} size={mobile ? 18 : 16} />,
+                    render: (buttonProps) => {
+                        return (
+                            <CopyToClipboard
+                                onCopy={() =>
+                                    alert(file.type === 'text' ? 'Text copied!' : 'Link copied!')
+                                }
+                                text={file.type === 'text' ? file.text : file.url || ''}
+                            >
+                                {() => {
+                                    if (mobile) {
+                                        return <Button {...buttonProps} />;
+                                    }
+                                    return (
+                                        <ActionTooltip
+                                            title={file.type === 'text' ? 'Copy text' : 'Copy link'}
+                                        >
+                                            <Button {...buttonProps} />
+                                        </ActionTooltip>
+                                    );
+                                }}
+                            </CopyToClipboard>
+                        );
+                    },
+                },
+            ];
+
+            if (file.type !== 'text') {
+                result.push({
+                    id: 'new-tab',
+                    title: 'Open in new tab',
+                    icon: <Icon data={ArrowUpRightFromSquare} size={mobile ? 18 : 16} />,
+                    href: file.url,
+                });
+            }
+
+            return result;
+        },
+        [mobile],
+    );
+
     return (
         <React.Fragment>
             <Button onClick={handleOpen} view="action" size="l">
                 Open gallery
             </Button>
             <Gallery open={open} onOpenChange={handleToggle}>
-                <GalleryItem {...imageGalleryItem} />
+                <GalleryItem {...imageGalleryItem} actions={renderActions(files[0])} />
             </Gallery>
         </React.Fragment>
     );

src/components/Gallery/components/MobileGalleryHeader/MobileGalleryHeader.scss

@@ -37,6 +37,10 @@ $block: '.#{variables.$ns}gallery-header-mobile';
         }
     }
 
+    &__button-actions {
+        grid-column: 3;
+    }
+
     &__footer {
         width: 100%;
         padding: var(--g-spacing-2) var(--g-spacing-5) var(--g-spacing-2);

src/components/Gallery/components/MobileGalleryHeader/MobileGalleryHeader.tsx

@@ -77,6 +77,7 @@ export const MobileGalleryHeader = ({
                         onClick={handleMobileActionClick}
                         aria-label={i18n('close')}
                         color="primary"
+                        className={cnGalleryHeaderMobile('button-actions')}
                     >
                         <Icon size={MOBILE_ICON_SIZE} data={Ellipsis} />
                     </Button>