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 | 1x 6x 3x 3x 3x 1x 1x 4x 4x 4x 2x 2x 4x | import React, { MouseEvent } from "react"; type Props = { className?: string; groupTitle: string; defaultVisibility: boolean; }; type State = { isVisible: boolean; }; export default class ToggleGroup extends React.Component<Props, State> { constructor(props: Props) { super(props); this.state = { isVisible: props.defaultVisibility, }; this.toggle = this.toggle.bind(this); } toggle(event: MouseEvent) { event.preventDefault(); this.setState((state) => ({ isVisible: !state.isVisible })); } render() { const { groupTitle, children } = this.props; let className = (this.props.className || "") + " toggle-group"; if (this.state.isVisible) { className += " toggle-group-open"; } else { className += " toggle-group-closed"; } return ( <div className={className}> <div className="header"> <h4 className="toggle" onClick={this.toggle}> {groupTitle} </h4> </div> <div className="children">{children}</div> </div> ); } } |