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

@@ -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}

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

src/styles.js

@@ -32,15 +32,17 @@ const cropperLines = {
   position: 'absolute',
   border: lineBorder,
 }
-
-export const CropArea = styled('div')({
+const cropperArea = {
   position: 'absolute',
   left: '50%',
   top: '50%',
   transform: 'translate(-50%, -50%)',
   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 : {}),
+}))