@ludo.ninja/components 1.0.7 → 1.0.9

package/dist/modules/gallery/ui/chooseGalleryItems/chooseGalleryItem/index.jsx

@@ -1,37 +1,123 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import React from 'react';
+
 import styled from 'styled-components';
+
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
+import {
+  BlackColor,
+  InactiveButtonColor,
+  TextGrayColor,
+} from '@/styles/colors';
 import { FH6, FH7 } from '@/styles/typography';
+
 import { dmsansFontVarCss } from '@/fonts/vars';
+
 import DefaultGalleryIcon from '@/public/gallery/defaultImage.svg';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
 // Styles
-var StyledChooseItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px;\n  border-radius: 8px;\n  background-color: ", ";\n\n  .content-item-gallery-pic-default {\n    rect {\n      fill: ", ";\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n\n    .content-item-gallery-pic-default {\n      rect {\n        fill: #cfd5ea;\n      }\n    }\n  }\n\n  .content-item-wrapper {\n    display: flex;\n    align-items: center;\n  }\n\n  .content-item-gallery-pic,\n  .content-item-gallery-pic-default {\n    img,\n    svg {\n      border-radius: 6px;\n      width: 32px;\n      height: 32px;\n    }\n  }\n\n  .content-item-gallery-name {\n    margin-left: 16px;\n\n    .name {\n      ", ";\n      color: ", ";\n    }\n\n    .items-count {\n      font-family: ", ";\n      ", ";\n      color: ", ";\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n\n    .content-item-gallery-pic,\n    .content-item-gallery-pic-default {\n      img,\n      svg {\n        border-radius: ", ";\n        width: ", ";\n        height: ", ";\n      }\n    }\n\n    .content-item-gallery-name {\n      margin-left: ", ";\n    }\n  }\n"], ["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px;\n  border-radius: 8px;\n  background-color: ", ";\n\n  .content-item-gallery-pic-default {\n    rect {\n      fill: ", ";\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n\n    .content-item-gallery-pic-default {\n      rect {\n        fill: #cfd5ea;\n      }\n    }\n  }\n\n  .content-item-wrapper {\n    display: flex;\n    align-items: center;\n  }\n\n  .content-item-gallery-pic,\n  .content-item-gallery-pic-default {\n    img,\n    svg {\n      border-radius: 6px;\n      width: 32px;\n      height: 32px;\n    }\n  }\n\n  .content-item-gallery-name {\n    margin-left: 16px;\n\n    .name {\n      ", ";\n      color: ", ";\n    }\n\n    .items-count {\n      font-family: ", ";\n      ", ";\n      color: ", ";\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n\n    .content-item-gallery-pic,\n    .content-item-gallery-pic-default {\n      img,\n      svg {\n        border-radius: ", ";\n        width: ", ";\n        height: ", ";\n      }\n    }\n\n    .content-item-gallery-name {\n      margin-left: ", ";\n    }\n  }\n"])), function (props) {
+var StyledChooseItem = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px;\n  border-radius: 8px;\n  background-color: ',
+        ';\n\n  .content-item-gallery-pic-default {\n    rect {\n      fill: ',
+        ';\n    }\n  }\n\n  &:hover {\n    background-color: ',
+        ';\n\n    .content-item-gallery-pic-default {\n      rect {\n        fill: #cfd5ea;\n      }\n    }\n  }\n\n  .content-item-wrapper {\n    display: flex;\n    align-items: center;\n  }\n\n  .content-item-gallery-pic,\n  .content-item-gallery-pic-default {\n    img,\n    svg {\n      border-radius: 6px;\n      width: 32px;\n      height: 32px;\n    }\n  }\n\n  .content-item-gallery-name {\n    margin-left: 16px;\n\n    .name {\n      ',
+        ';\n      color: ',
+        ';\n    }\n\n    .items-count {\n      font-family: ',
+        ';\n      ',
+        ';\n      color: ',
+        ';\n    }\n  }\n\n  ',
+        ' {\n    padding: ',
+        ' ',
+        ';\n    border-radius: ',
+        ';\n\n    .content-item-gallery-pic,\n    .content-item-gallery-pic-default {\n      img,\n      svg {\n        border-radius: ',
+        ';\n        width: ',
+        ';\n        height: ',
+        ';\n      }\n    }\n\n    .content-item-gallery-name {\n      margin-left: ',
+        ';\n    }\n  }\n',
+      ],
+      [
+        '\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px;\n  border-radius: 8px;\n  background-color: ',
+        ';\n\n  .content-item-gallery-pic-default {\n    rect {\n      fill: ',
+        ';\n    }\n  }\n\n  &:hover {\n    background-color: ',
+        ';\n\n    .content-item-gallery-pic-default {\n      rect {\n        fill: #cfd5ea;\n      }\n    }\n  }\n\n  .content-item-wrapper {\n    display: flex;\n    align-items: center;\n  }\n\n  .content-item-gallery-pic,\n  .content-item-gallery-pic-default {\n    img,\n    svg {\n      border-radius: 6px;\n      width: 32px;\n      height: 32px;\n    }\n  }\n\n  .content-item-gallery-name {\n    margin-left: 16px;\n\n    .name {\n      ',
+        ';\n      color: ',
+        ';\n    }\n\n    .items-count {\n      font-family: ',
+        ';\n      ',
+        ';\n      color: ',
+        ';\n    }\n  }\n\n  ',
+        ' {\n    padding: ',
+        ' ',
+        ';\n    border-radius: ',
+        ';\n\n    .content-item-gallery-pic,\n    .content-item-gallery-pic-default {\n      img,\n      svg {\n        border-radius: ',
+        ';\n        width: ',
+        ';\n        height: ',
+        ';\n      }\n    }\n\n    .content-item-gallery-name {\n      margin-left: ',
+        ';\n    }\n  }\n',
+      ]
+    )),
+  function (props) {
     return props.isSelected ? InactiveButtonColor : 'none';
-}, function (props) { return (props.isSelected ? '#cfd5ea' : ''); }, function (props) {
+  },
+  function (props) {
+    return props.isSelected ? '#cfd5ea' : '';
+  },
+  function (props) {
     return props.isSelected ? 'none' : InactiveButtonColor;
-}, FH6, BlackColor, dmsansFontVarCss.css, FH7, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(6), adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(16));
+  },
+  FH6,
+  BlackColor,
+  dmsansFontVarCss.css,
+  FH7,
+  TextGrayColor,
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(6),
+  adaptiveValueCalc(8),
+  adaptiveValueCalc(8),
+  adaptiveValueCalc(6),
+  adaptiveValueCalc(32),
+  adaptiveValueCalc(32),
+  adaptiveValueCalc(16)
+);
 // Component
 var ChooseItem = function (_a) {
-    var galleryItem = _a.galleryItem, handleIsSelected = _a.handleIsSelected, isSelected = _a.isSelected;
-    return (<StyledChooseItem isSelected={isSelected} onClick={function () { return handleIsSelected(galleryItem); }}>
-    <div className={'content-item-wrapper'}>
-      <div className="content-item-gallery-pic-default">
-        <DefaultGalleryIcon />
-      </div>
-      <div className={'content-item-gallery-name'}>
-        <p className={'name'}>{galleryItem.getGalleryName()}</p>
-        <span className={"items-count"}>
-          {galleryItem.getGalleryItemsCount()}
-        </span>
+  var galleryItem = _a.galleryItem,
+    handleIsSelected = _a.handleIsSelected,
+    isSelected = _a.isSelected;
+  return (
+    <StyledChooseItem
+      isSelected={isSelected}
+      onClick={function () {
+        return handleIsSelected(galleryItem);
+      }}
+    >
+      <div className={'content-item-wrapper'}>
+        <div className="content-item-gallery-pic-default">
+          <DefaultGalleryIcon />
+        </div>
+        <div className={'content-item-gallery-name'}>
+          <p className={'name'}>{galleryItem.getGalleryName()}</p>
+          <span className={'items-count'}>
+            {galleryItem.getGalleryItemsCount()}
+          </span>
+        </div>
       </div>
-    </div>
-  </StyledChooseItem>);
+    </StyledChooseItem>
+  );
 };
 // Export
 export default ChooseItem;

