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

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

@@ -9,6 +9,7 @@ interface Breadcrumb {
     useExternalLink?: boolean;
 }
 export interface HeaderV2Props {
+    show?: boolean;
     className?: string;
     style?: React.CSSProperties;
     pageTitle?: string | React.ReactNode;

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -32,7 +32,7 @@ export const HeaderV2 = memo(props => {
     const { search } = useLocation();
     const { replace } = useCustomRouter();
     // * Prefer to use Header in AppConfigContext
-    const { className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
+    const { show = true, className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
@@ -108,7 +108,7 @@ export const HeaderV2 = memo(props => {
         onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(userId);
     };
     const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
-    return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
+    return (React.createElement(HeaderV2Styled, { "$show": show, className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
             showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper" },
                 React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),

package/es/components/molecules/HeaderV2/styled.d.ts

@@ -1,2 +1,4 @@
 export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderV2Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderV2Styled: import("styled-components").StyledComponent<"div", any, {
+    $show: boolean;
+}, never>;

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

@@ -21,6 +21,8 @@ export const HeaderV2Styled = styled.div `
   padding: 10px 20px;
   box-sizing: border-box;
 
+  ${props => !props.$show && 'display: none;'}
+
   .left-side,
   .right-side {
     display: flex;

package/es/components/organism/LeftMenu/LeftMenu.js

@@ -16,7 +16,7 @@ import { useLeftMenu } from './hooks';
 import { useLeftMenuContext } from './contexts';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 export const LeftMenuComponent = memo(props => {
-    const { style, className, customization, showLogo = true } = props;
+    const { show = true, style, className, customization, showLogo = true } = props;
     const { isExpandable = true, isCustomized, isRecommendation, items = [], onMenuItemClick, } = customization || {};
     const appHoverMenuChildren = useLeftMenuContext(store => store.appHoverMenuChildren);
     const { state, activeAppCode, permissionMenu, customActiveAppKey, onToggleChildMenu, onMouseEnter, onMouseLeave, onHoverMenuBar, onShowPopover, onClickFeatureMenuItem, } = useLeftMenu(props);
@@ -95,7 +95,7 @@ export const LeftMenuComponent = memo(props => {
         }
         return null;
     };
-    return (React.createElement(LeftMenuNavWrapper, { style: style, "$isExpandMenu": state.isExpandMenu && isExpandable, className: className },
+    return (React.createElement(LeftMenuNavWrapper, { "$show": show, style: style, "$isExpandMenu": state.isExpandMenu && isExpandable, className: className },
         React.createElement(LeftMenuNav, { className: "left-menu-nav" },
             React.createElement(FeatureMenuWrapper, { vertical: true, onMouseEnter: () => onShowPopover(), onMouseLeave: onMouseLeave },
                 showLogo && (React.createElement(NavLogoWrapper, { align: "center", justify: "center", onMouseEnter: onHoverMenuBar },

package/es/components/organism/LeftMenu/styled.d.ts

@@ -8,6 +8,7 @@ export declare const FeatureMenuWrapper: import("styled-components").StyledCompo
 export declare const ExpandWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenuNavWrapper: import("styled-components").StyledComponent<"div", any, {
     $isExpandMenu?: boolean | undefined;
+    $show?: boolean | undefined;
 }, never>;
 export declare const NavLogoWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const LeftMenuNav: import("styled-components").StyledComponent<"nav", any, {}, never>;

package/es/components/organism/LeftMenu/styled.js

@@ -44,7 +44,9 @@ export const PopoverWrapper = styled.div `
   bottom: 15px;
   box-shadow: 0px 3px 20px 0px #002e5933;
   height: ${({ hasMarginTop }) => hasMarginTop ? `calc(100% - ${HEADER_HEIGHT + 15}px)` : `calc(100% - 15px)`};
-  transition: visibility 0s, opacity 0.2s ease-out;
+  transition:
+    visibility 0s,
+    opacity 0.2s ease-out;
   z-index: 10;
   padding: 10px;
   box-sizing: border-box;
@@ -67,6 +69,8 @@ export const LeftMenuNavWrapper = styled.div `
   display: flex;
   transition: all 0.2s ease-out;
 
+  ${p => !p.$show && 'display: none;'}
+
   ${p => (p.$isExpandMenu ? `gap: 10px;` : `gap: 15px;`)}
 `;
 export const NavLogoWrapper = styled(Flex) `
@@ -206,7 +210,9 @@ export const ChildMenuWrapper = styled.div `
   margin-top: ${({ isMarginTop }) => (isMarginTop ? `${HEADER_HEIGHT}px` : '0px')};
   width: ${({ isExpand }) => (isExpand ? '210px' : '0px')};
   padding: ${({ isExpand }) => (isExpand ? '10px' : '10px 0')};
-  transition: width 0.2s, padding 0.2s ease;
+  transition:
+    width 0.2s,
+    padding 0.2s ease;
   padding-left: 0px;
   box-sizing: border-box;
   z-index: 1;

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/es/components/template/Layout/Layout.d.ts

@@ -5,6 +5,7 @@ import '@antscorp/processing-notification/dist/index.css';
 import { ProcessingNotificationProps } from '@antscorp/antsomi-ui/es/types';
 import { ContentWrapperProps, WorkspaceProps } from './types';
 export interface LayoutProps {
+    onlyContent?: boolean;
     headerProps?: Partial<Omit<HeaderV2Props, 'helpConfig'> & {
         helpConfig: Partial<HeaderV2Props['helpConfig']>;
     }>;

package/es/components/template/Layout/Layout.js

@@ -63,6 +63,7 @@ export const Layout = memo(props => {
     const header = useLayoutStore(store => store.state.header);
     const contentWrapper = useLayoutStore(store => store.state.contentWrapper);
     const workspace = useLayoutStore(store => store.state.workspace);
+    const onlyContent = useLayoutStore(store => store.state.onlyContent);
     const [, , removeCookie] = useCookies();
     const params = useParams();
     const location = useLocation();
@@ -88,6 +89,8 @@ export const Layout = memo(props => {
         attributeOldValue: true,
         characterDataOldValue: true,
     });
+    // Memo
+    const showOnlyContent = useDeepCompareMemo(() => { var _a; return (_a = props.onlyContent) !== null && _a !== void 0 ? _a : onlyContent; }, [onlyContent, props.onlyContent]);
     const permissionDomain = useDeepCompareMemo(() => {
         var _a;
         /**
@@ -193,6 +196,12 @@ export const Layout = memo(props => {
             setLoadingLayout(false);
         }
     }, [mergeLeftMenuProps.customization]);
+    /** Timeout for set layout loading off in case left menu no callback onActiveMenuCodeChange */
+    useDeepCompareEffect(() => {
+        setTimeout(() => {
+            setLoadingLayout(false);
+        }, 5000);
+    }, []);
     // Handle access denied
     const onClickSwitchAccount = useCallback(() => {
         // Remove cookie when switch account
@@ -276,12 +285,12 @@ export const Layout = memo(props => {
                         ? header === null || header === void 0 ? void 0 : header.pageTitle
                         : ''
                     : activePageTitle))),
-        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { showLogo: !showLeftMenu })),
+        React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { show: !showOnlyContent, showLogo: !showLeftMenu })),
         React.createElement(Flex, { className: "layout-body" },
-            showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { customization: Object.assign(Object.assign({}, mergeLeftMenuProps.customization), { 
+            React.createElement(LeftMenu, Object.assign({ show: showLeftMenu && !showOnlyContent, className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { customization: Object.assign(Object.assign({}, mergeLeftMenuProps.customization), { 
                     // If user has access denied, disable expandable
-                    isExpandable: !isAccessDenied && ((_a = mergeLeftMenuProps.customization) === null || _a === void 0 ? void 0 : _a.isExpandable) }), appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange }))),
-            React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps), (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.menu_item_code) === HOME_MENU_ITEMS.RECOMMENDATION ? (React.createElement("div", { className: "layout-body__content" },
+                    isExpandable: !isAccessDenied && ((_a = mergeLeftMenuProps.customization) === null || _a === void 0 ? void 0 : _a.isExpandable) }), appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange })),
+            React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent, "$showOnlyContent": showOnlyContent }, mergeContentWrapperProps), (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.menu_item_code) === HOME_MENU_ITEMS.RECOMMENDATION ? (React.createElement("div", { className: "layout-body__content" },
                 React.createElement(RecommendationWorkspace, null))) : (React.createElement("div", Object.assign({ className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }, mergeWorkSpaceProps), isLoadingLayout ? (React.createElement(LayoutLoading, { spinning: true })) : (React.createElement(React.Fragment, null,
                 React.createElement(NotificationWrapper, { className: "process-notification", ref: notificationWrapperRef }, showNotification && (React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig, { callback: handleCallbackNotify })))),
                 React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps), isAccessDenied ? (React.createElement(AccessDenied, { onClickRequestAccess: onClickRequestAccess, onClickSwitchAccount: onClickSwitchAccount })) : (React.createElement("div", null, children)))))))))));

