import PropTypes from "prop-types"
import React from "react"

class Masonry extends React.Component {
  getColumns() {
    const {children, columnsCount} = this.props
    const columns = Array.from({length: columnsCount}, () => [])

    React.Children.forEach(children, (child, index) => {
      if(typeof child !== "number" && !child) return null
      columns[index % columnsCount].push(child)
    })

    return columns
  }

  renderColumn(column) {
    const {gutter} = this.props
    return column.map((item, i) => (
      <div key={i} style={{marginTop: i > 0 ? gutter : undefined}}>
        {item}
      </div>
    ))
  }

  renderColumns() {
    const {gutter} = this.props
    return this.getColumns().map((column, i) => (
      <div
        key={i}
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "flex-start",
          alignContent: "stretch",
          flex: 1,
          width: 0,
          marginLeft: i > 0 ? gutter : undefined,
        }}
      >
        {this.renderColumn(column)}
      </div>
    ))
  }

  render() {
    const {className, style} = this.props
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "center",
          alignContent: "stretch",
          boxSizing: "border-box",
          width: "100%",
          ...style,
        }}
        className={className}
      >
        {this.renderColumns()}
      </div>
    )
  }
}

Masonry.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]).isRequired,
  columnsCount: PropTypes.number,
  gutter: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
}

Masonry.defaultProps = {
  columnsCount: 3,
  gutter: "0",
  className: null,
  style: {},
}

export default Masonry

@@ -295,58 +295,52 @@
   if
-(typeof child !== %22number%22 && !child) return null%0A
+ (child && React.isValidElement(child)) %7B%0A  
     
@@ -383,16 +383,24 @@
 (child)%0A
+      %7D%0A
     %7D)%0A%0A

exclude null children