@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
108 lines • 7.29 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { warnOnce } from '@awsui/component-toolkit/internal';
function checkAlreadyExists(value, propName) {
if (value) {
warnOnce('AppLayout', `Another app layout instance on this page already defines ${propName} property. This instance will be ignored.`);
return true;
}
return false;
}
export const mergeProps = (ownProps, additionalProps) => {
var _a;
const toolbar = {};
for (const props of [ownProps, ...additionalProps]) {
toolbar.ariaLabels = { ...toolbar.ariaLabels, ...props.ariaLabels };
if (props.drawers &&
props.drawers.some(drawer => drawer.trigger) &&
!checkAlreadyExists(!!toolbar.drawers, 'tools or drawers')) {
toolbar.drawers = props.drawers;
toolbar.activeDrawerId = props.activeDrawerId;
toolbar.drawersFocusRef = props.drawersFocusRef;
toolbar.onActiveDrawerChange = props.onActiveDrawerChange;
}
if (props.globalDrawers &&
props.globalDrawers.some(drawer => drawer.trigger) &&
!checkAlreadyExists(!!toolbar.globalDrawers, 'globalDrawers')) {
toolbar.globalDrawersFocusControl = props.globalDrawersFocusControl;
toolbar.globalDrawers = props.globalDrawers;
toolbar.activeGlobalDrawersIds = props.activeGlobalDrawersIds;
toolbar.onActiveGlobalDrawersChange = props.onActiveGlobalDrawersChange;
}
if (props.aiDrawer &&
props.aiDrawerFocusRef &&
!checkAlreadyExists(!!toolbar.aiDrawerFocusRef, 'aiDrawerFocusRef')) {
toolbar.aiDrawerFocusRef = props.aiDrawerFocusRef;
}
if (props.bottomDrawers &&
props.bottomDrawers.some(drawer => drawer.trigger) &&
!checkAlreadyExists(!!toolbar.bottomDrawers, 'bottomDrawers')) {
toolbar.bottomDrawers = props.bottomDrawers;
toolbar.bottomDrawersFocusRef = props.bottomDrawersFocusRef;
toolbar.activeGlobalBottomDrawerId = props.activeGlobalBottomDrawerId;
toolbar.onActiveGlobalBottomDrawerChange = props.onActiveGlobalBottomDrawerChange;
}
if (props.navigation && !checkAlreadyExists(!!toolbar.hasNavigation, 'navigation')) {
toolbar.hasNavigation = true;
toolbar.navigationOpen = props.navigationOpen;
toolbar.navigationFocusRef = props.navigationFocusRef;
toolbar.onNavigationToggle = props.onNavigationToggle;
}
if (props.splitPanel &&
((_a = props.splitPanelToggleProps) === null || _a === void 0 ? void 0 : _a.displayed) &&
!checkAlreadyExists(!!toolbar.hasSplitPanel, 'splitPanel')) {
toolbar.hasSplitPanel = true;
toolbar.splitPanelFocusRef = props.splitPanelFocusRef;
toolbar.splitPanelToggleProps = props.splitPanelToggleProps;
toolbar.onSplitPanelToggle = props.onSplitPanelToggle;
}
if (props.breadcrumbs && !checkAlreadyExists(!!toolbar.hasBreadcrumbsPortal, 'hasBreadcrumbsPortal')) {
toolbar.hasBreadcrumbsPortal = true;
}
if (props.expandedDrawerId && !checkAlreadyExists(!!toolbar.expandedDrawerId, 'expandedDrawerId')) {
toolbar.expandedDrawerId = props.expandedDrawerId;
toolbar.setExpandedDrawerId = props.setExpandedDrawerId;
}
}
// do not render toolbar if no fields are defined, except ariaLabels, which are always there
return Object.keys(toolbar).filter(key => key !== 'ariaLabels').length > 0 ? toolbar : null;
};
export const getPropsToMerge = (props, appLayoutState) => {
var _a, _b, _c, _d, _e, _f, _g;
const state = appLayoutState.widgetizedState;
return {
breadcrumbs: props.breadcrumbs,
ariaLabels: state ? state.ariaLabels : props.ariaLabels,
navigation: !props.navigationTriggerHide && !props.navigationHide,
navigationOpen: state ? state.navigationOpen : props.navigationOpen,
onNavigationToggle: state === null || state === void 0 ? void 0 : state.onNavigationToggle,
navigationFocusRef: state === null || state === void 0 ? void 0 : state.navigationFocusControl.refs.toggle,
activeDrawerId: (_b = (_a = state === null || state === void 0 ? void 0 : state.activeDrawer) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null,
// only pass it down if there are non-empty drawers or tools
drawers: ((_c = state === null || state === void 0 ? void 0 : state.drawers) === null || _c === void 0 ? void 0 : _c.length) || !props.toolsHide ? state === null || state === void 0 ? void 0 : state.drawers : undefined,
globalDrawersFocusControl: state === null || state === void 0 ? void 0 : state.globalDrawersFocusControl,
globalDrawers: ((_d = state === null || state === void 0 ? void 0 : state.globalDrawers) === null || _d === void 0 ? void 0 : _d.length) ? state.globalDrawers : undefined,
activeGlobalDrawersIds: state === null || state === void 0 ? void 0 : state.activeGlobalDrawersIds,
onActiveGlobalDrawersChange: state === null || state === void 0 ? void 0 : state.onActiveGlobalDrawersChange,
onActiveDrawerChange: state === null || state === void 0 ? void 0 : state.onActiveDrawerChange,
bottomDrawers: state === null || state === void 0 ? void 0 : state.bottomDrawers,
activeGlobalBottomDrawerId: state === null || state === void 0 ? void 0 : state.activeGlobalBottomDrawerId,
onActiveGlobalBottomDrawerChange: state === null || state === void 0 ? void 0 : state.onActiveGlobalBottomDrawerChange,
drawersFocusRef: state === null || state === void 0 ? void 0 : state.drawersFocusControl.refs.toggle,
bottomDrawersFocusRef: state === null || state === void 0 ? void 0 : state.bottomDrawersFocusControl.refs.toggle,
splitPanel: props.splitPanel,
splitPanelToggleProps: (state === null || state === void 0 ? void 0 : state.splitPanelToggleConfig) && {
...state.splitPanelToggleConfig,
active: state === null || state === void 0 ? void 0 : state.splitPanelOpen,
controlId: state === null || state === void 0 ? void 0 : state.splitPanelControlId,
position: state === null || state === void 0 ? void 0 : state.splitPanelPosition,
},
splitPanelFocusRef: state === null || state === void 0 ? void 0 : state.splitPanelFocusControl.refs.toggle,
onSplitPanelToggle: state === null || state === void 0 ? void 0 : state.onSplitPanelToggle,
expandedDrawerId: state === null || state === void 0 ? void 0 : state.expandedDrawerId,
setExpandedDrawerId: state === null || state === void 0 ? void 0 : state.setExpandedDrawerId,
aiDrawer: (_e = state === null || state === void 0 ? void 0 : state.aiDrawer) !== null && _e !== void 0 ? _e : undefined,
aiDrawerFocusRef: (_g = (_f = state === null || state === void 0 ? void 0 : state.aiDrawerFocusControl) === null || _f === void 0 ? void 0 : _f.refs) === null || _g === void 0 ? void 0 : _g.toggle,
};
};
//# sourceMappingURL=props-merger.js.map