react-img-carousel - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

.storybook/webpack.config.js

@@ -11,4 +11,18 @@ const path = require('path');
         },
+        {
+            test: /\.svg$/,
+            use: [
+                {
+                    loader: "babel-loader"
+                },
+                {
+                    loader: "react-svg-loader",
+                    options: {
+                        jsx: true // true outputs JSX tags
+                    }
+                }
+            ]
+        }
         ],
     },
 };

CHANGELOG.md

@@ -0,1 +1,5 @@
+# 2.3.0 - March 2023
+
+***(Feature)*** Add support for vertical carousal.
+
 # 2.2.0 - May 2022
@@ -2,0 +6,0 @@

lib/controls/arrow.js

@@ -27,3 +27,3 @@ "use strict";
       nextSlide: _propTypes.default.func.isRequired,
-      direction: _propTypes.default.oneOf(['left', 'right']).isRequired,
+      direction: _propTypes.default.oneOf(['left', 'right', 'top', 'bottom']).isRequired,
       arrows: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
@@ -48,3 +48,3 @@ left: _propTypes.default.node.isRequired,
     } = this.props;
-    return infinite || (direction === 'left' ? selectedIndex > 0 : selectedIndex < numSlides - 1);
+    return infinite || (['top', 'left'].includes(direction) ? selectedIndex > 0 : selectedIndex < numSlides - 1);
   }
@@ -70,3 +70,3 @@
       disabled: !this.hasNext(),
-      onClick: direction === 'left' ? prevSlide : nextSlide,
+      onClick: ['top', 'left'].includes(direction) ? prevSlide : nextSlide,
       className: `carousel-arrow carousel-${direction}-arrow ${buttonClass}`
@@ -73,0 +73,0 @@ }, arrowComponent);

lib/index.js

@@ -92,3 +92,4 @@ "use strict";
       }),
-      dir: _propTypes.default.oneOf(['ltr', 'rtl'])
+      dir: _propTypes.default.oneOf(['ltr', 'rtl']),
+      isVertical: _propTypes.default.bool
     };
@@ -122,3 +123,4 @@ }
       style: {},
-      dir: 'ltr'
+      dir: 'ltr',
+      isVertical: false
     };
@@ -252,3 +254,6 @@ }
       } = this.state;
-      const viewportWidth = this._viewport && this._viewport.offsetWidth;
+      const {
+        isVertical
+      } = this.props;
+      const viewportWidth = this._viewport && (isVertical ? this._viewport.offsetHeight : this._viewport.offsetWidth);
       clearTimeout(this._retryTimer);
@@ -292,3 +297,3 @@
         isCurrentSlideLoading = selectedSlide.className.indexOf(LOADING_CLASS) !== -1;
-        currentSlideWidth = selectedSlide.offsetWidth;
+        currentSlideWidth = isVertical ? selectedSlide.offsetHeight : selectedSlide.offsetWidth;
         foundZeroWidthSlide = foundZeroWidthSlide || !currentSlideWidth && !isCurrentSlideLoading;
@@ -708,3 +713,4 @@
       dots,
-      controls
+      controls,
+      isVertical
     } = this.props;
