From 030987b7f90995fbc79387f8b1de7f297a607ada Mon Sep 17 00:00:00 2001
From: Claudiu Andrei <claudiu.andrei@gmail.com>
Date: Thu, 20 Sep 2018 16:36:59 -0500
Subject: [PATCH] Add cropType property that allows round cropper (#14)

* Add cropType property that allows round cropper

* Fix the round area to have 3rds

* Add cropArea property that controls the options for crop display

* Update the example to have the new prop

* Update the api to take 2 properties

* Add defaults, fix naming, make shape multioption

* Pass the props to CropArea
---
 examples/src/index.js |  4 ++++
 src/index.js          |  7 +++++++
 src/styles.js         | 24 +++++++++++++++++++++---
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/examples/src/index.js b/examples/src/index.js
index cd89e4e..c1721e6 100644
--- a/examples/src/index.js
+++ b/examples/src/index.js
@@ -13,6 +13,8 @@ class App extends React.Component {
     crop: { x: 0, y: 0 },
     zoom: 1,
     aspect: 4 / 3,
+    cropShape: 'rect',
+    showGrid: true,
   }
 
   onCropChange = crop => {
@@ -36,6 +38,8 @@ class App extends React.Component {
             crop={this.state.crop}
             zoom={this.state.zoom}
             aspect={this.state.aspect}
+            cropShape={this.state.cropShape}
+            showGrid={this.state.showGrid}
             onCropChange={this.onCropChange}
             onCropComplete={this.onCropComplete}
             onZoomChange={this.onZoomChange}
diff --git a/src/index.js b/src/index.js
index 3c7b840..9312b31 100644
--- a/src/index.js
+++ b/src/index.js
@@ -245,7 +245,10 @@ class Cropper extends React.Component {
     const {
       crop: { x, y },
       zoom,
+      cropShape,
+      showGrid,
     } = this.props
+
     return (
       <Container
         onMouseDown={this.onMouseDown}
@@ -265,6 +268,8 @@ class Cropper extends React.Component {
         />
         {this.state.cropSize && (
           <CropArea
+            cropShape={cropShape}
+            showGrid={showGrid}
             style={{
               width: this.state.cropSize.width,
               height: this.state.cropSize.height,
@@ -282,6 +287,8 @@ Cropper.defaultProps = {
   aspect: 4 / 3,
   maxZoom: MAX_ZOOM,
   minZoom: MIN_ZOOM,
+  cropShape: 'rect',
+  showGrid: true,
 }
 
 export default Cropper
diff --git a/src/styles.js b/src/styles.js
index ddea6e3..422b89b 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -32,8 +32,7 @@ const cropperLines = {
   position: 'absolute',
   border: lineBorder,
 }
-
-export const CropArea = styled('div')({
+const cropperArea = {
   position: 'absolute',
   left: '50%',
   top: '50%',
@@ -41,6 +40,9 @@ export const CropArea = styled('div')({
   border: lineBorder,
   boxSizing: 'border-box',
   boxShadow: '0 0 0 9999em rgba(0, 0, 0, 0.5)',
+  overflow: 'hidden',
+}
+const gridLines = {
   '&::before': {
     ...cropperLines,
     top: 0,
@@ -59,4 +61,20 @@ export const CropArea = styled('div')({
     borderLeft: 0,
     borderRight: 0,
   },
-})
+}
+const roundShape = {
+  borderRadius: '50%',
+}
+
+export const CropArea = styled('div')({}, ({ cropShape, showGrid }) => ({
+  ...(() => {
+    switch (cropShape) {
+      case 'round':
+        return { ...cropperArea, ...roundShape }
+      case 'rect':
+      default:
+        return cropperArea
+    }
+  })(),
+  ...(showGrid ? gridLines : {}),
+}))