@antscorp/antsomi-ui 1.3.5-beta.564 → 1.3.5-beta.565

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

@@ -31,11 +31,12 @@ import dayjs from 'dayjs';
 import html2canvas from 'html2canvas';
 import { useLocation, useParams } from 'react-router-dom';
 // Styled
-import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
+import { ChildrenWrapper, ContentWrapper, LayoutLoading, LayoutWrapper, NotificationWrapper, } from './styled';
 // Components
 import { LeftMenu } from '../../organism';
 import { Flex } from '../../atoms';
 import { HeaderV2, AccessDenied } from '../../molecules';
+import { RecommendationWorkspace } from './components';
 // Contexts
 import { AppConfigContext } from '../../..';
 // Constants
@@ -48,7 +49,6 @@ import { useLayoutStore } from './stores';
 import { hasSelectAccountPermission } from './utils';
 import { useCustomRouter, useDeepCompareEffect, useDeepCompareMemo, useMutationObserver, } from '@antscorp/antsomi-ui/es/hooks';
 import { HOME_MENU_ITEMS } from '../../organism/LeftMenu/constants';
-import { RecommendationWorkspace } from './components';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const Layout = memo(props => {
@@ -67,16 +67,20 @@ export const Layout = memo(props => {
     const params = useParams();
     const location = useLocation();
     const { navigate, replace } = useCustomRouter();
-    const [showAccountSelection, setShowAccountSelection] = useState(false);
-    const [noSpaceTopContent, setNoSpaceTopContent] = useState(false);
-    const [activeMenu, setActiveMenu] = useState(null);
-    const [activePageTitle, setActivePageTitle] = useState('');
-    const [isAccessDenied, setIsAccessDenied] = useState(false);
+    const [state, setState] = useState({
+        showAccountSelection: false,
+        noSpaceTopContent: false,
+        activeMenu: null,
+        activePageTitle: '',
+        isAccessDenied: false,
+        isLoadingLayout: true,
+    });
+    const { showAccountSelection, noSpaceTopContent, activeMenu, activePageTitle, isAccessDenied, isLoadingLayout, } = state;
     const notificationWrapperRef = useRef(null);
     useMutationObserver(() => {
         if (notificationWrapperRef.current) {
             const child = notificationWrapperRef.current.querySelector('div');
-            setNoSpaceTopContent(!!child);
+            setState(prev => (Object.assign(Object.assign({}, prev), { noSpaceTopContent: !!child })));
         }
     }, notificationWrapperRef, {
         attributes: true,
@@ -144,13 +148,14 @@ export const Layout = memo(props => {
     const leftMenuAppConfig = useDeepCompareMemo(() => omit(Object.assign(Object.assign({}, appConfig), { permissionDomain }), ['setAppConfig']), [appConfig]);
     const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [permissionDomain, token, userId, languageCode, portalId, processingNotificationProps]);
     const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList, menuListPermission) => {
-        var _a;
         const activeMenuItem = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1];
         const { menu_item_code, page_title, menu_item_name, permission_code } = activeMenuItem || {};
-        setActivePageTitle(page_title
-            ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
-            : menu_item_name);
-        setActiveMenu(activeMenuItem);
+        setState(prev => {
+            var _a;
+            return (Object.assign(Object.assign({}, prev), { activePageTitle: page_title
+                    ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
+                    : menu_item_name, activeMenu: activeMenuItem }));
+        });
         onActiveMenuChange === null || onActiveMenuChange === void 0 ? void 0 : onActiveMenuChange(menu_item_code);
         const hasRole = hasSelectAccountPermission({
             activeItemPath: cloneDeep(activeItemPath),
@@ -158,11 +163,14 @@ export const Layout = memo(props => {
             menuListPermission,
             appItem: activeItemPath[0],
         });
-        setShowAccountSelection(hasRole);
+        setState(prev => (Object.assign(Object.assign({}, prev), { showAccountSelection: hasRole })));
         // Check if the user has permission or not (access denied)
-        if (!!permission_code && !!activeMenuItem && !!flattenPermissionList) {
+        if (!!permission_code &&
+            !!activeMenuItem &&
+            Array.isArray(flattenPermissionList) &&
+            flattenPermissionList.length) {
             const isAccessDenied = !flattenPermissionList.some(item => item.menu_code === activeMenuItem.permission_code);
-            setIsAccessDenied(isAccessDenied);
+            setState(prev => (Object.assign(Object.assign({}, prev), { isAccessDenied, isLoadingLayout: false })));
         }
     }, [onActiveMenuChange]);
     // Effects
@@ -262,7 +270,7 @@ export const Layout = memo(props => {
                     // 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.menu_item_code ? (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),
+                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)))))))));
+                React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps), isAccessDenied ? (React.createElement(AccessDenied, { onClickRequestAccess: onClickRequestAccess, onClickSwitchAccount: onClickSwitchAccount })) : (React.createElement("div", null, children)))))))))));
 }, (prevProps, nextProps) => isEqual(prevProps, nextProps));

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

@@ -8,3 +8,7 @@ export declare const ContentWrapper: import("styled-components").StyledComponent
 }, never>;
 export declare const NotificationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LayoutLoading: import("styled-components").StyledComponent<{
+    (props: import("../../atoms/Spin/Spin").TSpinProps): import("react").JSX.Element;
+    defaultProps: {};
+}, any, {}, never>;

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

@@ -2,7 +2,7 @@ var _a, _b;
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Flex } from '../../atoms';
+import { Flex, Spin } from '../../atoms';
 // Constants
 import { HEADER_HEIGHT } from '../../molecules/HeaderV2/constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
@@ -85,3 +85,6 @@ export const ChildrenWrapper = styled.div `
   }
   /* height: calc(100% - 50px); */
 `;
+export const LayoutLoading = styled(Spin) `
+  margin: auto !important;
+`;

package/package.json

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