@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
65 lines • 4.28 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef, useState } from 'react';
import clsx from 'clsx';
import { InternalButton } from '../button/internal';
import FocusLock from '../internal/components/focus-lock';
import { KeyCode } from '../internal/keycode';
import { ResizableBox } from './resizable-box';
import { getStatusButtonId } from './util';
import styles from './styles.css.js';
const ANNOTATION_ITEM_HEIGHT = 31;
const PANE_ANNOTATIONS_PADDING = 12;
const MIN_HEIGHT = 3 * ANNOTATION_ITEM_HEIGHT + 2 * PANE_ANNOTATIONS_PADDING;
export const Pane = ({ id, paneStatus, visible, annotations, highlighted, onClose, onAnnotationClick, onAnnotationClear, cursorPositionLabel, closeButtonAriaLabel, handleAriaLabel, handleTooltipText, }) => {
const [paneHeight, setPaneHeight] = useState(MIN_HEIGHT);
const listRef = useRef(null);
useEffect(() => {
var _a;
if (!highlighted) {
return;
}
const { row, column } = highlighted;
const highlightedAnnotationIndex = annotations.indexOf(annotations.filter(a => a.row === row && a.column === column)[0]);
if (highlightedAnnotationIndex > -1) {
const errorItem = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[highlightedAnnotationIndex];
errorItem === null || errorItem === void 0 ? void 0 : errorItem.focus();
}
}, [highlighted, annotations]);
const onItemClick = (annotation) => {
onAnnotationClick(annotation);
};
const onItemKeyDown = (annotation, event) => {
if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {
event.preventDefault();
onAnnotationClick(annotation);
}
};
const onEscKeyDown = (event) => {
if (event.keyCode === KeyCode.escape) {
event.preventDefault();
onClose();
}
};
const ariaLabelledBy = getStatusButtonId({ paneId: id, paneStatus: paneStatus });
if (!visible) {
return null;
}
return (React.createElement("div", { id: id, className: styles.pane, onKeyDown: onEscKeyDown, role: "tabpanel", "aria-labelledby": ariaLabelledBy },
React.createElement(ResizableBox, { height: paneHeight, minHeight: MIN_HEIGHT, onResize: newHeight => setPaneHeight(newHeight), handleAriaLabel: handleAriaLabel, handleTooltipText: handleTooltipText },
React.createElement(FocusLock, { className: styles['focus-lock'], autoFocus: true, restoreFocus: true },
React.createElement("div", { className: styles.pane__list, tabIndex: -1 },
React.createElement("table", { className: styles.pane__table, role: "presentation" },
React.createElement("colgroup", null,
React.createElement("col", { style: { width: 1 } /* shrink to fit content */ }),
React.createElement("col", { style: { width: 'auto' } })),
React.createElement("tbody", { ref: listRef }, annotations.map((annotation, i) => {
var _a;
return (React.createElement("tr", { key: i, role: "link", className: styles.pane__item, onMouseOver: onAnnotationClear, onClick: onItemClick.bind(null, annotation), onKeyDown: onItemKeyDown.bind(null, annotation), tabIndex: 0 },
React.createElement("td", { className: clsx(styles.pane__location, styles.pane__cell), tabIndex: -1 }, (_a = cursorPositionLabel === null || cursorPositionLabel === void 0 ? void 0 : cursorPositionLabel((annotation.row || 0) + 1, (annotation.column || 0) + 1)) !== null && _a !== void 0 ? _a : ''),
React.createElement("td", { className: clsx(styles.pane__description, styles.pane__cell), tabIndex: -1 }, annotation.text)));
})))),
React.createElement("div", { className: styles['pane__close-container'] },
React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "close", onClick: onClose, ariaLabel: closeButtonAriaLabel }))))));
};
//# sourceMappingURL=pane.js.map