Review comments.

Author: jsanthosh-godaddy

src/index.js

@@ -442,7 +442,8 @@ export default class Carousel extends Component {
       width,
       height,
       marginBottom: dots ? '20px' : 0,
-      ...isVertical && { display: 'flex', flexDirection: 'row-reverse' }
+      ...(isVertical && !arrows) && { display: 'flex', flexDirection: 'row-reverse' },
+      ...(isVertical && arrows) && { display: 'flex', flexDirection: 'row' }
     };
     const viewportStyle = { ...(style.viewport || {}),
       width: viewportWidth,
@@ -470,7 +471,7 @@ export default class Carousel extends Component {
       arrowOffset -= this.props.verticalArrowPadding;
     }
 
-    const arrowStyle = { ...isVertical && { ...!arrows && { transform: `translateY(${ arrowOffset }px)` } } };
+    const customArrowStyle = { ...(isVertical && !arrows) && { transform: `translateY(${ arrowOffset }px)` } };
 
     return (
       <div className={ classes } style={ containerStyle } ref={ c => { this._containerRef = c; } }>
@@ -505,7 +506,6 @@ export default class Carousel extends Component {
               { this.renderSlides() }
             </ul>
           </div>
-          <div className='control-div' style={{ ...arrowStyle }}>
           {
             controls.filter(Control => {
               return Control.position !== 'top';
@@ -519,10 +519,10 @@ export default class Carousel extends Component {
                 prevSlide={ this.prevSlide }
                 goToSlide={ this.goToSlide }
                 arrows={ arrows }
-                infinite={ infinite } />
+                infinite={ infinite }
+                customArrowStyle={ customArrowStyle }/>
             ))
           }
-          </div>
         </div>
       </div>
     );

src/stories/CustomArrow.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CustomArrows = ({ nextSlide, prevSlide, overrideArrowStyle = {}, infinite, numSlides, selectedIndex, topArrowImage, bottomArrowImage, customArrowStyle }) => {
+    const hasNext = (direction) => {
+        return infinite || (['top', 'left'].includes(direction) ? selectedIndex > 0 : selectedIndex < numSlides - 1);
+    }
+
+    const hasNextBottom = hasNext('bottom');
+    const hasNextTop = hasNext('top');
+
+    return (
+        <div style={ customArrowStyle } className='custom-arrows-div'>
+        <button className='carousel-custom-arrow' disabled={ !hasNextTop } onClick={ hasNextTop ? prevSlide : nextSlide } style={{ ...overrideArrowStyle, ...{ opacity: !hasNextTop ? 0.5 : 1 }, ...{ cursor: !hasNextTop ? 'not-allowed' : 'pointer' } }}>
+            {topArrowImage}
+        </button>
+        <button className='carousel-custom-arrow' disabled={ !hasNextBottom } onClick={ hasNextBottom ? nextSlide : prevSlide } style={{ ...overrideArrowStyle, ...{ opacity: !hasNextBottom ? 0.5 : 1 }, ...{ cursor: !hasNextBottom ? 'not-allowed' : 'pointer' } }}>
+            {bottomArrowImage}
+        </button>
+        </div>
+    );
+};
+
+CustomArrows.propTypes = {
+    prevSlide: PropTypes.func,
+    nextSlide: PropTypes.func,
+    visible: PropTypes.bool,
+    overrideArrowStyle: PropTypes.object,
+    triggerNextSlide: PropTypes.number,
+    infinite: PropTypes.bool,
+    numSlides: PropTypes.number,
+    selectedIndex: PropTypes.number,
+    topArrowImage: PropTypes.node,
+    bottomArrowImage: PropTypes.node,
+    customArrowStyle: PropTypes.object
+};
+
+export default CustomArrows;

src/stories/CustomArrows.js

@@ -3,7 +3,7 @@
 import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import Carousel from '../index';
-import CustomArrow from './CustomArrow';
+import CustomArrows from './CustomArrows';
 import DownArrow from '../../test/images/test-down-arrow.svg';
 import UpArrow from '../../test/images/test-up-arrow.svg';
 
@@ -67,9 +67,9 @@ CustomDots.propTypes = {
 
 const testButtons = ['test1', 'test2', 'test3', 'test4'].map((item) => <button style={{ fontSize: '20px' }}>{item}</button>);
 
-export const verticalInfiniteWithCellPadding = () =>
+export const verticalInfiniteWithCellPaddingWithDotsAndDefaultArrows = () =>
     <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ true } arrows={ true }
-              dots={ false } isVertical={ true } >
+              dots={ true } isVertical={ true } >
       { imgElements }
     </Carousel>;
 
@@ -82,11 +82,8 @@ export const verticalNonInfiniteWithCellPaddingWithDefaultArrows = () =>
 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/> }
+      component: CustomArrows,
+      props: { overrideArrowStyle: { border: 'none', background: 'none' }, topArrowImage: <UpArrow/>, bottomArrowImage: <DownArrow/> }
     }] }>
       { testButtons }
     </Carousel>;

src/stories/index.stories.js

@@ -5,7 +5,7 @@ import chai, { expect } from 'chai';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
 import Carousel from '../../src/index';
-import CustomArrow from '../../src/stories/CustomArrow';
+import CustomArrows from '../../src/stories/CustomArrows';
 import UpArrow from '../images/test-up-arrow.svg';
 import DownArrow from '../images/test-down-arrow.svg';
 
@@ -480,18 +480,15 @@ describe('Carousel', () => {
                   isVertical={ true }
                   arrows={ false }
                   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/> }
+                    component: CustomArrows,
+                    props: { overrideArrowStyle: { border: 'none', background: 'none' }, topArrowImage: <UpArrow/>, bottomArrowImage: <DownArrow/> }
                   }] }>
           <div id='slide1' />
           <div id='slide2' />
           <div id='slide3' />
         </Carousel>);
 
-    const controlComponent = tree.find('.control-div');
+    const controlComponent = tree.find('.custom-arrows-div');
     expect(controlComponent.childAt(0).html()).to.eql('<button class="carousel-custom-arrow" disabled="" style="background: none; opacity: 0.5; cursor: not-allowed;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="m0 16.67 2.829 2.83 9.175-9.339 9.167 9.339L24 16.67 12.004 4.5z"></path></svg></button>');
     expect(controlComponent.childAt(1).html()).to.eql('<button class="carousel-custom-arrow" style="background: none; opacity: 1; cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M0 7.33 2.829 4.5l9.175 9.339L21.171 4.5 24 7.33 12.004 19.5z"></path></svg></button>');