react-responsive-carousel - npm Package Compare versions

Comparing version 3.1.7 to 3.1.8

.storybook/config.js

@@ -1,2 +0,3 @@
-import { configure } from '@kadira/storybook';
+import { configure, setAddon } from '@kadira/storybook';
+import infoAddon from '@kadira/react-storybook-addon-info';
 
@@ -8,2 +9,3 @@ function loadStories() {
 
-configure(loadStories, module);
+setAddon(infoAddon);
+configure(loadStories, module);

lib/components/Carousel.js

@@ -5,6 +5,6 @@ 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 var React = require('react');
 var ReactDOM = require('react-dom');
+var PropTypes = require('prop-types');
+var CreateReactClass = require('create-react-class');
 var klass = require('../cssClasses');
@@ -15,2 +15,3 @@ var merge = require('../object-assign');
 var Thumbs = require('./Thumbs');
+var customPropTypes = require('../customPropTypes');
 
@@ -20,25 +21,25 @@ // react-swipe was compiled using babel
 
-module.exports = React.createClass({
-    displayName: 'Slider',
+module.exports = CreateReactClass({
+    displayName: 'Carousel',
     propTypes: {
-        children: React.PropTypes.node.isRequired,
-        showArrows: React.PropTypes.bool,
-        showStatus: React.PropTypes.bool,
-        showIndicators: React.PropTypes.bool,
-        infiniteLoop: React.PropTypes.bool,
-        showThumbs: React.PropTypes.bool,
-        selectedItem: React.PropTypes.number,
-        onClickItem: React.PropTypes.func,
-        onClickThumb: React.PropTypes.func,
-        onChange: React.PropTypes.func,
-        axis: React.PropTypes.oneOf(['horizontal', 'vertical']),
-        width: React.PropTypes.string,
-        useKeyboardArrows: React.PropTypes.bool,
-        autoPlay: React.PropTypes.bool,
-        stopOnHover: React.PropTypes.bool,
-        interval: React.PropTypes.number,
-        transitionTime: React.PropTypes.number,
-        swipeScrollTolerance: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
-        dynamicHeight: React.PropTypes.bool,
-        emulateTouch: React.PropTypes.bool
+        children: PropTypes.node.isRequired,
+        showArrows: PropTypes.bool,
+        showStatus: PropTypes.bool,
+        showIndicators: PropTypes.bool,
+        infiniteLoop: PropTypes.bool,
+        showThumbs: PropTypes.bool,
+        selectedItem: PropTypes.number,
+        onClickItem: PropTypes.func,
+        onClickThumb: PropTypes.func,
+        onChange: PropTypes.func,
+        axis: PropTypes.oneOf(['horizontal', 'vertical']),
+        width: customPropTypes.unit,
+        useKeyboardArrows: PropTypes.bool,
+        autoPlay: PropTypes.bool,
+        stopOnHover: PropTypes.bool,
+        interval: PropTypes.number,
+        transitionTime: PropTypes.number,
+        swipeScrollTolerance: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        dynamicHeight: PropTypes.bool,
+        emulateTouch: PropTypes.bool
     },
@@ -55,2 +56,3 @@
             axis: 'horizontal',
+            width: '100%',
             useKeyboardArrows: false,
@@ -112,3 +114,3 @@ autoPlay: false,
         if (this.props.stopOnHover) {
-            var carouselWrapper = ReactDOM.findDOMNode(this.carouselWrapper);
+            var carouselWrapper = this.refs['carouselWrapper'];
             carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
@@ -124,3 +126,3 @@ carouselWrapper.addEventListener('touchstart', this.stopOnHover);
         if (this.props.stopOnHover) {
-            var carouselWrapper = ReactDOM.findDOMNode(this.carouselWrapper);
+            var carouselWrapper = this.refs['carouselWrapper'];
             carouselWrapper.removeEventListener('mouseenter', this.stopOnHover);
@@ -189,3 +191,3 @@ carouselWrapper.removeEventListener('touchstart', this.stopOnHover);
         var isHorizontal = this.props.axis === 'horizontal';
-        var firstItem = ReactDOM.findDOMNode(this.item0);
+        var firstItem = this.refs.item0;
         var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;
@@ -255,3 +257,3 @@
 
-        var list = ReactDOM.findDOMNode(this.itemList);
+        var list = ReactDOM.findDOMNode(this.refs.itemList);
         var isHorizontal = this.props.axis === 'horizontal';
@@ -332,5 +334,3 @@
                 'li',
-                { ref: function ref(node) {
-                        return _this3["item" + index] = node;
-                    }, key: "itemKey" + index, className: itemClass,
+                { ref: "item" + index, key: "itemKey" + index, className: itemClass,
                     onClick: _this3.handleClickItem.bind(_this3, index, item) },
@@ -382,3 +382,4 @@ item
         var selectedItem = this.props.selectedItem;
-        var images = ReactDOM.findDOMNode(this['item' + selectedItem]).getElementsByTagName('img');
+        var item = this.refs['item' + selectedItem];
+        var images = item && item.getElementsByTagName('img');
         return images && images[selectedItem];
@@ -389,25 +390,19 @@ },
 
-        if (this.state.hasMount && this['item' + position].getElementsByTagName('img').length > 0) {
-            var _ret = function () {
-                var image = _this5['item' + position].getElementsByTagName('img')[0];
+        var item = this.refs['item' + position];
+        var images = item && item.getElementsByTagName('img');
+        if (this.state.hasMount && images.length > 0) {
+            var image = images[0];
 
-                if (!image.complete) {
-                    (function () {
-                        // if the image is still loading, the size won't be available so we trigger a new render after it's done
-                        var onImageLoad = function onImageLoad() {
-                            _this5.forceUpdate();
-                            image.removeEventListener('load', onImageLoad);
-                        };
+            if (!image.complete) {
+                // if the image is still loading, the size won't be available so we trigger a new render after it's done
+                var onImageLoad = function onImageLoad() {
+                    _this5.forceUpdate();
+                    image.removeEventListener('load', onImageLoad);
+                };
 
-                        image.addEventListener('load', onImageLoad);
-                    })();
-                }
+                image.addEventListener('load', onImageLoad);
+            }
 
-                var height = _this5['item' + position].getElementsByTagName('img')[0].clientHeight;
-                return {
-                    v: height > 0 ? height : null
-                };
-            }();
-
-            if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
+            var height = image.clientHeight;
+            return height > 0 ? height : null;
         }
@@ -418,4 +413,2 @@
     render: function render() {
-        var _this6 = this;
-
         var itemsLength = this.props.children.length;
@@ -467,5 +460,3 @@
             style: itemListStyles,
-            ref: function ref(node) {
-                return _this6.itemList = node;
-            }
+            ref: 'itemList'
         };
@@ -498,14 +489,10 @@
             'div',
-            { className: this.props.className, ref: function ref(node) {
-                    return _this6.carouselWrapper = node;
-                } },
+            { className: this.props.className, ref: 'carouselWrapper' },
             React.createElement(
                 'div',
-                { className: klass.CAROUSEL(true), style: { width: this.props.width || '100%' } },
+                { className: klass.CAROUSEL(true), style: { width: this.props.width } },
                 React.createElement('button', { type: 'button', className: klass.ARROW_PREV(!hasPrev), onClick: this.decrement }),
                 React.createElement(
                     'div',
-                    { className: klass.WRAPPER(true, this.props.axis), style: containerStyles, ref: function ref(node) {
-                            return _this6.itemsWrapper = node;
-                        } },
+                    { className: klass.WRAPPER(true, this.props.axis), style: containerStyles, ref: 'itemsWrapper' },
                     React.createElement(
@@ -512,0 +499,0 @@ Swipe,

lib/components/Thumbs.js

@@ -5,2 +5,4 @@ 'use strict';
 var ReactDOM = require('react-dom');
+var PropTypes = require('prop-types');
+var CreateReactClass = require('create-react-class');
 var klass = require('../cssClasses');
@@ -14,10 +16,8 @@ var outerWidth = require('../dimensions').outerWidth;
 
-module.exports = React.createClass({
-    displayName: 'exports',
+module.exports = CreateReactClass({
 
-
     propsTypes: {
-        children: React.PropTypes.element.isRequired,
-        transitionTime: React.PropTypes.number,
-        selectedItem: React.PropTypes.number
+        children: PropTypes.element.isRequired,
+        transitionTime: PropTypes.number,
+        selectedItem: PropTypes.number
     },
@@ -24,0 +24,0 @@

package.json

 {
   "name": "react-responsive-carousel",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "React Responsive Carousel",
@@ -31,3 +31,3 @@ "author": {
     "build": "babel ./src -d lib --ignore '__tests__' && gulp styles:package copy:package",
-    "prepublish-to-npm": "git pull && npm run build && git add . && git commit -m 'Prepare for publishing'",
+    "prepublish-to-npm": "git pull && npm run build && npm run changelog && git add . && git commit -m 'Prepare for publishing'",
     "publish-to-npm": "(git pull origin master && npm version patch && git push origin master && npm publish && git push --tags)",
@@ -37,3 +37,4 @@ "prepublish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp prepublish && npm run build-storybook",
     "storybook": "start-storybook -p 9001 -s ./src -c .storybook",
-    "build-storybook": "build-storybook -s ./src -o ./dist/storybook"
+    "build-storybook": "build-storybook -s ./src -o ./dist/storybook",
+    "changelog": "node ./generate-changelog.js"
   },
@@ -49,13 +50,17 @@ "repository": {
   "devDependencies": {
-    "@kadira/storybook": "^2.12.1",
-    "babel-cli": "^6.14.0",
-    "babel-core": "^6.14.0",
-    "babel-jest": "^14.1.0",
-    "babel-loader": "^6.2.5",
-    "babel-preset-es2015": "^6.14.0",
-    "babel-preset-react": "^6.11.1",
+    "@kadira/react-storybook-addon-info": "^3.4.0",
+    "@kadira/storybook": "^2.35.3",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-jest": "^19.0.0",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "babelify": "^7.3.0",
-    "browserify": "^12.0.1",
+    "browserify": "^14.3.0",
+    "changelog": "^1.0.7",
     "connect-modrewrite": "^0.9.0",
-    "css-loader": "^0.25.0",
+    "create-react-class": "^15.5.2",
+    "css-loader": "^0.28.0",
+    "enzyme": "^2.8.2",
     "gh-pages": "^0.11.0",
@@ -75,6 +80,6 @@ "gulp": "^3.8.9",
     "gulp-util": "^3.0.0",
-    "jest-cli": "^14.1.0",
-    "react": "^0.14.5",
-    "react-addons-test-utils": "^0.14.2",
-    "react-dom": "^0.14.2",
+    "jest-cli": "^19.0.2",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.5.4",
     "sass-loader": "^4.0.2",
@@ -92,4 +97,5 @@ "style-loader": "^0.13.1",
     "classnames": "^2.2.5",
-    "react-easy-swipe": "0.0.8"
+    "react-easy-swipe": "^0.0.10",
+    "prop-types": "^15.5.8"
   }
 }

stories/index.js

@@ -18,9 +18,9 @@ import React from 'react';
 const addChildren = (ammount = 1, options = {}) => {
-		let current = 0;
-		const children = [];
-		while ( current < ammount ) {
-			children.push(createCarouselItemImage(current, options));
-		}
+	let current = 0;
+	const children = [];
+	while ( current < ammount ) {
+		children.push(createCarouselItemImage(current, options));
+	}
 
-		return children
+	return children
 };
@@ -30,59 +30,74 @@
 
-storiesOf('Carousel', module)
-  .add('defaults', () => (
+storiesOf('Carousel')
+  .addWithInfo('PropTypes', () => <div/>,
+    { source: false, inline: true, propTables: [Carousel]})
+  .addWithInfo('defaults',() => (
     <Carousel>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('custom transition time (1000ms)', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('handlers',
+    <div>
+    <p>Handlers will be called with the index of the element plus the element. i.e:</p>
+
+    <code>
+        function myHandler(index, element)
+    </code>
+    </div>
+    ,() => (
+    <Carousel onClickThumb={action('click thumb')} onClickItem={action('click item')} onChange={action('change')}>
+        { baseChildren.props.children }
+    </Carousel>
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('custom transition time (1000ms)', () => (
     <Carousel transitionTime={1000}>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('emulate touch', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('emulate touch', () => (
     <Carousel emulateTouch>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('no arrows', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('no arrows', () => (
     <Carousel showArrows={false}>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('no arrows + infinite loop + auto play', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('no arrows + infinite loop + auto play', () => (
     <Carousel showArrows={false} infiniteLoop autoPlay>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('no arrows + infinite loop + emulateTouch', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('no arrows + infinite loop + emulateTouch', () => (
     <Carousel showArrows={false} infiniteLoop emulateTouch>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('no status', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('no status', () => (
     <Carousel showStatus={false}>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('no indicators', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('no indicators', () => (
     <Carousel showIndicators={false}>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('no thumbs', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('no thumbs', () => (
     <Carousel showThumbs={false}>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('no status, no indicators', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('no status, no indicators', () => (
     <Carousel showStatus={false}  showIndicators={false}>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('fixed width', () => (
-    <Carousel width="700">
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('fixed width', () => (
+    <Carousel width="700px">
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('dynamic height images', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('dynamic height images', () => (
     <Carousel showArrows={false} dynamicHeight={true}>
@@ -96,24 +111,24 @@ <div><img src="http://placehold.it/350x150" /></div>
     </Carousel>
-  ))
-  .add('auto play', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('auto play', () => (
     <Carousel autoPlay={true} interval={3000} infiniteLoop={true}>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('auto play stopping on hover', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('auto play stopping on hover', () => (
     <Carousel autoPlay={true} stopOnHover={true} infiniteLoop={true}>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('initial selected', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('initial selected', () => (
     <Carousel selectedItem={3}>
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('vertical axis', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('vertical axis', () => (
     <Carousel axis="vertical">
         { baseChildren.props.children }
     </Carousel>
-  ))
-  .add('youtube', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('youtube', () => (
     <Carousel showThumbs={false}>
@@ -136,4 +151,4 @@ <div key="youtube-1">
     </Carousel>
-  ))
-  .add('presentation mode', () => (
+  ), { source: true, inline: true, propTables: false})
+  .addWithInfo('presentation mode', () => (
     <Carousel showThumbs={ false } showStatus={ false } useKeyboardArrows className="presentation-mode">
@@ -211,2 +226,2 @@ <div key="content-0" className="my-slide primary">
     </Carousel>
-  ));
+  ), { source: true, inline: true, propTables: false});

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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

1180528

increased by0.6%

Number of package files

43

increased by7.5%

Lines of code

1472

increased by5.07%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

37

increased by12.12%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.5.8

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-easy-swipe@0.0.10(transitive)

• + Addedreact-is@16.13.1(transitive)

• - Removedreact-easy-swipe@0.0.8(transitive)

• Updatedreact-easy-swipe@^0.0.10