Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 2x 2x 2x 2x 1x 1x 2x 2x 2x 2x 2x 2x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Collapsible extends Component {
constructor(props) {
super(props);
this.state = {
isExpanded: false,
};
this._toggleExpanded = this.toggleExpanded.bind(this);
this._renderShowButton = this.renderShowButton.bind(this);
this._renderHideButton = this.renderHideButton.bind(this);
}
toggleExpanded() {
this.setState({
isExpanded: !this.state.isExpanded,
});
}
renderShowButton() {
return (
<span className="collapsible-show-label">{this.props.showLabel}</span>
);
}
renderHideButton() {
if (this.props.hideLabel) {
return (
<span className="collapsible-hide-label">{this.props.hideLabel}</span>
);
} else {
return '';
}
}
render() {
const isArray = Array.isArray(this.props.content);
const isHidden = this.state.isExpanded ? undefined : true;
return (
<div className="collapsible-container">
<button
onClick={this._toggleExpanded}
className="collapsible-summary"
type="button"
aria-expanded={this.state.isExpanded ? true : false}
>
{this._renderShowButton()}
{this._renderHideButton()}
</button>
<div className="collapsible-details" hidden={isHidden}>
{isArray ? (
<ul className="items">
{this.props.content.map((c) => (
<li key={c.contentTitle}>
<p>
<b>{c.contentTitle}</b>
</p>
<p>{c.content}</p>
</li>
))}
</ul>
) : (
<div>
<p>
<b>{this.props.contentTitle}</b>
</p>
<p>{this.props.content}</p>
</div>
)}
</div>
</div>
);
}
}
Collapsible.propTypes = {
showLabel: PropTypes.string.isRequired,
hideLabel: PropTypes.string.isRequired,
content: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).isRequired,
contentTitle: PropTypes.string,
};
export default Collapsible;
|