{"size": 1389, "ext": "js", "max_stars_repo_path": "src/components/Grid/GridDisplayer/GridDisplayer.js", "max_stars_repo_name": "5k-mirrors/poe-dashboard", "max_stars_repo_stars_event_min_datetime": "2019-02-24T02:32:49.000Z", "max_stars_repo_stars_event_max_datetime": "2020-10-15T02:28:43.000Z", "max_issues_repo_path": "src/components/Grid/GridDisplayer/GridDisplayer.js", "max_issues_repo_name": "5k-mirrors/poe-dashboard", "max_issues_repo_issues_event_min_datetime": "2019-02-24T07:53:50.000Z", "max_issues_repo_issues_event_max_datetime": "2020-09-03T10:35:00.000Z", "max_forks_repo_path": "src/components/Grid/GridDisplayer/GridDisplayer.js", "max_forks_repo_name": "5k-mirrors/poe-dashboard", "max_forks_repo_forks_event_min_datetime": "2019-03-04T05:55:23.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-28T11:52:15.000Z"}
{"max_stars_count": 14, "max_issues_count": 4, "max_forks_count": 6, "avg_line_length": 25.7222222222, "max_line_length": 86, "alphanum_fraction": 0.6522678186}
import React, { Component } from "react";
import Pick from "object.pick";
import ReactGridLayout from "../ReactGridLayout/ReactGridLayout";
import DefaultProps from "../ReactGridLayout/DefaultProps";
import * as TileTypeSelector from "../../TileTypes/TileTypeSelector/TileTypeSelector";

import "../../../../node_modules/react-grid-layout/css/styles.css";
import "../../../../node_modules/react-resizable/css/styles.css";

import { TileDiv } from "./GridDisplayer.style";

class GridDisplayer extends Component {
  static defaultProps = DefaultProps;

  constructor(props) {
    super(props);

    this.onLayoutChange = props.onLayoutChange;
  }

  createItem = layoutItem => {
    const { tiles } = this.props;
    const tile = tiles.find(t => t.id === layoutItem.i);
    const extractedProps = Pick(this.props, [
      "onRemoveTile",
      "updateTile",
      "leagues"
    ]);

    const tileDisplayer = (
      <TileDiv data-grid={layoutItem} key={layoutItem.i}>
        {TileTypeSelector.getTile({
          tile,
          ...extractedProps
        })}
      </TileDiv>
    );

    return tileDisplayer;
  };

  render() {
    const { layout } = this.props;

    return (
      <ReactGridLayout onLayoutChange={this.onLayoutChange} {...this.props}>
        {layout.map(layoutItem => this.createItem(layoutItem))}
      </ReactGridLayout>
    );
  }
}

export default GridDisplayer;