package/dist/modules/gallery/ui/chooseGalleryItems/index.jsx

@@ -1,116 +1,300 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useEffect, useState } from 'react';
+
 import { Virtuoso } from 'react-virtuoso';
 import styled from 'styled-components';
+
 import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
 import { PlaceholderItemsGallery } from '@/modules/gallery/ui/PlaceholderItemsGallery';
 import ChooseGalleryItem from '@/modules/gallery/ui/chooseGalleryItems/chooseGalleryItem';
+
 import { useUiStore } from '@/store/ui';
+
 import { useFetchMyFavoritesV2 } from '@/api/server-galleries/queries/useFetchMyFavorites';
 import { useFetchMyGalleriesV2 } from '@/api/server-galleries/queries/useFetchMyGalleries';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { BlackColor } from '@/styles/colors';
 import { FH3 } from '@/styles/typography';
+
 import MainButton from '@/system/Buttons/MainButton';
 import CardsHolderLoader from '@/system/CardsHolderWithSkeleton/CardsHolderLoader';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+var __rest =
+  (this && this.__rest) ||
+  function (s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === 'function')
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (
+          e.indexOf(p[i]) < 0 &&
+          Object.prototype.propertyIsEnumerable.call(s, p[i])
+        )
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  };
+
 // Styles
