@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
124 lines • 6.16 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useContext, useEffect, useRef } from 'react';
import { warnOnce } from '@awsui/component-toolkit/internal';
import { fireNonCancelableEvent } from '../../internal/events';
import { sortByPriority } from '../../internal/plugins/helpers/utils';
import { ActiveDrawersContext } from '../utils/visibility-context';
import styles from './styles.css.js';
function RuntimeDrawerWrapper({ mountContent, unmountContent, id }) {
const ref = useRef(null);
const visibilityChangeCallback = useRef(null);
const activeDrawersIds = useContext(ActiveDrawersContext);
const isVisible = !!id && activeDrawersIds.includes(id);
useEffect(() => {
const container = ref.current;
mountContent(container, {
onVisibilityChange: cb => {
visibilityChangeCallback.current = cb;
},
});
return () => {
unmountContent(container);
visibilityChangeCallback.current = null;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
var _a;
(_a = visibilityChangeCallback.current) === null || _a === void 0 ? void 0 : _a.call(visibilityChangeCallback, isVisible);
}, [isVisible]);
return React.createElement("div", { ref: ref, className: styles['runtime-content-wrapper'], "data-awsui-runtime-drawer-root-id": id });
}
function RuntimeDrawerHeader({ mountHeader, unmountHeader }) {
const ref = useRef(null);
useEffect(() => {
const container = ref.current;
mountHeader === null || mountHeader === void 0 ? void 0 : mountHeader(container);
return () => {
unmountHeader === null || unmountHeader === void 0 ? void 0 : unmountHeader(container);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return React.createElement("div", { className: styles['runtime-header-wrapper'], ref: ref });
}
function checkForUnsupportedProps(headerActions) {
const unsupportedProps = new Set([
'iconSvg',
'popoverFeedback',
'pressedIconSvg',
'popoverFeedback',
'pressedPopoverFeedback',
]);
for (const item of headerActions) {
const unsupported = Object.keys(item).filter(key => unsupportedProps.has(key));
if (unsupported.length > 0) {
warnOnce('AppLayout', `The headerActions properties are not supported for runtime api: ${unsupported.join(' ')}`);
}
}
return headerActions;
}
const convertRuntimeTriggerToReactNode = (runtimeTrigger) => {
if (!runtimeTrigger) {
return undefined;
}
// eslint-disable-next-line react/no-danger
return React.createElement("span", { style: { lineHeight: 0 }, dangerouslySetInnerHTML: { __html: runtimeTrigger } });
};
export const mapRuntimeConfigToDrawer = (runtimeConfig) => {
var _a;
const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;
return {
...runtimeDrawer,
ariaLabels: { drawerName: (_a = runtimeDrawer.ariaLabels.content) !== null && _a !== void 0 ? _a : '', ...runtimeDrawer.ariaLabels },
trigger: trigger
? {
...(trigger.iconSvg && {
iconSvg: convertRuntimeTriggerToReactNode(trigger.iconSvg),
}),
}
: undefined,
content: (React.createElement(RuntimeDrawerWrapper, { key: runtimeDrawer.id, mountContent: mountContent, unmountContent: unmountContent, id: runtimeDrawer.id })),
onResize: event => {
fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
},
headerActions: runtimeDrawer.headerActions ? checkForUnsupportedProps(runtimeDrawer.headerActions) : undefined,
};
};
export const mapRuntimeConfigToAiDrawer = (runtimeConfig) => {
var _a;
const { mountContent, unmountContent, trigger, exitExpandedModeTrigger, ...runtimeDrawer } = runtimeConfig;
return {
...runtimeDrawer,
ariaLabels: { drawerName: (_a = runtimeDrawer.ariaLabels.content) !== null && _a !== void 0 ? _a : '', ...runtimeDrawer.ariaLabels },
...(trigger && {
trigger: {
customIcon: convertRuntimeTriggerToReactNode(trigger === null || trigger === void 0 ? void 0 : trigger.customIcon),
iconSvg: convertRuntimeTriggerToReactNode(trigger === null || trigger === void 0 ? void 0 : trigger.iconSvg),
},
}),
exitExpandedModeTrigger: exitExpandedModeTrigger
? {
customIcon: convertRuntimeTriggerToReactNode(exitExpandedModeTrigger === null || exitExpandedModeTrigger === void 0 ? void 0 : exitExpandedModeTrigger.customIcon),
}
: undefined,
content: (React.createElement(RuntimeDrawerWrapper, { key: runtimeDrawer.id, mountContent: mountContent, unmountContent: unmountContent, id: runtimeDrawer.id })),
...(runtimeDrawer.mountHeader && {
header: (React.createElement(RuntimeDrawerHeader, { mountHeader: runtimeDrawer.mountHeader, unmountHeader: runtimeDrawer.unmountHeader })),
}),
onResize: event => {
fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
},
headerActions: runtimeDrawer.headerActions ? checkForUnsupportedProps(runtimeDrawer.headerActions) : undefined,
};
};
export function convertRuntimeDrawers(localDrawers, globalDrawers) {
const converted = localDrawers.map(mapRuntimeConfigToDrawer);
const sorted = sortByPriority(converted);
return {
global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),
localBefore: sorted.filter(item => { var _a; return ((_a = item.orderPriority) !== null && _a !== void 0 ? _a : 0) > 0; }),
localAfter: sorted.filter(item => { var _a; return ((_a = item.orderPriority) !== null && _a !== void 0 ? _a : 0) <= 0; }),
};
}
//# sourceMappingURL=index.js.map