1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/Nav/nav';
|
4 | import a11yStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
|
5 | import { css } from '@patternfly/react-styles';
|
6 | import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
7 | import { getUniqueId } from '../../helpers/util';
|
8 | import { NavContext } from './Nav';
|
9 | import { PageSidebarContext } from '../Page/PageSidebar';
|
10 | import { getOUIAProps, getDefaultOUIAId } from '../../helpers';
|
11 | export class NavExpandable extends React.Component {
|
12 | constructor() {
|
13 | super(...arguments);
|
14 | this.id = this.props.id || getUniqueId();
|
15 | this.state = {
|
16 | expandedState: this.props.isExpanded,
|
17 | ouiaStateId: getDefaultOUIAId(NavExpandable.displayName)
|
18 | };
|
19 | this.onExpand = (e, onToggle) => {
|
20 | const { expandedState } = this.state;
|
21 | if (this.props.onExpand) {
|
22 | this.props.onExpand(e, !expandedState);
|
23 | }
|
24 | else {
|
25 | this.setState(prevState => ({ expandedState: !prevState.expandedState }));
|
26 | const { groupId } = this.props;
|
27 | onToggle(e, groupId, !expandedState);
|
28 | }
|
29 | };
|
30 | }
|
31 | componentDidMount() {
|
32 | this.setState({ expandedState: this.props.isExpanded });
|
33 | }
|
34 | componentDidUpdate(prevProps) {
|
35 | if (this.props.isExpanded !== prevProps.isExpanded) {
|
36 | this.setState({ expandedState: this.props.isExpanded });
|
37 | }
|
38 | }
|
39 | render() {
|
40 | const _a = this.props, { title, srText, children, className, isActive, ouiaId,
|
41 |
|
42 | groupId,
|
43 |
|
44 | id,
|
45 |
|
46 | isExpanded, buttonProps,
|
47 |
|
48 | onExpand } = _a, props = __rest(_a, ["title", "srText", "children", "className", "isActive", "ouiaId", "groupId", "id", "isExpanded", "buttonProps", "onExpand"]);
|
49 | const { expandedState, ouiaStateId } = this.state;
|
50 | return (React.createElement(NavContext.Consumer, null, context => (React.createElement("li", Object.assign({ className: css(styles.navItem, styles.modifiers.expandable, expandedState && styles.modifiers.expanded, isActive && styles.modifiers.current, className) }, getOUIAProps(NavExpandable.displayName, ouiaId !== undefined ? ouiaId : ouiaStateId), props),
|
51 | React.createElement(PageSidebarContext.Consumer, null, ({ isNavOpen }) => (React.createElement("button", Object.assign({ className: styles.navLink, id: srText ? null : this.id, onClick: e => this.onExpand(e, context.onToggle), "aria-expanded": expandedState, tabIndex: isNavOpen ? null : -1 }, buttonProps),
|
52 | title,
|
53 | React.createElement("span", { className: css(styles.navToggle) },
|
54 | React.createElement("span", { className: css(styles.navToggleIcon) },
|
55 | React.createElement(AngleRightIcon, { "aria-hidden": "true" })))))),
|
56 | React.createElement("section", { className: css(styles.navSubnav), "aria-labelledby": this.id, hidden: expandedState ? null : true },
|
57 | srText && (React.createElement("h2", { className: css(a11yStyles.screenReader), id: this.id }, srText)),
|
58 | React.createElement("ul", { className: css(styles.navList) }, children))))));
|
59 | }
|
60 | }
|
61 | NavExpandable.displayName = 'NavExpandable';
|
62 | NavExpandable.defaultProps = {
|
63 | srText: '',
|
64 | isExpanded: false,
|
65 | children: '',
|
66 | className: '',
|
67 | groupId: null,
|
68 | isActive: false,
|
69 | id: ''
|
70 | };
|
71 |
|
\ | No newline at end of file |