react-carousel - npm Package Compare versions

Comparing version 3.1.5 to 3.1.6

example/package.json

@@ -6,4 +6,4 @@ {
   "devDependencies": {
-    "babel-loader": "^6.2.0",
-    "babel-plugin-transform-class-properties": "^6.3.13",
+    "babel-loader": "^6.2.2",
+    "babel-plugin-transform-class-properties": "^6.4.0",
     "babel-preset-es2015": "^6.3.13",
@@ -13,15 +13,15 @@ "babel-preset-react": "^6.3.13",
     "css-loader": "^0.23.1",
-    "extract-text-webpack-plugin": "^0.9.1",
+    "extract-text-webpack-plugin": "^1.0.1",
     "node-sass": "^3.4.2",
     "sass-loader": "^3.1.2",
     "style-loader": "^0.13.0",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0"
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
-    "react": "^0.14.3",
-    "react-carousel": "^3.1.2",
-    "react-css-modules": "^3.6.3",
-    "react-dom": "^0.14.3"
+    "react": "^0.14.7",
+    "react-carousel": "^3.1.5",
+    "react-css-modules": "^3.7.4",
+    "react-dom": "^0.14.7"
   }
 }

example/webpack.config.js

@@ -53,3 +53,4 @@ /* eslint-disable no-process-env, id-match, no-var, object-shorthand */
                 include: [
-                    path.resolve(__dirname, 'src')
+                    path.resolve(__dirname, 'src'),
+                    /react-carousel\/src/
                 ],
@@ -56,0 +57,0 @@ loader: 'babel'

