@antscorp/antsomi-ui 1.3.5-resize-thumbnail.2 → 1.3.5-resize-thumbnail.4

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

@@ -469,7 +469,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         React.createElement(StageWrapperStyled, { "$width": width, "$height": height, className: className || '' },
             React.createElement(Stage, { id: "image-editor", width: width, height: height, ref: stageRef, onMouseUp: onStageMouseUp, onMouseDown: onStageMouseDown, onMouseMove: onStageMouseMove },
                 React.createElement(Layer, null,
-                    React.createElement(KonvaRect, { x: 0, y: 0, height: width, width: height, fill: "white", id: "bg", onClick: onBgClick }),
+                    React.createElement(KonvaRect, { x: 0, y: 0, height: width, width: height, fill: "transparent", id: "bg", onClick: onBgClick }),
                     image && (React.createElement(KonvaImage, Object.assign({ image: image }, imageCoordinate, { name: "shape", onClick: e => onShapeClick(e, imageCoordinate.id, ShapeObject.Image), onTap: e => onShapeClick(e, imageCoordinate.id, ShapeObject.Image), draggable: isDraggable, onDragEnd: ({ target: { attrs } }) => {
                             if (isDraggable)
                                 dispatch({

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

@@ -41,6 +41,12 @@ export const ImageSliderStyled = styled(Flex) `
     margin-bottom: 40px;
   }
 
+  .image-resize-wrapper {
+    background: ${props => props.$skeleton ? `url(${SkeletonBg}) no-repeat center center` : 'unset'};
+
+    background-size: contain;
+  }
+
   .image-resize-wrapper,
   .image-upload-zone {
     border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_1};

package/es/components/organism/PreviewTemplateModal/index.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
+import { isNil } from 'lodash';
 // Components
 import { Flex, Spin } from '../../atoms';
 import { Banner, Information, SimilarTemplate, ThumbnailSlider } from './components';
@@ -22,6 +23,11 @@ export const PreviewTemplateModal = memo(props => {
     const { bannerProps, thumbnailProps = THUMBNAIL_DEFAULT, similarTemplateProps = SIMILAR_TEMPLATE_DEFAULT, informationProps, loading = false } = props, restOfProps = __rest(props, ["bannerProps", "thumbnailProps", "similarTemplateProps", "informationProps", "loading"]);
     // States
     const [deviceType, setDeviceType] = useState(DEVICE_TYPE.DESKTOP.value);
+    useEffect(() => {
+        if (!isNil(bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.deviceType)) {
+            setDeviceType(bannerProps.deviceType);
+        }
+    }, [bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.deviceType]);
     return (React.createElement(ModalContainer, Object.assign({ footer: null, centered: true, modalRender: node => React.createElement(ModalWrapper, null, node) }, restOfProps),
         React.createElement(Spin, { spinning: loading },
             React.createElement(Flex, { gap: 20 },

package/es/components/organism/PreviewTemplateModal/types.d.ts

@@ -7,13 +7,13 @@ export type TThumbnail = {
     url: string;
 };
 export interface PreviewTemplateModalProps extends ModalProps {
-    bannerProps?: Omit<BannerProps, 'deviceType'>;
+    bannerProps?: BannerProps;
     thumbnailProps?: ThumbnailProps;
     similarTemplateProps?: SimilarTemplateProps;
     informationProps?: Omit<InformationProps, 'deviceType' | 'onDeviceTypeChange'>;
 }
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
-    deviceType: InformationProps['deviceType'];
+    deviceType?: InformationProps['deviceType'];
     showSkeleton?: boolean;
     height?: number;
     children?: React.ReactNode;

package/es/models/ObjectTemplate.d.ts

@@ -54,6 +54,7 @@ export declare class ObjectTemplate extends Model<TObjectTemplate> {
     get goal(): number[] | undefined;
     get channel(): number | undefined;
     get shareAccess(): TShareAccess | undefined;
+    get deviceType(): number | undefined;
     toJson(): {
         id: string | number;
         name: string;
@@ -79,5 +80,6 @@ export declare class ObjectTemplate extends Model<TObjectTemplate> {
         goal: number[] | undefined;
         channel: number | undefined;
         shareAccess: TShareAccess | undefined;
+        deviceType: number | undefined;
     };
 }

package/es/models/ObjectTemplate.js

@@ -76,6 +76,9 @@ export class ObjectTemplate extends Model {
     get shareAccess() {
         return this.model.share_access;
     }
+    get deviceType() {
+        return this.model.device_type;
+    }
     toJson() {
         return {
             id: this.id,
@@ -102,6 +105,7 @@ export class ObjectTemplate extends Model {
             goal: this.goal,
             channel: this.channel,
             shareAccess: this.shareAccess,
+            deviceType: this.deviceType,
         };
     }
 }

package/package.json

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