Skip to content

Commit a0d47d9

Browse files
committed
rename widget exports
1 parent 87b8e7c commit a0d47d9

File tree

9 files changed

+72
-50
lines changed

9 files changed

+72
-50
lines changed
Lines changed: 46 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,81 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3-
import React, { useEffect, useRef, useState } from 'react';
3+
import React, { useEffect, useState } from 'react';
44

5+
import { FunctionComponent } from '../../internal/widgets';
56
import { isAppLayoutDelayedWidget } from '../utils/feature-flags';
67
import { AppLayoutState as AppLayoutStateImplementation, createWidgetizedAppLayoutState } from './app-layout-state';
78
import { createWidgetizedAppLayoutDrawer, createWidgetizedAppLayoutGlobalDrawers } from './drawer';
89
import { createWidgetizedAppLayoutNavigation } from './navigation';
910
import { createWidgetizedAppLayoutNotifications } from './notifications';
10-
import { createWidgetizedAppLayoutBottomPageContentSlot } from './skeleton/widget-slots/bottom-page-content-slot';
11-
import { createWidgetizedAppLayoutSidePageSlot } from './skeleton/widget-slots/side-page-slot';
12-
import { createWidgetizedAppLayoutTopPageContentSlot } from './skeleton/widget-slots/top-page-content-slot';
13-
import { createWidgetizedAppLayoutTopPageSlot, TopPageSlot } from './skeleton/widget-slots/top-page-slot';
11+
import {
12+
AfterMainSlotImplementation,
13+
createWidgetizedAppLayoutAfterMainSlot,
14+
} from './skeleton/widget-slots/after-main-slot';
15+
import {
16+
BeforeMainSlotImplementation,
17+
createWidgetizedAppLayoutBeforeMainSlot,
18+
} from './skeleton/widget-slots/before-main-slot';
19+
import {
20+
BottomContentSlotImplementation,
21+
createWidgetizedAppLayoutBottomContentSlot,
22+
} from './skeleton/widget-slots/bottom-content-slot';
23+
import {
24+
createWidgetizedAppLayoutTopContentSlot,
25+
TopContentSlotImplementation,
26+
} from './skeleton/widget-slots/top-content-slot';
1427
import {
1528
createWidgetizedAppLayoutSplitPanelDrawerBottom,
1629
createWidgetizedAppLayoutSplitPanelDrawerSide,
1730
} from './split-panel';
1831
import { createWidgetizedAppLayoutToolbar } from './toolbar';
1932

