feat(pieces): customize pieces via render prop [skip release]

src/Chessboard/Board.js

@@ -81,7 +81,6 @@ class Board extends Component {
                           orientation={context.orientation}
                           id={context.id}
                           setTouchState={context.setTouchState}
-                          renderPieces={context.renderPieces}
                           wasManuallyDropped={context.wasManuallyDropped}
                         />
                       ) : null}

src/Chessboard/CustomDragLayer.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { DragLayer } from 'react-dnd';
 
-import { renderChessPieces } from './RenderPieces';
+import { renderChessPiece } from './Piece';
 
 class CustomDragLayer extends Component {
   static propTypes = {
@@ -15,7 +15,8 @@ class CustomDragLayer extends Component {
     width: PropTypes.number,
     pieces: PropTypes.object,
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    wasPieceTouched: PropTypes.bool
+    wasPieceTouched: PropTypes.bool,
+    sourceSquare: PropTypes.string
   };
 
   render() {
@@ -26,16 +27,21 @@ class CustomDragLayer extends Component {
       id,
       currentOffset,
       wasPieceTouched,
-      pieces
+      pieces,
+      sourceSquare
     } = this.props;
 
     return isDragging && item.board === id ? (
       <div style={layerStyles}>
         <div style={getItemStyles(currentOffset, wasPieceTouched)}>
-          {renderChessPieces(
-            { width, pieces, piece: item.piece },
-            { svgStyles: { width: width / 8, height: width / 8 } }
-          )}
+          {renderChessPiece({
+            width,
+            pieces,
+            piece: item.piece,
+            isDragging,
+            customDragLayerStyles: { opacity: 1 },
+            sourceSquare
+          })}
         </div>
       </div>
     ) : null;

src/Chessboard/PhantomPiece.js

@@ -1,7 +1,7 @@
 import React from 'react'; // eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
 
-import { renderChessPieces } from './RenderPieces';
+import { renderChessPiece } from './Piece';
 
 PhantomPiece.propTypes = {
   width: PropTypes.number,
@@ -10,13 +10,12 @@ PhantomPiece.propTypes = {
 };
 
 function PhantomPiece({ width, pieces, phantomPieceValue }) {
-  return renderChessPieces(
-    { width, pieces, piece: phantomPieceValue },
-    {
-      imgStyles: phantomPieceStyles(width),
-      svgStyles: phantomPieceStyles(width)
-    }
-  );
+  return renderChessPiece({
+    width,
+    pieces,
+    piece: phantomPieceValue,
+    phantomPieceStyles: phantomPieceStyles(width)
+  });
 }
 
 export default PhantomPiece;

src/Chessboard/Piece.js

@@ -1,10 +1,66 @@
-import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
+import React, { Component } from 'react';
 import { DragSource } from 'react-dnd';
 import PropTypes from 'prop-types';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 
 import { ItemTypes } from './helpers';
 
+/* eslint react/prop-types: 0 */
+export const renderChessPiece = ({
+  currentSquare,
+  targetSquare,
+  waitForTransition,
+  getSquareCoordinates,
+  piece,
+  width,
+  pieces,
+  transitionDuration,
+  isDragging,
+  sourceSquare,
+  customDragLayerStyles = {},
+  phantomPieceStyles = {}
+}) => {
+  const renderChessPieceArgs = {
+    // set the width and height to the square's width and height
+    width: width / 8,
+    height: width / 8,
+    isDragging,
+    // undefined when dragging
+    currentSquare,
+    sourceSquare
+  };
+
+  return (
+    <div
+      data-testid={`${piece}-${currentSquare}`}
+      style={{
+        ...pieceStyles(
+          {
+            isDragging,
+            transitionDuration,
+            waitForTransition,
+            currentSquare,
+            targetSquare,
+            sourceSquare,
+            getSquareCoordinates
+          },
+          getTranslation
+        ),
+        ...phantomPieceStyles,
+        ...customDragLayerStyles
+      }}
+    >
+      {typeof pieces[piece] === 'function' ? (
+        pieces[piece](renderChessPieceArgs)
+      ) : (
+        <svg viewBox={`1 1 43 43`} width={width / 8} height={width / 8}>
+          <g>{pieces[piece]}</g>
+        </svg>
+      )}
+    </div>
+  );
+};
+
 class Piece extends Component {
   static propTypes = {
     piece: PropTypes.string,
@@ -22,8 +78,7 @@ class Piece extends Component {
     sourceSquare: PropTypes.string,
     targetSquare: PropTypes.string,
     waitForTransition: PropTypes.bool,
-    setTouchState: PropTypes.func,
-    renderPieces: PropTypes.func
+    setTouchState: PropTypes.func
   };
 
   componentDidMount() {
@@ -50,24 +105,22 @@ class Piece extends Component {
       transitionDuration,
       isDragging,
       connectDragSource,
-      renderPieces,
       sourceSquare
     } = this.props;
 
     return connectDragSource(
-      renderPieces &&
-        renderPieces({
-          currentSquare,
-          targetSquare,
-          waitForTransition,
-          getSquareCoordinates,
-          piece,
-          width,
-          pieces,
-          transitionDuration,
-          isDragging,
-          sourceSquare
-        })
+      renderChessPiece({
+        currentSquare,
+        targetSquare,
+        waitForTransition,
+        getSquareCoordinates,
+        piece,
+        width,
+        pieces,
+        transitionDuration,
+        isDragging,
+        sourceSquare
+      })
     );
   }
 }
@@ -111,10 +164,12 @@ const pieceSource = {
         return onDrop(props.currentSquare, dropResults.target);
       }
       // set new position
+
       setPosition(piece, currentSquare, dropResults.target);
     }
   }
 };
+
 function collect(connect, monitor) {
   return {
     connectDragSource: connect.dragSource(),
@@ -125,3 +180,60 @@ function collect(connect, monitor) {
 }
 
 export default DragSource(ItemTypes.PIECE, pieceSource, collect)(Piece);
+
+const isActivePiece = (currentSquare, targetSquare) =>
+  targetSquare && targetSquare === currentSquare;
+
+const getTransitionCoordinates = ({
+  getSquareCoordinates,
+  sourceSq,
+  targetSq
+}) => {
+  const transitionCoordinates = getSquareCoordinates(sourceSq, targetSq);
+  const { sourceSquare, targetSquare } = transitionCoordinates;
+
+  return `translate(${sourceSquare.x - targetSquare.x}px, ${sourceSquare.y -
+    targetSquare.y}px)`;
+};
+
+const getTranslation = ({
+  waitForTransition,
+  currentSquare,
+  targetSquare,
+  sourceSquare,
+  getSquareCoordinates
+}) => {
+  return (
+    isActivePiece(currentSquare, targetSquare) &&
+    waitForTransition &&
+    getTransitionCoordinates({
+      getSquareCoordinates,
+      sourceSq: sourceSquare,
+      targetSq: targetSquare
+    })
+  );
+};
+
+const pieceStyles = (
+  {
+    isDragging,
+    transitionDuration,
+    waitForTransition,
+    currentSquare,
+    targetSquare,
+    sourceSquare,
+    getSquareCoordinates
+  },
+  getTranslation
+) => ({
+  opacity: isDragging ? 0 : 1,
+  transform: getTranslation({
+    waitForTransition,
+    currentSquare,
+    targetSquare,
+    sourceSquare,
+    getSquareCoordinates
+  }),
+  transition: `transform ${transitionDuration}ms`,
+  zIndex: 5
+});