package.json

 {
   "name": "react-carousel",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "description": "React carousel component.",
@@ -8,8 +8,5 @@ "main": "./src/index.js",
   "scripts": {
-    "pragmatist": "node ./node_modules/.bin/pragmatist --browser --types",
+    "pragmatist": "node ./node_modules/.bin/pragmatist --es5 --type-assertions",
     "lint": "npm run pragmatist lint",
     "test": "npm run pragmatist test",
-    "build": "npm run pragmatist build",
-    "watch": "npm run pragmatist watch",
-    "watch-build": "npm run pragmatist watch-build",
     "preversion": "npm run lint && npm run test && npm run build"
@@ -25,5 +22,6 @@ },
   "dependencies": {
-    "lodash": "^4.1.0"
+    "lodash": "^4.2.1"
   },
   "devDependencies": {
+    "babel-plugin-lodash": "^2.0.1",
     "chai": "^3.5.0",
@@ -33,3 +31,3 @@ "mockery": "^1.4.0",
     "react": "^0.14.7",
-    "react-css-modules": "^3.7.0",
+    "react-css-modules": "^3.7.4",
     "react-dom": "^0.14.7",
@@ -36,0 +34,0 @@ "sinon": "^1.17.3",

README.md

@@ -15,2 +15,25 @@ # react-carousel
 
+## Usage
+
+This component exports es6 module, not es5. So you'll have to make some adjustments in your build system if you're compiling es6 to es5/3.
+
+If you're using webpack, put this in your webpack config:
+
+```js
+.
+.
+    loaders: [
+        {
+            include: [
+                /react-carousel\/src/
+            ],
+            loader: 'babel',
+            test: /\.js$/
+        },
+.
+.
+```
+
+Similar setup would need to be done for browserify or other build system you're using.
+
 ## Behaviour
@@ -17,0 +40,0 @@

src/index.js

@@ -0,1 +1,3 @@
+/* eslint-disable valid-jsdoc, jsdoc/require-description-complete-sentence, jsdoc/require-param, jsdoc/check-param-names */
+
 import React, {
@@ -50,10 +52,10 @@ Component,
     /**
-     * Get the index component should (safely) scroll to
+     * Get the index component should safely scroll to.
      *
      * @param {Object} options
-     * @property {number} options.totalItems Total number of items being displayed
-     * @property {number} options.currentVisibleIndex Index of item in front
-     * @property {string} options.direction next|previous Direction in which to scroll
-     * @property {number} options.visibleItemsCount Number of items displayed at one time in component
-     * @property {number} options.stepDistance Number of items to scroll in one step
+     * @param {number} options.totalItems Total number of items being displayed
+     * @param {number} options.currentVisibleIndex Index of item in front
+     * @param {string} options.direction next|previous Direction in which to scroll
+     * @param {number} options.visibleItemsCount Number of items displayed at one time in component
+     * @param {number} options.stepDistance Number of items to scroll in one step
      *
@@ -146,4 +148,3 @@ * @returns {number} Index of item to which to scroll
     /**
-     * Helper function to avoid typing so many variables twice for two control buttons since most of the
-     * variables are already in scope
+     * Helper function to avoid typing so many variables twice for two control buttons since most of the variables are already in scope.
      *
@@ -160,6 +161,6 @@ * @param {string} direction direction in which to scroll
                 direction,
+                firstVisibleIndex: this.props.firstVisibleIndex,
+                scrollStepDistance: this.props.scrollStepDistance,
                 totalItems: this.props.items.length,
-                firstVisibleIndex: this.props.firstVisibleIndex,
-                visibleItemsCount,
-                scrollStepDistance: this.props.scrollStepDistance
+                visibleItemsCount
             });
@@ -213,5 +214,5 @@
                 style={{
-                    width: this.props.itemWidth,
+                    display: isVisible ? 'list-item' : 'none',
                     marginRight: this.props.itemMargin,
-                    display: isVisible ? 'list-item' : 'none'
+                    width: this.props.itemWidth
                 }}
@@ -248,8 +249,8 @@ styleName={'cell' + (this.props.activeItemId === item.key ? '-active' : '')}
         visibleItemsCount = this.getVisibleItemsCount({
+            controlWidth,
             firstVisibleIndex,
+            itemMargin,
+            itemWidth,
             maxWidth,
-            totalItems,
-            itemWidth,
-            controlWidth,
-            itemMargin
+            totalItems
         });
@@ -259,28 +260,28 @@ nextButtonVisible = this.isNextButtonVisible(firstVisibleIndex, totalItems, visibleItemsCount);
         return <div ref='wrapper' styleName='wrapper'>
-                <ul styleName='carousel'>
+            <ul styleName='carousel'>
 
-                    <li onClick={this.handleScrollToDirection('previous', visibleItemsCount)}
-                        style={{
-                            width: controlWidth,
-                            marginRight: itemMargin,
-                            display: prevButtonVisible ? 'list-item' : 'none'
-                        }}
-                        styleName='control-cell-previous'
-                    >
-                        <span styleName='control-icon-previous'></span>
-                    </li>
+                <li onClick={this.handleScrollToDirection('previous', visibleItemsCount)}
+                    style={{
+                        display: prevButtonVisible ? 'list-item' : 'none',
+                        marginRight: itemMargin,
+                        width: controlWidth
+                    }}
+                    styleName='control-cell-previous'
+                >
+                    <span styleName='control-icon-previous'></span>
+                </li>
 
-                    {_.map(items, this.getItemJsx(visibleItemsCount))}
+                {_.map(items, this.getItemJsx(visibleItemsCount))}
 
-                    <li onClick={this.handleScrollToDirection('next', visibleItemsCount)}
-                        style={{
-                            width: controlWidth,
-                            display: nextButtonVisible ? 'list-item' : 'none'
-                        }}
-                        styleName='control-cell-next'
-                    >
-                        <span styleName='control-icon-next'></span>
-                    </li>
+                <li onClick={this.handleScrollToDirection('next', visibleItemsCount)}
+                    style={{
+                        display: nextButtonVisible ? 'list-item' : 'none',
+                        width: controlWidth
+                    }}
+                    styleName='control-cell-next'
+                >
+                    <span styleName='control-icon-next'></span>
+                </li>
 
-                </ul>
+            </ul>
         </div>;
@@ -287,0 +288,0 @@ }

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

27762

increased by1.8%

Lines of code

426

increased by0.24%

Number of lines in readme file

102

increased by29.11%

Worsened metrics

Dev dependency count

9

increased by12.5%

Dependency changes

• Updatedlodash@^4.2.1