1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
|
6 | import maxLines from '@patternfly/react-tokens/dist/esm/c_notification_drawer__group_toggle_title_max_lines';
|
7 | import { Badge } from '../Badge';
|
8 | import { Tooltip } from '../Tooltip';
|
9 | export const NotificationDrawerGroup = (_a) => {
|
10 | var { children, className = '', count, isExpanded, isRead = false,
|
11 |
|
12 | onExpand = (event, expanded) => undefined, title, truncateTitle = 0, tooltipPosition } = _a, props = __rest(_a, ["children", "className", "count", "isExpanded", "isRead", "onExpand", "title", "truncateTitle", "tooltipPosition"]);
|
13 | const titleRef = React.useRef(null);
|
14 | const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
|
15 | React.useEffect(() => {
|
16 |
|
17 | const showTooltip = titleRef.current && titleRef.current.offsetHeight < titleRef.current.scrollHeight;
|
18 | if (isTooltipVisible !== showTooltip) {
|
19 | setIsTooltipVisible(showTooltip);
|
20 | }
|
21 | if (!titleRef.current || !truncateTitle) {
|
22 | return;
|
23 | }
|
24 | titleRef.current.style.setProperty(maxLines.name, truncateTitle.toString());
|
25 | }, [titleRef, truncateTitle, isTooltipVisible]);
|
26 | const Title = (React.createElement("div", Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(styles.notificationDrawerGroupToggleTitle) }), title));
|
27 | return (React.createElement("section", Object.assign({}, props, { className: css(styles.notificationDrawerGroup, isExpanded && styles.modifiers.expanded, className) }),
|
28 | React.createElement("h1", null,
|
29 | React.createElement("button", { className: css(styles.notificationDrawerGroupToggle), "aria-expanded": isExpanded, onClick: e => onExpand(e, !isExpanded), onKeyDown: e => {
|
30 | if (e.key === 'Enter' || e.key === ' ') {
|
31 | e.preventDefault();
|
32 | onExpand(e, !isExpanded);
|
33 | }
|
34 | } },
|
35 | isTooltipVisible ? (React.createElement(Tooltip, { content: title, position: tooltipPosition }, Title)) : (Title),
|
36 | React.createElement("div", { className: css(styles.notificationDrawerGroupToggleCount) },
|
37 | React.createElement(Badge, { isRead: isRead }, count)),
|
38 | React.createElement("span", { className: "pf-c-notification-drawer__group-toggle-icon" },
|
39 | React.createElement(AngleRightIcon, null)))),
|
40 | children));
|
41 | };
|
42 | NotificationDrawerGroup.displayName = 'NotificationDrawerGroup';
|
43 |
|
\ | No newline at end of file |