@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
46 lines • 3.47 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';
import ScreenreaderOnly from '../../internal/components/screenreader-only';
import { AppLayoutVisibilityContext } from './contexts';
import { AppLayoutWidgetizedState } from './internal';
import { SkeletonLayout } from './skeleton';
import { useMultiAppLayout } from './skeleton/multi-layout';
import { getPropsToMerge, mergeProps } from './state/props-merger';
const AppLayoutStateProvider = ({ forceDeduplicationType, appLayoutProps, stateManager, children }) => {
const [appLayoutState, setAppLayoutState] = useState({ isIntersecting: true });
const [skeletonAttributes, setSkeletonAttributes] = useState({});
// use { fn: } object wrapper to avoid confusion with callback form of setState
const [deduplicator, setDeduplicator] = useState({ fn: mergeProps });
const [deduplicationProps, setDeduplicationProps] = useState(undefined);
const { registered, toolbarProps } = useMultiAppLayout(forceDeduplicationType, appLayoutState.isIntersecting, deduplicationProps !== null && deduplicationProps !== void 0 ? deduplicationProps : getPropsToMerge(appLayoutProps, appLayoutState), deduplicator.fn);
useLayoutEffect(() => {
stateManager.current.setState = (appLayoutState, skeletonAttributes, deduplicationProps, mergeProps) => {
unstable_batchedUpdates(() => {
setAppLayoutState(appLayoutState);
setSkeletonAttributes(skeletonAttributes);
setDeduplicationProps(deduplicationProps);
setDeduplicator({ fn: mergeProps });
});
};
}, [stateManager]);
const hasToolbar = !!toolbarProps;
useEffect(() => {
var _a, _b;
stateManager.current.hasToolbar = hasToolbar;
(_b = (_a = stateManager.current).setToolbar) === null || _b === void 0 ? void 0 : _b.call(_a, hasToolbar);
}, [stateManager, hasToolbar]);
return React.createElement(React.Fragment, null, children(registered, appLayoutState, toolbarProps, skeletonAttributes));
};
const AppLayoutVisualRefreshToolbar = React.forwardRef((props, forwardRef) => {
const stateManager = useRef({ setState: undefined, hasToolbar: false, setToolbar: undefined });
const { __forceDeduplicationType: forceDeduplicationType, __embeddedViewMode: embeddedViewMode } = props;
return (React.createElement(React.Fragment, null,
React.createElement(AppLayoutStateProvider, { forceDeduplicationType: forceDeduplicationType, appLayoutProps: props, stateManager: stateManager }, (registered, appLayoutState, toolbarProps, skeletonAttributes) => (React.createElement(AppLayoutVisibilityContext.Provider, { value: appLayoutState.isIntersecting },
(embeddedViewMode || !toolbarProps) && props.breadcrumbs ? (React.createElement(ScreenreaderOnly, null, props.breadcrumbs)) : null,
React.createElement(SkeletonLayout, { registered: registered, toolbarProps: toolbarProps, appLayoutProps: props, appLayoutState: appLayoutState, skeletonSlotsAttributes: skeletonAttributes })))),
React.createElement(AppLayoutWidgetizedState, { forwardRef: forwardRef, appLayoutProps: props, stateManager: stateManager })));
});
export default AppLayoutVisualRefreshToolbar;
//# sourceMappingURL=index.js.map