feat: Add className props to ImageWithZoom (#257)

* Add className prop to ImageWithZoom * Add imageClassName prop to ImageWithZoom * Add overlayClassName prop to ImageWithZoom
express-labs · Mar 26, 2020 · 79e729f · 79e729f
1 parent 5b8f8af
commit 79e729f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/ImageWithZoom/ImageWithZoom.jsx b/src/ImageWithZoom/ImageWithZoom.jsx
@@ -13,6 +13,9 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
   static propTypes = {
     // alt: PropTypes.string,
     carouselStore: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    imageClassName: PropTypes.string,
+    overlayClassName: PropTypes.string,
     spinner: PropTypes.func,
     src: PropTypes.string.isRequired,
     srcZoomed: PropTypes.string,
@@ -21,6 +24,9 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
   }
 
   static defaultProps = {
+    className: null,
+    imageClassName: null,
+    overlayClassName: null,
     isPinchZoomEnabled: true,
     spinner: null,
     srcZoomed: null,
@@ -264,6 +270,9 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
   render() {
     const {
       carouselStore,
+      className,
+      imageClassName,
+      overlayClassName,
       isPinchZoomEnabled,
       spinner,
       src,
@@ -272,18 +281,25 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
       ...filteredProps
     } = this.props;
 
-    const imageClassName = cn([
+    const newClassName = cn([
+      s.container,
+      className,
+    ]);
+
+    const newImageClassName = cn([
       s.image,
       'carousel__zoom-image',
+      imageClassName,
     ]);
 
-    const overlayClassName = cn([
+    const newOverlayClassName = cn([
       s.overlay,
       'carousel__zoom-image-overlay',
       this.state.isHovering && s.hover,
       this.state.isZooming && s.zoom,
       this.state.isHovering && 'carousel__zoom-image-overlay--hovering',
       this.state.isZooming && 'carousel__zoom-image-overlay--zooming',
+      overlayClassName,
     ]);
 
     const overlayStyle = {};
@@ -293,17 +309,17 @@ const ImageWithZoom = class ImageWithZoom extends React.Component {
     }
 
     return (
-      <Tag className={s.container} {...filteredProps}>
+      <Tag className={newClassName} {...filteredProps}>
         <Image
-          className={imageClassName}
+          className={newImageClassName}
           tag="div"
           src={src}
           isBgImage
           onLoad={this.handleImageComplete}
           onError={this.handleImageComplete}
         />
         <Image
-          className={overlayClassName}
+          className={newOverlayClassName}
           tag="div"
           src={srcZoomed || src}
           style={overlayStyle}

diff --git a/typings/carouselElements.d.ts b/typings/carouselElements.d.ts
@@ -47,9 +47,13 @@ declare const Slide: SlideInterface
 
 
 interface ImageWithZoomProps {
+  readonly className?: string
+  readonly imageClassName?: string
+  readonly overlayClassName?: string
   readonly src: string
   readonly srcZoomed?: string
   readonly tag?: string
+  readonly isPinchZoomEnabled?: boolean
 }
 type ImageWithZoomInterface = React.ComponentClass<ImageWithZoomProps>
 declare const ImageWithZoom: ImageWithZoomInterface