react-matrix - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

bower.json

+{
+  "name": "react-matrix",
+  "version": "0.0.1",
+  "homepage": "https://github.com/cirocosta/react-matrix",
+  "authors": [
+    "Ciro S. Costa <[e-mail]>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

dist/react-matrix.css.map

+{"version":3,"sources":[],"names":[],"mappings":"","file":"react-matrix.css","sourceRoot":""}

dist/react-matrix.js.map

+{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 7c055ba188eade86dfc8","webpack:///./src/Matrix.jsx","webpack:///external {\"root\":\"React\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\"}","webpack:///./src/Svg.jsx","webpack:///./src/Grid.jsx","webpack:///./src/Matrix.scss","webpack:///./src/Row.jsx","webpack:///./utils/scale.js","webpack:///./src/Cell.jsx"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,wC;;;;;;;;;;ACtCA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA,iCAAgC;AAChC;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA;;AAEA;AACA,YAAW;AACX,2BAA0B;AAC1B,eAAc;AACd;AACA;AACA,iDAAgD;AAChD;AACA;AACA;AACA,EAAC;;AAED;;;;;;;;;;ACnCA,gD;;;;;;;;;ACAA;AACA;AACA;;AAEA;;AAEA;AACA;AACA,8BAA6B;AAC7B;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA,sBAAqB;AACrB;AACA,gCAA+B;AAC/B;AACA;AACA;AACA;AACA,EAAC;;AAED;;;;;;;;;;ACzBA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA,+BAA8B;AAC9B;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA,QAAO,YAAY;AACnB;AACA;AACA,8CAA6C,GAAG;AAChD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;;AAED;;;;;;;;;;AChCA,0C;;;;;;;;;ACAA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;;AAGA,8BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA;AACA;;AAEA;AACA,oBAAmB;AACnB;AACA;AACA;AACA;AACA,gDAA+C;AAC/C,MAAK;;AAEL;AACA,oBAAmB,iBAAiB;AACpC;AACA;AACA;AACA;AACA,EAAC;;AAED;;;;;;;;;;AClDA;;AAEA;AACA;AACA;AACA,cAAa,MAAM;AACnB,cAAa,MAAM;AACnB,cAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;ACdA;AACA;AACA;;AAEA;;AAEA;;AAEA,+BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA;AACA;AACA;AACA,MAAK;AACL,IAAG;;AAEH;AACA;AACA,uBAAsB;AACtB;AACA;AACA;AACA;AACA;AACA,iCAAgC;AAChC;AACA;AACA,EAAC;;AAED","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Matrix\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"Matrix\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 7c055ba188eade86dfc8\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nrequire('./Matrix.scss');\n\nvar React = require('react');\nvar Svg = require('./Svg.jsx');\nvar Grid = require('./Grid.jsx');\n\nvar Matrix = React.createClass({displayName: 'Matrix',\n  propTypes: {\n    squareSize: React.PropTypes.number.isRequired,\n    matrix: React.PropTypes.array.isRequired,\n    onCellClick: React.PropTypes.func\n  },\n\n  render:function () {\n    var width = this.props.squareSize * this.props.matrix[0].length;\n    var height = this.props.squareSize * this.props.matrix.length;\n\n    return (\n      Svg({width: width, \n           height: height}, \n        Grid({className: \"Grid\", \n              onCellClick: this.props.onCellClick, \n              matrix: this.props.matrix, \n              squareSize: this.props.squareSize})\n      )\n    );\n  }\n});\n\nmodule.exports = Matrix;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Matrix.jsx\n ** module id = 0\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"root\":\"React\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\"}\n ** module id = 1\n ** module chunks = 0\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nvar React = require('react');\nvar scale = require('../utils/scale');\nvar Svg = React.createClass({displayName: 'Svg',\n  propTypes: {\n    width: React.PropTypes.number.isRequired,\n    height: React.PropTypes.number.isRequired\n  },\n\n  render:function () {\n    return (\n      React.DOM.svg({width: this.props.width, \n           height: this.props.height, \n           className: \"Matrix\"}, \n        this.props.children\n      )\n    );\n  }\n});\n\nmodule.exports = Svg;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Svg.jsx\n ** module id = 2\n ** module chunks = 0\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nvar React = require('react');\nvar Row = require('./Row.jsx');\n\nvar Grid = React.createClass({displayName: 'Grid',\n  propTypes: {\n    matrix: React.PropTypes.array.isRequired,\n    squareSize: React.PropTypes.number.isRequired,\n    onCellClick: React.PropTypes.func\n  },\n\n  render:function () {\n    var rows = this.props.matrix.map(function(row, i) \n      {return Row({onCellClick: this.props.onCellClick, \n           key: i, \n           dataRow: row, \n           squareSize: this.props.squareSize});}.bind(this)\n    );\n\n    return (\n      React.DOM.g(null, \n        rows\n      )\n    );\n  }\n});\n\nmodule.exports = Grid;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Grid.jsx\n ** module id = 3\n ** module chunks = 0\n **/","// removed by extract-text-webpack-plugin\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Matrix.scss\n ** module id = 4\n ** module chunks = 0\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nvar React = require('react');\nvar scale = require('../utils/scale');\nvar Cell = require('./Cell.jsx');\n\n\nvar Row = React.createClass({displayName: 'Row',\n  propTypes: {\n    dataRow: React.PropTypes.array.isRequired,\n    squareSize: React.PropTypes.number.isRequired,\n    key: React.PropTypes.number.isRequired,\n    onCellClick: React.PropTypes.func,\n  },\n\n  // TODO(ciro) - generalize this\n  STATES: {\n    '0': 'available',\n    '1': 'barrier',\n    '2': 'path',\n    '3': 'pipette',\n    '4': 'component'\n  },\n\n  render:function () {\n    var range = scale\n      .linear([0, this.props.dataRow.length],\n              [0, this.props.squareSize * this.props.dataRow.length]);\n\n    var cells = this.props.dataRow.map(function(cel, j)  {\n      return Cell({x: range(j), \n                   y: range(this.props.key), \n                   state: this.STATES[cel], \n                   size: this.props.squareSize, \n                   onClick: this.props.onCellClick, \n                   key: this.props.key + 1 + j})\n    }.bind(this));\n\n    return (\n      React.DOM.g({className: \"Row\"}, \n        cells\n      )\n    );\n  }\n});\n\nmodule.exports = Row;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Row.jsx\n ** module id = 5\n ** module chunks = 0\n **/","module.exports = {\n\n\t/**\n\t * Creates a linear scale given a domain array\n\t * and a range array\n\t * @param  {array} d1\n\t * @param  {array} d2\n\t * @return {Function}\n\t */\n\tlinear: function (d1, d2) {\n\t\treturn function (num) {\n      return d2[0] + (d2[1] - d2[0]) * ((num-d1[0])/(d1[1]-d1[0]));\n    };\n\t}\n};\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./utils/scale.js\n ** module id = 6\n ** module chunks = 0\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nvar React = require('react');\n\nvar Cell = React.createClass({displayName: 'Cell',\n  propTypes: {\n    x: React.PropTypes.number.isRequired,\n    y: React.PropTypes.number.isRequired,\n    size: React.PropTypes.number.isRequired,\n    state: React.PropTypes.string.isRequired,\n    key: React.PropTypes.number.isRequired,\n    onClick: React.PropTypes.func\n  },\n\n  handleClick:function () {\n    this.props.onClick && this.props.onClick({\n      x: this.props.x/this.props.size,\n      y: this.props.y/this.props.size,\n      state: this.props.state\n    });\n  },\n\n  render:function () {\n    return (\n      React.DOM.rect({className: \"Cell \" + this.props.state, \n            x: this.props.x, \n            y: this.props.y, \n            width: this.props.size, \n            height: this.props.size, \n            onClick: this.handleClick, \n            key: this.props.key})\n    );\n  }\n});\n\nmodule.exports = Cell;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Cell.jsx\n ** module id = 7\n ** module chunks = 0\n **/"],"sourceRoot":"","file":"react-matrix.js"}

examples/index.jsx

+/**
+ * @jsx React.DOM
+ */
+var SQUARE_SIZE = 20;
+var update = React.addons.update;
+var INITIAL_MATRIX = [
+  [0,0,0,0,0,0,0,0],
+  [0,0,0,0,0,0,0,0],
+  [0,0,0,0,0,0,0,0],
+  [0,0,0,0,0,0,0,0],
+  [0,0,0,0,0,0,0,0],
+  [0,0,0,0,0,0,0,0],
+  [0,0,0,0,0,0,0,0],
+  [0,0,0,0,0,0,0,0],
+];
+
+function prettyMatrix (arr) {
+  var repr = [];
+
+  for (var i in arr)
+    repr.push(arr[i])
+
+  return repr.join('\n');
+}
+
+var App = React.createClass({
+  getInitialState: function () {
+    return {
+      matrix: INITIAL_MATRIX
+    }
+  },
+
+  handleCellClick: function (cellState) {
+    var y = (cellState.x);
+    var x = (cellState.y);
+    var updateRow = {matrix: {}};
+
+    updateRow.matrix[x] = {$apply: function (x) {
+      return (x[y] = 1, x);
+    }};
+
+    this.setState(update(
+      {matrix: INITIAL_MATRIX},
+      updateRow)
+    );
+  },
+
+  render: function () {
+    return (
+      <div>
+        <Matrix squareSize={SQUARE_SIZE}
+                matrix={this.state.matrix}
+                onCellClick={this.handleCellClick} />
+        <pre>{prettyMatrix(this.state.matrix)}</pre>
+      </div>
+    );
+  }
+});
+
+React.renderComponent(
+  <App />,
+  document.getElementById('matrix')
+);

dist/react-matrix.js

@@ -1,1 +0,1 @@
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports.Matrix=r(require("react")):e.Matrix=r(e.React)}(this,function(e){return function(e){function r(t){if(s[t])return s[t].exports;var i=s[t]={exports:{},id:t,loaded:!1};return e[t].call(i.exports,i,i.exports,r),i.loaded=!0,i.exports}var s={};return r.m=e,r.c=s,r.p="",r(0)}([function(e,r,s){"use strict";s(3);var t=s(1),i=s(7),p=s(5),o=t.createClass({displayName:"Matrix",propTypes:{squareSize:t.PropTypes.number.isRequired,matrix:t.PropTypes.array.isRequired},render:function(){var e=this.props.squareSize*this.props.matrix[0].length,r=this.props.squareSize*this.props.matrix.length;return i({width:e,height:r},p({className:"Grid",matrix:this.props.matrix,squareSize:this.props.squareSize}))}});e.exports=o},function(r){r.exports=e},function(e){e.exports={linear:function(e,r){return function(s){return r[0]+(r[1]-r[0])*((s-e[0])/(e[1]-e[0]))}}}},function(){},function(e,r,s){"use strict";var t=s(1),i=t.createClass({displayName:"Cell",propTypes:{x:t.PropTypes.number.isRequired,y:t.PropTypes.number.isRequired,size:t.PropTypes.number.isRequired,state:t.PropTypes.string.isRequired,key:t.PropTypes.number.isRequired},render:function(){return t.DOM.rect({className:"Cell "+this.props.state,x:this.props.x,y:this.props.y,width:this.props.size,height:this.props.size,key:this.props.key})}});e.exports=i},function(e,r,s){"use strict";var t=s(1),i=s(6),p=t.createClass({displayName:"Grid",propTypes:{matrix:t.PropTypes.array.isRequired,squareSize:t.PropTypes.number.isRequired},render:function(){var e=this.props.matrix.map(function(e,r){return i({key:r,dataRow:e,squareSize:this.props.squareSize})}.bind(this));return t.DOM.g(null,e)}});e.exports=p},function(e,r,s){"use strict";var t=s(1),i=s(2),p=s(4),o=t.createClass({displayName:"Row",propTypes:{dataRow:t.PropTypes.array.isRequired,squareSize:t.PropTypes.number.isRequired,key:t.PropTypes.number.isRequired},STATES:{0:"available",1:"barrier",2:"path",3:"pipette",4:"component"},render:function(){var e=i.linear([0,this.props.dataRow.length],[0,this.props.squareSize*this.props.dataRow.length]),r=this.props.dataRow.map(function(r,s){return p({x:e(s),y:e(this.props.key),state:this.STATES[r],size:this.props.squareSize,key:this.props.key+1+s})}.bind(this));return t.DOM.g({className:"Row"},r)}});e.exports=o},function(e,r,s){"use strict";var t=s(1),i=(s(2),t.createClass({displayName:"Svg",propTypes:{width:t.PropTypes.number.isRequired,height:t.PropTypes.number.isRequired},render:function(){return t.DOM.svg({width:this.props.width,height:this.props.height,className:"Matrix"},this.props.children)}}));e.exports=i}])});
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports.Matrix=r(require("react")):e.Matrix=r(e.React)}(this,function(e){return function(e){function r(i){if(s[i])return s[i].exports;var t=s[i]={exports:{},id:i,loaded:!1};return e[i].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}var s={};return r.m=e,r.c=s,r.p="",r(0)}([function(e,r,s){"use strict";s(3);var i=s(1),t=s(7),p=s(5),o=i.createClass({displayName:"Matrix",propTypes:{squareSize:i.PropTypes.number.isRequired,matrix:i.PropTypes.array.isRequired,onCellClick:i.PropTypes.func},render:function(){var e=this.props.squareSize*this.props.matrix[0].length,r=this.props.squareSize*this.props.matrix.length;return t({width:e,height:r},p({className:"Grid",onCellClick:this.props.onCellClick,matrix:this.props.matrix,squareSize:this.props.squareSize}))}});e.exports=o},function(r){r.exports=e},function(e){e.exports={linear:function(e,r){return function(s){return r[0]+(r[1]-r[0])*((s-e[0])/(e[1]-e[0]))}}}},function(){},function(e,r,s){"use strict";var i=s(1),t=i.createClass({displayName:"Cell",propTypes:{x:i.PropTypes.number.isRequired,y:i.PropTypes.number.isRequired,size:i.PropTypes.number.isRequired,state:i.PropTypes.string.isRequired,key:i.PropTypes.number.isRequired,onClick:i.PropTypes.func},handleClick:function(){this.props.onClick&&this.props.onClick({x:this.props.x/this.props.size,y:this.props.y/this.props.size,state:this.props.state})},render:function(){return i.DOM.rect({className:"Cell "+this.props.state,x:this.props.x,y:this.props.y,width:this.props.size,height:this.props.size,onClick:this.handleClick,key:this.props.key})}});e.exports=t},function(e,r,s){"use strict";var i=s(1),t=s(6),p=i.createClass({displayName:"Grid",propTypes:{matrix:i.PropTypes.array.isRequired,squareSize:i.PropTypes.number.isRequired,onCellClick:i.PropTypes.func},render:function(){var e=this.props.matrix.map(function(e,r){return t({onCellClick:this.props.onCellClick,key:r,dataRow:e,squareSize:this.props.squareSize})}.bind(this));return i.DOM.g(null,e)}});e.exports=p},function(e,r,s){"use strict";var i=s(1),t=s(2),p=s(4),o=i.createClass({displayName:"Row",propTypes:{dataRow:i.PropTypes.array.isRequired,squareSize:i.PropTypes.number.isRequired,key:i.PropTypes.number.isRequired,onCellClick:i.PropTypes.func},STATES:{0:"available",1:"barrier",2:"path",3:"pipette",4:"component"},render:function(){var e=t.linear([0,this.props.dataRow.length],[0,this.props.squareSize*this.props.dataRow.length]),r=this.props.dataRow.map(function(r,s){return p({x:e(s),y:e(this.props.key),state:this.STATES[r],size:this.props.squareSize,onClick:this.props.onCellClick,key:this.props.key+1+s})}.bind(this));return i.DOM.g({className:"Row"},r)}});e.exports=o},function(e,r,s){"use strict";var i=s(1),t=(s(2),i.createClass({displayName:"Svg",propTypes:{width:i.PropTypes.number.isRequired,height:i.PropTypes.number.isRequired},render:function(){return i.DOM.svg({width:this.props.width,height:this.props.height,className:"Matrix"},this.props.children)}}));e.exports=t}])});

examples/index.html

@@ -17,51 +17,4 @@ <!DOCTYPE html>
   <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js"></script>
-  <script type="text/jsx">
-    /** @jsx React.DOM */
-    var update = React.addons.update;
-    var initialMatrix = [
-      [0,0,0,0,0,0,0,0],
-      [0,0,0,0,0,0,0,0],
-      [0,0,0,0,0,0,0,0],
-      [0,0,0,0,0,0,0,0],
-      [0,0,0,0,0,0,0,0],
-      [0,0,0,0,0,0,0,0],
-      [0,0,0,0,0,0,0,0],
-      [0,0,0,0,0,0,0,0],
-    ];
-
-    var App = React.createClass({
-      getInitialState: function () {
-        return {
-          matrix: initialMatrix
-        }
-      },
-
-      componentDidMount: function  () {
-        setInterval(function () {
-          var row = (Math.random() * initialMatrix.length)|0;
-          var column = (Math.random() * initialMatrix[0].length)|0;
-          var updateRow = {matrix: {}};
-
-          updateRow.matrix[row] = {$apply: function (x) {
-            x[column] = 1;
-            return x;
-          }};
-
-          this.setState(update({matrix: initialMatrix}, updateRow));
-        }.bind(this), 100);
-      },
-
-      render: function () {
-        return (
-          <Matrix squareSize={20} matrix={this.state.matrix} />
-        );
-      }
-    });
-
-    React.renderComponent(
-      <App />,
-      document.getElementById('matrix')
-    );
-  </script>
+  <script type="text/jsx" src="index.jsx"></script>
 </body>
 </html>

package.json

 {
   "name": "react-matrix",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React Component for representing Matrixes.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/Cell.jsx

@@ -15,5 +15,14 @@ /**
     state: React.PropTypes.string.isRequired,
-    key: React.PropTypes.number.isRequired
+    key: React.PropTypes.number.isRequired,
+    onClick: React.PropTypes.func
   },
 
+  handleClick () {
+    this.props.onClick && this.props.onClick({
+      x: this.props.x/this.props.size,
+      y: this.props.y/this.props.size,
+      state: this.props.state
+    });
+  },
+
   render () {
@@ -26,2 +35,3 @@ return (
             height={this.props.size}
+            onClick={this.handleClick}
             key={this.props.key} />
@@ -28,0 +38,0 @@ );

src/Grid.jsx

@@ -14,2 +14,3 @@ /**
     squareSize: React.PropTypes.number.isRequired,
+    onCellClick: React.PropTypes.func
   },
@@ -19,3 +20,4 @@
     var rows = this.props.matrix.map((row, i) =>
-      <Row key={i}
+      <Row onCellClick={this.props.onCellClick}
+           key={i}
            dataRow={row}
@@ -22,0 +24,0 @@ squareSize={this.props.squareSize} />

src/Matrix.jsx

@@ -16,3 +16,4 @@ /**
     squareSize: React.PropTypes.number.isRequired,
-    matrix: React.PropTypes.array.isRequired
+    matrix: React.PropTypes.array.isRequired,
+    onCellClick: React.PropTypes.func
   },
@@ -28,2 +29,3 @@
         <Grid className="Grid"
+              onCellClick={this.props.onCellClick}
               matrix={this.props.matrix}
@@ -30,0 +32,0 @@ squareSize={this.props.squareSize} />

src/Row.jsx

@@ -17,2 +17,3 @@ /**
     key: React.PropTypes.number.isRequired,
+    onCellClick: React.PropTypes.func,
   },
@@ -39,2 +40,3 @@
                    size={this.props.squareSize}
+                   onClick={this.props.onCellClick}
                    key={this.props.key + 1 + j} />
@@ -41,0 +43,0 @@ });

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

24150

79.47%

Number of package files

24

20%

Lines of code

315

36.96%

No dependency changes