1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
|
6 | export class ExpandableSection extends React.Component {
|
7 | constructor(props) {
|
8 | super(props);
|
9 | this.state = {
|
10 | isExpanded: props.isExpanded
|
11 | };
|
12 | }
|
13 | calculateToggleText(toggleText, toggleTextExpanded, toggleTextCollapsed, propOrStateIsExpanded) {
|
14 | if (propOrStateIsExpanded && toggleTextExpanded !== '') {
|
15 | return toggleTextExpanded;
|
16 | }
|
17 | if (!propOrStateIsExpanded && toggleTextCollapsed !== '') {
|
18 | return toggleTextCollapsed;
|
19 | }
|
20 | return toggleText;
|
21 | }
|
22 | render() {
|
23 | const _a = this.props, { onToggle: onToggleProp,
|
24 |
|
25 | isActive, className, toggleText, toggleTextExpanded, toggleTextCollapsed, toggleContent, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId } = _a, props = __rest(_a, ["onToggle", "isActive", "className", "toggleText", "toggleTextExpanded", "toggleTextCollapsed", "toggleContent", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId"]);
|
26 | let onToggle = onToggleProp;
|
27 | let propOrStateIsExpanded = isExpanded;
|
28 |
|
29 | if (isExpanded === undefined) {
|
30 | propOrStateIsExpanded = this.state.isExpanded;
|
31 | onToggle = isOpen => {
|
32 | this.setState({ isExpanded: isOpen }, () => onToggleProp(this.state.isExpanded));
|
33 | };
|
34 | }
|
35 | const computedToggleText = this.calculateToggleText(toggleText, toggleTextExpanded, toggleTextCollapsed, propOrStateIsExpanded);
|
36 | return (React.createElement("div", Object.assign({}, props, { className: css(styles.expandableSection, propOrStateIsExpanded && styles.modifiers.expanded, isActive && styles.modifiers.active, isDetached && styles.modifiers.detached, displaySize === 'large' && styles.modifiers.displayLg, isWidthLimited && styles.modifiers.limitWidth, isIndented && styles.modifiers.indented, className) }),
|
37 | !isDetached && (React.createElement("button", { className: css(styles.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, onClick: () => onToggle(!propOrStateIsExpanded) },
|
38 | React.createElement("span", { className: css(styles.expandableSectionToggleIcon) },
|
39 | React.createElement(AngleRightIcon, { "aria-hidden": true })),
|
40 | React.createElement("span", { className: css(styles.expandableSectionToggleText) }, toggleContent || computedToggleText))),
|
41 | React.createElement("div", { className: css(styles.expandableSectionContent), hidden: !propOrStateIsExpanded, id: contentId }, children)));
|
42 | }
|
43 | }
|
44 | ExpandableSection.displayName = 'ExpandableSection';
|
45 | ExpandableSection.defaultProps = {
|
46 | className: '',
|
47 | toggleText: '',
|
48 | toggleTextExpanded: '',
|
49 | toggleTextCollapsed: '',
|
50 |
|
51 | onToggle: (isExpanded) => undefined,
|
52 | isActive: false,
|
53 | isDetached: false,
|
54 | displaySize: 'default',
|
55 | isWidthLimited: false,
|
56 | isIndented: false,
|
57 | contentId: ''
|
58 | };
|
59 |
|
\ | No newline at end of file |