@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
86 lines • 5.18 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { fireCancelableEvent } from '../internal/events';
import { nodeBelongs } from '../internal/utils/node-belongs';
import FileInputItem from './file-input-item';
import IconButtonItem from './icon-button-item';
import IconToggleButtonItem from './icon-toggle-button-item.js';
import MenuDropdownItem from './menu-dropdown-item';
import styles from './styles.css.js';
const ItemElement = forwardRef(({ item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick, onFilesChange }, ref) => {
const containerRef = useRef(null);
const buttonRef = useRef(null);
const fileInputRef = useRef(null);
const buttonDropdownRef = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => {
var _a, _b, _c;
(_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
(_b = fileInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
(_c = buttonDropdownRef.current) === null || _c === void 0 ? void 0 : _c.focus();
},
}));
useEffect(() => {
if ((tooltip === null || tooltip === void 0 ? void 0 : tooltip.item) !== item.id) {
return;
}
const close = () => {
setTooltip(null);
};
const handlePointerDownEvent = (event) => {
var _a;
if (event.target && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
return;
}
close();
};
const handleKeyDownEvent = (event) => {
if (event.key === 'Escape') {
close();
}
};
const controller = new AbortController();
window.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });
window.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });
return () => {
controller.abort();
};
}, [item.id, tooltip, setTooltip]);
const onShowTooltipSoft = (show) => {
if (!(tooltip === null || tooltip === void 0 ? void 0 : tooltip.feedback)) {
setTooltip(show ? { item: item.id, feedback: false } : null);
}
};
const onShowTooltipHard = (show) => {
if (!show && item.id !== (tooltip === null || tooltip === void 0 ? void 0 : tooltip.item)) {
return;
}
setTooltip(show ? { item: item.id, feedback: false } : null);
};
const onClickHandler = (event) => {
const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;
if (hasPopoverFeedback) {
setTooltip({ item: item.id, feedback: true });
}
fireCancelableEvent(onItemClick, event.detail, event);
};
const onFilesChangeHandler = (event) => {
fireCancelableEvent(onFilesChange, event.detail, event);
setTooltip(null);
};
return (React.createElement("div", { key: item.id, className: styles['item-wrapper'], ref: containerRef, onPointerEnter: () => onShowTooltipSoft(true), onPointerLeave: () => onShowTooltipSoft(false), onFocus: event => {
// Showing no tooltip when the focus comes from inside the container.
// This is needed to prevent the tooltip after a menu closes with item selection or Escape.
if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {
return;
}
onShowTooltipHard(true);
}, onBlur: () => onShowTooltipHard(false) },
item.type === 'icon-button' && (React.createElement(IconButtonItem, { ref: buttonRef, item: item, onItemClick: onClickHandler, showTooltip: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.item) === item.id, showFeedback: !!(tooltip === null || tooltip === void 0 ? void 0 : tooltip.feedback), onTooltipDismiss: () => setTooltip(null) })),
item.type === 'icon-toggle-button' && (React.createElement(IconToggleButtonItem, { ref: buttonRef, item: item, onItemClick: onClickHandler, showTooltip: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.item) === item.id, showFeedback: !!(tooltip === null || tooltip === void 0 ? void 0 : tooltip.feedback), onTooltipDismiss: () => setTooltip(null) })),
item.type === 'icon-file-input' && (React.createElement(FileInputItem, { ref: fileInputRef, item: item, onFilesChange: onFilesChangeHandler, showTooltip: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.item) === item.id, onTooltipDismiss: () => setTooltip(null) })),
item.type === 'menu-dropdown' && (React.createElement(MenuDropdownItem, { ref: buttonDropdownRef, item: item, showTooltip: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.item) === item.id, onItemClick: onClickHandler, expandToViewport: dropdownExpandToViewport, onTooltipDismiss: () => setTooltip(null) }))));
});
export default ItemElement;
//# sourceMappingURL=item-element.js.map