@antscorp/antsomi-ui 1.3.5-beta.353 → 1.3.5-beta.354

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/components/template/Layout/Layout.js +11 -8
  2. package/es/components/template/Layout/stores/index.js +2 -2
  3. package/package.json +1 -1
package/es/components/template/Layout/Layout.js CHANGED
@@ -29,7 +29,7 @@ import '@antscorp/processing-notification/dist/index.css';
29
29
  import { useLayoutStore } from './stores';
30
30
  // Utils
31
31
  import { hasSelectAccountPermission } from './utils';
32
- import { useMutationObserver } from '@antscorp/antsomi-ui/es/hooks';
32
+ import { useDeepCompareMemo, useMutationObserver } from '@antscorp/antsomi-ui/es/hooks';
33
33
  const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
34
34
  export const Layout = memo(props => {
35
35
  const { leftMenuProps, headerProps = {}, workspaceProps, contentWrapperProps, processingNotificationProps, children, onActiveMenuChange, } = props;
@@ -39,7 +39,9 @@ export const Layout = memo(props => {
39
39
  const { auth, languageCode, appCode, env } = appConfig;
40
40
  const { token, userId, portalId } = auth || {};
41
41
  const showLeftMenu = useLayoutStore(store => store.state.leftMenu.show);
42
- const layoutState = useLayoutStore(store => store.state);
42
+ const header = useLayoutStore(store => store.state.header);
43
+ const contentWrapper = useLayoutStore(store => store.state.contentWrapper);
44
+ const workspace = useLayoutStore(store => store.state.workspace);
43
45
  const [showAccountSelection, setShowAccountSelection] = useState(false);
44
46
  const [noSpaceTopContent, setNoSpaceTopContent] = useState(false);
45
47
  // Refs
@@ -47,6 +49,7 @@ export const Layout = memo(props => {
47
49
  // Hooks
48
50
  useMutationObserver(() => {
49
51
  if (notificationWrapperRef.current) {
52
+ console.log('dfjdsoifjdsoijoi');
50
53
  const child = notificationWrapperRef.current.querySelector('div');
51
54
  setNoSpaceTopContent(!!child);
52
55
  }
@@ -91,7 +94,7 @@ export const Layout = memo(props => {
91
94
  return IAM_API;
92
95
  }
93
96
  }, [appCode, env, portalId]);
94
- const initialHeaderProps = useMemo(() => {
97
+ const initialHeaderProps = useDeepCompareMemo(() => {
95
98
  var _a, _b;
96
99
  return (Object.assign(Object.assign({ className: 'layout-header', useURLParam: true }, headerProps), { config: Object.assign(Object.assign({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.config), { permissionDomain,
97
100
  iamDomain }), 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: {
@@ -102,9 +105,9 @@ export const Layout = memo(props => {
102
105
  INSIGHT_U_OGS: 'uogs',
103
106
  } }) }), 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 }) }));
104
107
  }, [headerProps, iamDomain, permissionDomain, showAccountSelection]);
105
- const mergeHeaderProps = merge(cloneDeep(initialHeaderProps), cloneDeep(layoutState.header));
106
- const mergeContentWrapperProps = merge(cloneDeep(contentWrapperProps), cloneDeep(layoutState.contentWrapper));
107
- const mergeWorkSpaceProps = merge(cloneDeep(restOfWorkspaceProps), cloneDeep(omit(layoutState.workspace, 'workspaceContentProps')));
108
+ const mergeHeaderProps = useDeepCompareMemo(() => merge(cloneDeep(initialHeaderProps), header), [initialHeaderProps, header]);
109
+ const _c = useDeepCompareMemo(() => merge(cloneDeep(contentWrapperProps), cloneDeep(contentWrapper)), [contentWrapperProps, contentWrapper]), { noPadding } = _c, mergeContentWrapperProps = __rest(_c, ["noPadding"]);
110
+ const mergeWorkSpaceProps = useDeepCompareMemo(() => merge(cloneDeep(restOfWorkspaceProps), omit(workspace, 'workspaceContentProps')), [restOfWorkspaceProps, workspace]);
108
111
  const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [permissionDomain, token, userId, languageCode, portalId, processingNotificationProps]);
109
112
  const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList) => {
110
113
  var _a;
@@ -116,8 +119,8 @@ export const Layout = memo(props => {
116
119
  React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { showLogo: !showLeftMenu })),
117
120
  React.createElement(Flex, { className: "layout-body" },
118
121
  showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${className}`, appConfig: appConfig }, restOfLeftMenuProps, { onActiveMenuCodeChange: onActiveMenuCodeChange }))),
119
- React.createElement(ContentWrapper, Object.assign({ "$noPadding": mergeContentWrapperProps.noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps),
120
- React.createElement("div", Object.assign({}, mergeWorkSpaceProps, { className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }),
122
+ React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps),
123
+ React.createElement("div", Object.assign({ className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }, mergeWorkSpaceProps),
121
124
  React.createElement(NotificationWrapper, { ref: notificationWrapperRef },
122
125
  React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig))),
123
126
  React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps),
package/es/components/template/Layout/stores/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // Libraries
2
2
  import { create } from 'zustand';
3
- import { merge } from 'lodash';
3
+ import { cloneDeep, merge } from 'lodash';
4
4
  const initialState = {
5
5
  header: {},
6
6
  leftMenu: { show: true },
@@ -9,7 +9,7 @@ const initialState = {
9
9
  };
10
10
  export const useLayoutStore = create(set => ({
11
11
  state: initialState,
12
- setLayoutState: newState => set(store => ({ state: merge(store.state, newState) })),
12
+ setLayoutState: newState => set(store => ({ state: merge(cloneDeep(store.state), cloneDeep(newState)) })),
13
13
  setHeaderState: newState => set(store => ({
14
14
  state: Object.assign(Object.assign({}, store.state), { header: Object.assign(Object.assign({}, store.state.header), newState) }),
15
15
  })),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.353",
3
+ "version": "1.3.5-beta.354",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",