Review comments.

Author: jsanthosh-godaddy

src/carousel.less

@@ -17,13 +17,17 @@
   }
 
   .carousel-arrow-default {
+    border: 3px solid !important;
+    border-radius: 50%;
+    color: rgba(255, 255, 255, 0.9);
     height: 32px;
     width: 32px;
     font-weight: 900;
-    background: none;
+    background: rgba(0, 0, 0, 0.15);
   }
 
   .carousel-arrow {
+    position: absolute;
     z-index: 1;
     bottom: 23px;
     padding: 0;
@@ -36,6 +40,7 @@
 
     &:before {
       font-size: 19px;
+      display: block;
       margin-top: -2px;
     }
 
@@ -47,12 +52,52 @@
 
   .carousel-left-arrow {
     left: 23px;
-    padding-top: 10px;
   }
 
   .carousel-right-arrow {
     right: 23px;
-    padding-top: 10px;
+  }
+
+  .carousel-left-arrow {
+    &.carousel-arrow-default {
+      &:before {
+        content: '<';
+        padding-right: 2px;
+      }
+    }
+  }
+
+  .carousel-right-arrow {
+    &.carousel-arrow-default {
+      &:before {
+        content: '>';
+        padding-left: 2px;
+      }
+    }
+  }
+
+  .carousel-top-arrow {
+    top: 53px;
+  }
+
+  .carousel-bottom-arrow {
+    bottom: 53px;
+  }
+
+  .carousel-top-arrow {
+    &.carousel-arrow-default {
+      &:before {
+        content: '\1431';
+      }
+    }
+  }
+
+  .carousel-bottom-arrow {
+    &.carousel-arrow-default {
+      &:before {
+        content: '\142F';
+      }
+    }
   }
 
   .carousel-track {
@@ -67,6 +112,7 @@
       transition: opacity 0.5s ease-in-out;
 
       & > * {
+        display: block;
         white-space: normal;
       }
       &.carousel-slide-loading {

src/controls/arrow.js

@@ -1,9 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import DefaultUpArrow from '../images/arrow-up.svg';
-import DefaultDownArrow from '../images/arrow-down.svg';
-import DefaultLeftArrow from '../images/arrow-left.svg';
-import DefaultRightArrow from '../images/arrow-right.svg';
 
 /**
  * Renders an arrow component used to transition from right-to-left or left-to-right through the carousel slides.
@@ -25,11 +21,7 @@ export default class Arrow extends Component {
           right: PropTypes.node.isRequired,
           className: PropTypes.string
         })
-      ]),
-      upArrowImage: PropTypes.node,
-      downArrowImage: PropTypes.node,
-      leftArrowImage: PropTypes.node,
-      rightArrowImage: PropTypes.node
+      ])
     };
   }
 
@@ -43,7 +35,7 @@ export default class Arrow extends Component {
   }
 
   render() {
-    const { prevSlide, nextSlide, direction, arrows, upArrowImage, downArrowImage, leftArrowImage, rightArrowImage } = this.props;
+    const { prevSlide, nextSlide, direction, arrows } = this.props;
     let arrowComponent = null;
     let buttonClass = 'carousel-arrow-default';
 
@@ -59,10 +51,6 @@ export default class Arrow extends Component {
         onClick={ ['top', 'left'].includes(direction) ? prevSlide : nextSlide }
         className={ `carousel-arrow carousel-${direction}-arrow ${buttonClass}` }>
         { arrowComponent }
-        { direction === 'top' && (upArrowImage || <DefaultUpArrow/>)}
-        { direction === 'bottom' && (downArrowImage || <DefaultDownArrow/>)}
-        { direction === 'left' && (leftArrowImage || <DefaultLeftArrow/>)}
-        { direction === 'right' && (rightArrowImage || <DefaultRightArrow/>)}
       </button>
     );
   }

src/images/arrow-down.svg

@@ -80,11 +80,7 @@ export default class Carousel extends Component {
       }),
       dir: PropTypes.oneOf(['ltr', 'rtl']),
       isVertical: PropTypes.bool,
-      verticalArrowPadding: PropTypes.number,
-      upArrowImage: PropTypes.node,
-      downArrowImage: PropTypes.node,
-      leftArrowImage: PropTypes.node,
-      rightArrowImage: PropTypes.node
+      verticalArrowPadding: PropTypes.number
     };
   }
 
@@ -408,7 +404,7 @@ export default class Carousel extends Component {
    * @returns {Array} Controls to be rendered with the carousel.
    */
   getControls() {
-    const { arrows, dots, controls, isVertical, upArrowImage, downArrowImage, leftArrowImage, rightArrowImage } = this.props;
+    const { arrows, dots, controls, isVertical } = this.props;
     let arr = controls.slice(0);
 
     if (dots) {
@@ -417,8 +413,8 @@ export default class Carousel extends Component {
 
     if (arrows) {
       arr = arr.concat([
-        { component: Arrow, props: { ...isVertical ? { direction: 'top', upArrowImage } : { direction: 'left', leftArrowImage } } },
-        { component: Arrow, props: { ...isVertical ? { direction: 'bottom', downArrowImage } : { direction: 'right', rightArrowImage } } }
+        { ...isVertical ? { component: Arrow, props: { direction: 'top' } } : { component: Arrow, props: { direction: 'left' } } },
+        { ...isVertical ? { component: Arrow, props: { direction: 'bottom' } } : { component: Arrow, props: { direction: 'right' } } }
       ]);
     }
 
@@ -474,7 +470,7 @@ export default class Carousel extends Component {
       arrowOffset -= this.props.verticalArrowPadding;
     }
 
-    const arrowStyle = { ...isVertical && { transform: `translateY(${ arrowOffset }px)` } };
+    const arrowStyle = { ...isVertical && { ...!arrows ? { transform: `translateY(${ arrowOffset }px)` } : { paddingRight: '50px' } } };
 
     return (
       <div className={ classes } style={ containerStyle } ref={ c => { this._containerRef = c; } }>
@@ -509,7 +505,7 @@ export default class Carousel extends Component {
               { this.renderSlides() }
             </ul>
           </div>
-          <div style={{ ...arrowStyle }}>
+          <div className='control-div' style={{ ...arrowStyle }}>
           {
             controls.filter(Control => {
               return Control.position !== 'top';

src/images/arrow-left.svg

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CustomArrow = ({ nextSlide, prevSlide, overrideArrowStyle = {}, direction, infinite, numSlides, selectedIndex, customImage }) => {
+    const isTopOrLeft = ['top', 'left'].includes(direction);
+    const hasNext = () => {
+        return infinite || (isTopOrLeft ? selectedIndex > 0 : selectedIndex < numSlides - 1);
+    }
+
+    const hasNextSlide = hasNext();
+    return (
+        <button disabled={ !hasNextSlide } onClick={ isTopOrLeft ? prevSlide : nextSlide } style={{ ...overrideArrowStyle, opacity: !hasNextSlide ? 0.5 : 1 }}>
+            {customImage}
+        </button>
+    );
+};
+
+CustomArrow.propTypes = {
+    prevSlide: PropTypes.func,
+    nextSlide: PropTypes.func,
+    visible: PropTypes.bool,
+    overrideArrowStyle: PropTypes.object,
+    triggerNextSlide: PropTypes.number,
+    direction: PropTypes.string,
+    infinite: PropTypes.bool,
+    numSlides: PropTypes.number,
+    selectedIndex: PropTypes.number,
+    customImage: PropTypes.node
+};
+
+export default CustomArrow;

src/images/arrow-right.svg

@@ -3,9 +3,9 @@
 import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import Carousel from '../index';
-import UpImage from '../../test/images/test-up-arrow.svg';
-import DownImage from '../../test/images/test-down-arrow.svg';
-
+import CustomArrow from './CustomArrow';
+import DownArrow from '../../test/images/test-down-arrow.svg';
+import UpArrow from '../../test/images/test-up-arrow.svg';
 
 require('../carousel.less');
 
@@ -73,21 +73,27 @@ export const verticalInfiniteWithCellPadding = () =>
       { imgElements }
     </Carousel>;
 
-export const verticalNonInfiniteWithCellPadding = () =>
+export const verticalNonInfiniteWithCellPaddingWithDefaultArrows = () =>
     <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ false } arrows={ true }
-              dots={ false } isVertical={ true } >
+              dots={ false } isVertical={ true }  >
       { imgElements }
     </Carousel>;
 
-export const verticalNonInfiniteWithCellPaddingWithCustomArrows = () =>
-    <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ false } arrows={ true }
-              dots={ false } isVertical={ true } upArrowImage={ <UpImage/> } downArrowImage={ <DownImage/> } >
-      { imgElements }
+export const verticalNonInfiniteButtonsWithCellPaddingWithDefaultArrows = () =>
+    <Carousel height='200px' width='200px' cellPadding={ 5 } infinite={ false } arrows={ true }
+              dots={ false } isVertical={ true } >
+      { testButtons }
     </Carousel>;
 
-export const verticalNonInfiniteButtonsWithCellPadding = () =>
-    <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ false } arrows={ true }
-              dots={ false } isVertical={ true } verticalArrowPadding={ 30 } >
+export const verticalNonInfiniteButtonsWithCellPaddingWithCustomArrows = () =>
+    <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ false } arrows={ false }
+              dots={ false } isVertical={ true } verticalArrowPadding={ 30 } controls={ [{
+      component: CustomArrow,
+      props: { direction: 'top', overrideArrowStyle: { border: 'none', background: 'none' }, customImage: <UpArrow/> }
+    }, {
+      component: CustomArrow,
+      props: { direction: 'bottom', overrideArrowStyle: { border: 'none', background: 'none' }, customImage: <DownArrow/> }
+    }] }>
       { testButtons }
     </Carousel>;