@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
32 lines • 2.53 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';
import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
import { useInternalI18n } from '../i18n/context';
import { getBaseProps } from '../internal/base-component';
import { createWidgetizedComponent } from '../internal/widgets';
import InternalLiveRegion from '../live-region/internal';
import InternalStatusIndicator from '../status-indicator/internal';
import styles from './styles.css.js';
export function DrawerImplementation({ header, children, loading, i18nStrings, disableContentPaddings, __internalRootRef, headerActions, ...restProps }) {
const baseProps = getBaseProps(restProps);
const isToolbar = useAppLayoutToolbarDesignEnabled();
const i18n = useInternalI18n('drawer');
const containerProps = {
...baseProps,
className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar']),
};
const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef });
const hasAdditioalDrawerAction = !!(runtimeDrawerContext === null || runtimeDrawerContext === void 0 ? void 0 : runtimeDrawerContext.isExpandable);
return loading ? (React.createElement("div", { ...containerProps, className: clsx(containerProps.className, styles['content-with-paddings']), ref: __internalRootRef },
React.createElement(InternalStatusIndicator, { type: "loading" },
React.createElement(InternalLiveRegion, { tagName: "span" }, i18n('i18nStrings.loadingText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loadingText))))) : (React.createElement("div", { ...containerProps, ref: __internalRootRef },
header && (React.createElement("div", { className: clsx(styles.header, runtimeDrawerContext && styles['with-runtime-context'], hasAdditioalDrawerAction && styles['with-additional-action']) },
header,
headerActions && React.createElement("div", { className: styles['header-actions'] }, headerActions))),
React.createElement("div", { className: clsx(styles['test-utils-drawer-content'], !disableContentPaddings && styles['content-with-paddings']) }, children)));
}
export const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);
//# sourceMappingURL=implementation.js.map