@antscorp/antsomi-ui 1.3.5-beta.264 → 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

@@ -110,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 },
         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)),
+            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" },

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/package.json

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