UNPKG

3.5 kBJavaScriptView Raw
1import { __rest } from "tslib";
2import * as React from 'react';
3import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
4import { css } from '@patternfly/react-styles';
5import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
6export 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 // eslint-disable-next-line @typescript-eslint/no-unused-vars
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 // uncontrolled
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}
44ExpandableSection.displayName = 'ExpandableSection';
45ExpandableSection.defaultProps = {
46 className: '',
47 toggleText: '',
48 toggleTextExpanded: '',
49 toggleTextCollapsed: '',
50 // eslint-disable-next-line @typescript-eslint/no-unused-vars
51 onToggle: (isExpanded) => undefined,
52 isActive: false,
53 isDetached: false,
54 displaySize: 'default',
55 isWidthLimited: false,
56 isIndented: false,
57 contentId: ''
58};
59//# sourceMappingURL=ExpandableSection.js.map
\No newline at end of file