refactor(Carousel): Update Carousel from legacy context

kyle-brygga-io · Oct 27, 2021 · 1c6db58 · 1c6db58
1 parent 51ae792
commit 1c6db58
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/src/Carousel.js b/src/Carousel.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import CarouselItem from './CarouselItem';
+import { CarouselContext } from './CarouselContext';
 import { mapToCssModules } from './utils';
 
 const SWIPE_THRESHOLD = 40;
@@ -24,7 +25,7 @@ class Carousel extends React.Component {
     };
   }
 
-  getChildContext() {
+  getContextValue() {
     return { direction: this.state.direction };
   }
 
@@ -188,7 +189,9 @@ class Carousel extends React.Component {
     if (slidesOnly) {
       return (
         <div className={outerClasses} onMouseEnter={this.hoverStart} onMouseLeave={this.hoverEnd}>
-          {this.renderItems(children, innerClasses)}
+          <CarouselContext.Provider value={this.getContextValue()}>
+            {this.renderItems(children, innerClasses)}
+          </CarouselContext.Provider>
         </div>
       );
     }
@@ -201,9 +204,11 @@ class Carousel extends React.Component {
 
       return (
         <div className={outerClasses} onMouseEnter={this.hoverStart} onMouseLeave={this.hoverEnd}>
-          {this.renderItems(carouselItems, innerClasses)}
-          {controlLeft}
-          {controlRight}
+          <CarouselContext.Provider value={this.getContextValue()}>
+            {this.renderItems(carouselItems, innerClasses)}
+            {controlLeft}
+            {controlRight}
+          </CarouselContext.Provider>
         </div>
       );
     }
@@ -223,10 +228,12 @@ class Carousel extends React.Component {
     return (
       <div className={outerClasses} onMouseEnter={this.hoverStart} onMouseLeave={this.hoverEnd}
         onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd}>
-        {wrappedIndicators}
-        {this.renderItems(carouselItems, innerClasses)}
-        {controlLeft}
-        {controlRight}
+        <CarouselContext.Provider value={this.getContextValue()}>
+          {wrappedIndicators}
+          {this.renderItems(carouselItems, innerClasses)}
+          {controlLeft}
+          {controlRight}
+        </CarouselContext.Provider>
       </div>
     );
   }

diff --git a/src/CarouselContext.js b/src/CarouselContext.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+/**
+ * CarouselContext
+ * {
+ *  direction: PropTypes.oneOf(['start', 'end']).isRequired,
+ * }
+ */
+export const CarouselContext = React.createContext({});