@@ -720,12 +726,24 @@ let arr = controls.slice(0);
     if (arrows) {
-      arr = arr.concat([{
-        component: _controls.Arrow,
-        props: {
-          direction: 'left'
-        }
-      }, {
-        component: _controls.Arrow,
-        props: {
-          direction: 'right'
-        }
+      arr = arr.concat([{ ...(isVertical ? {
+          component: _controls.Arrow,
+          props: {
+            direction: 'top'
+          }
+        } : {
+          component: _controls.Arrow,
+          props: {
+            direction: 'left'
+          }
+        })
+      }, { ...(isVertical ? {
+          component: _controls.Arrow,
+          props: {
+            direction: 'bottom'
+          }
+        } : {
+          component: _controls.Arrow,
+          props: {
+            direction: 'right'
+          }
+        })
       }]);
@@ -759,3 +777,4 @@ }
       arrows,
-      dir
+      dir,
+      isVertical
     } = this.props;
@@ -782,3 +801,6 @@ const {
       height,
-      marginBottom: dots ? '20px' : 0
+      marginBottom: dots ? '20px' : 0,
+      ...(isVertical && {
+        display: 'flex'
+      })
     };
@@ -796,3 +818,8 @@ const viewportStyle = { ...(style.viewport || {}),
       trackStyle = { ...trackStyle,
-        transform: `translateX(${isRTL ? -leftPos : leftPos}px)`,
+        ...(isVertical && {
+          transform: `translateY(${isRTL ? -leftPos : leftPos}px)`
+        }),
+        ...(!isVertical && {
+          transform: `translateX(${isRTL ? -leftPos : leftPos}px)`
+        }),
         transition: transitionDuration ? `transform ${(0, _ms.default)('' + transitionDuration)}ms ${easing}` : 'none'
@@ -834,3 +861,8 @@ };
       className: "carousel-track",
-      style: trackStyle,
+      style: { ...trackStyle,
+        ...(isVertical && {
+          display: 'flex',
+          flexDirection: 'column'
+        })
+      },
       ref: t => {
@@ -876,3 +908,4 @@ this._track = t;
       easing,
-      lazyLoad
+      lazyLoad,
+      isVertical
     } = this.props;
@@ -893,4 +926,8 @@ const {
       });
-      let slideStyle = {
-        marginLeft: `${cellPadding}px`,
+      let slideStyle = { ...(!isVertical && {
+          marginLeft: `${cellPadding}px`
+        }),
+        ...(isVertical && {
+          marginTop: `${cellPadding}px`
+        }),
         height: slideHeight,
@@ -897,0 +934,0 @@ width: slideWidth

lib/stories/index.stories.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.rtl = exports.rightAlignedSlides = exports.leftAlignedSlides = exports.addImages = exports.customDotsComponent = exports.backgroundImagesWithFade = exports.autoplayWithBackgroundImages = exports.infiniteWithOnly1Slide = exports.infiniteWithOnly2Slides = exports.fadeTransition = exports.nonInfiniteWithCellPadding = exports.infiniteWithCellPadding = exports.default = void 0;
+exports.rtl = exports.rightAlignedSlides = exports.leftAlignedSlides = exports.addImages = exports.customDotsComponent = exports.backgroundImagesWithFade = exports.autoplayWithBackgroundImages = exports.infiniteWithOnly1Slide = exports.infiniteWithOnly2Slides = exports.fadeTransition = exports.nonInfiniteWithCellPadding = exports.infiniteWithCellPadding = exports.verticalNonInfiniteButtonsWithCellPaddingWithCustomArrows = exports.verticalNonInfiniteWithCellPaddingWithDefaultArrows = exports.verticalInfiniteWithCellPaddingWithDotsAndDefaultArrows = exports.default = void 0;
 
@@ -19,2 +19,31 @@ var _react = _interopRequireWildcard(require("react"));
 
+var _CustomArrows = _interopRequireDefault(require("./CustomArrows"));
+
+/* eslint-disable react/jsx-key */
+
+/* eslint-disable id-length */
+var DownArrow = function DownArrow(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M0 7.33 2.829 4.5l9.175 9.339L21.171 4.5 24 7.33 12.004 19.5z"
+  }));
+};
+
+DownArrow.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24"
+};
+
+var UpArrow = function UpArrow(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "m0 16.67 2.829 2.83 9.175-9.339 9.167 9.339L24 16.67 12.004 4.5z"
+  }));
+};
+
+UpArrow.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24"
+};
+
 require('../carousel.less');
@@ -86,3 +115,58 @@
 };
+const testButtons = ['test1', 'test2', 'test3', 'test4'].map(item => /*#__PURE__*/_react.default.createElement("button", {
+  style: {
+    fontSize: '20px'
+  }
+}, item));
 
