From 12e1ab9b25af575fef8c8d2e1e60160119fae8bb Mon Sep 17 00:00:00 2001
From: Steve Wilcox <steve.wilcox@outlook.com.au>
Date: Mon, 28 Jan 2019 18:11:48 +1100
Subject: [PATCH 1/2] Implemented className prop to index and Rect component to
 allow for custom styling.

---
 src/Rect/index.js | 16 +++++++++++-----
 src/index.js      |  4 +++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/Rect/index.js b/src/Rect/index.js
index e8e34ca..0a1fe76 100644
--- a/src/Rect/index.js
+++ b/src/Rect/index.js
@@ -16,9 +16,7 @@ const zoomableMap = {
 
 export default class Rect extends PureComponent {
   static propTypes = {
-    styles: PropTypes.object,
-    zoomable: PropTypes.string,
-    rotatable: PropTypes.bool,
+    className: PropTypes.string,
     onResizeStart: PropTypes.func,
     onResize: PropTypes.func,
     onResizeEnd: PropTypes.func,
@@ -28,7 +26,14 @@ export default class Rect extends PureComponent {
     onDragStart: PropTypes.func,
     onDrag: PropTypes.func,
     onDragEnd: PropTypes.func,
-    parentRotateAngle: PropTypes.number
+    parentRotateAngle: PropTypes.number,
+    rotatable: PropTypes.bool,
+    styles: PropTypes.object,
+    zoomable: PropTypes.string
+  }
+
+  static defaultProps = {
+    className: ''
   }
 
   setElementRef = (ref) => { this.$element = ref }
@@ -133,6 +138,7 @@ export default class Rect extends PureComponent {
 
   render () {
     const {
+      className,
       styles: {
         position: { centerX, centerY },
         size: { width, height },
@@ -155,7 +161,7 @@ export default class Rect extends PureComponent {
       <StyledRect
         ref={this.setElementRef}
         onMouseDown={this.startDrag}
-        className="rect single-resizer"
+        className={`rect single-resizer ${className}`}
         style={style}
       >
         {
diff --git a/src/index.js b/src/index.js
index 8def077..abff643 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import { centerToTL, tLToCenter, getNewStyle, degToRadian } from './utils'
 
 export default class ResizableRect extends Component {
   static propTypes = {
+    className: PropTypes.string,
     left: PropTypes.number.isRequired,
     top: PropTypes.number.isRequired,
     width: PropTypes.number.isRequired,
@@ -80,7 +81,7 @@ export default class ResizableRect extends Component {
 
   render () {
     const {
-      top, left, width, height, rotateAngle, parentRotateAngle, zoomable, rotatable,
+      className, top, left, width, height, rotateAngle, parentRotateAngle, zoomable, rotatable,
       onRotate, onResizeStart, onResizeEnd, onRotateStart, onRotateEnd, onDragStart, onDragEnd
     } = this.props
 
@@ -88,6 +89,7 @@ export default class ResizableRect extends Component {
 
     return (
       <Rect
+        className={className}
         styles={styles}
         zoomable={zoomable}
         rotatable={Boolean(rotatable && onRotate)}

From 75ce081412503411ab4f3fd61674f1f79ed29094 Mon Sep 17 00:00:00 2001
From: Steve Wilcox <steve.wilcox@outlook.com.au>
Date: Mon, 28 Jan 2019 18:18:54 +1100
Subject: [PATCH 2/2] Implemented className prop to index and Rect component to
 allow for elements to be displayed within the resizable Rect.

---
 src/Rect/index.js | 6 ++++++
 src/index.js      | 7 ++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/Rect/index.js b/src/Rect/index.js
index 0a1fe76..2974611 100644
--- a/src/Rect/index.js
+++ b/src/Rect/index.js
@@ -17,6 +17,10 @@ const zoomableMap = {
 export default class Rect extends PureComponent {
   static propTypes = {
     className: PropTypes.string,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+    ]),
     onResizeStart: PropTypes.func,
     onResize: PropTypes.func,
     onResizeEnd: PropTypes.func,
@@ -138,6 +142,7 @@ export default class Rect extends PureComponent {
 
   render () {
     const {
+      children,
       className,
       styles: {
         position: { centerX, centerY },
@@ -193,6 +198,7 @@ export default class Rect extends PureComponent {
             )
           })
         }
+        {children}
       </StyledRect>
     )
   }
diff --git a/src/index.js b/src/index.js
index abff643..d0a34bf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,10 @@ import { centerToTL, tLToCenter, getNewStyle, degToRadian } from './utils'
 export default class ResizableRect extends Component {
   static propTypes = {
     className: PropTypes.string,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+    ]),
     left: PropTypes.number.isRequired,
     top: PropTypes.number.isRequired,
     width: PropTypes.number.isRequired,
@@ -81,7 +85,7 @@ export default class ResizableRect extends Component {
 
   render () {
     const {
-      className, top, left, width, height, rotateAngle, parentRotateAngle, zoomable, rotatable,
+      children, className, top, left, width, height, rotateAngle, parentRotateAngle, zoomable, rotatable,
       onRotate, onResizeStart, onResizeEnd, onRotateStart, onRotateEnd, onDragStart, onDragEnd
     } = this.props
 
@@ -89,6 +93,7 @@ export default class ResizableRect extends Component {
 
     return (
       <Rect
+        children={children}
         className={className}
         styles={styles}
         zoomable={zoomable}