1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import { useState } from 'react';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import styles from '@patternfly/react-styles/css/components/Alert/alert';
|
6 | import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
|
7 | import { AlertIcon } from './AlertIcon';
|
8 | import { capitalize, useOUIAProps } from '../../helpers';
|
9 | import { AlertContext } from './AlertContext';
|
10 | import maxLines from '@patternfly/react-tokens/dist/esm/c_alert__title_max_lines';
|
11 | import { Tooltip } from '../Tooltip';
|
12 | import { AlertToggleExpandButton } from './AlertToggleExpandButton';
|
13 | export var AlertVariant;
|
14 | (function (AlertVariant) {
|
15 | AlertVariant["success"] = "success";
|
16 | AlertVariant["danger"] = "danger";
|
17 | AlertVariant["warning"] = "warning";
|
18 | AlertVariant["info"] = "info";
|
19 | AlertVariant["default"] = "default";
|
20 | })(AlertVariant || (AlertVariant = {}));
|
21 | export const Alert = (_a) => {
|
22 | var { variant = AlertVariant.default, isInline = false, isPlain = false, isLiveRegion = false, variantLabel = `${capitalize(variant)} alert:`, 'aria-label': ariaLabel = `${capitalize(variant)} Alert`, actionClose, actionLinks, title, titleHeadingLevel: TitleHeadingLevel = 'h4', children = '', className = '', ouiaId, ouiaSafe = true, timeout = false, timeoutAnimation = 3000, onTimeout = () => { }, truncateTitle = 0, tooltipPosition, customIcon, isExpandable = false, toggleAriaLabel = `${capitalize(variant)} alert details`, onMouseEnter = () => { }, onMouseLeave = () => { } } = _a, props = __rest(_a, ["variant", "isInline", "isPlain", "isLiveRegion", "variantLabel", 'aria-label', "actionClose", "actionLinks", "title", "titleHeadingLevel", "children", "className", "ouiaId", "ouiaSafe", "timeout", "timeoutAnimation", "onTimeout", "truncateTitle", "tooltipPosition", "customIcon", "isExpandable", "toggleAriaLabel", "onMouseEnter", "onMouseLeave"]);
|
23 | const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
|
24 | const getHeadingContent = (React.createElement(React.Fragment, null,
|
25 | React.createElement("span", { className: css(accessibleStyles.screenReader) }, variantLabel),
|
26 | title));
|
27 | const titleRef = React.useRef(null);
|
28 | const divRef = React.useRef();
|
29 | const [isTooltipVisible, setIsTooltipVisible] = useState(false);
|
30 | React.useEffect(() => {
|
31 | if (!titleRef.current || !truncateTitle) {
|
32 | return;
|
33 | }
|
34 | titleRef.current.style.setProperty(maxLines.name, truncateTitle.toString());
|
35 | const showTooltip = titleRef.current && titleRef.current.offsetHeight < titleRef.current.scrollHeight;
|
36 | if (isTooltipVisible !== showTooltip) {
|
37 | setIsTooltipVisible(showTooltip);
|
38 | }
|
39 | }, [titleRef, truncateTitle, isTooltipVisible]);
|
40 | const [timedOut, setTimedOut] = useState(false);
|
41 | const [timedOutAnimation, setTimedOutAnimation] = useState(true);
|
42 | const [isMouseOver, setIsMouseOver] = useState();
|
43 | const [containsFocus, setContainsFocus] = useState();
|
44 | const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
|
45 | React.useEffect(() => {
|
46 | timeout = timeout === true ? 8000 : Number(timeout);
|
47 | if (timeout > 0) {
|
48 | const timer = setTimeout(() => setTimedOut(true), timeout);
|
49 | return () => clearTimeout(timer);
|
50 | }
|
51 | }, []);
|
52 | React.useEffect(() => {
|
53 | const onDocumentFocus = () => {
|
54 | if (divRef.current) {
|
55 | if (divRef.current.contains(document.activeElement)) {
|
56 | setContainsFocus(true);
|
57 | setTimedOutAnimation(false);
|
58 | }
|
59 | else if (containsFocus) {
|
60 | setContainsFocus(false);
|
61 | }
|
62 | }
|
63 | };
|
64 | document.addEventListener('focus', onDocumentFocus, true);
|
65 | return () => document.removeEventListener('focus', onDocumentFocus, true);
|
66 | }, [containsFocus]);
|
67 | React.useEffect(() => {
|
68 | if (containsFocus === false || isMouseOver === false) {
|
69 | const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation);
|
70 | return () => clearTimeout(timer);
|
71 | }
|
72 | }, [containsFocus, isMouseOver]);
|
73 | React.useEffect(() => {
|
74 | dismissed && onTimeout();
|
75 | }, [dismissed]);
|
76 | const [isExpanded, setIsExpanded] = useState(false);
|
77 | const onToggleExpand = () => {
|
78 | setIsExpanded(!isExpanded);
|
79 | };
|
80 | const myOnMouseEnter = (ev) => {
|
81 | setIsMouseOver(true);
|
82 | setTimedOutAnimation(false);
|
83 | onMouseEnter(ev);
|
84 | };
|
85 | const myOnMouseLeave = (ev) => {
|
86 | setIsMouseOver(false);
|
87 | onMouseLeave(ev);
|
88 | };
|
89 | if (dismissed) {
|
90 | return null;
|
91 | }
|
92 | const Title = (React.createElement(TitleHeadingLevel, Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(styles.alertTitle, truncateTitle && styles.modifiers.truncate) }), getHeadingContent));
|
93 | return (React.createElement("div", Object.assign({ ref: divRef, className: css(styles.alert, isInline && styles.modifiers.inline, isPlain && styles.modifiers.plain, isExpandable && styles.modifiers.expandable, isExpanded && styles.modifiers.expanded, styles.modifiers[variant], className), "aria-label": ariaLabel }, ouiaProps, (isLiveRegion && {
|
94 | 'aria-live': 'polite',
|
95 | 'aria-atomic': 'false'
|
96 | }), { onMouseEnter: myOnMouseEnter, onMouseLeave: myOnMouseLeave }, props),
|
97 | isExpandable && (React.createElement(AlertContext.Provider, { value: { title, variantLabel } },
|
98 | React.createElement("div", { className: css(styles.alertToggle) },
|
99 | React.createElement(AlertToggleExpandButton, { isExpanded: isExpanded, onToggleExpand: onToggleExpand, "aria-label": toggleAriaLabel })))),
|
100 | React.createElement(AlertIcon, { variant: variant, customIcon: customIcon }),
|
101 | isTooltipVisible ? (React.createElement(Tooltip, { content: getHeadingContent, position: tooltipPosition }, Title)) : (Title),
|
102 | actionClose && (React.createElement(AlertContext.Provider, { value: { title, variantLabel } },
|
103 | React.createElement("div", { className: css(styles.alertAction) }, actionClose))),
|
104 | children && (!isExpandable || (isExpandable && isExpanded)) && (React.createElement("div", { className: css(styles.alertDescription) }, children)),
|
105 | actionLinks && React.createElement("div", { className: css(styles.alertActionGroup) }, actionLinks)));
|
106 | };
|
107 | Alert.displayName = 'Alert';
|
108 |
|
\ | No newline at end of file |