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

package/es/components/molecules/ImageEditor/ImageEditor.d.ts

@@ -13,6 +13,7 @@ interface ImageEditorProps {
     imageUrl?: string;
     defaultValue?: CanvasState;
     showSelection?: boolean;
+    style?: Omit<React.CSSProperties, 'width'>;
 }
 export declare const ImageEditor: React.ForwardRefExoticComponent<ImageEditorProps & React.RefAttributes<ImageResizeHandle>>;
 export {};

package/es/components/molecules/ImageEditor/ImageEditor.js

@@ -25,7 +25,7 @@ import { downloadURI, getTransformData } from './utils';
 import { StageWrapperStyled } from './styled';
 const SNAP_THRESHOLD = 5;
 export const ImageEditor = React.forwardRef((props, ref) => {
-    const { defaultValue, className, width, height, hideAction, imageUrl = '', showSelection, } = props;
+    const { defaultValue, className, width, height, hideAction, imageUrl = '', showSelection, style, } = props;
     const [color, setColor] = useState('#000');
     const [drawAction, setDrawAction] = useState(DrawAction.Select);
     const [cropZone, setCropZone] = useState();
@@ -618,7 +618,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         target.setAbsolutePosition(newPos);
         // selectedNode.setAbsolutePosition(newPos);
     }, []);
-    return (React.createElement("div", { style: { width: `${width}px` } },
+    return (React.createElement("div", { style: Object.assign({ width: `${width}px` }, (style || {})) },
         React.createElement(Flex, { justify: "space-between", align: "center", style: { marginBottom: '6px', display: hideAction ? 'none' : 'flex' } },
             React.createElement(Flex, { gap: 4 },
                 PAINT_OPTIONS.map(({ id, label, icon }) => (React.createElement(Button, { key: id, "aria-label": label, icon: React.createElement(Icon, { type: icon, style: { fontSize: '16px' } }), onClick: () => {

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(() => {
@@ -108,26 +110,22 @@ export const ImageSlider = props => {
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
     const currentEditing = useMemo(() => editingThumbnail !== null && editingThumbnail !== void 0 ? editingThumbnail : uploadThumbnail, [editingThumbnail, uploadThumbnail]);
-    const imageResizeProps = {
-        className: 'image-resize-wrapper',
-        width: imageWidth,
-        height: imageHeight,
-        ref: imageResizeRef,
-        hideAction: true,
-        imageUrl: 
-        // latestCanvas && isEditPrevious
-        (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
-            ? undefined
-            : getUrlNoCache(thumbnails[currentEditing], timeGenerated),
-        defaultValue: latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing],
-    };
     const ImageResizeComponent = useFabric ? ImageResizeTuiEditor : ImageResize;
     const showSkeletonMemo = skeleton !== undefined
         ? 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(ImageResizeComponent, Object.assign({}, imageResizeProps)),
+        React.createElement(Flex, { vertical: true, style: { zIndex: 25, display: !isNil(currentEditing) ? 'flex' : 'none' }, className: `edit-thumbnail-container ${!isNil(currentEditing) ? 'is-editing' : ''}` },
+            React.createElement(ImageResizeComponent, { style: { visibility: typeof uploadThumbnail === 'number' ? 'hidden' : 'visible' }, className: "image-resize-wrapper", width: imageWidth, height: imageHeight, ref: imageResizeRef, hideAction: true, imageUrl: 
+                // latestCanvas && isEditPrevious
+                (latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing])
+                    ? undefined
+                    : getUrlNoCache(thumbnails[currentEditing], timeGenerated), 
+                // imageUrl={getUrlNoCache(
+                //   thumbnails[editingThumbnail ?? (uploadThumbnail as number)],
+                //   timeGenerated,
+                // )}
+                defaultValue: latestCanvas === null || latestCanvas === void 0 ? void 0 : latestCanvas[currentEditing] }),
             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' } }),
                 React.createElement(Flex, { vertical: true, align: "flex-start" },
@@ -140,10 +138,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/components/ImageSlider/styled.js

@@ -80,7 +80,12 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     &:not(.hide-skeleton) {
-      background: ${props => props.$skeleton ? `url(${SkeletonBg}) no-repeat center center` : 'unset'};
+      background: ${props => {
+    var _a;
+    return props.$skeleton
+        ? `url(${SkeletonBg}) no-repeat center center`
+        : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorBgSkeleton;
+}};
 
       background-size: 90% 90%;
     }

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.265",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",