{"size": 1453, "ext": "js", "max_stars_repo_path": "node_modules/react-color/src/components/common/Checkboard.js", "max_stars_repo_name": "ottomajik/react-demo", "max_stars_repo_stars_event_min_datetime": "2018-11-29T13:02:45.000Z", "max_stars_repo_stars_event_max_datetime": "2018-11-29T13:02:45.000Z", "max_issues_repo_path": "node_modules/react-color/src/components/common/Checkboard.js", "max_issues_repo_name": "ottomajik/react-demo", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "node_modules/react-color/src/components/common/Checkboard.js", "max_forks_repo_name": "ottomajik/react-demo", "max_forks_repo_forks_event_min_datetime": "2020-10-28T23:02:55.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-28T23:02:55.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 23.0634920635, "max_line_length": 87, "alphanum_fraction": 0.6214728149}
'use strict'; /* @flow */

import React from 'react';
import ReactCSS from 'reactcss';

let _checkboardCache = {};

function renderCheckboard(c1: string, c2: string, size: number): any {
  if (typeof document == 'undefined') return null; // Dont Render On Server
  var canvas: any = document.createElement('canvas');
  canvas.width = canvas.height = size * 2;
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = c1;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = c2;
  ctx.fillRect(0, 0, size, size);
  ctx.translate(size, size);
  ctx.fillRect(0, 0, size, size);
  return canvas.toDataURL();
}

function getCheckboard(c1: string, c2: string, size: number): any {
  var key = c1 + ',' + c2 + ',' + size;

  if (_checkboardCache[key]) {
    return _checkboardCache[key];
  } else {
    var checkboard = renderCheckboard(c1, c2, size);
    _checkboardCache[key] = checkboard;
    return checkboard;
  }
}

export class Checkboard extends ReactCSS.Component {

  classes(): any {
    var background = getCheckboard(this.props.white, this.props.grey, this.props.size);
    return {
      'default': {
        grid: {
          Absolute: '0 0 0 0',
          background: 'url(' + background + ') center left',
        },
      },
    };
  }

  render(): any {
    return (
      <div is="grid" ref="grid"></div>
    );
  }

}

Checkboard.defaultProps = {
  size: 8,
  white: '#fff',
  grey: '#e6e6e6',
};

export default Checkboard;
