@antscorp/antsomi-ui 1.3.5-beta.211 → 1.3.5-beta.213

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface MenuItemImageProps {
     imageUrl: string;
     fallbackIcon?: string | null;
+    className?: string;
 }
 export declare const MenuItemImage: React.FC<MenuItemImageProps>;
 export {};

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/index.js

@@ -2,8 +2,10 @@
 import React, { memo, useState } from 'react';
 import Icon from '@antscorp/icons';
 import { isNil } from 'lodash';
-import { Flex } from 'antd';
-export const MenuItemImage = memo(({ fallbackIcon, imageUrl }) => {
+// Constants
+import { MenuItemImageWrapper, MaskImage } from './styled';
+export const MenuItemImage = memo(({ fallbackIcon, imageUrl, className }) => {
     const [isExistImage, setIsExistImage] = useState(true);
-    return (React.createElement(Flex, { style: { marginRight: '10px' }, align: "center", justify: "center" }, isExistImage ? (React.createElement("img", { src: imageUrl, alt: "", onError: () => setIsExistImage(false) })) : isNil(fallbackIcon) ? null : (React.createElement(Icon, { type: fallbackIcon, style: { fontSize: 25 } }))));
+    return (React.createElement(MenuItemImageWrapper, { align: "center", justify: "center", className: className }, isExistImage ? (React.createElement(MaskImage, { url: imageUrl })) : // <img src={imageUrl} alt="" onError={() => setIsExistImage(false)} />
+        isNil(fallbackIcon) ? null : (React.createElement(Icon, { type: fallbackIcon }))));
 });

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const MaskImage: import("styled-components").StyledComponent<"div", any, {
+    url: string;
+}, never>;
+export declare const MenuItemImageWrapper: 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>;

package/es/components/organism/LeftMenu/components/common/ChildMenu/components/MenuItemImage/styled.js

@@ -0,0 +1,25 @@
+var _a;
+import styled from 'styled-components';
+// Constants
+import { ICON_SIZE } from '../../../../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Components
+import { Flex } from '../../../../../../../atoms';
+export const MaskImage = styled.div `
+  width: ${ICON_SIZE}px;
+  height: ${ICON_SIZE}px;
+  background: black;
+  mask-size: contain;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  mask-image: ${({ url }) => `url(${url})`};
+`;
+export const MenuItemImageWrapper = styled(Flex) `
+  margin-right: '10px';
+
+  &.isActive {
+    ${MaskImage} {
+      background: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary} !important;
+    }
+  }
+`;

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.js

@@ -2,6 +2,7 @@
 import React, { memo, useEffect, useState } from 'react';
 import Icon from '@antscorp/icons';
 import { isEmpty, isNil, isString, uniq } from 'lodash';
+import classNames from 'classnames';
 import { Link, useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 // Components
@@ -91,7 +92,7 @@ export const ChildMenu = memo(props => {
             return {
                 key,
                 label: isString(menu_item_path) ? (isPushDifferentDomain(menu_item_domain, menu_item_path) ? (React.createElement("div", { onClick: () => navigatePath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent())) : (React.createElement(Link, { to: getPath(menu_item_domain, menu_item_path), className: "menu-link" }, labelComponent()))) : (labelComponent()),
-                icon: !isNil(icon) ? (React.createElement(Icon, { type: icon, style: { fontSize: ICON_SIZE } })) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon })) : null,
+                icon: !isNil(icon) ? (React.createElement(Icon, { type: icon, style: { fontSize: ICON_SIZE } })) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon, className: classNames({ isActive: currentActiveItem === key }) })) : null,
                 children: customMenuItems({ parent: item, items: children }),
             };
         });

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