-var StyledChooseGalleryItems = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: calc(460px - 24px);\n  //position: relative;\n\n  @media (min-width: 1200px) {\n    min-width: 344px;\n  }\n\n  .head {\n    margin-bottom: 20px;\n\n    .tittle {\n      ", ";\n      color: ", ";\n      margin: 0;\n    }\n  }\n\n  .content {\n    height: 234px;\n    overflow-x: auto;\n    margin-bottom: 55px;\n\n    [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n      padding-top: 4px;\n    }\n  }\n\n  .favoriteBtn {\n    button {\n      width: 100%;\n    }\n  }\n\n  .btns {\n    margin-top: 16px;\n    display: flex;\n    justify-content: center;\n    gap: 16px;\n\n    button {\n      width: 100%;\n    }\n\n    //button:not(:last-child) {\n    // margin-right: 16px;\n    //}\n  }\n\n  @media (max-width: 767px) {\n    .content {\n      width: auto;\n      margin-bottom: 32px;\n    }\n  }\n\n  ", " {\n    min-height: calc(", " - ", ");\n    min-width: ", ";\n\n    .head {\n      margin-bottom: ", ";\n    }\n\n    .content {\n      height: ", ";\n      margin-bottom: ", ";\n\n      [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n        padding-top ", ";\n      }\n    }\n\n    .btns {\n      margin-top: ", ";\n      gap: ", ";\n    }\n  }\n"], ["\n  min-height: calc(460px - 24px);\n  //position: relative;\n\n  @media (min-width: 1200px) {\n    min-width: 344px;\n  }\n\n  .head {\n    margin-bottom: 20px;\n\n    .tittle {\n      ", ";\n      color: ", ";\n      margin: 0;\n    }\n  }\n\n  .content {\n    height: 234px;\n    overflow-x: auto;\n    margin-bottom: 55px;\n\n    [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n      padding-top: 4px;\n    }\n  }\n\n  .favoriteBtn {\n    button {\n      width: 100%;\n    }\n  }\n\n  .btns {\n    margin-top: 16px;\n    display: flex;\n    justify-content: center;\n    gap: 16px;\n\n    button {\n      width: 100%;\n    }\n\n    //button:not(:last-child) {\n    // margin-right: 16px;\n    //}\n  }\n\n  @media (max-width: 767px) {\n    .content {\n      width: auto;\n      margin-bottom: 32px;\n    }\n  }\n\n  ", " {\n    min-height: calc(", " - ", ");\n    min-width: ", ";\n\n    .head {\n      margin-bottom: ", ";\n    }\n\n    .content {\n      height: ", ";\n      margin-bottom: ", ";\n\n      [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n        padding-top ", ";\n      }\n    }\n\n    .btns {\n      margin-top: ", ";\n      gap: ", ";\n    }\n  }\n"])), FH3, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(460), adaptiveValueCalc(24), adaptiveValueCalc(344), adaptiveValueCalc(20), adaptiveValueCalc(234), adaptiveValueCalc(55), adaptiveValueCalc(4), adaptiveValueCalc(16), adaptiveValueCalc(16));
+var StyledChooseGalleryItems = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  min-height: calc(460px - 24px);\n  //position: relative;\n\n  @media (min-width: 1200px) {\n    min-width: 344px;\n  }\n\n  .head {\n    margin-bottom: 20px;\n\n    .tittle {\n      ',
+        ';\n      color: ',
+        ";\n      margin: 0;\n    }\n  }\n\n  .content {\n    height: 234px;\n    overflow-x: auto;\n    margin-bottom: 55px;\n\n    [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n      padding-top: 4px;\n    }\n  }\n\n  .favoriteBtn {\n    button {\n      width: 100%;\n    }\n  }\n\n  .btns {\n    margin-top: 16px;\n    display: flex;\n    justify-content: center;\n    gap: 16px;\n\n    button {\n      width: 100%;\n    }\n\n    //button:not(:last-child) {\n    // margin-right: 16px;\n    //}\n  }\n\n  @media (max-width: 767px) {\n    .content {\n      width: auto;\n      margin-bottom: 32px;\n    }\n  }\n\n  ",
+        ' {\n    min-height: calc(',
+        ' - ',
+        ');\n    min-width: ',
+        ';\n\n    .head {\n      margin-bottom: ',
+        ';\n    }\n\n    .content {\n      height: ',
+        ';\n      margin-bottom: ',
+        ";\n\n      [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n        padding-top ",
+        ';\n      }\n    }\n\n    .btns {\n      margin-top: ',
+        ';\n      gap: ',
+        ';\n    }\n  }\n',
+      ],
+      [
+        '\n  min-height: calc(460px - 24px);\n  //position: relative;\n\n  @media (min-width: 1200px) {\n    min-width: 344px;\n  }\n\n  .head {\n    margin-bottom: 20px;\n\n    .tittle {\n      ',
+        ';\n      color: ',
+        ";\n      margin: 0;\n    }\n  }\n\n  .content {\n    height: 234px;\n    overflow-x: auto;\n    margin-bottom: 55px;\n\n    [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n      padding-top: 4px;\n    }\n  }\n\n  .favoriteBtn {\n    button {\n      width: 100%;\n    }\n  }\n\n  .btns {\n    margin-top: 16px;\n    display: flex;\n    justify-content: center;\n    gap: 16px;\n\n    button {\n      width: 100%;\n    }\n\n    //button:not(:last-child) {\n    // margin-right: 16px;\n    //}\n  }\n\n  @media (max-width: 767px) {\n    .content {\n      width: auto;\n      margin-bottom: 32px;\n    }\n  }\n\n  ",
+        ' {\n    min-height: calc(',
+        ' - ',
+        ');\n    min-width: ',
+        ';\n\n    .head {\n      margin-bottom: ',
+        ';\n    }\n\n    .content {\n      height: ',
+        ';\n      margin-bottom: ',
+        ";\n\n      [data-test-id='virtuoso-item-list'] > *:not([data-index='0']) {\n        padding-top ",
+        ';\n      }\n    }\n\n    .btns {\n      margin-top: ',
+        ';\n      gap: ',
+        ';\n    }\n  }\n',
+      ]
+    )),
+  FH3,
+  BlackColor,
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(460),
+  adaptiveValueCalc(24),
+  adaptiveValueCalc(344),
+  adaptiveValueCalc(20),
+  adaptiveValueCalc(234),
+  adaptiveValueCalc(55),
+  adaptiveValueCalc(4),
+  adaptiveValueCalc(16),
+  adaptiveValueCalc(16)
+);
 var GalleryItems = function (_a) {
-    var galleryItems = _a.galleryItems, loadMore = _a.loadMore, isNextLoading = _a.isNextLoading, isAdded = _a.isAdded, titleBtn = _a.titleBtn, title = _a.title, currentMyGalleryId = _a.currentMyGalleryId, setAddGallery = _a.setAddGallery, addMethod = _a.addMethod, ids = _a.ids, error = _a.error, isLoading = _a.isLoading;
-    var _b = useUiStore(function (state) { return ({
+  var galleryItems = _a.galleryItems,
+    loadMore = _a.loadMore,
+    isNextLoading = _a.isNextLoading,
+    isAdded = _a.isAdded,
+    titleBtn = _a.titleBtn,
+    title = _a.title,
+    currentMyGalleryId = _a.currentMyGalleryId,
+    setAddGallery = _a.setAddGallery,
+    addMethod = _a.addMethod,
+    ids = _a.ids,
+    error = _a.error,
+    isLoading = _a.isLoading;
+  var _b = useUiStore(function (state) {
+      return {
         openAlert: state.openAlert,
         closeModalSidebarPortal: state.closeModalSidebarPortal,
         closeModalSidebar: state.closeModalSidebar,
-    }); }), closeModalSidebar = _b.closeModalSidebar, openAlert = _b.openAlert, closeModalSidebarPortal = _b.closeModalSidebarPortal;
-    var _c = useState(null), selectedItem = _c[0], setSelectedItem = _c[1];
-    useEffect(function () {
-        if (isAdded) {
-            setSelectedItem(null);
-            openAlert({
-                type: alertVariants.success,
-                caption: 'NFT successfully added!',
-                text: '',
-            });
-        }
-    }, [isAdded]);
-    useEffect(function () {
-        if (error) {
-            setSelectedItem(null);
-            openAlert({
-                type: alertVariants.error,
-                caption: error.message,
-                text: '',
-            });
-        }
-    }, [error]);
-    var handleIsSelected = function (newGallery) {
-        setSelectedItem(newGallery);
-    };
-    var renderItems = galleryItems === null || galleryItems === void 0 ? void 0 : galleryItems.filter(function (gallery) {
-        return gallery.getGalleryType() !== 'likelist' &&
-            gallery.getGalleryId() !== currentMyGalleryId;
-    }).map(function (galleryItem) { return (<ChooseGalleryItem key={galleryItem.getGalleryId()} galleryItem={galleryItem} isSelected={galleryItem.getGalleryId() === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.getGalleryId())} handleIsSelected={handleIsSelected}/>); });
-    return (<StyledChooseGalleryItems>
+      };
+    }),
+    closeModalSidebar = _b.closeModalSidebar,
+    openAlert = _b.openAlert,
+    closeModalSidebarPortal = _b.closeModalSidebarPortal;
+  var _c = useState(null),
+    selectedItem = _c[0],
+    setSelectedItem = _c[1];
+  useEffect(
+    function () {
+      if (isAdded) {
+        setSelectedItem(null);
+        openAlert({
+          type: alertVariants.success,
+          caption: 'NFT successfully added!',
+          text: '',
+        });
+      }
+    },
+    [isAdded]
+  );
+  useEffect(
+    function () {
+      if (error) {
+        setSelectedItem(null);
+        openAlert({
+          type: alertVariants.error,
+          caption: error.message,
+          text: '',
+        });
+      }
+    },
+    [error]
+  );
+  var handleIsSelected = function (newGallery) {
+    setSelectedItem(newGallery);
+  };
+  var renderItems =
+    galleryItems === null || galleryItems === void 0
+      ? void 0
+      : galleryItems
+          .filter(function (gallery) {
+            return (
+              gallery.getGalleryType() !== 'likelist' &&
+              gallery.getGalleryId() !== currentMyGalleryId
+            );
+          })
+          .map(function (galleryItem) {
+            return (
+              <ChooseGalleryItem
+                key={galleryItem.getGalleryId()}
+                galleryItem={galleryItem}
+                isSelected={
+                  galleryItem.getGalleryId() ===
+                  (selectedItem === null || selectedItem === void 0
+                    ? void 0
+                    : selectedItem.getGalleryId())
+                }
+                handleIsSelected={handleIsSelected}
+              />
+            );
+          });
+  return (
+    <StyledChooseGalleryItems>
       <div className={'head'}>
         <h3 className={'tittle'}>{title}</h3>
       </div>
       <div className="content">
-        {!isLoading && galleryItems && (<Virtuoso totalCount={renderItems.length} itemContent={function (index) { return renderItems[index]; }} endReached={loadMore} overscan={200} components={{
-                Footer: function () { return (isNextLoading ? <CardsHolderLoader /> : null); },
-            }}/>)}
-        {isLoading && (<Virtuoso totalCount={20} itemContent={function () { return <PlaceholderItemsGallery />; }}/>)}
+        {!isLoading && galleryItems && (
+          <Virtuoso
+            totalCount={renderItems.length}
+            itemContent={function (index) {
+              return renderItems[index];
+            }}
+            endReached={loadMore}
+            overscan={200}
+            components={{
+              Footer: function () {
+                return isNextLoading ? <CardsHolderLoader /> : null;
+              },
+            }}
+          />
+        )}
+        {isLoading && (
+          <Virtuoso
+            totalCount={20}
+            itemContent={function () {
+              return <PlaceholderItemsGallery />;
+            }}
+          />
+        )}
       </div>
       <div className="favoriteBtn">
-        <MainButton text={titleBtn} variant="outline" onClick={function () { return setAddGallery(true); }}/>
+        <MainButton
+          text={titleBtn}
+          variant="outline"
+          onClick={function () {
+            return setAddGallery(true);
+          }}
+        />
       </div>
 
       <div className="btns">
         {/*<div className={'add'}>*/}
-        <MainButton text={'Add'} variant="primaryM" disabled={!selectedItem || !ids} onClick={function () {
-            addMethod(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.getGalleryId(), ids);
-        }}/>
+        <MainButton
+          text={'Add'}
+          variant="primaryM"
+          disabled={!selectedItem || !ids}
+          onClick={function () {
+            addMethod(
+              selectedItem === null || selectedItem === void 0
+                ? void 0
+                : selectedItem.getGalleryId(),
+              ids
+            );
+          }}
+        />
         {/*</div>*/}
         {/*<div className={'cancel'}>*/}
-        <MainButton text={'Cancel'} variant="secondary" onClick={function () {
+        <MainButton
+          text={'Cancel'}
+          variant="secondary"
+          onClick={function () {
             closeModalSidebarPortal();
             closeModalSidebar();
-        }}/>
+          }}
+        />
         {/*</div>*/}
       </div>
-    </StyledChooseGalleryItems>);
+    </StyledChooseGalleryItems>
+  );
 };
 var GalleryItemsMyGallery = function (props) {
-    var _a = useFetchMyGalleriesV2(), galleryItems = _a.galleryItems, loadMore = _a.loadMore, isNextLoading = _a.isNextLoading, load = _a.load, isLoading = _a.isLoading;
-    useEffect(function () {
-        load({ pageSize: 100, pageToken: '' });
-    }, []);
-    return (<GalleryItems {...props} galleryItems={galleryItems} loadMore={loadMore} isNextLoading={isNextLoading} isLoading={isLoading}/>);
+  var _a = useFetchMyGalleriesV2(),
+    galleryItems = _a.galleryItems,
+    loadMore = _a.loadMore,
+    isNextLoading = _a.isNextLoading,
+    load = _a.load,
+    isLoading = _a.isLoading;
+  useEffect(function () {
+    load({ pageSize: 100, pageToken: '' });
+  }, []);
+  return (
+    <GalleryItems
+      {...props}
+      galleryItems={galleryItems}
+      loadMore={loadMore}
+      isNextLoading={isNextLoading}
+      isLoading={isLoading}
+    />
+  );
 };
 var GalleryItemsMyFavorite = function (props) {
-    var _a = useFetchMyFavoritesV2(), galleryItems = _a.galleryItems, loadMore = _a.loadMore, isNextLoading = _a.isNextLoading, load = _a.load, isLoading = _a.isLoading;
-    useEffect(function () {
-        load({ pageSize: 100, pageToken: '' });
-    }, []);
-    return (<GalleryItems {...props} galleryItems={galleryItems} loadMore={loadMore} isNextLoading={isNextLoading} isLoading={isLoading}/>);
+  var _a = useFetchMyFavoritesV2(),
+    galleryItems = _a.galleryItems,
+    loadMore = _a.loadMore,
+    isNextLoading = _a.isNextLoading,
+    load = _a.load,
+    isLoading = _a.isLoading;
+  useEffect(function () {
+    load({ pageSize: 100, pageToken: '' });
+  }, []);
+  return (
+    <GalleryItems
+      {...props}
+      galleryItems={galleryItems}
+      loadMore={loadMore}
+      isNextLoading={isNextLoading}
+      isLoading={isLoading}
+    />
+  );
 };
 var ChooseGalleryItems = function (_a) {
-    var isGetMyGalleries = _a.isGetMyGalleries, props = __rest(_a, ["isGetMyGalleries"]);
-    return isGetMyGalleries ? (<GalleryItemsMyGallery {...props}/>) : (<GalleryItemsMyFavorite {...props}/>);
+  var isGetMyGalleries = _a.isGetMyGalleries,
+    props = __rest(_a, ['isGetMyGalleries']);
+  return isGetMyGalleries ? (
+    <GalleryItemsMyGallery {...props} />
+  ) : (
+    <GalleryItemsMyFavorite {...props} />
+  );
 };
 // Export
 export default ChooseGalleryItems;