package/es/components/template/Layout/stores/index.d.ts

@@ -15,6 +15,8 @@ export interface LayoutStoreState {
     leftMenu: LeftMenuStore;
     workspace: WorkspaceProps;
     contentWrapper: ContentWrapperProps;
+    /** Just show only content */
+    onlyContent?: boolean;
 }
 interface LayoutStore {
     state: LayoutStoreState;

package/es/components/template/Layout/stores/index.js

@@ -6,6 +6,7 @@ const initialState = {
     leftMenu: {},
     workspace: {},
     contentWrapper: {},
+    onlyContent: false,
 };
 export const useLayoutStore = create(set => ({
     state: initialState,

package/es/components/template/Layout/styled.d.ts

@@ -5,6 +5,7 @@ export declare const LayoutWrapper: import("styled-components").StyledComponent<
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {
     $noPadding?: boolean | undefined;
     $noSpaceTopContent?: boolean | undefined;
+    $showOnlyContent?: boolean | undefined;
 }, never>;
 export declare const NotificationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/template/Layout/styled.js

@@ -1,6 +1,6 @@
 var _a, _b;
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Components
 import { Flex, Spin } from '../../atoms';
 // Constants
@@ -57,6 +57,16 @@ export const ContentWrapper = styled.div `
   .layout-body__content {
     ${({ $noSpaceTopContent }) => $noSpaceTopContent && 'padding-top: 0;'}
   }
+
+  ${({ $showOnlyContent }) => $showOnlyContent &&
+    css `
+      padding: 0px;
+
+      .layout-body__content {
+        padding: 0px;
+        border-radius: 0px;
+      }
+    `}
 `;
 export const NotificationWrapper = styled.div `
   flex-shrink: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.575",
+  "version": "1.3.5-beta.577",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -62,7 +62,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "0.27.51",
+    "@antscorp/icons": "0.27.52",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
     "@dnd-kit/core": "^6.1.0",