@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
30 lines • 2.72 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef } from 'react';
import clsx from 'clsx';
import { warnOnce } from '@awsui/component-toolkit/internal';
import Tooltip from '../internal/components/tooltip/index.js';
import { fireCancelableEvent } from '../internal/events/index.js';
import InternalLiveRegion from '../live-region/internal.js';
import { InternalToggleButton } from '../toggle-button/internal.js';
import testUtilStyles from './test-classes/styles.css.js';
const IconToggleButtonItem = forwardRef(({ item, showTooltip, showFeedback, onTooltipDismiss, onItemClick }, ref) => {
var _a;
const containerRef = React.useRef(null);
const hasIcon = item.iconName || item.iconUrl || item.iconSvg;
const hasPressedIcon = item.pressedIconName || item.pressedIconUrl || item.pressedIconSvg;
if (!hasIcon) {
warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);
}
if (!hasPressedIcon) {
warnOnce('ButtonGroup', `Missing pressed icon for item with id: ${item.id}`);
}
const feedbackContent = item.pressed ? ((_a = item.pressedPopoverFeedback) !== null && _a !== void 0 ? _a : item.popoverFeedback) : item.popoverFeedback;
const canShowTooltip = showTooltip && !item.disabled && !item.loading;
const canShowFeedback = showTooltip && showFeedback && feedbackContent;
return (React.createElement("div", { ref: containerRef },
React.createElement(InternalToggleButton, { variant: "icon", pressed: item.pressed, loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, disabledReason: showFeedback ? undefined : item.disabledReason, iconName: hasIcon ? item.iconName : 'close', iconUrl: item.iconUrl, iconSvg: item.iconSvg, pressedIconName: hasIcon ? item.pressedIconName : 'close', pressedIconUrl: item.pressedIconUrl, pressedIconSvg: item.pressedIconUrl, ariaLabel: item.text, onChange: event => fireCancelableEvent(onItemClick, { id: item.id, pressed: event.detail.pressed }), ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), analyticsAction: item.analyticsAction, __title: "" }, item.text),
(canShowTooltip || canShowFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(InternalLiveRegion, { tagName: "span" }, feedbackContent)) || item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']), onDismiss: onTooltipDismiss }))));
});
export default IconToggleButtonItem;
//# sourceMappingURL=icon-toggle-button-item.js.map