33+
const enableDelayedComponents = isAppLayoutDelayedWidget();
34+
35+
// Legacy widgetized parts
2036
export const AppLayoutNavigation = createWidgetizedAppLayoutNavigation();
2137
export const AppLayoutDrawer = createWidgetizedAppLayoutDrawer();
2238
export const AppLayoutGlobalDrawers = createWidgetizedAppLayoutGlobalDrawers();
2339
export const AppLayoutNotifications = createWidgetizedAppLayoutNotifications();
2440
export const AppLayoutToolbar = createWidgetizedAppLayoutToolbar();
2541
export const AppLayoutSplitPanelBottom = createWidgetizedAppLayoutSplitPanelDrawerBottom();
2642
export const AppLayoutSplitPanelSide = createWidgetizedAppLayoutSplitPanelDrawerSide();
27-
export const AppLayoutSkeletonTopSlot = createWidgetizedAppLayoutTopPageSlot(
28-
createAppLayoutPart({ Component: TopPageSlot })
43+
44+
// Refactored widgetized parts
45+
export const AppLayoutBeforeMainSlot = createWidgetizedAppLayoutBeforeMainSlot(
46+
createLoadableComponent(BeforeMainSlotImplementation)
47+
);
48+
export const AppLayoutAfterMainSlot = createWidgetizedAppLayoutAfterMainSlot(
49+
createLoadableComponent(AfterMainSlotImplementation)
50+
);
51+
export const AppLayoutTopContentSlot = createWidgetizedAppLayoutTopContentSlot(
52+
createLoadableComponent(TopContentSlotImplementation)
53+
);
54+
export const AppLayoutBottomContentSlot = createWidgetizedAppLayoutBottomContentSlot(
55+
createLoadableComponent(BottomContentSlotImplementation)
2956
);
30-
export const AppLayoutSkeletonSideSlot = createWidgetizedAppLayoutSidePageSlot();
31-
export const AppLayoutSkeletonTopContentSlot = createWidgetizedAppLayoutTopPageContentSlot();
32-
export const AppLayoutSkeletonBottomContentSlot = createWidgetizedAppLayoutBottomPageContentSlot();
3357
export const AppLayoutWidgetizedState = createWidgetizedAppLayoutState(
34-
createAppLayoutPart({ Component: AppLayoutStateImplementation })
58+
createLoadableComponent(AppLayoutStateImplementation)
3559
);
3660

37-
const enableDelayedComponents = isAppLayoutDelayedWidget();
38-
39-
export function createAppLayoutPart({ Component }: { Component: React.JSXElementConstructor<any> }) {
40-
const AppLayoutPartLoader = ({ Skeleton, ...props }: any) => {
41-
const [mount, setMount] = useState(false);
42-
const ref = useRef<HTMLDivElement>(null);
61+
export function createLoadableComponent<Props extends Record<string, any>>(Component: FunctionComponent<Props>) {
62+
if (!enableDelayedComponents) {
63+
return;
64+
}
65+
return (props: Props) => {
66+
const [mounted, setMounted] = useState(false);
4367

4468
useEffect(() => {
45-
const timeoutId = setTimeout(() => {
46-
setMount(true);
47-
}, 1000);
48-
69+
const timeoutId = setTimeout(() => setMounted(true), 1000);
4970
return () => clearTimeout(timeoutId);
5071
}, []);
5172

52-
if (!enableDelayedComponents || (mount && enableDelayedComponents)) {
73+
if (mounted) {
5374
return <Component {...props} />;
5475
}
76+
// this prop is injected in `createWidgetizedComponent` and is not a part of the component signature
77+
const { Skeleton } = props as any;
5578

56-
if (Skeleton) {
57-
return <Skeleton ref={ref} {...props} />;
58-
}
59-
return <div ref={ref} />;
79+
return Skeleton ? <Skeleton {...props} /> : <div />;
6080
};
61-
return AppLayoutPartLoader;
6281
}

src/app-layout/visual-refresh-toolbar/navigation/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import sharedStyles from '../../resize/styles.css.js';
1616
import testutilStyles from '../../test-classes/styles.css.js';
1717
import styles from './styles.css.js';
1818

19-
interface AppLayoutNavigationImplementationProps {
19+
export interface AppLayoutNavigationImplementationProps {
2020
appLayoutInternals: Partial<AppLayoutInternals>;
2121
}
2222

src/app-layout/visual-refresh-toolbar/skeleton/index.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ import { useGetGlobalBreadcrumbs } from '../../../internal/plugins/helpers/use-g
1515
import { computeVerticalLayout } from '../compute-layout';
1616
import { AppLayoutInternalProps, AppLayoutInternals } from '../interfaces';
1717
import {
18-
AppLayoutSkeletonBottomContentSlot,
19-
AppLayoutSkeletonSideSlot,
20-
AppLayoutSkeletonTopContentSlot,
21-
AppLayoutSkeletonTopSlot,
18+
AppLayoutAfterMainSlot,
19+
AppLayoutBeforeMainSlot,
20+
AppLayoutBottomContentSlot,
21+
AppLayoutTopContentSlot,
2222
} from '../internal';
2323
import { useMultiAppLayout } from '../multi-layout';
2424
import { useAppLayout } from '../use-app-layout';
@@ -179,9 +179,9 @@ export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
179179
}
180180
ref={ref}
181181
>
182-
<AppLayoutSkeletonTopSlot {...mergedProps} />
182+
<AppLayoutBeforeMainSlot {...mergedProps} />
183183
<main {...mainElAttributes} className={mainElAttributes?.className ?? styles['main-landmark']}>
184-
<AppLayoutSkeletonTopContentSlot {...mergedProps} />
184+
<AppLayoutTopContentSlot {...mergedProps} />
185185
<div
186186
{...contentWrapperElAttributes}
187187
className={
@@ -195,9 +195,9 @@ export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
195195
{registered ? content : null}
196196
</div>
197197
</div>
198-
<AppLayoutSkeletonBottomContentSlot {...mergedProps} />
198+
<AppLayoutBottomContentSlot {...mergedProps} />
199199
</main>
200-
<AppLayoutSkeletonSideSlot {...mergedProps} />
200+
<AppLayoutAfterMainSlot {...mergedProps} />
201201
</div>
202202
</VisualContext>
203203
</>

src/app-layout/visual-refresh-toolbar/skeleton/widget-slots/side-page-slot.tsx renamed to src/app-layout/visual-refresh-toolbar/skeleton/widget-slots/after-main-slot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { SkeletonLayoutProps } from '../index';
1616
import sharedStyles from '../../../resize/styles.css.js';
1717
import styles from '../styles.css.js';
1818

19-
export const SidePageSlot = (props: SkeletonLayoutProps) => {
19+
export const AfterMainSlotImplementation = (props: SkeletonLayoutProps) => {
2020
const {
2121
appLayoutProps: { splitPanel },
2222
appLayoutState,
@@ -74,4 +74,4 @@ export const SidePageSlot = (props: SkeletonLayoutProps) => {
7474
);
7575
};
7676

77-
export const createWidgetizedAppLayoutSidePageSlot = createWidgetizedComponent(SidePageSlot);
77+
export const createWidgetizedAppLayoutAfterMainSlot = createWidgetizedComponent(AfterMainSlotImplementation);

src/app-layout/visual-refresh-toolbar/skeleton/widget-slots/top-page-slot.tsx renamed to src/app-layout/visual-refresh-toolbar/skeleton/widget-slots/before-main-slot.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { ToolbarSkeleton } from '../slot-skeletons';
1313
import sharedStyles from '../../../resize/styles.css.js';
1414
import styles from '../styles.css.js';
1515

16-
export const TopPageSlot = (props: SkeletonLayoutProps) => {
16+
export const BeforeMainSlotImplementation = (props: SkeletonLayoutProps) => {
1717
const { appLayoutState } = props;
1818
const {
1919
resolvedNavigationOpen,
@@ -67,4 +67,7 @@ export const TopPageSlotSkeleton = React.forwardRef<HTMLElement, SkeletonLayoutP
6767
);
6868
});
6969

70-
export const createWidgetizedAppLayoutTopPageSlot = createWidgetizedComponent(TopPageSlot, TopPageSlotSkeleton);
70+
export const createWidgetizedAppLayoutBeforeMainSlot = createWidgetizedComponent(
71+
BeforeMainSlotImplementation,
72+
TopPageSlotSkeleton
73+
);

src/app-layout/visual-refresh-toolbar/skeleton/widget-slots/bottom-page-content-slot.tsx renamed to src/app-layout/visual-refresh-toolbar/skeleton/widget-slots/bottom-content-slot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { SkeletonLayoutProps } from '../index';
88

99
import styles from '../styles.css.js';
1010

11-
export const BottomPageContentSlot = (props: SkeletonLayoutProps) => {
11+
export const BottomContentSlotImplementation = (props: SkeletonLayoutProps) => {
1212
const {
1313
appLayoutState,
1414
appLayoutProps: { placement, splitPanel },
@@ -30,4 +30,4 @@ export const BottomPageContentSlot = (props: SkeletonLayoutProps) => {
3030
);
3131
};
3232

33-
export const createWidgetizedAppLayoutBottomPageContentSlot = createWidgetizedComponent(BottomPageContentSlot);
33+
export const createWidgetizedAppLayoutBottomContentSlot = createWidgetizedComponent(BottomContentSlotImplementation);

src/app-layout/visual-refresh-toolbar/skeleton/widget-slots/top-page-content-slot.tsx renamed to src/app-layout/visual-refresh-toolbar/skeleton/widget-slots/top-content-slot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { SkeletonLayoutProps } from '../index';
1010

1111
import styles from '../styles.css.js';
1212

13-
export const TopPageContentSlot = (props: SkeletonLayoutProps) => {
13+
export const TopContentSlotImplementation = (props: SkeletonLayoutProps) => {
1414
const {
1515
appLayoutProps: { headerVariant, notifications },
1616
appLayoutState,
@@ -33,4 +33,4 @@ export const TopPageContentSlot = (props: SkeletonLayoutProps) => {
3333
);
3434
};
3535

36-
export const createWidgetizedAppLayoutTopPageContentSlot = createWidgetizedComponent(TopPageContentSlot);
36+
export const createWidgetizedAppLayoutTopContentSlot = createWidgetizedComponent(TopContentSlotImplementation);

src/app-layout/visual-refresh-toolbar/split-panel/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { AppLayoutInternals } from '../interfaces';
99

1010
import styles from './styles.css.js';
1111

12-
interface AppLayoutSplitPanelDrawerSideImplementationProps {
12+
export interface AppLayoutSplitPanelDrawerSideImplementationProps {
1313
appLayoutInternals: Partial<AppLayoutInternals>;
1414
splitPanelInternals: SplitPanelProviderProps;
1515
children: React.ReactNode;
@@ -39,7 +39,7 @@ export function AppLayoutSplitPanelDrawerSideImplementation({
3939
);
4040
}
4141

42-
interface AppLayoutSplitPanelDrawerBottomImplementationProps {
42+
export interface AppLayoutSplitPanelDrawerBottomImplementationProps {
4343
appLayoutInternals: Partial<AppLayoutInternals>;
4444
splitPanelInternals: SplitPanelProviderProps;
4545
children: React.ReactNode;

src/internal/widget-exports.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export {
1616
export { AppLayoutToolbarImplementation as AppLayoutToolbar } from '../app-layout/visual-refresh-toolbar/toolbar';
1717

1818
// Refactored widgetized parts
19-
export { TopPageSlot as AppLayoutTopPageSlot } from '../app-layout/visual-refresh-toolbar/skeleton/widget-slots/top-page-slot';
20-
export { SidePageSlot as AppLayoutSidePageSlot } from '../app-layout/visual-refresh-toolbar/skeleton/widget-slots/side-page-slot';
21-
export { TopPageContentSlot as AppLayoutTopContentSlot } from '../app-layout/visual-refresh-toolbar/skeleton/widget-slots/top-page-content-slot';
22-
export { BottomPageContentSlot as AppLayoutBottomContentSlot } from '../app-layout/visual-refresh-toolbar/skeleton/widget-slots/bottom-page-content-slot';
19+
export { BeforeMainSlotImplementation as AppLayoutBeforeMainSlot } from '../app-layout/visual-refresh-toolbar/skeleton/widget-slots/before-main-slot';
20+
export { AfterMainSlotImplementation as AppLayoutAfterMainSlot } from '../app-layout/visual-refresh-toolbar/skeleton/widget-slots/after-main-slot';
21+
export { TopContentSlotImplementation as AppLayoutTopContentSlot } from '../app-layout/visual-refresh-toolbar/skeleton/widget-slots/top-content-slot';
22+
export { BottomContentSlotImplementation as AppLayoutBottomContentSlot } from '../app-layout/visual-refresh-toolbar/skeleton/widget-slots/bottom-content-slot';
2323
export { AppLayoutState as AppLayoutWidgetizedState } from '../app-layout/visual-refresh-toolbar/app-layout-state';
2424

2525
export { SplitPanelImplementation as SplitPanel } from '../split-panel/implementation';

0 commit comments

Comments
 (0)