Merge pull request #142 from sag1v/deps-and-ts

resolve #140 and #138

Author: sag1v

package.json

@@ -37,8 +37,8 @@
   },
   "peerDependencies": {
     "prop-types": "^15.5.4",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0",
+    "react": "^15.0.0 || ^17.0.0",
+    "react-dom": "^15.0.0 || ^17.0.0",
     "styled-components": "^5.1.0"
   },
   "devDependencies": {

src/react-elastic-carousel/components/Carousel.js

@@ -737,6 +737,7 @@ class Carousel extends React.Component {
       className,
       style,
       itemsToShow,
+      itemsToScroll,
       verticalMode,
       isRTL,
       easing,
@@ -816,6 +817,7 @@ class Carousel extends React.Component {
                 currentItem={activeIndex}
                 autoTabIndexVisibleItems={autoTabIndexVisibleItems}
                 itemsToShow={itemsToShow}
+                itemsToScroll={itemsToScroll}
                 itemPosition={itemPosition}
                 itemPadding={itemPadding}
                 enableSwipe={enableSwipe}

src/react-elastic-carousel/components/Track.js

@@ -12,6 +12,7 @@ const Track = ({
   enableMouseSwipe,
   preventDefaultTouchmoveEvent,
   itemsToShow,
+  itemsToScroll,
   currentItem,
   itemPosition,
   itemPadding,
@@ -22,17 +23,31 @@ const Track = ({
 }) => {
   const width = `${childWidth}px`;
   const paddingStyle = `${itemPadding.join("px ")}px`;
+  const minVisibleItem = currentItem;
+  const maxVisibleItem = currentItem + itemsToShow;
+  const prevItem = minVisibleItem - itemsToScroll;
+  const nextItem = maxVisibleItem + itemsToScroll;
+
   const originalChildren = React.Children.map(children, (child, idx) => {
-    const min = currentItem;
-    const max = currentItem + itemsToShow;
-    const isVisible = idx >= min && idx < max;
+    const isVisible = idx >= minVisibleItem && idx < maxVisibleItem;
+    const isPrevItem = !isVisible && idx >= prevItem && idx < currentItem;
+    const isNextItem = !isVisible && idx < nextItem && idx > currentItem;
+    const itemClass = "carousel-item";
+
     const childToRender = autoTabIndexVisibleItems
-      ? React.cloneElement(child, { tabIndex: isVisible ? 0 : -1 })
+      ? React.cloneElement(child, {
+          tabIndex: isVisible ? 0 : -1
+        })
       : child;
     return (
       <div
-        className={cssPrefix("carousel-item", `carousel-item-${idx}`)}
-        // tabIndex={isVisible ? 0 : -1}
+        className={cssPrefix(
+          itemClass,
+          `${itemClass}-${idx}`,
+          `${itemClass}-${isVisible ? "visible" : "hidden"}`,
+          isPrevItem && `${itemClass}-prev`,
+          isNextItem && `${itemClass}-next`
+        )}
       >
         <ItemWrapperContainer
           id={idx}

src/react-elastic-carousel/index.d.ts

@@ -31,6 +31,8 @@ export interface ReactElasticCarouselProps {
   itemsToShow?: number;
   // Defaults to false
   verticalMode?: boolean;
+  // Defaults to false
+  isRTL: boolean,
   // Defaults to true
   pagination?: boolean;
   // Defaults to 500

src/react-elastic-carousel/utils/helpers.js

@@ -9,7 +9,9 @@ export const cssPrefix = (...classNames) => {
 
   // in case of an array we add the class prefix per item;
   const chainedClasses = classNames.reduce((acc, current) => {
-    acc += `${space}${prefix}-${current}`; // we must keep spaces between class names
+    if (current) {
+      acc += `${space}${prefix}-${current}`; // we must keep spaces between class names
+    }
     return acc;
   }, "");
   result += chainedClasses;