@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
33 lines • 2.52 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 InternalButtonDropdown from '../../../button-dropdown/internal';
import InternalIcon from '../../../icon/internal';
import { getBaseProps } from '../../base-component';
import { spinWhenOpen } from '../../styles/motion/utils';
import { applyDisplayName } from '../../utils/apply-display-name';
import buttonDropdownStyles from '../../../button-dropdown/styles.css.js';
import styles from './styles.css.js';
export const ButtonTrigger = React.forwardRef(({ testUtilsClass, iconName, iconUrl, iconAlt, iconSvg, badge, ariaLabel, offsetRight, disabled, expanded, children, onClick, }, ref) => {
const hasIcon = iconName || iconUrl || iconSvg;
return (React.createElement("button", { ref: ref, type: "button", className: clsx(styles.button, styles[`offset-right-${offsetRight}`], testUtilsClass, {
[styles.expanded]: expanded,
}), "aria-label": ariaLabel, "aria-expanded": !!expanded, "aria-haspopup": true, disabled: disabled, onClick: event => {
event.preventDefault();
onClick === null || onClick === void 0 ? void 0 : onClick();
} },
hasIcon && (React.createElement(InternalIcon, { className: styles.icon, name: iconName, url: iconUrl, alt: iconAlt, svg: iconSvg, badge: badge })),
children && React.createElement("span", { className: styles.text }, children),
children && (React.createElement(InternalIcon, { name: "caret-down-filled", className: spinWhenOpen(buttonDropdownStyles, 'rotate', !!expanded) }))));
});
const MenuDropdown = ({ iconName, iconUrl, iconAlt, iconSvg, badge, offsetRight, children, ...props }) => {
const baseProps = getBaseProps(props);
const dropdownTrigger = ({ triggerRef, ariaLabel, isOpen, testUtilsClass, disabled, onClick, }) => {
return (React.createElement(ButtonTrigger, { testUtilsClass: testUtilsClass, ref: triggerRef, disabled: disabled, expanded: isOpen, iconName: iconName, iconUrl: iconUrl, iconAlt: iconAlt, iconSvg: iconSvg, badge: badge, ariaLabel: ariaLabel, offsetRight: offsetRight, onClick: onClick }, children));
};
return (React.createElement(InternalButtonDropdown, { ...baseProps, ...props, variant: "navigation", customTriggerBuilder: dropdownTrigger, preferCenter: true }));
};
applyDisplayName(MenuDropdown, 'MenuDropdown');
export default MenuDropdown;
//# sourceMappingURL=index.js.map