react-multi-carousel - npm Package Compare versions

Comparing version 1.0.39 to 1.1.0

lib/Carousel.d.ts

 import * as React from "react";
+import "./styles.css";
 import { CarouselInternalState, CarouselProps } from "./types";
@@ -28,6 +29,8 @@ declare class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
     handleEnter(): void;
+    goToSlide(slide: number): void;
     renderLeftArrow(): React.ReactElement<any>;
     renderRightArrow(): React.ReactElement<any>;
+    renderDotsList(): JSX.Element;
     render(): React.ReactNode;
 }
 export default Carousel;

lib/Carousel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const style_1 = require("./style");
+require("./styles.css");
 const utils_1 = require("./utils");
@@ -259,2 +259,9 @@ const defaultTransitionDuration = 300;
     }
+    goToSlide(slide) {
+        const { itemWidth } = this.state;
+        this.setState({
+            currentSlide: slide,
+            transform: -(itemWidth * slide)
+        });
+    }
     renderLeftArrow() {
@@ -268,5 +275,3 @@ const { customLeftArrow } = this.props;
         else {
-            return (React.createElement("i", { 
-                // @ts-ignore
-                style: style_1.leftArrowStyle, onClick: () => this.previous() }));
+            return (React.createElement("button", { className: "react-multiple-carousel__arrow react-multiple-carousel__arrow--left", onClick: () => this.previous() }));
         }
@@ -282,7 +287,15 @@ }
         else {
-            return (React.createElement("i", { 
-                // @ts-ignore
-                style: style_1.rightArrowStyle, onClick: () => this.next() }));
+            return (React.createElement("button", { className: "react-multiple-carousel__arrow react-multiple-carousel__arrow--right", onClick: () => this.next() }));
         }
     }
+    renderDotsList() {
+        return (React.createElement("ul", { className: "react-multi-carousel-dot-list" }, Array(this.state.totalItems)
+            .fill(0)
+            .map((item, index) => {
+            return (React.createElement("li", { className: `react-multi-carousel-dot ${this.state.currentSlide === index
+                    ? "react-multi-carousel-dot--active"
+                    : ""}` },
+                React.createElement("button", { onClick: () => this.goToSlide(index) })));
+        })));
+    }
     render() {
@@ -307,8 +320,12 @@ const { domLoaded, slidesToShow, containerWidth, itemWidth } = this.state;
         const disableRightArrow = !infinite && isRightEndReach;
-        return (React.createElement("div", { className: containerClassName, ref: this.containerRef, style: style_1.containerStyle },
-            React.createElement("ul", { className: contentClassName, 
+        return (React.createElement("div", { className: `react-multi-carousel-list ${containerClassName}`, ref: this.containerRef },
+            React.createElement("ul", { className: `react-multi-carousel-track ${contentClassName}`, 
                 // @ts-ignore
-                style: Object.assign({}, style_1.contentStyle, { listStyle: "none", padding: 0, margin: 0, transition: this.isAnimationAllowed
+                style: {
+                    transition: this.isAnimationAllowed
                         ? customTransition || defaultTransition
-                        : "none", overflow: shouldRenderOnSSR ? "hidden" : "unset", transform: `translate3d(${this.state.transform}px,0,0)` }), onMouseMove: this.handleMove, onMouseDown: this.handleDown, onMouseUp: this.handleOut, onMouseEnter: this.handleEnter, onMouseLeave: this.handleOut, onTouchStart: this.handleDown, onTouchMove: this.handleMove, onTouchEnd: this.handleOut }, React.Children.toArray(children).map((child, index) => (React.createElement("li", { key: index, style: {
+                        : "none",
+                    overflow: shouldRenderOnSSR ? "hidden" : "unset",
+                    transform: `translate3d(${this.state.transform}px,0,0)`
+                }, onMouseMove: this.handleMove, onMouseDown: this.handleDown, onMouseUp: this.handleOut, onMouseEnter: this.handleEnter, onMouseLeave: this.handleOut, onTouchStart: this.handleDown, onTouchMove: this.handleMove, onTouchEnd: this.handleOut }, React.Children.toArray(children).map((child, index) => (React.createElement("li", { key: index, style: {
                     flex: shouldRenderOnSSR ? `1 0 ${flexBisis}%` : "auto",
@@ -318,3 +335,4 @@ width: domFullyLoaded ? `${itemWidth}px` : "auto"
             shouldShowArrows && !disableLeftArrow && this.renderLeftArrow(),
-            shouldShowArrows && !disableRightArrow && this.renderRightArrow()));
+            shouldShowArrows && !disableRightArrow && this.renderRightArrow(),
+            this.props.shouldShowDots && this.renderDotsList()));
     }
@@ -329,5 +347,6 @@ }
     keyBoardControl: true,
-    autoPlaySpeed: 3000
+    autoPlaySpeed: 3000,
+    shouldShowDots: false
 };
 exports.default = Carousel;
 //# sourceMappingURL=Carousel.js.map

lib/types.d.ts

@@ -30,2 +30,3 @@ /// <reference types="react" />
     autoPlaySpeed?: number;
+    shouldShowDots?: boolean;
     customTransition?: string;
@@ -32,0 +33,0 @@ transitionDuration?: number;

package.json

 {
   "name": "react-multi-carousel",
-  "version": "1.0.39",
+  "version": "1.1.0",
   "description": "",
@@ -76,2 +76,3 @@ "main": "index.js",
     "react-dom": "^16.8.3",
+    "react-ga": "^2.5.7",
     "storybook-addon-jsx": "^6.0.0",
@@ -78,0 +79,0 @@ "ts-jest": "^24.0.0",

README.md

@@ -26,2 +26,5 @@ # react-multi-carousel
 $ npm install react-multi-carousel --save
+
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
 ```
@@ -80,2 +83,3 @@
   disableDrag
+  shouldShowDots={true}
   responsive={responsive}
@@ -82,0 +86,0 @@ forSSR

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48713

increased by21.22%

Lines of code

561

increased by8.51%

Number of lines in readme file

149

increased by2.76%

Worsened metrics

Dev dependency count

25

increased by4.17%

Number of package files

19

decreased by-5%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes