Add styling props (#16)

This PR adds styling props to the container, cropping area and image
ValentinH · Oct 24, 2018 · 41d5e3a · 41d5e3a
1 parent 578fb0e
commit 41d5e3a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -95,6 +95,8 @@ class App extends React.Component {
 | `onCropChange` | Function | ✓ | Called everytime the crop is changed. Use it to update your `crop` state.|
 | `onZoomChange` | Function |  | Called everytime the zoom is changed. Use it to update your `zoom` state. |
 | [`onCropComplete`](#onCropCompleteProp) | Function |  | Called when the user stops moving the image or stops zooming. It will be passed the corresponding cropped area on the image in percentages and pixels |
+| `style` | `{ containerStyle: object, imageStyle: object, cropAreaStyle: object }` |  | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults. |
+| `classes` | `{ containerClassName: string, imageClassName: string, cropAreaClassName: string }` |  | Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. |
 
 <a name="onCropCompleteProp"></a>
 #### onCropComplete(croppedArea, cropperAreaPixels)

diff --git a/src/index.js b/src/index.js
@@ -247,6 +247,8 @@ class Cropper extends React.Component {
       zoom,
       cropShape,
       showGrid,
+      style: { containerStyle, cropAreaStyle, imageStyle },
+      classes: { containerClassName, cropAreaClassName, imageClassName },
     } = this.props
 
     return (
@@ -256,6 +258,8 @@ class Cropper extends React.Component {
         onWheel={this.onWheel}
         innerRef={el => (this.container = el)}
         data-testid="container"
+        containerStyle={containerStyle}
+        className={containerClassName}
       >
         <Img
           src={this.props.image}
@@ -265,6 +269,8 @@ class Cropper extends React.Component {
           style={{
             transform: `translate(${x}px, ${y}px) scale(${zoom})`,
           }}
+          imageStyle={imageStyle}
+          className={imageClassName}
         />
         {this.state.cropSize && (
           <CropArea
@@ -275,6 +281,8 @@ class Cropper extends React.Component {
               height: this.state.cropSize.height,
             }}
             data-testid="cropper"
+            cropAreaStyle={cropAreaStyle}
+            className={cropAreaClassName}
           />
         )}
       </Container>
@@ -289,6 +297,8 @@ Cropper.defaultProps = {
   minZoom: MIN_ZOOM,
   cropShape: 'rect',
   showGrid: true,
+  style: {},
+  classes: {},
 }
 
 export default Cropper
diff --git a/src/styles.js b/src/styles.js
@@ -1,29 +1,34 @@
 import styled from 'react-emotion'
 
-export const Container = styled('div')({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  overflow: 'hidden',
-  background: '#222',
-  userSelect: 'none',
-  touchAction: 'none',
-  cursor: 'move',
-})
+export const Container = styled('div')(
+  {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden',
+    userSelect: 'none',
+    touchAction: 'none',
+    cursor: 'move',
+  },
+  ({ containerStyle }) => ({ ...containerStyle })
+)
 
-export const Img = styled('img')({
-  maxWidth: '100%',
-  maxHeight: '100%',
-  margin: 'auto',
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  willChange: 'transform', // this improves performances and prevent painting issues on iOS Chrome
-})
+export const Img = styled('img')(
+  {
+    maxWidth: '100%',
+    maxHeight: '100%',
+    margin: 'auto',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    willChange: 'transform', // this improves performances and prevent painting issues on iOS Chrome
+  },
+  ({ imageStyle }) => ({ ...imageStyle })
+)
 
 const lineBorder = '1px solid rgba(255, 255, 255, 0.5)'
 const cropperLines = {
@@ -39,7 +44,8 @@ const cropperArea = {
   transform: 'translate(-50%, -50%)',
   border: lineBorder,
   boxSizing: 'border-box',
-  boxShadow: '0 0 0 9999em rgba(0, 0, 0, 0.5)',
+  boxShadow: '0 0 0 9999em',
+  color: 'rgba(0,0,0,0.5)',
   overflow: 'hidden',
 }
 const gridLines = {
@@ -66,7 +72,7 @@ const roundShape = {
   borderRadius: '50%',
 }
 
-export const CropArea = styled('div')({}, ({ cropShape, showGrid }) => ({
+export const CropArea = styled('div')({}, ({ cropShape, showGrid, cropAreaStyle }) => ({
   ...(() => {
     switch (cropShape) {
       case 'round':
@@ -77,4 +83,5 @@ export const CropArea = styled('div')({}, ({ cropShape, showGrid }) => ({
     }
   })(),
   ...(showGrid ? gridLines : {}),
+  ...cropAreaStyle,
 }))