+const verticalInfiniteWithCellPaddingWithDotsAndDefaultArrows = () => /*#__PURE__*/_react.default.createElement(_index.default, {
+  height: "450px",
+  width: "450px",
+  cellPadding: 5,
+  infinite: true,
+  arrows: true,
+  dots: true,
+  isVertical: true
+}, imgElements);
+
+exports.verticalInfiniteWithCellPaddingWithDotsAndDefaultArrows = verticalInfiniteWithCellPaddingWithDotsAndDefaultArrows;
+
+const verticalNonInfiniteWithCellPaddingWithDefaultArrows = () => /*#__PURE__*/_react.default.createElement(_index.default, {
+  height: "450px",
+  width: "450px",
+  cellPadding: 5,
+  infinite: false,
+  arrows: true,
+  dots: false,
+  isVertical: true
+}, imgElements);
+
+exports.verticalNonInfiniteWithCellPaddingWithDefaultArrows = verticalNonInfiniteWithCellPaddingWithDefaultArrows;
+
+const verticalNonInfiniteButtonsWithCellPaddingWithCustomArrows = () => /*#__PURE__*/_react.default.createElement(_index.default, {
+  height: "450px",
+  width: "450px",
+  cellPadding: 5,
+  infinite: false,
+  arrows: false,
+  dots: false,
+  isVertical: true,
+  controls: [{
+    component: _CustomArrows.default,
+    props: {
+      overrideArrowStyle: {
+        border: 'none',
+        background: 'none'
+      },
+      topArrowImage: /*#__PURE__*/_react.default.createElement(UpArrow, null),
+      bottomArrowImage: /*#__PURE__*/_react.default.createElement(DownArrow, null),
+      arrowDivStyle: {
+        transform: 'translate(-450px, 196px)'
+      }
+    }
+  }]
+}, testButtons);
+
+exports.verticalNonInfiniteButtonsWithCellPaddingWithCustomArrows = verticalNonInfiniteButtonsWithCellPaddingWithCustomArrows;
+
 const infiniteWithCellPadding = () => /*#__PURE__*/_react.default.createElement(_index.default, {
@@ -89,0 +173,0 @@ width: "450px",

package.json

 {
   "name": "react-img-carousel",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Provides an image carousel React component.",
@@ -53,2 +53,3 @@ "main": "lib/index.js",
     "babel-loader": "^8.0.0",
+    "babel-plugin-inline-react-svg": "^2.0.2",
     "chai": "^4.2.0",
@@ -73,2 +74,3 @@ "css-loader": "^0.28.11",
     "react-dom": "^16.9.0",
+    "react-svg-loader": "^3.0.3",
     "rimraf": "^3.0.2",
@@ -75,0 +77,0 @@ "setup-env": "^1.2.3",

README.md

@@ -227,2 +227,9 @@ # react-img-carousel
 
+#### isVertical
+```
+PropTypes.bool
+```
+
+Defaults to `false`. Setting `isVertical` to `true` will render vertical carousal.
+
 Tests:
@@ -229,0 +236,0 @@ ----------------

src/controls/arrow.js

@@ -16,3 +16,3 @@ import React, { Component } from 'react';
       nextSlide: PropTypes.func.isRequired,
-      direction: PropTypes.oneOf(['left', 'right']).isRequired,
+      direction: PropTypes.oneOf(['left', 'right', 'top', 'bottom']).isRequired,
       arrows: PropTypes.oneOfType([
@@ -35,3 +35,3 @@ PropTypes.bool,
 
-    return infinite || (direction === 'left' ? selectedIndex > 0 : selectedIndex < numSlides - 1);
+    return infinite || (['top', 'left'].includes(direction) ? selectedIndex > 0 : selectedIndex < numSlides - 1);
   }
@@ -53,3 +53,3 @@
         disabled={ !this.hasNext() }
-        onClick={ direction === 'left' ? prevSlide : nextSlide }
+        onClick={ ['top', 'left'].includes(direction) ? prevSlide : nextSlide }
         className={ `carousel-arrow carousel-${direction}-arrow ${buttonClass}` }>
@@ -56,0 +56,0 @@ { arrowComponent }

src/index.js

@@ -81,3 +81,4 @@ /* eslint
       }),
-      dir: PropTypes.oneOf(['ltr', 'rtl'])
+      dir: PropTypes.oneOf(['ltr', 'rtl']),
+      isVertical: PropTypes.bool
     };
@@ -111,3 +112,4 @@ }
       style: {},
-      dir: 'ltr'
+      dir: 'ltr',
+      isVertical: false
     };
@@ -405,3 +407,3 @@ }
   getControls() {
-    const { arrows, dots, controls } = this.props;
+    const { arrows, dots, controls, isVertical } = this.props;
     let arr = controls.slice(0);
@@ -415,4 +417,4 @@
       arr = arr.concat([
-        { component: Arrow, props: { direction: 'left' } },
-        { component: Arrow, props: { direction: 'right' } }
+        { ...isVertical ? { component: Arrow, props: { direction: 'top' } } : { component: Arrow, props: { direction: 'left' } } },
+        { ...isVertical ? { component: Arrow, props: { direction: 'bottom' } } : { component: Arrow, props: { direction: 'right' } } }
       ]);
@@ -431,3 +433,3 @@ }
     const { className, viewportWidth, viewportHeight, width, height, dots, infinite,
-      children, slideHeight, transition, style, draggable, easing, arrows, dir } = this.props;
+      children, slideHeight, transition, style, draggable, easing, arrows, dir, isVertical } = this.props;
     const { loading, transitionDuration, dragOffset, currentSlide, leftOffset } = this.state;
@@ -445,3 +447,4 @@ const numSlides = Children.count(children);
       height,
-      marginBottom: dots ? '20px' : 0
+      marginBottom: dots ? '20px' : 0,
+      ...isVertical && { display: 'flex' }
     };
@@ -457,9 +460,12 @@ const viewportStyle = { ...(style.viewport || {}),
       trackStyle = { ...trackStyle,
-        transform: `translateX(${isRTL ? -leftPos : leftPos}px)`,
+        ...isVertical && { transform: `translateY(${isRTL ? -leftPos : leftPos}px)` },
+        ...!isVertical && { transform: `translateX(${isRTL ? -leftPos : leftPos}px)` },
         transition: transitionDuration ? `transform ${ms('' + transitionDuration)}ms ${easing}` : 'none'
       };
     }
+
     if (!draggable) {
       trackStyle.touchAction = 'auto';
     }
+
     const controls = this.getControls();
@@ -488,3 +494,3 @@
               className='carousel-track'
-              style={ trackStyle }
+              style={{ ...trackStyle, ...isVertical && { display: 'flex', flexDirection: 'column' } }}
               ref={ t => { this._track = t; } }
@@ -514,3 +520,3 @@ onTransitionEnd={ this.slideTransitionEnd }
                 arrows={ arrows }
-                infinite={ infinite } />
+                infinite={ infinite }/>
             ))
@@ -530,3 +536,3 @@ }
     const { children, infinite, cellPadding, slideWidth, slideHeight, transition, transitionDuration,
-      style, easing, lazyLoad } = this.props;
+      style, easing, lazyLoad, isVertical } = this.props;
     const { slideDimensions, currentSlide, loadedImages } = this.state;
@@ -545,3 +551,4 @@ this._allImagesLoaded = true;
       let slideStyle = {
-        marginLeft: `${cellPadding}px`,
+        ...!isVertical && { marginLeft: `${cellPadding}px` },
+        ...isVertical && { marginTop: `${cellPadding}px` },
         height: slideHeight,
@@ -702,3 +709,4 @@ width: slideWidth
     const { direction, loading } = this.state;
-    const viewportWidth = this._viewport && this._viewport.offsetWidth;
+    const { isVertical } = this.props;
+    const viewportWidth = this._viewport && (isVertical ? this._viewport.offsetHeight : this._viewport.offsetWidth);
 
@@ -734,3 +742,3 @@ clearTimeout(this._retryTimer);
       isCurrentSlideLoading = selectedSlide.className.indexOf(LOADING_CLASS) !== -1;
-      currentSlideWidth = selectedSlide.offsetWidth;
+      currentSlideWidth = isVertical ? selectedSlide.offsetHeight : selectedSlide.offsetWidth;
       foundZeroWidthSlide = foundZeroWidthSlide || (!currentSlideWidth && !isCurrentSlideLoading);
@@ -737,0 +745,0 @@ if (parseInt(selectedSlide.getAttribute('data-index'), 10) === currentSlide) {

src/stories/index.stories.js

@@ -0,4 +1,9 @@
+/* eslint-disable react/jsx-key */
+/* eslint-disable id-length */
 import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import Carousel from '../index';
+import CustomArrows from './CustomArrows';
+import DownArrow from '../../test/images/test-down-arrow.svg';
+import UpArrow from '../../test/images/test-up-arrow.svg';
 
@@ -63,2 +68,25 @@ require('../carousel.less');
 
+const testButtons = ['test1', 'test2', 'test3', 'test4'].map((item) => <button style={{ fontSize: '20px' }}>{item}</button>);
+
+export const verticalInfiniteWithCellPaddingWithDotsAndDefaultArrows = () =>
+    <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ true } arrows={ true }
+              dots={ true } isVertical={ true } >
+      { imgElements }
+    </Carousel>;
+
+export const verticalNonInfiniteWithCellPaddingWithDefaultArrows = () =>
+    <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ false } arrows={ true }
+              dots={ false } isVertical={ true }  >
+      { imgElements }
+    </Carousel>;
+
+export const verticalNonInfiniteButtonsWithCellPaddingWithCustomArrows = () =>
+    <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ false } arrows={ false }
+              dots={ false } isVertical={ true } controls={ [{
+      component: CustomArrows,
+      props: { overrideArrowStyle: { border: 'none', background: 'none' }, topArrowImage: <UpArrow/>, bottomArrowImage: <DownArrow/>, arrowDivStyle: { transform: 'translate(-450px, 196px)' } }
+    }] }>
+      { testButtons }
+    </Carousel>;
+
 export const infiniteWithCellPadding = () =>
@@ -65,0 +93,0 @@ <Carousel width='450px' cellPadding={ 5 }>

test/unit/carousel.tests.js

@@ -8,4 +8,6 @@ /* eslint max-statements: 0, jsx-a11y/alt-text: 0 */
 import Carousel from '../../src/index';
+import CustomArrows from '../../src/stories/CustomArrows';
+import UpArrow from '../images/test-up-arrow.svg';
+import DownArrow from '../images/test-down-arrow.svg';
 
-
 chai.use(sinonChai);
@@ -451,2 +453,47 @@ let imagesFetched;
 
+  it('should render vertical carousal with default arrows.', () => {
+    renderToJsdom(
+        <Carousel slideWidth='300px'
+                  viewportWidth='300px'
+                  lazyLoad={ false }
+                  infinite={ false }
+                  isVertical={ true }>
+          <div id='slide1' />
+          <div id='slide2' />
+          <div id='slide3' />
+        </Carousel>);
+    const topArrow = tree.find('.carousel-top-arrow');
+    const bottomArrow = tree.find('.carousel-bottom-arrow');
+    const carousalDiv = tree.find('.carousel-container-inner');
+
+    expect(carousalDiv.prop('style').display).to.eql('flex');
+    expect(topArrow.length).to.eql(1);
+    expect(topArrow.html()).to.eql('<button type="button" disabled="" class="carousel-arrow carousel-top-arrow carousel-arrow-default"></button>');
+    expect(bottomArrow.length).to.eql(1);
+    expect(bottomArrow.html()).to.eql('<button type="button" class="carousel-arrow carousel-bottom-arrow carousel-arrow-default"></button>');
+  });
+
+  it('should render vertical carousal with custom arrows.', () => {
+    renderToJsdom(
+        <Carousel slideWidth='300px'
+                  viewportWidth='300px'
+                  lazyLoad={ false }
+                  infinite={ false }
+                  isVertical={ true }
+                  arrows={ false }
+                  controls={ [{
+                    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('.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>');
+
+  });
+
   it('should have transitions with the given duration and easing', done => {
@@ -453,0 +500,0 @@ let slidingCarousel;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

141894

increased by11.4%

Number of package files

35

increased by16.67%

Lines of code

3655

increased by10.06%

Number of lines in readme file

240

increased by3%

Worsened metrics

Dev dependency count

36

increased by5.88%

No dependency changes