@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
41 lines (40 loc) • 3.88 kB
JavaScript
import React, { useCallback } from 'react';
import clsx from 'clsx';
import styles from './styles.css.js';
import Box from '../../box';
import Button from '../../button';
import SpaceBetween from '../../space-between';
import PopoverContainer from '../../popover/container';
import PopoverBody from '../../popover/body';
import Alert from '../../alert';
import { scrollIntoViewWithOffset } from './utils';
var arrow = function (position) { return (React.createElement("div", { className: clsx(styles.arrow, styles["arrow-position-" + position]) },
React.createElement("div", { className: styles['arrow-outer'] }),
React.createElement("div", { className: styles['arrow-inner'] }))); };
export function AnnotationPopover(_a) {
var title = _a.title, content = _a.content, alert = _a.alert, _b = _a.direction, direction = _b === void 0 ? 'top' : _b, taskLocalStepIndex = _a.taskLocalStepIndex, totalLocalSteps = _a.totalLocalSteps, showFinishButton = _a.showFinishButton, onDismiss = _a.onDismiss, nextButtonEnabled = _a.nextButtonEnabled, onNextButtonClick = _a.onNextButtonClick, onFinish = _a.onFinish, track = _a.track, previousButtonEnabled = _a.previousButtonEnabled, onPreviousButtonClick = _a.onPreviousButtonClick, i18nStrings = _a.i18nStrings;
var preventDefault = useCallback(function (event) {
event.preventDefault();
}, []);
var dismissButtonRefCallback = useCallback(function (element) {
if (element) {
element.focus({ preventScroll: true });
scrollIntoViewWithOffset(track, { top: 120, bottom: 40 });
}
}, [track]);
return (React.createElement(PopoverContainer, { position: direction, track: track, arrow: arrow, zIndex: 1000 },
React.createElement("div", { onClick: preventDefault },
React.createElement(PopoverBody, { size: "medium", fixedWidth: false, dismissButton: true, dismissAriaLabel: i18nStrings.labelDismissAnnotation, header: React.createElement(Box, { color: "text-body-secondary", fontSize: "body-s", margin: { top: 'xxxs' } }, title), onDismiss: onDismiss, className: styles.annotation, variant: "annotation", dismissButtonRef: dismissButtonRefCallback },
React.createElement(SpaceBetween, { size: "s" },
React.createElement("div", { className: styles.description },
React.createElement(Box, null, content)),
alert && React.createElement(Alert, { type: "warning" }, alert),
React.createElement(SpaceBetween, { size: "s" },
React.createElement("div", { className: styles.divider }),
React.createElement("div", { className: styles.actionBar },
React.createElement("div", { className: styles.stepCounter },
React.createElement(Box, { color: "text-body-secondary", fontSize: "body-s" }, i18nStrings.stepCounterText(taskLocalStepIndex !== null && taskLocalStepIndex !== void 0 ? taskLocalStepIndex : 0, totalLocalSteps !== null && totalLocalSteps !== void 0 ? totalLocalSteps : 0))),
React.createElement(SpaceBetween, { size: "xs", direction: "horizontal", className: styles['action-buttons'] },
React.createElement(Button, { variant: "link", onClick: onPreviousButtonClick, disabled: !previousButtonEnabled, formAction: "none", ariaLabel: i18nStrings.previousButtonText }, i18nStrings.previousButtonText),
showFinishButton ? (React.createElement(Button, { onClick: onFinish, formAction: "none", ariaLabel: i18nStrings.finishButtonText }, i18nStrings.finishButtonText)) : (React.createElement(Button, { onClick: onNextButtonClick, disabled: !nextButtonEnabled, formAction: "none", ariaLabel: i18nStrings.nextButtonText }, i18nStrings.nextButtonText))))))))));
}