kui-crm 0.0.277 → 0.0.280
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.js +19 -9
- package/cjs/index.js.map +1 -1
- package/index.d.ts +4 -1
- package/index.js +19 -9
- package/index.js.map +1 -1
- package/package.json +1 -1
package/cjs/index.js
CHANGED
|
@@ -2682,12 +2682,24 @@ function PreviewImageCard(props) {
|
|
|
2682
2682
|
};
|
|
2683
2683
|
var handleHover = function () { return setCloseButtonOpacity(1); };
|
|
2684
2684
|
var handleBlur = function () { return setCloseButtonOpacity(0); };
|
|
2685
|
-
return (jsxRuntime.jsxs(Wrapper$6, __assign({ onMouseEnter: handleHover, onMouseLeave: handleBlur, onClick: handleClick, ref: cardRef }, otherProps, { children: [jsxRuntime.jsx(StyledImage$6, { src: url, alt: "image" }), jsxRuntime.jsx(Backdrop$1, { children: jsxRuntime.jsx(kuiIcon.LoupeIcon, {}) }), ReactDOM.createPortal(jsxRuntime.jsx(StyledRemoveButton
|
|
2685
|
+
return (jsxRuntime.jsxs(Wrapper$6, __assign({ className: "KUI-ImageCard", onMouseEnter: handleHover, onMouseLeave: handleBlur, onClick: handleClick, ref: cardRef }, otherProps, { children: [jsxRuntime.jsx(StyledImage$6, { src: url, alt: "image" }), jsxRuntime.jsx(Backdrop$1, { children: jsxRuntime.jsx(kuiIcon.LoupeIcon, {}) }), ReactDOM.createPortal(jsxRuntime.jsx(StyledRemoveButton, __assign({ isCircle: true, variant: "white", onClick: handleDelete, style: closeButtonStyles, disabled: disabled }, { children: jsxRuntime.jsx(kuiIcon.CloseIcon, { width: 10, height: 10 }) })), document.body)] })));
|
|
2686
2686
|
}
|
|
2687
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n margin-top: 8px;\n position: relative;\n
|
|
2687
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n overflow: hidden;\n margin-top: 8px;\n position: relative;\n cursor: pointer;\n user-select: none;\n width: ", "px;\n height: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"], ["\n overflow: hidden;\n margin-top: 8px;\n position: relative;\n cursor: pointer;\n user-select: none;\n width: ", "px;\n height: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"])), function (_a) {
|
|
2688
|
+
var width = _a.width;
|
|
2689
|
+
return width || 56;
|
|
2690
|
+
}, function (_a) {
|
|
2691
|
+
var width = _a.width;
|
|
2692
|
+
return width || 56;
|
|
2693
|
+
}, kuiBasic.theme.breakpoints.sm, function (_a) {
|
|
2694
|
+
var width = _a.width, mobileWidth = _a.mobileWidth;
|
|
2695
|
+
return mobileWidth || width || 56;
|
|
2696
|
+
}, function (_a) {
|
|
2697
|
+
var width = _a.width, mobileWidth = _a.mobileWidth;
|
|
2698
|
+
return mobileWidth || width || 56;
|
|
2699
|
+
});
|
|
2688
2700
|
var StyledImage$6 = styled__default["default"].img(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n border-radius: 8px;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n border-radius: 8px;\n"])));
|
|
2689
2701
|
var Backdrop$1 = styled__default["default"].div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n background-color: rgba(25, 25, 25, 0.4);\n transition: all ease-out 0.3s;\n opacity: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n &:hover {\n opacity: 1;\n }\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n background-color: rgba(25, 25, 25, 0.4);\n transition: all ease-out 0.3s;\n opacity: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n &:hover {\n opacity: 1;\n }\n"])));
|
|
2690
|
-
var StyledRemoveButton
|
|
2702
|
+
var StyledRemoveButton = styled__default["default"](kuiBasic.Button)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n //opacity: 0;\n pointer-events: none;\n width: 24px;\n height: 24px;\n position: absolute;\n transition: all ease-out 0.3s;\n &:disabled {\n opacity: 0;\n }\n"], ["\n //opacity: 0;\n pointer-events: none;\n width: 24px;\n height: 24px;\n position: absolute;\n transition: all ease-out 0.3s;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
2691
2703
|
var templateObject_1$I, templateObject_2$s, templateObject_3$k, templateObject_4$9;
|
|
2692
2704
|
|
|
2693
2705
|
var getURLFromFile = function (fileList) {
|
|
@@ -3785,13 +3797,11 @@ var ImageCard = React.forwardRef(function (_a) {
|
|
|
3785
3797
|
var handleClick = function () {
|
|
3786
3798
|
onClick(index);
|
|
3787
3799
|
};
|
|
3788
|
-
var handleDelete = function (
|
|
3789
|
-
e.stopPropagation();
|
|
3800
|
+
var handleDelete = function () {
|
|
3790
3801
|
if (onDelete)
|
|
3791
3802
|
onDelete(index);
|
|
3792
3803
|
};
|
|
3793
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ className: "KUI-ImageCard", onClick: handleClick }, otherProps, { children: [jsxRuntime.jsx(StyledImage$3, { src: url, alt: "image" }), jsxRuntime.jsx(Backdrop, { children: jsxRuntime.jsx(kuiIcon.LoupeIcon, {}) }), !!onDelete &&
|
|
3794
|
-
ReactDOM.createPortal(jsxRuntime.jsx(StyledRemoveButton, __assign({ isCircle: true, variant: "white", onClick: handleDelete }, { children: jsxRuntime.jsx(kuiIcon.CloseIcon, { width: 10, height: 10 }) })), document.body)] })));
|
|
3804
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign({ className: "KUI-ImageCard", onClick: handleClick }, otherProps, { children: [jsxRuntime.jsx(StyledImage$3, { src: url, alt: "image" }), jsxRuntime.jsx(Backdrop, { children: jsxRuntime.jsx(kuiIcon.LoupeIcon, {}) }), !!onDelete && (jsxRuntime.jsx(CloseButton, __assign({ isCircle: true, "data-testid": "file_delete_btn", variant: "white", onClick: handleDelete }, { children: jsxRuntime.jsx(kuiIcon.CloseIcon, { width: 8, height: 8 }) })))] })));
|
|
3795
3805
|
});
|
|
3796
3806
|
var Wrapper$2 = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n overflow: hidden;\n border-radius: 8px;\n position: relative;\n cursor: pointer;\n user-select: none;\n width: ", "px;\n height: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"], ["\n overflow: hidden;\n border-radius: 8px;\n position: relative;\n cursor: pointer;\n user-select: none;\n width: ", "px;\n height: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n height: ", "px;\n }\n"])), function (_a) {
|
|
3797
3807
|
var width = _a.width;
|
|
@@ -3808,7 +3818,7 @@ var Wrapper$2 = styled__default["default"].div(templateObject_1$q || (templateOb
|
|
|
3808
3818
|
});
|
|
3809
3819
|
var StyledImage$3 = styled__default["default"].img(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
|
|
3810
3820
|
var Backdrop = styled__default["default"].div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n background-color: rgba(25, 25, 25, 0.4);\n transition: all ease-out 0.3s;\n opacity: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n &:hover {\n opacity: 1;\n }\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n background-color: rgba(25, 25, 25, 0.4);\n transition: all ease-out 0.3s;\n opacity: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n &:hover {\n opacity: 1;\n }\n"])));
|
|
3811
|
-
var
|
|
3821
|
+
var CloseButton = styled__default["default"](kuiBasic.Button)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: 24px;\n height: 24px;\n opacity: 0;\n transition: all ease-out 0.3s;\n position: absolute;\n top: -6px;\n right: -6px;\n @media (max-width: ", "px) {\n opacity: 1;\n top: -12px;\n right: -12px;\n }\n"], ["\n width: 24px;\n height: 24px;\n opacity: 0;\n transition: all ease-out 0.3s;\n position: absolute;\n top: -6px;\n right: -6px;\n @media (max-width: ", "px) {\n opacity: 1;\n top: -12px;\n right: -12px;\n }\n"])), kuiBasic.theme.breakpoints.sm);
|
|
3812
3822
|
var templateObject_1$q, templateObject_2$h, templateObject_3$b, templateObject_4$6;
|
|
3813
3823
|
|
|
3814
3824
|
var ImageCardWithBackdrop = function (props) {
|
|
@@ -3863,7 +3873,7 @@ var AdaptiveImagesBlock = React.forwardRef(function (props) {
|
|
|
3863
3873
|
handleResize();
|
|
3864
3874
|
return function () { return window.removeEventListener("resize", handleResize); };
|
|
3865
3875
|
}, [ref]);
|
|
3866
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1, __assign({ container: true, ref: ref, spacing: 1, justify: withFlatWidth ? "space-between" : "flex-start" }, otherProps, { children: [onAdd && (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledButton$4, __assign({ isCircle: true, size: "l", variant: "grayLight", onClick: onAdd, disabled: disabled }, { children: jsxRuntime.jsx(kuiIcon.PlusIcon, { width: 18, height: 18 }) })) }))), displayedImages.map(function (image, index) { return (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(ImageCard, { url: image.smallImageUrl, index: index, onClick: handleClick, width: realImageWidth, mobileWidth: mobileWidth }) }), 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, width: realImageWidth, mobileWidth: mobileWidth }) }))), 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, width: realImageWidth, mobileWidth: mobileWidth }) }))), endComponent] })), jsxRuntime.jsx(GalleryWithThumbnails, { images: images, activeSlide: selectedImage, isOpen: isModalOpen, handleClose: handleModalClose, onDelete: onDelete })] }));
|
|
3876
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1, __assign({ container: true, ref: ref, spacing: 1, justify: withFlatWidth ? "space-between" : "flex-start" }, otherProps, { children: [onAdd && (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledButton$4, __assign({ isCircle: true, size: "l", variant: "grayLight", onClick: onAdd, disabled: disabled }, { children: jsxRuntime.jsx(kuiIcon.PlusIcon, { width: 18, height: 18 }) })) }))), displayedImages.map(function (image, index) { return (jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(ImageCard, { url: image.smallImageUrl, index: index, onClick: handleClick, width: realImageWidth, mobileWidth: mobileWidth, onDelete: onDelete }) }), 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, width: realImageWidth, mobileWidth: mobileWidth }) }))), 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, width: realImageWidth, mobileWidth: mobileWidth, onDelete: onDelete }) }))), endComponent] })), jsxRuntime.jsx(GalleryWithThumbnails, { images: images, activeSlide: selectedImage, isOpen: isModalOpen, handleClose: handleModalClose, onDelete: onDelete })] }));
|
|
3867
3877
|
});
|
|
3868
3878
|
var Wrapper$1 = styled__default["default"](kuiBasic.Grid)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n overflow: hidden;\n flex-wrap: nowrap;\n"], ["\n overflow: hidden;\n flex-wrap: nowrap;\n"])));
|
|
3869
3879
|
var StyledButton$4 = styled__default["default"](kuiBasic.Button)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n border-radius: 8px;\n box-shadow: none !important;\n"], ["\n border-radius: 8px;\n box-shadow: none !important;\n"])));
|