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

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/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.576",
   "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",