@@ -21,11 +21,6 @@ export const MenuWrapper = styled.div `
       margin: 0 !important;
       width: 100% !important;
 
-      div {
-        width: ${ICON_SIZE}px;
-        height: ${ICON_SIZE}px;
-      }
-
       [role='icon'] {
         font-size: ${ICON_SIZE}px !important;
       }

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

@@ -11,6 +11,7 @@ import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMe
 import { findActiveAppCodeByUrl, findLastMatchedCodeByUrl, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
 // Store
 import { useLeftMenuStore } from '../stores';
+import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants/postMessage';
 const initialState = {
     hoverItem: '',
     isExpandMenu: true,
@@ -60,7 +61,7 @@ export const useLeftMenu = (props) => {
             },
         },
     });
-    const { data: dashboardData } = useGetDashboard({
+    const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
         args: {
             auth: {
                 token: auth === null || auth === void 0 ? void 0 : auth.token,
@@ -100,7 +101,25 @@ export const useLeftMenu = (props) => {
         dashboardData,
         destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
     }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, permissionMenu]);
+    /* Handers */
+    const receivePostMessage = (event) => {
+        const { data } = event;
+        const { type } = data || {};
+        switch (type) {
+            case POST_MESSAGE_TYPES.REFETCH_DASHBOARD_LIST: {
+                refetchDashboard();
+                break;
+            }
+            default:
+                break;
+        }
+    };
     // Side Effects
+    // Receive Post Message
+    useEffect(() => {
+        window.addEventListener('message', receivePostMessage);
+        return () => window.removeEventListener('message', receivePostMessage);
+    }, []);
     /**
      * Change list menu children when hovering or activating items, giving priority to hovering items
      */

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

@@ -4,7 +4,9 @@ import { HeaderV2Props } from '../../molecules';
 import '@antscorp/processing-notification/dist/index.css';
 import { ProcessingNotificationProps } from '@antscorp/antsomi-ui/es/types';
 interface LayoutProps {
-    headerProps?: Partial<HeaderV2Props>;
+    headerProps?: Partial<Omit<HeaderV2Props, 'helpConfig'> & {
+        helpConfig: Partial<HeaderV2Props['helpConfig']>;
+    }>;
     leftMenuProps?: LeftMenuProps;
     processingNotificationProps?: Partial<ProcessingNotificationProps>;
     workspaceProps?: React.HTMLAttributes<HTMLDivElement> & {

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

@@ -40,15 +40,13 @@ export const Layout = memo(props => {
     // Memo
     const initialHeaderProps = useMemo(() => {
         var _a, _b;
-        return (Object.assign(Object.assign({ className: 'layout-header' }, headerProps), { helpConfig: {
-                configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
+        return (Object.assign(Object.assign({ className: 'layout-header' }, headerProps), { helpConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig), { configs: Object.assign(Object.assign({}, (_a = headerProps === null || headerProps === void 0 ? void 0 : headerProps.helpConfig) === null || _a === void 0 ? void 0 : _a.configs), { appCode: 'SANDBOX_MARKETING', avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png', config: {
                         p_timezone: 'Asia/Singapore',
                         api_pid: 33167,
                         p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
                         embeddedData: {},
                         INSIGHT_U_OGS: 'uogs',
-                    } }),
-            }, accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }), accountSelection: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection), { show: ((_b = headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection) === null || _b === void 0 ? void 0 : _b.show) && showAccountSelection }) }));
+                    } }) }), accountSharingConfig: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSharingConfig), { u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }), accountSelection: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection), { show: ((_b = headerProps === null || headerProps === void 0 ? void 0 : headerProps.accountSelection) === null || _b === void 0 ? void 0 : _b.show) && showAccountSelection }) }));
     }, [headerProps, showAccountSelection]);
     const mergeHeaderProps = useMemo(() => merge(initialHeaderProps, headerStore), [initialHeaderProps, headerStore]);
     const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain: PERMISSION_API, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [languageCode, portalId, token, userId, processingNotificationProps]);

package/es/constants/index.d.ts

@@ -9,3 +9,4 @@ export * from './variables';
 export * from './permissions';
 export * from './queries';
 export * from './theme';
+export * from './postMessage';

package/es/constants/index.js

@@ -9,3 +9,4 @@ export * from './variables';
 export * from './permissions';
 export * from './queries';
 export * from './theme';
+export * from './postMessage';

package/es/constants/postMessage.d.ts

@@ -0,0 +1,3 @@
+export declare const POST_MESSAGE_TYPES: {
+    REFETCH_DASHBOARD_LIST: string;
+};

package/es/constants/postMessage.js

@@ -0,0 +1,3 @@
+export const POST_MESSAGE_TYPES = {
+    REFETCH_DASHBOARD_LIST: 'REFETCH_DASHBOARD_LIST',
+};

package/es/index.d.ts

@@ -2,5 +2,5 @@ export * from './components';
 export * from './types';
 export * from './queries';
 export * from './providers';
-export { QUERY_KEYS } from './constants';
+export { QUERY_KEYS, POST_MESSAGE_TYPES } from './constants';
 export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';

package/es/index.js

@@ -2,5 +2,5 @@ export * from './components';
 export * from './types';
 export * from './queries';
 export * from './providers';
-export { QUERY_KEYS } from './constants';
+export { QUERY_KEYS, POST_MESSAGE_TYPES } from './constants';
 export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';

package/es/types/index.d.ts

@@ -20,6 +20,7 @@ export * from './service';
 export * from './templateListing';
 export * from './share-access';
 export * from './processingNotification';
+export * from './postMessage';
 export type PayloadInfo = {
     url?: string;
     userId?: string;

package/es/types/index.js

@@ -4,3 +4,4 @@ export * from './service';
 export * from './templateListing';
 export * from './share-access';
 export * from './processingNotification';
+export * from './postMessage';

package/es/types/postMessage.d.ts

@@ -0,0 +1,4 @@
+export interface IPostMessage {
+    type: string;
+    payload: any;
+}

package/es/types/postMessage.js

@@ -0,0 +1 @@
+export {};

package/package.json

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