diff --git a/pages/app-layout/runtime-drawers-persist-open-state.page.tsx b/pages/app-layout/runtime-drawers-persist-open-state.page.tsx index d23fdcb162..57e67369ed 100644 --- a/pages/app-layout/runtime-drawers-persist-open-state.page.tsx +++ b/pages/app-layout/runtime-drawers-persist-open-state.page.tsx @@ -21,6 +21,7 @@ awsuiPlugins.appLayout.registerDrawer({ `, }, + // preserveInactiveContent: true, ariaLabels: { closeButton: 'Close button', @@ -32,6 +33,7 @@ awsuiPlugins.appLayout.registerDrawer({ mountContent: (container, { onVisibilityChange }) => { awsuiPlugins.appLayout.updateDrawer({ id: 'runtime-drawer-persist-open-state', defaultActive: true }); onVisibilityChange(isVisible => { + console.log('onVisibilityChange: ', isVisible); awsuiPlugins.appLayout.updateDrawer({ id: 'runtime-drawer-persist-open-state', defaultActive: isVisible }); }); render(, container); diff --git a/src/app-layout/runtime-drawer/index.tsx b/src/app-layout/runtime-drawer/index.tsx index e816e9266e..1eaadc4317 100644 --- a/src/app-layout/runtime-drawer/index.tsx +++ b/src/app-layout/runtime-drawer/index.tsx @@ -16,8 +16,6 @@ export interface DrawersLayout { localAfter: Array; } -type VisibilityCallback = (isVisible: boolean) => void; - interface RuntimeContentWrapperProps { id?: string; mountContent: RuntimeDrawerConfig['mountContent']; @@ -26,28 +24,23 @@ interface RuntimeContentWrapperProps { function RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) { const ref = useRef(null); - const visibilityChangeCallback = useRef(null); - const activeDrawersIds = useContext(ActiveDrawersContext); - const isVisible = !!id && activeDrawersIds.includes(id); + const drawersVisibilityCallbackMap = useContext(ActiveDrawersContext); useEffect(() => { const container = ref.current!; mountContent(container, { onVisibilityChange: cb => { - visibilityChangeCallback.current = cb; + if (drawersVisibilityCallbackMap?.current && id) { + drawersVisibilityCallbackMap.current[id!] = cb; + } }, }); return () => { unmountContent(container); - visibilityChangeCallback.current = null; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - useEffect(() => { - visibilityChangeCallback.current?.(isVisible); - }, [isVisible]); - return
; } diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts index b65f96ae9b..40aedb21ff 100644 --- a/src/app-layout/utils/use-drawers.ts +++ b/src/app-layout/utils/use-drawers.ts @@ -174,10 +174,13 @@ function applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) export const MIN_DRAWER_SIZE = 290; +type VisibilityCallback = (isVisible: boolean) => void; + type UseDrawersProps = Pick & { __disableRuntimeDrawers?: boolean; onGlobalDrawerFocus?: (drawerId: string, open: boolean) => void; onAddNewActiveDrawer?: (drawerId: string) => void; + visibilityCallbackMap?: Record; }; export function useDrawers( @@ -188,6 +191,7 @@ export function useDrawers( onGlobalDrawerFocus, onAddNewActiveDrawer, __disableRuntimeDrawers: disableRuntimeDrawers, + visibilityCallbackMap, }: UseDrawersProps, ariaLabels: AppLayoutProps['ariaLabels'], toolsProps: ToolsProps @@ -234,11 +238,17 @@ export function useDrawers( setActiveGlobalDrawersIds(currentState => currentState.filter(id => id !== drawerId)); onGlobalDrawerFocus?.(drawerId, false); drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== drawerId); + if (visibilityCallbackMap) { + visibilityCallbackMap[drawerId]?.(false); + } } else if (drawerId) { onAddNewActiveDrawer?.(drawerId); setActiveGlobalDrawersIds(currentState => [drawerId, ...currentState].slice(0, DRAWERS_LIMIT!)); onGlobalDrawerFocus?.(drawerId, true); drawersOpenQueue.current = [drawerId, ...drawersOpenQueue.current]; + if (visibilityCallbackMap) { + visibilityCallbackMap[drawerId]?.(true); + } } } diff --git a/src/app-layout/utils/visibility-context.tsx b/src/app-layout/utils/visibility-context.tsx index eb48258ded..81ff80a92c 100644 --- a/src/app-layout/utils/visibility-context.tsx +++ b/src/app-layout/utils/visibility-context.tsx @@ -1,5 +1,9 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { createContext } from 'react'; +import React, { createContext } from 'react'; -export const ActiveDrawersContext = createContext>([]); +type VisibilityCallback = (isVisible: boolean) => void; + +export const ActiveDrawersContext = createContext +> | null>({ current: {} }); diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx index e5b871440e..9ea63f6153 100644 --- a/src/app-layout/visual-refresh-toolbar/index.tsx +++ b/src/app-layout/visual-refresh-toolbar/index.tsx @@ -1,6 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useEffect, useImperativeHandle, useState } from 'react'; +import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'; import { useStableCallback } from '@cloudscape-design/component-toolkit/internal'; @@ -34,6 +34,8 @@ import { import { useMultiAppLayout } from './multi-layout'; import { SkeletonLayout } from './skeleton'; +type VisibilityCallback = (isVisible: boolean) => void; + const AppLayoutVisualRefreshToolbar = React.forwardRef( ( { @@ -78,6 +80,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef>({}); const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, { componentName: 'AppLayout', @@ -141,14 +144,23 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef { onActiveDrawerChange(drawerId); @@ -459,7 +471,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef 0 && } globalTools={ - + }