@ludo.ninja/components 1.1.2 → 1.1.4

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

@@ -1,123 +1,37 @@
+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>
-        </div>
+    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>
-    </StyledChooseItem>
-  );
+    </div>
+  </StyledChooseItem>);
 };
 // Export
 export default ChooseItem;

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

@@ -1,300 +1,116 @@
+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;