import React, { Component, PropTypes } from 'react'
import ReactList from 'react-list'
import styles from './Geschaefte.css'
import GeschaefteItem from '../containers/GeschaefteItem'

class Geschaefte extends Component {
  static propTypes = {
    geschaefteGefilterteIds: PropTypes.array.isRequired,
    path: PropTypes.string.isRequired,
  }

  state = {
    tableBodyOverflows: true,
  }

  componentDidUpdate() {
    const { path } = this.props
    if (
      path === '/geschaefte' ||
      path === '/'
    ) {
      /**
       * this only works in a setTimeout!
       * otherwise tableBody scrollHeight equals offsetHeight
       */
      setTimeout(() => this.setTableBodyOverflow(), 0)
    }
  }

  setTableBodyOverflow() {
    const { tableBodyOverflows } = this.state
    const overflows = this.doesTableBodyOverflow()
    if (overflows !== tableBodyOverflows) {
      this.setState({ tableBodyOverflows: !tableBodyOverflows })
    }
  }

  doesTableBodyOverflow() {
    if (this.tableBody) return this.tableBody.offsetHeight < this.tableBody.scrollHeight
    return false
  }

  renderItem(index, key) {
    return (
      <GeschaefteItem
        index={index}
        key={key}
        keyPassed={key}
      />
    )
  }

  renderItems(items, ref) {
    return (
      <div
        ref={ref}
        className={styles.table}
      >
        {items}
      </div>
    )
  }

  render() {
    const { geschaefteGefilterteIds } = this.props
    const { tableBodyOverflows } = this.state

    return (
      <div className={styles.body}>
        <div className={styles.table}>
          <div className={styles.tableHeader}>
            <div
              className={styles.tableHeaderRow}
              style={{
                paddingRight: tableBodyOverflows ? 17 : null
              }}
            >
              <div
                className={[
                  styles.columnIdGeschaeft,
                  styles.tableHeaderCell,
                ].join(' ')}
              >
                ID
              </div>
              <div
                className={[
                  styles.columnGegenstand,
                  styles.tableHeaderCell,
                ].join(' ')}
              >
                Gegenstand
              </div>
              <div
                className={[
                  styles.columnStatus,
                  styles.tableHeaderCell,
                ].join(' ')}
              >
                Status
              </div>
              <div
                className={[
                  styles.columnKontaktIntern,
                  styles.tableHeaderCell,
                ].join(' ')}
              >
                Verantwortlich
              </div>
            </div>
          </div>
          <div
            className={styles.tableBody}
            ref={(c) => { this.tableBody = c }}
          >
            <ReactList
              itemRenderer={::this.renderItem}
              length={geschaefteGefilterteIds ? geschaefteGefilterteIds.length : 0}
              type="uniform"
            />
          </div>
        </div>
      </div>
    )
  }
}

export default Geschaefte

@@ -995,16 +995,24 @@
 bleBody)
+ %7B%0A     
  return 
@@ -1065,24 +1065,30 @@
 crollHeight%0A
+    %7D%0A
     return f
@@ -1219,24 +1219,24 @@
 assed=%7Bkey%7D%0A
+
       /%3E%0A   
@@ -1247,159 +1247,8 @@
  %7D%0A%0A
-  renderItems(items, ref) %7B%0A    return (%0A      %3Cdiv%0A        ref=%7Bref%7D%0A        className=%7Bstyles.table%7D%0A      %3E%0A        %7Bitems%7D%0A      %3C/div%3E%0A    )%0A  %7D%0A%0A
   re
@@ -2900,16 +2900,66 @@
 niform%22%0A
+              ref=%7B(c) =%3E %7B this.reactList = c %7D%7D%0A
         

remove unused