@antscorp/antsomi-ui 1.3.5-beta.263 → 1.3.5-beta.264

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -9,6 +9,7 @@ import { SmallImage } from './SmallImage';
 import { BigImage } from './BigImage';
 import { useDropFile } from '@antscorp/antsomi-ui/es/hooks';
 import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
+import { isNil } from 'lodash';
 // Image size limit to 10MB
 const SIZE_LIMIT = 10 * 1024 * 1024;
 const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createElement("div", { className: type === 'slider'
@@ -78,6 +79,7 @@ export const ImageSlider = props => {
             return (Object.assign(Object.assign({}, prev), { [selectedThumbnail]: (_a = imageResizeRef.current) === null || _a === void 0 ? void 0 : _a.getCurrentState() }));
         });
         setEditingThumbnail(undefined);
+        handleSelectThumbnail(selectedThumbnail);
     };
     const fileRef = useRef(null);
     const onImportImageClick = useCallback(() => {
@@ -126,7 +128,7 @@ export const ImageSlider = props => {
         ? skeleton
         : checkShowSkeletonBaseUrl(getUrlNoCache(thumbnails[currentEditing], timeGenerated));
     return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
-        typeof editingThumbnail === 'number' || typeof uploadThumbnail === 'number' ? (React.createElement(Flex, { vertical: true, style: { zIndex: 25 }, className: "edit-thumbnail-container" },
+        React.createElement(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}` },
             React.createElement(ImageResizeComponent, Object.assign({}, imageResizeProps)),
             typeof uploadThumbnail !== 'number' ? null : (React.createElement(Flex, { className: `image-upload-zone ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
                 React.createElement(Icon, { type: "icon-ants-upload-fill", style: { fontSize: '40px' } }),
@@ -140,10 +142,13 @@ export const ImageSlider = props => {
                 React.createElement(Button, { onClick: () => {
                         setEditingThumbnail(undefined);
                         setUploadThumbnail(undefined);
-                    } }, "Cancel")))) : (React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnailsQuantity <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault, onClickEdit: index => setEditingThumbnail(index), onClickUpload: index => {
-                setEditingThumbnail(index);
-                setUploadThumbnail(index);
-            } })))))),
+                    } }, "Cancel"))),
+        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef, style: { display: !isNil(currentEditing) ? 'none' : 'flex' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnailsQuantity <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault, onClickEdit: () => setEditingThumbnail(selectedThumbnail), 
+            // onClickEdit={index => setEditingThumbnail(index)}
+            onClickUpload: () => {
+                setEditingThumbnail(selectedThumbnail);
+                setUploadThumbnail(selectedThumbnail);
+            } }))))),
         hideThumbnailsList || thumbnailsQuantity <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnailsQuantity < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: skeleton, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
         previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
             React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),

package/es/components/molecules/TemplateSaveAs/styled.js

@@ -10,8 +10,9 @@ export const TemplateSaveAsStyled = styled(Flex) `
 
   position: relative;
 
-  &:has(canvas),
-  &:has(.image-upload-zone) {
+  /* &:has(canvas),
+  &:has(.image-upload-zone) { */
+  &:has(.is-editing) {
     &:after {
       content: '';
       position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.263",
+  "version": "1.3.5-beta.264",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",