@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
55 lines • 3.01 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useContext, useEffect, useRef } from 'react';
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'] });
}
const mapRuntimeConfigToDrawer = (runtimeConfig) => {
var _a;
const { mountContent, unmountContent, trigger } = runtimeConfig, runtimeDrawer = __rest(runtimeConfig, ["mountContent", "unmountContent", "trigger"]);
return Object.assign(Object.assign({}, runtimeDrawer), { ariaLabels: Object.assign({ drawerName: (_a = runtimeDrawer.ariaLabels.content) !== null && _a !== void 0 ? _a : '' }, runtimeDrawer.ariaLabels), trigger: trigger
? {
iconSvg: (
// eslint-disable-next-line react/no-danger
React.createElement("span", { dangerouslySetInnerHTML: { __html: 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 });
} });
};
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