fix(arrow-left-right): left and right arrows are disabled instead of …

…being hidden. left arrow is disabled in the 0th index and right arrow is disabled in the nth - 1 index
brainhubeu · Dec 10, 2019 · 7ab5693 · 7ab5693
1 parent 19ec4c0
commit 7ab5693
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -606,6 +606,7 @@ export default class Carousel extends Component {
    * @return {ReactElement} element
    */
   renderArrowLeft = () => {
+    const { value } = this.props;
     if (this.getProp('arrowLeft')) {
       return this.renderArrowWithAddedHandler(this.getProp('arrowLeft'), this.prevSlide, 'arrowLeft');
     }
@@ -615,6 +616,7 @@ export default class Carousel extends Component {
           className="BrainhubCarousel__arrows BrainhubCarousel__arrowLeft"
           onClick={this.prevSlide}
           ref={el => this.arrowLeftNode = el}
+          disabled={value <= 0}
         >
           <span>prev</span>
         </button>
@@ -628,6 +630,9 @@ export default class Carousel extends Component {
    * @return {ReactElement} element
    */
   renderArrowRight = () => {
+    const { value, children, slides } = this.props;
+    const lastSlideIndex = slides ? slides.length - 1 : React.Children.count(children) - 1;
+
     if (this.getProp('arrowRight')) {
       return this.renderArrowWithAddedHandler(this.getProp('arrowRight'), this.nextSlide, 'arrowRight');
     }
@@ -637,6 +642,7 @@ export default class Carousel extends Component {
           className="BrainhubCarousel__arrows BrainhubCarousel__arrowRight"
           onClick={this.nextSlide}
           ref={el => this.arrowRightNode = el}
+          disabled={value === lastSlideIndex}
         >
           <span>next</span>
         </button>
@@ -653,17 +659,14 @@ export default class Carousel extends Component {
   }
 
   render() {
-    const { value, children, slides } = this.props;
-    const lastSlideIndex = slides ? slides.length - 1 : React.Children.count(children) - 1;
-
     return (
       <div
         className={classnames('BrainhubCarousel', this.getProp('className'))}
         ref={el => this.node = el}
       >
-        {value > 0 && this.renderArrowLeft()}
+        {this.renderArrowLeft()}
         {this.renderCarouselItems()}
-        {value !== lastSlideIndex && this.renderArrowRight()}
+        {this.renderArrowRight()}
         {this.renderDots()}
       </div>
     );

diff --git a/src/styles/Arrows.scss b/src/styles/Arrows.scss
@@ -1,6 +1,7 @@
 $clickableAreaSize: 42px;
 $clickableAreaColor: #7b59ff;
 $clickableAreaColor__hover: lighten(#7b59ff, 3%);
+$disabledButtonColor: #cccccc;
 
 $arrowColor: #fff;
 $arrowColor__hover: #fff;
@@ -30,13 +31,16 @@ $arrowWeight: 3px;
         font-size: 0;
     }
 
-    &:hover {
+    &:hover:enabled {
         background-color: $clickableAreaColor__hover;
         span {
             border-color: $arrowColor__hover;
             margin: 0;
         }
     }
+    &:disabled {
+        background-color: $disabledButtonColor;
+    }
 }
 
 .BrainhubCarousel__arrowLeft {