Source: components/filterbox/FilterBox.js

import React, { Component } from 'react'
import './FilterBox.css'
import Filter from './Filter'
import getTranslation from '../../i18n/'

/**
 * Display the available filters
 */
class FilterBox extends Component {

  constructor(props) {
    super(props);
    this.state = { expanded: false, height: 0 };

  }

  /**
   * Show full filter box
   */
  expand() {
    let height;
    if(this.state.expanded) {
      height = 0;
    }
    else {
      height = document.getElementById('expandable').scrollHeight;
    }
    this.setState({ expanded: !this.state.expanded, height: height })

  }

  /**
   * On window resize, resize the filter box
   */
  updateDimensions() {
    if(this.state.expanded) {
        this.setState({ height: document.getElementById('expandable').scrollHeight});
    }
  }

  render() {

    window.addEventListener("resize", () => this.updateDimensions());
    return(
      <div>
        <div className="default-element default-element-dark filterbox">
          <h3 onClick={() => this.expand()}>{this.props.title}<span className={(this.state.expanded ? 'expanded-arrow' : 'not-expanded-arrow')}>{getTranslation("filterbox.button")}</span></h3>
          <div id="expandable" className={"default-element-cont ent container-flex filter-list " + (this.state.expanded ? "expanded" : "not-expanded")} style={{height: this.state.height+"px"}}>
            {this.props.filters.map((filter, index) =>
              <div style={{padding: '15px'}} key={index} className={(filter.fullLayout ? "full" : "half")}>
                <Filter keywordFilter={this.props.keywordFilter} tags={this.props.tags} title={filter.title} single={filter.single} filter={filter} toggleFilter={this.props.toggleFilter} />
              </div>
            )}
          </div>
        </div>
      </div>
    )
  }
}

export default FilterBox