@antscorp/antsomi-ui 1.3.5-beta.576 → 1.3.5-beta.577

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 // Styled
 import { BannerWrapper } from './styled';
@@ -18,12 +18,15 @@ import { BannerWrapper } from './styled';
 import { MobileFrameV2 } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { DEVICE_TYPE } from '../../constants';
+// Hooks
+import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
 export const Banner = memo(props => {
-    const { deviceType, showSkeleton = false, children, height } = props, restOfProps = __rest(props, ["deviceType", "showSkeleton", "children", "height"]);
+    var _a;
+    const { deviceType, showSkeleton = false, children, height = 700 } = props, restOfProps = __rest(props, ["deviceType", "showSkeleton", "children", "height"]);
+    const ref = useRef(null);
+    const forceUpdate = useForceUpdate();
     const isMobile = useMemo(() => deviceType === DEVICE_TYPE.MOBILE.value, [deviceType]);
-    // States
     const [shouldAnimate, setShouldAnimate] = useState(false);
-    // Side effects
     useEffect(() => {
         setShouldAnimate(true);
         const timerId = setTimeout(() => {
@@ -31,7 +34,26 @@ export const Banner = memo(props => {
         }, 1000);
         return () => clearTimeout(timerId);
     }, [children]);
-    return (React.createElement(BannerWrapper, Object.assign({ "$height": height }, restOfProps),
+    useEffect(() => {
+        let timeoutAfterChange = null;
+        const handleResize = () => {
+            if (timeoutAfterChange) {
+                clearTimeout(timeoutAfterChange);
+            }
+            timeoutAfterChange = setTimeout(() => {
+                forceUpdate();
+            }, 0);
+        };
+        const resizeObserver = new ResizeObserver(handleResize);
+        if (ref === null || ref === void 0 ? void 0 : ref.current)
+            resizeObserver.observe(ref === null || ref === void 0 ? void 0 : ref.current);
+        return () => {
+            if (timeoutAfterChange) {
+                clearTimeout(timeoutAfterChange);
+            }
+        };
+    }, [forceUpdate]);
+    return (React.createElement(BannerWrapper, Object.assign({ ref: ref, "$height": height, clientHeight: (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetHeight }, restOfProps),
         React.createElement("div", { className: `${isMobile ? 'mobile-wrapper animate__animated animate__zoomIn' : 'desktop-wrapper'}` },
             React.createElement("div", { className: classNames({
                     'content-wrapper': true,

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.d.ts

@@ -1,3 +1,4 @@
 export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
-    $height?: number | undefined;
+    $height: number | string;
+    clientHeight?: number | undefined;
 }, never>;

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -1,4 +1,6 @@
+// Libraries
 import styled, { css } from 'styled-components';
+import { isNumber } from 'lodash';
 // Images
 import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
 // Constants
@@ -14,14 +16,21 @@ export const BannerWrapper = styled.div `
   background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
   border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
   border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
-  height: ${props => props.$height || 700}px;
+  height: ${({ $height }) => (isNumber($height) ? `${$height}px` : $height)};
 
   // Calculate scale of mobile frame
   #banner-mobile {
-    ${props => {
-    const height = props.$height || 700;
-    const smallScale = (height - 10) / (MOBILE_VIEWPORT.MD.height + 36);
-    const largeScale = (height - 10) / (MOBILE_VIEWPORT.LG.height + 36);
+    ${({ clientHeight }) => {
+    const [smallScale, largeScale] = (() => {
+        if (clientHeight) {
+            const bannerPadding = 5;
+            const margin = 18;
+            const smallScale = (clientHeight - bannerPadding * 2) / (MOBILE_VIEWPORT.MD.height + margin * 2);
+            const largeScale = (clientHeight - bannerPadding * 2) / (MOBILE_VIEWPORT.LG.height + margin * 2);
+            return [smallScale, largeScale];
+        }
+        return [1, 1];
+    })();
     return css `
         @media screen and (max-height: 1000px) {
           transform: scale(${smallScale});
@@ -34,37 +43,6 @@ export const BannerWrapper = styled.div `
 }}
   }
 
-  /* ${props => props.$height
-    ? css `
-          height: ${props.$height}px;
-
-          .mobile-wrapper {
-            width: 359px;
-            height: ${props.$height}px;
-          }
-        `
-    : css `
-          @media screen and (max-height: 1000px) {
-            height: 760px;
-            max-height: 760px;
-
-            .mobile-wrapper {
-              width: 359px;
-              height: 722.41px;
-            }
-          }
-
-          @media screen and (min-height: 1001px) {
-            height: 830px;
-            max-height: 830px;
-
-            .mobile-wrapper {
-              width: 380px;
-              height: 800px;
-            }
-          }
-        `} */
-
   .mobile-wrapper {
     position: relative;
     border-radius: 80px;

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

@@ -15,7 +15,8 @@ export interface PreviewTemplateModalProps extends ModalProps {
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
     deviceType?: InformationProps['deviceType'];
     showSkeleton?: boolean;
-    height?: number;
+    /** Type of height includes: number, px, %, vh */
+    height?: number | string;
     children?: React.ReactNode;
 }
 export type ThumbnailProps = Omit<ThumbnailCardProps, 'id' | 'name' | 'thumbnail' | 'onClickWrapper'> & {

package/package.json

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