kui-crm 0.0.66 → 0.0.67

package/cjs/index.js

@@ -2670,16 +2670,17 @@ var StyledContainer = styled__default["default"].div(templateObject_2 || (templa
 var StyledBackdrop = styled__default["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 56px;\n  border-radius: 8px;\n  background: rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(4px);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 56px;\n  border-radius: 8px;\n  background: rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(4px);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n"])));
 var templateObject_1$1, templateObject_2, templateObject_3;
 
-var imageWidth = 64;
+var defaultImageWidth = 64;
 var AdaptiveImagesBlock = React.forwardRef(function (props) {
-    var images = props.images, endComponent = props.endComponent, onDelete = props.onDelete, otherProps = __rest(props, ["images", "endComponent", "onDelete"]);
+    var images = props.images, endComponent = props.endComponent, onDelete = props.onDelete, imageWidth = props.imageWidth, otherProps = __rest(props, ["images", "endComponent", "onDelete", "imageWidth"]);
     var ref = React.useRef(null);
     var _a = React.useState(0), selectedImage = _a[0], setSelectedImage = _a[1];
     var _b = kuiUtils.useToggle(), isModalOpen = _b[0], handleModalOpen = _b[1], handleModalClose = _b[2];
-    var _c = React.useState(0), displayedImagesCount = _c[0], setDisplayedImagesCount = _c[1];
-    var staticCards = endComponent ? 2 : 1;
-    var displayedImages = images.slice(0, displayedImagesCount - staticCards);
-    var blurImage = images.slice(displayedImagesCount - 1, displayedImagesCount);
+    var _c = React.useState(0), displayedCardsCount = _c[0], setDisplayedCardsCount = _c[1];
+    var staticCards = endComponent ? 1 : 0;
+    var blurImage = images.slice(displayedCardsCount - staticCards, displayedCardsCount - staticCards + 1);
+    var displayedImagesCount = displayedCardsCount - staticCards - blurImage.length;
+    var displayedImages = images.slice(0, displayedImagesCount);
     var notDisplayedImagesCount = images.slice(displayedImagesCount).length;
     var handleClick = function (index) {
         setSelectedImage(index);
@@ -2688,13 +2689,15 @@ var AdaptiveImagesBlock = React.forwardRef(function (props) {
     React.useEffect(function () {
         var handleResize = ___default["default"].debounce(function () {
             var _a;
-            setDisplayedImagesCount(Math.floor(Number((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth) / imageWidth));
+            var blockWidth = Number((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth);
+            var maxDisplayedImagesCount = Math.floor(blockWidth / (imageWidth || defaultImageWidth));
+            setDisplayedCardsCount(maxDisplayedImagesCount);
         }, 16);
         window.addEventListener("resize", handleResize);
         handleResize();
         return function () { return window.removeEventListener("resize", handleResize); };
     }, [ref]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper, __assign({ container: true, ref: ref, spacing: 1, justify: "space-between" }, otherProps, { children: [displayedImages.map(function (image, index) { return (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(ImageCard, { url: image.smallImageUrl, index: index, onClick: handleClick }) }), image.smallImageUrl)); }), blurImage.length > 0 && notDisplayedImagesCount > 0 && (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(ImageCardWithBackdrop, { url: blurImage[0].smallImageUrl, count: notDisplayedImagesCount, index: displayedImages.length, onClick: handleClick }) }))), blurImage.length > 0 && notDisplayedImagesCount === 0 && (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(ImageCard, { url: blurImage[0].smallImageUrl, index: displayedImages.length, onClick: handleClick }) }))), endComponent] })), jsxRuntime.jsx(GalleryWithThumbnails, { images: images, activeSlide: selectedImage, isOpen: isModalOpen, handleClose: handleModalClose, onDelete: onDelete })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper, __assign({ container: true, ref: ref, spacing: 1, justify: blurImage.length ? "space-between" : "flex-start" }, otherProps, { children: [displayedImages.map(function (image, index) { return (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(ImageCard, { url: image.smallImageUrl, index: index, onClick: handleClick }) }), image.smallImageUrl)); }), !!blurImage.length && !!notDisplayedImagesCount && (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(ImageCardWithBackdrop, { url: blurImage[0].smallImageUrl, count: notDisplayedImagesCount, index: displayedImages.length, onClick: handleClick }) }))), blurImage.length > 0 && notDisplayedImagesCount === 0 && (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(ImageCard, { url: blurImage[0].smallImageUrl, index: displayedImages.length, onClick: handleClick }) }))), endComponent] })), jsxRuntime.jsx(GalleryWithThumbnails, { images: images, activeSlide: selectedImage, isOpen: isModalOpen, handleClose: handleModalClose, onDelete: onDelete })] }));
 });
 var Wrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  flex-wrap: nowrap;\n"], ["\n  overflow: hidden;\n  flex-wrap: nowrap;\n"])));
 var templateObject_1;