Merge pull request #13 from svangordon/proptypes

change React.PropTypes to PropTypes in accordance with React's deprecation warnings.
[relevant info](https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html)
Note: you will now need the dependency prop-types, so don't forget to run an npm install.

package.json

@@ -5,6 +5,7 @@
   "main": "./build/dist.chessdiagram.js",
   "dependencies": {
     "chess.js": "^0.10.2",
+    "prop-types": "^15.5.10",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-table": "^5.4.1"

src/BoardContainer.js

@@ -28,6 +28,8 @@ import React, { Component } from 'react';
 import Board from './board.js';
 import Piece from './piece.js';
 import standardPieceDefinitions from './pieceDefinitions.js';
+import PropTypes from 'prop-types';
+
 
 /** BoardContainer : handles user input and draws a chess diagram consisting of
 * a board and pieces, using svg graphics */
@@ -315,35 +317,35 @@ class BoardContainer extends Component {
 }
 BoardContainer.propTypes = {
 	/** Dictionary of legal moves, to be supplied by server*/
-	allowedMoves: React.PropTypes.object,
-	darkSquareColor: React.PropTypes.string,
+	allowedMoves: PropTypes.object,
+	darkSquareColor: PropTypes.string,
 	/** Chess position in FEN format (Forsyth-Edwards Notation). eg "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1" */
-	fen: React.PropTypes.string,
-	files: React.PropTypes.number,
+	fen: PropTypes.string,
+	files: PropTypes.number,
 	/** if true, rotates the board so that Black pawns are moving up, and White pawns are moving down the board */
-	flip: React.PropTypes.bool,
+	flip: PropTypes.bool,
 	/** height of main svg container in pixels. If setting this manually, it should be at least 9 * squareSize to fit board AND labels*/
-	height: React.PropTypes.oneOfType([
-		React.PropTypes.string,
-		React.PropTypes.number,
+	height: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
 	]),
-	lightSquareColor: React.PropTypes.string,
+	lightSquareColor: PropTypes.string,
 	/** callback function which is called when user moves a piece. Passes pieceType, initialSquare, finalSquare as parameters to callback */
-	onMovePiece: React.PropTypes.func,
+	onMovePiece: PropTypes.func,
 	/** callback function which is called when user clicks on a square. Passes name of square as parameter to callback */
-	onSelectSquare: React.PropTypes.func,
+	onSelectSquare: PropTypes.func,
 	/** array of pieces at particular squares (alternative to fen) eg ['P@f2','P@g2','P@h2','K@g1'].
 	* This format may be more suitable for unconventional board dimensions, for which standard FEN would not work.
 	* Note: If both FEN and pieces props are present, FEN will take precedence */
-	pieces: React.PropTypes.array,
+	pieces: PropTypes.array,
 	/** Optional associative array containing non-standard chess characters*/
-	pieceDefinitions: React.PropTypes.object,
-	ranks: React.PropTypes.number,
-	squareSize: React.PropTypes.number,
+	pieceDefinitions: PropTypes.object,
+	ranks: PropTypes.number,
+	squareSize: PropTypes.number,
 	/** width of main svg container in pixels. If setting this manually, it should be at least 9 * squareSize to fit board AND labels*/
-	width: React.PropTypes.oneOfType([
-		React.PropTypes.string,
-		React.PropTypes.number,
+	width: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
 	]),
 };
 

src/GameHistory.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
+import PropTypes from 'prop-types';
+
 
 class MovetextViewer extends Component {
 	shouldComponentUpdate(nextProps) {
@@ -79,9 +81,9 @@ class MovetextViewer extends Component {
 }
 
 MovetextViewer.propTypes = {
-	rows: React.PropTypes.array,
-	halfMove: React.PropTypes.number,
-	moveHead: React.PropTypes.func
+	rows: PropTypes.array,
+	halfMove: PropTypes.number,
+	moveHead: PropTypes.func
 };
 
 class PgnControls extends Component {
@@ -98,7 +100,7 @@ class PgnControls extends Component {
 }
 
 PgnControls.propTypes = {
-	moveHead: React.PropTypes.func.isRequired
+	moveHead: PropTypes.func.isRequired
 };
 
 class GameHistory extends Component {
@@ -161,17 +163,17 @@ class GameHistory extends Component {
 }
 
 GameHistory.propTypes = {
-	currentMove: React.PropTypes.number,
-	getHeader: React.PropTypes.func,
-	getMovetext: React.PropTypes.func,
-	getResult: React.PropTypes.func,
-	getRows: React.PropTypes.func,
-	moveHead: React.PropTypes.func,
-	newlineChar: React.PropTypes.string.isRequired,
-	pgn: React.PropTypes.string,
-	pgnHeight: React.PropTypes.number,
-	pgnWidth: React.PropTypes.number,
-	sloppy: React.PropTypes.bool
+	currentMove: PropTypes.number,
+	getHeader: PropTypes.func,
+	getMovetext: PropTypes.func,
+	getResult: PropTypes.func,
+	getRows: PropTypes.func,
+	moveHead: PropTypes.func,
+	newlineChar: PropTypes.string.isRequired,
+	pgn: PropTypes.string,
+	pgnHeight: PropTypes.number,
+	pgnWidth: PropTypes.number,
+	sloppy: PropTypes.bool
 };
 
 const defaultGetHeader = (pgn, newlineChar) => {

src/board.js

@@ -26,6 +26,7 @@ SOFTWARE.
 
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 class Square extends Component {
 	render() {
@@ -45,12 +46,12 @@ class Square extends Component {
 }
 
 Square.propTypes = {
-	darkSquareColor: React.PropTypes.string.isRequired,
-	light: React.PropTypes.bool.isRequired,
-	lightSquareColor: React.PropTypes.string.isRequired,
-	squareSize: React.PropTypes.number.isRequired,
-	x: React.PropTypes.number.isRequired,
-	y: React.PropTypes.number.isRequired,
+	darkSquareColor: PropTypes.string.isRequired,
+	light: PropTypes.bool.isRequired,
+	lightSquareColor: PropTypes.string.isRequired,
+	squareSize: PropTypes.number.isRequired,
+	x: PropTypes.number.isRequired,
+	y: PropTypes.number.isRequired,
 };
 Square.displayName = 'Square';
 
@@ -61,10 +62,10 @@ class SquareHighlight extends Component {
 }
 
 SquareHighlight.propTypes = {
-	highlightColor: React.PropTypes.string.isRequired,
-	squareSize: React.PropTypes.number.isRequired,
-	x: React.PropTypes.number.isRequired,
-	y: React.PropTypes.number.isRequired,
+	highlightColor: PropTypes.string.isRequired,
+	squareSize: PropTypes.number.isRequired,
+	x: PropTypes.number.isRequired,
+	y: PropTypes.number.isRequired,
 };
 
 SquareHighlight.defaultProps = {
@@ -126,10 +127,10 @@ class FileLabels extends Component {
 }
 
 const LabelPropTypes = {
-	files: React.PropTypes.number,
-	flip: React.PropTypes.bool.isRequired,
-	ranks: React.PropTypes.number,
-	squareSize: React.PropTypes.number.isRequired,
+	files: PropTypes.number,
+	flip: PropTypes.bool.isRequired,
+	ranks: PropTypes.number,
+	squareSize: PropTypes.number.isRequired,
 };
 
 RankLabels.propTypes = LabelPropTypes;
@@ -226,14 +227,14 @@ class Board extends Component {
 }
 
 Board.propTypes = {
-	darkSquareColor: React.PropTypes.string.isRequired,
-	files: React.PropTypes.number.isRequired,
-	flip: React.PropTypes.bool.isRequired,
-	highlights: React.PropTypes.object,
-	lightSquareColor: React.PropTypes.string.isRequired,
-	ranks: React.PropTypes.number.isRequired,
-	selectedSquare: React.PropTypes.string,
-	squareSize: React.PropTypes.number.isRequired,
+	darkSquareColor: PropTypes.string.isRequired,
+	files: PropTypes.number.isRequired,
+	flip: PropTypes.bool.isRequired,
+	highlights: PropTypes.object,
+	lightSquareColor: PropTypes.string.isRequired,
+	ranks: PropTypes.number.isRequired,
+	selectedSquare: PropTypes.string,
+	squareSize: PropTypes.number.isRequired,
 };
 
 Board.defaultProps = {

src/chessdiagram.js

@@ -29,6 +29,8 @@ SOFTWARE.
 import React, { Component } from 'react';
 import BoardContainer from './BoardContainer.js';
 import GameHistory from './GameHistory.js';
+import PropTypes from 'prop-types';
+
 
 /** Chessdiagram : draws a chess diagram consisting of a board and pieces, using svg graphics */
 class Chessdiagram extends Component {
@@ -37,13 +39,13 @@ class Chessdiagram extends Component {
 
 		// If FEN is present, and it is an array, use it for moves
 		// If FEN is present, and it is a string, make it the first element of the moves array.
-		// If FEN is NOT present, and PGN is present, call getFensFromPgn() to generate an array of FENs 
+		// If FEN is NOT present, and PGN is present, call getFensFromPgn() to generate an array of FENs
 		// If FEN is NOT present, and PGN is NOT present, make first element of moves array an empty string
 		const moves = props.fen ?
 			Array.isArray(props.fen) ? props.fen : [props.fen]
 			: props.pgn ? props.getFensFromPgn(props.pgn) : [''];
 
-		// If there is a PGN, set currentMove to this.startMove, otherwise zero.	
+		// If there is a PGN, set currentMove to this.startMove, otherwise zero.
 		const currentMove = props.pgn ? this.startMove : 0;
 		this.state = {
 			currentMove,
@@ -119,63 +121,63 @@ class Chessdiagram extends Component {
 
 Chessdiagram.propTypes = {
 	/** Whether to allow the user to make moves on the board (ie, whether to ignore mouse input) */
-	allowMoves: React.PropTypes.bool,
-	darkSquareColor: React.PropTypes.string,
+	allowMoves: PropTypes.bool,
+	darkSquareColor: PropTypes.string,
 	/** Fen string to render. Should override  */
-	fen: React.PropTypes.oneOfType([
-		React.PropTypes.string,
-		React.PropTypes.array
+	fen: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.array
 	]),
-	files: React.PropTypes.number,
+	files: PropTypes.number,
 	/** if true, rotates the board so that Black pawns are moving up, and White pawns are moving down the board */
-	flip: React.PropTypes.bool,
+	flip: PropTypes.bool,
 	/** whether to render a GameHistory component */
-	gameHistory: React.PropTypes.bool,
+	gameHistory: PropTypes.bool,
 	/** Optional custom callbacks for PGN parsing. should take pgn (string).
 	*/
-	getFensFromPgn: React.PropTypes.func,
-	getHeader: React.PropTypes.func,
-	getMovetext: React.PropTypes.func,
-	getResult: React.PropTypes.func,
+	getFensFromPgn: PropTypes.func,
+	getHeader: PropTypes.func,
+	getMovetext: PropTypes.func,
+	getResult: PropTypes.func,
 	/** Returns an array of arrays, containing [<fullmoveNumber>, <whiteMove> <optionalBlackMove>] */
-	getRows: React.PropTypes.func,
+	getRows: PropTypes.func,
 	/** height of main svg container in pixels. If setting this manually, it should be at least 9 * squareSize to fit board AND labels*/
-	height: React.PropTypes.oneOfType([
-		React.PropTypes.string,
-		React.PropTypes.number,
+	height: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
 	]),
-	lightSquareColor: React.PropTypes.string,
+	lightSquareColor: PropTypes.string,
 	/** Pgn line separator. Defaults to '\r?\n'*/
-	newlineChar: React.PropTypes.string,
+	newlineChar: PropTypes.string,
 	/** callback function which is called when user moves a piece. Passes pieceType, initialSquare, finalSquare as parameters to callback */
-	onMovePiece: React.PropTypes.func,
+	onMovePiece: PropTypes.func,
 	/** callback function which is called when user clicks on a square. Passes name of square as parameter to callback */
-	onSelectSquare: React.PropTypes.func,
+	onSelectSquare: PropTypes.func,
 	/** String representation of a PGN. Note that chess.js can't handle templates,
 	* so if you'd like to pass templates you'll need a custom getNthMove callback.*/
-	pgn: React.PropTypes.string,
+	pgn: PropTypes.string,
 	/** Height of pgn viewer component */
-	pgnHeight: React.PropTypes.number,
+	pgnHeight: PropTypes.number,
 	/** array of pieces at particular squares (alternative to fen) eg ['P@f2','P@g2','P@h2','K@g1'].
 	* This format may be more suitable for unconventional board dimensions, for which standard FEN would not work.
 	* Note: If both FEN and pieces props are present, FEN will take precedence */
-	pieces: React.PropTypes.array,
+	pieces: PropTypes.array,
 	/** Optional associative array containing non-standard chess characters*/
-	pieceDefinitions: React.PropTypes.object,
-	ranks: React.PropTypes.number,
+	pieceDefinitions: PropTypes.object,
+	ranks: PropTypes.number,
 	/** size of the squares in pixels */
-	squareSize: React.PropTypes.number,
+	squareSize: PropTypes.number,
 	// Which move to start the game on. Either halfmove count or letter followed by full move eg w12 //
-	startMove: React.PropTypes.oneOfType([
-		React.PropTypes.string,
-		React.PropTypes.number
+	startMove: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number
 	]),
 	/** Chess position in FEN format (Forsyth-Edwards Notation). eg "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1" */
-	startPosition: React.PropTypes.string,
+	startPosition: PropTypes.string,
 	/** width of main svg container in pixels. If setting this manually, it should be at least 9 * squareSize to fit board AND labels*/
-	width: React.PropTypes.oneOfType([
-		React.PropTypes.string,
-		React.PropTypes.number,
+	width: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
 	]),
 };
 

src/piece.js

@@ -26,6 +26,8 @@ SOFTWARE.
 
 import React, { Component } from 'react';
 import './piece.css';
+import PropTypes from 'prop-types';
+
 
 /** Piece: renders an svg chess piece of a given type and position */
 class Piece extends Component {
@@ -43,11 +45,11 @@ class Piece extends Component {
 
 // TODO: remove pieceType, only check to see if drawPiece has changed in shouldComponentUpdate
 Piece.propTypes = {
-	drawPiece: React.PropTypes.func.isRequired,
-	pieceType: React.PropTypes.string.isRequired,
-	squareSize: React.PropTypes.number.isRequired,
-	x: React.PropTypes.number.isRequired,
-	y: React.PropTypes.number.isRequired,
+	drawPiece: PropTypes.func.isRequired,
+	pieceType: PropTypes.string.isRequired,
+	squareSize: PropTypes.number.isRequired,
+	x: PropTypes.number.isRequired,
+	y: PropTypes.number.isRequired,
 	/** recognized piece types: K,Q,R,B,N,P,k,q,r,b,n,p */
 };