|
1 | 1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. |
2 | 2 | // SPDX-License-Identifier: Apache-2.0 |
3 | | -import React, { FC, MutableRefObject, useLayoutEffect, useRef, useState } from 'react'; |
| 3 | +import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; |
4 | 4 |
|
| 5 | +import ScreenreaderOnly from '../../internal/components/screenreader-only'; |
5 | 6 | import { AppLayoutProps } from '../interfaces'; |
6 | 7 | import { AppLayoutVisibilityContext } from './contexts'; |
7 | | -import { AppLayoutInternalProps } from './interfaces'; |
| 8 | +import { AppLayoutInternalProps, AppLayoutState } from './interfaces'; |
8 | 9 | import { AppLayoutWidgetizedState } from './internal'; |
9 | 10 | import { SkeletonLayout } from './skeleton'; |
10 | | -import { useSkeletonSlotsAttributes } from './skeleton/widget-slots/use-skeleton-slots-attributes'; |
11 | | -import { useAppLayout } from './use-app-layout'; |
12 | | - |
13 | | -type AppLayoutState = ReturnType<typeof useAppLayout> | null; |
14 | | -type SkeletonSlotsAttributes = ReturnType<typeof useSkeletonSlotsAttributes> | null; |
15 | | -interface StateManager { |
16 | | - set: (appLayoutState: AppLayoutState, skeletonAttributes: SkeletonSlotsAttributes) => void; |
17 | | -} |
18 | | - |
19 | | -const AppLayoutStateProvider: FC<{ |
20 | | - children: (appLayoutState: AppLayoutState, skeletonSlotsAttributes: SkeletonSlotsAttributes) => React.ReactNode; |
21 | | - stateManager: MutableRefObject<StateManager>; |
22 | | -}> = ({ stateManager, children }) => { |
23 | | - const [appLayoutState, setAppLayoutState] = useState<AppLayoutState>(null); |
24 | | - const [skeletonAttributes, setSkeletonAttributes] = useState<SkeletonSlotsAttributes>(null); |
| 11 | +import { SkeletonSlotsAttributes } from './skeleton/interfaces'; |
| 12 | +import { DeduplicationType, useMultiAppLayout } from './skeleton/multi-layout'; |
| 13 | +import { StateManager } from './state'; |
| 14 | +import { getPropsToMerge, mergeProps } from './state/props-merger'; |
| 15 | +import { ToolbarProps } from './toolbar'; |
| 16 | + |
| 17 | +const AppLayoutStateProvider: React.FC<{ |
| 18 | + forceDeduplicationType: DeduplicationType; |
| 19 | + appLayoutProps: AppLayoutInternalProps; |
| 20 | + stateManager: React.MutableRefObject<StateManager>; |
| 21 | + children: ( |
| 22 | + registered: boolean, |
| 23 | + appLayoutState: AppLayoutState, |
| 24 | + toolbarProps: ToolbarProps | null, |
| 25 | + skeletonAttributes: SkeletonSlotsAttributes |
| 26 | + ) => React.ReactNode; |
| 27 | +}> = ({ forceDeduplicationType, appLayoutProps, stateManager, children }) => { |
| 28 | + const [appLayoutState, setAppLayoutState] = useState<AppLayoutState>(() => ({ isIntersecting: true })); |
| 29 | + const [skeletonAttributes, setSkeletonAttributes] = useState<SkeletonSlotsAttributes>(() => ({})); |
| 30 | + // use { fn: } object wrapper to avoid confusion with callback form of setState |
| 31 | + const [deduplicator, setDeduplicator] = useState({ fn: mergeProps }); |
| 32 | + const [deduplicationProps, setDeduplicationProps] = useState(getPropsToMerge(appLayoutProps, appLayoutState)); |
| 33 | + |
| 34 | + const { registered, toolbarProps } = useMultiAppLayout( |
| 35 | + forceDeduplicationType, |
| 36 | + appLayoutState.isIntersecting, |
| 37 | + deduplicationProps, |
| 38 | + deduplicator.fn |
| 39 | + ); |
25 | 40 |
|
26 | 41 | useLayoutEffect(() => { |
27 | | - stateManager.current.set = (appLayoutState, skeletonAttributes) => { |
| 42 | + stateManager.current.setState = (appLayoutState, skeletonAttributes, deduplicationProps, mergeProps) => { |
28 | 43 | setAppLayoutState(appLayoutState); |
29 | 44 | setSkeletonAttributes(skeletonAttributes); |
| 45 | + setDeduplicationProps(deduplicationProps); |
| 46 | + setDeduplicator({ fn: mergeProps }); |
30 | 47 | }; |
31 | 48 | }, [stateManager]); |
32 | | - return <>{children(appLayoutState, skeletonAttributes)}</>; |
| 49 | + |
| 50 | + const hasToolbar = !!toolbarProps; |
| 51 | + useEffect(() => { |
| 52 | + stateManager.current.hasToolbar = hasToolbar; |
| 53 | + stateManager.current.setToolbar?.(hasToolbar); |
| 54 | + }, [stateManager, hasToolbar]); |
| 55 | + |
| 56 | + return <>{children(registered, appLayoutState, toolbarProps, skeletonAttributes)}</>; |
33 | 57 | }; |
34 | 58 |
|
35 | 59 | const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLayoutInternalProps>( |
36 | 60 | (props, forwardRef) => { |
37 | | - const stateManager = useRef<StateManager>({ set: () => {} }); |
| 61 | + const stateManager = useRef<StateManager>({ setState: undefined, hasToolbar: true, setToolbar: undefined }); |
| 62 | + const { __forceDeduplicationType: forceDeduplicationType, __embeddedViewMode: embeddedViewMode } = props as any; |
38 | 63 |
|
39 | 64 | return ( |
40 | 65 | <> |
41 | | - <AppLayoutStateProvider stateManager={stateManager}> |
42 | | - {(appLayoutState, skeletonSlotsAttributes) => { |
43 | | - return ( |
44 | | - <AppLayoutVisibilityContext.Provider value={appLayoutState?.isIntersecting ?? true}> |
45 | | - <SkeletonLayout |
46 | | - appLayoutProps={props} |
47 | | - appLayoutState={appLayoutState} |
48 | | - skeletonSlotsAttributes={skeletonSlotsAttributes} |
49 | | - /> |
50 | | - </AppLayoutVisibilityContext.Provider> |
51 | | - ); |
52 | | - }} |
| 66 | + <AppLayoutStateProvider |
| 67 | + forceDeduplicationType={forceDeduplicationType} |
| 68 | + appLayoutProps={props} |
| 69 | + stateManager={stateManager} |
| 70 | + > |
| 71 | + {(registered, appLayoutState, toolbarProps, skeletonAttributes) => ( |
| 72 | + <AppLayoutVisibilityContext.Provider value={appLayoutState.isIntersecting}> |
| 73 | + {/* Rendering a hidden copy of breadcrumbs to trigger their deduplication */} |
| 74 | + {(embeddedViewMode || !toolbarProps) && props.breadcrumbs ? ( |
| 75 | + <ScreenreaderOnly>{props.breadcrumbs}</ScreenreaderOnly> |
| 76 | + ) : null} |
| 77 | + <SkeletonLayout |
| 78 | + registered={registered} |
| 79 | + toolbarProps={toolbarProps} |
| 80 | + appLayoutProps={props} |
| 81 | + appLayoutState={appLayoutState} |
| 82 | + skeletonSlotsAttributes={skeletonAttributes} |
| 83 | + /> |
| 84 | + </AppLayoutVisibilityContext.Provider> |
| 85 | + )} |
53 | 86 | </AppLayoutStateProvider> |
54 | | - <AppLayoutWidgetizedState props={props} forwardRef={forwardRef} stateManager={stateManager} /> |
| 87 | + <AppLayoutWidgetizedState forwardRef={forwardRef} appLayoutProps={props} stateManager={stateManager} /> |
55 | 88 | </> |
56 | 89 | ); |
57 | 90 | } |
|
0 commit comments