Filename	Percent	Total	Covered	Uncovered
src/components/shared/Accordion.js	89 %	85	76	9

Filename

Percent

Total

Covered

Uncovered

src/components/shared/Accordion.js

89 %

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

// @flow
import React, { cloneElement, Component } from "react";
import Svg from "./Svg";

import "./Accordion.css";

type AccordionItem = {
  buttons?: Array<Object>,
  component: React$Element<any>,
  componentProps: Object,
  header: string,
  className: string,
  opened: boolean,
  onToggle?: () => void,
  shouldOpen?: () => void
};

type Props = { items: Array<Object> };

type State = {
  opened: boolean[],
  created: boolean[]
};

class Accordion extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      opened: props.items.map(item => item.opened),
      created: []
    };
  }

  handleHeaderClick(i: number) {
    const item = this.props.items[i];
    const opened = !item.opened;
    item.opened = opened;

    if (item.onToggle) {
      item.onToggle(opened);
    }

    // We force an update because otherwise the accordion
    // would not re-render
    this.forceUpdate();
  }

  renderContainer = (item: AccordionItem, i: number) => {
    const { opened } = item;

    return (
      <div className={item.className} key={i}>
        <div className="_header" onClick={() => this.handleHeaderClick(i)}>
          <Svg name="arrow" className={opened ? "expanded" : ""} />
          {item.header}
          {item.buttons ? (
            <div className="header-buttons">{item.buttons}</div>
          ) : null}
        </div>
        {opened && (
          <div className="_content">
            {cloneElement(item.component, item.componentProps || {})}
          </div>
        )}
      </div>
    );
  };

  render() {
    return (
      <div className="accordion">
        {this.props.items.map(this.renderContainer)}
      </div>
    );
  }
}

export default Accordion;

{"expressions":{"covered_count":76,"uncovered_count":9,"uncovered_locs":[{"source":"/Users/jlaster/src/mozilla/debugger.html/src/components/shared/Accordion.js","type":"SourceFile","start":{"line":33,"column":39,"offset":804},"end":{"line":33,"column":49,"offset":815}},{"source":"/Users/jlaster/src/mozilla/debugger.html/src/components/shared/Accordion.js","type":"SourceFile","start":{"line":40,"column":11,"offset":929},"end":{"line":40,"column":16,"offset":935}},{"source":"/Users/jlaster/src/mozilla/debugger.html/src/components/shared/Accordion.js","type":"SourceFile","start":{"line":40,"column":20,"offset":938},"end":{"line":40,"column":31,"offset":950}},{"source":"/Users/jlaster/src/mozilla/debugger.html/src/components/shared/Accordion.js","type":"SourceFile","start":{"line":40,"column":21,"offset":939},"end":{"line":40,"column":31,"offset":950}},{"source":"/Users/jlaster/src/mozilla/debugger.html/src/components/shared/Accordion.js","type":"SourceFile","start":{"line":41,"column":5,"offset":956},"end":{"line":41,"column":24,"offset":976}},{"source":"/Users/jlaster/src/mozilla/debugger.html/src/components/shared/Accordion.js","type":"SourceFile","start":{"line":41,"column":19,"offset":970},"end":{"line":41,"column":24,"offset":976}},{"source":"/Users/jlaster/src/mozilla/debugger.html/src/components/shared/Accordion.js","type":"SourceFile","start":{"line":43,"column":9,"offset":987},"end":{"line":43,"column":21,"offset":1000}},{"source":"/Users/jlaster/src/mozilla/debugger.html/src/components/shared/Accordion.js","type":"SourceFile","start":{"line":44,"column":7,"offset":1010},"end":{"line":44,"column":27,"offset":1031}},{"source":"/Users/jlaster/src/mozilla/debugger.html/src/components/shared/Accordion.js","type":"SourceFile","start":{"line":44,"column":21,"offset":1024},"end":{"line":44,"column":26,"offset":1030}}]},"percent":89}

Flow Coverage Report - src/components/shared/Accordion.js