feat(view): openFilesGallery returns true if the gallery was opened (#769)

Author: kseniya57

src/view/hooks/useFilesGallery/README.md

@@ -25,6 +25,8 @@ _useFilesGallery returns function `openFilesGallery` with the following args_:
 | :------- | :--------------------------------- | :------- | :----- | :------ | :-------------- |
 | event    | `React.MouseEvent<HTMLDivElement>` | Yes      |        |         | The click event |
 
+`openFilesGallery` function returns a boolean flag, which is true if the gallery has been opened.
+
 ### Usage
 
 First you should install @gravity-ui/components library and wrap your content into the GalleryProvider to be able to use the hook

src/view/hooks/useFilesGallery/useFilesGallery.tsx

@@ -11,57 +11,62 @@ export function useFilesGallery(customFiles?: GalleryItemPropsWithUrl[]) {
     return {
         openFilesGallery: React.useCallback(
             (event: React.MouseEvent<HTMLDivElement>) => {
-                if (event.target instanceof HTMLElement) {
-                    let fileLink = '';
+                if (!(event.target instanceof HTMLElement)) {
+                    return false;
+                }
 
-                    if (event.target.tagName === 'IMG' && !event.target.closest('a')) {
-                        fileLink = event.target.getAttribute('src') ?? '';
-                    } else if (event.target.tagName === 'A') {
-                        fileLink = event.target.getAttribute('href') ?? '';
-                    }
+                let fileLink = '';
 
-                    if (!fileLink) {
-                        return;
-                    }
+                if (event.target.tagName === 'IMG' && !event.target.closest('a')) {
+                    fileLink = event.target.getAttribute('src') ?? '';
+                } else if (event.target.tagName === 'A') {
+                    fileLink = event.target.getAttribute('href') ?? '';
+                }
 
-                    const filesFromContent = [
-                        ...(event.currentTarget?.querySelectorAll('img,a') ?? []),
-                    ].reduce<GalleryItemPropsWithUrl[]>((result, element) => {
-                        const isImage = element.tagName === 'IMG';
-                        const link = isImage
-                            ? element.getAttribute('src')
-                            : element.getAttribute('href');
-
-                        if (link && !customFiles?.some((item) => item.url === link)) {
-                            const extension = link.match(extensionRegex)?.[0] || '';
-
-                            if (isImage || supportedExtensions.includes(extension)) {
-                                const name =
-                                    (isImage
-                                        ? element.getAttribute('alt')
-                                        : element.getAttribute('title')) || '';
-
-                                result.push({
-                                    ...(supportedVideoExtensions.includes(extension)
-                                        ? getGalleryItemVideo({src: link, name: name})
-                                        : getGalleryItemImage({src: link, name: name})),
-                                    url: link,
-                                });
-                            }
-                        }
+                if (!fileLink) {
+                    return false;
+                }
 
-                        return result;
-                    }, []);
+                const filesFromContent = [
+                    ...(event.currentTarget?.querySelectorAll('img,a') ?? []),
+                ].reduce<GalleryItemPropsWithUrl[]>((result, element) => {
+                    const isImage = element.tagName === 'IMG';
+                    const link = isImage
+                        ? element.getAttribute('src')
+                        : element.getAttribute('href');
 
-                    const files = [...(customFiles ?? []), ...filesFromContent];
+                    if (link && !customFiles?.some((item) => item.url === link)) {
+                        const extension = link.match(extensionRegex)?.[0] || '';
 
-                    const initialItemIndex = files.findIndex((item) => item.url === fileLink);
+                        if (isImage || supportedExtensions.includes(extension)) {
+                            const name =
+                                (isImage
+                                    ? element.getAttribute('alt')
+                                    : element.getAttribute('title')) || '';
 
-                    if (initialItemIndex !== -1) {
-                        event.preventDefault();
-                        openGallery(files, initialItemIndex);
+                            result.push({
+                                ...(supportedVideoExtensions.includes(extension)
+                                    ? getGalleryItemVideo({src: link, name: name})
+                                    : getGalleryItemImage({src: link, name: name})),
+                                url: link,
+                            });
+                        }
                     }
+
+                    return result;
+                }, []);
+
+                const files = [...(customFiles ?? []), ...filesFromContent];
+
+                const initialItemIndex = files.findIndex((item) => item.url === fileLink);
+
+                if (initialItemIndex !== -1) {
+                    event.preventDefault();
+                    openGallery(files, initialItemIndex);
+                    return true;
                 }
+
+                return false;
             },
             [customFiles, openGallery],
         ),