All files / js/components ToggleGroup.tsx

100% Statements 16/16
100% Branches 4/4
100% Functions 4/4
100% Lines 13/13

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 471x                       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>
    );
  }
}