react-carousel - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

demo/package.json

@@ -11,4 +11,2 @@ {
     "babel-preset-stage-0": "^6.24.1",
-    "css-loader": "^0.28.0",
-    "style-loader": "^0.16.1",
     "webpack": "^2.4.1",
@@ -18,7 +16,6 @@ "webpack-dev-server": "^2.4.3"
   "dependencies": {
-    "lodash": "^4.17.4",
     "react": "^15.5.4",
-    "react-carousel": "^3.3.0",
+    "react-carousel": "^4.0.0",
     "react-dom": "^15.5.4"
   }
 }

demo/src/index.js

@@ -1,8 +0,4 @@
-/* eslint-disable no-unused-vars, import/no-unassigned-import, react/no-set-state */
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Carousel from 'react-carousel';
-import _ from 'lodash';
-import './carousel.css';
 
@@ -14,4 +10,2 @@ class App extends React.Component {
     this.state = {
-      activeItemId: '1',
-      itemMargin: 1,
       scrollStepDistance: 3,
@@ -23,89 +17,43 @@ visibleIndex: 0
   handleScrollToIndex = (index) => {
-    this.setState({visibleIndex: index});
+    this.setState({
+      visibleIndex: index
+    });
   }
 
-  handleActivateItem = (id) => {
-    this.setState({activeItemId: id});
-  }
+  render () {
+    const data = new Array(15).fill(null);
 
-  handleSetItemMargin = (event) => {
-    let newMargin;
-
-    newMargin = parseInt(event.target.value, 10);
-
-    if (newMargin < 0) {
-      newMargin = 0;
-    }
-
-    this.setState({itemMargin: newMargin});
-    event.target.value = newMargin;
-  }
-
-  render () {
-    const items = _.map(_.range(1, 15), (num) => {
-      return <span
-        key={String(num)}
+    const items = data.map((velue, index) => {
+      return <div
+        key={String(index)}
         style={{
+          border: '1px solid #00f',
+          boxSizing: 'border-box',
           display: 'block',
           fontSize: '32px',
-          marginTop: '20px',
-          textAlign: 'center',
-          width: '100%'
-        }}
-           >{num}</span>;
+          height: '100px',
+          lineHeight: '100px',
+          textAlign: 'center'
+        }}>{index}</div>;
     });
 
-    return <div
-      style={{
-        fontFamily: 'sans-serif'
-      }}
-         >
+    return <div>
       <h1>react-carousel demo</h1>
-      <h3>Please go <a href='https://github.com/gajus/react-carousel'>here</a> for docs and source</h3>
+      <p>Resize the screen to constraint the container of the carousel.</p>
+      <p>Documentation is available at <a href='https://github.com/gajus/react-carousel'>https://github.com/gajus/react-carousel</a>.</p>
 
-      <div
+      <Carousel
+        controlWidth={25}
+        firstVisibleIndex={this.state.visibleIndex}
+        itemWidth={50}
+        onItemScroll={this.handleScrollToIndex}
+        scrollStepDistance={this.state.scrollStepDistance}
         style={{
-          background: '#11516B',
+          background: '#eee',
           height: 100,
-          maxWidth: 500,
-          minWidth: 200
+          maxWidth: 1000
         }}
       >
-
-        <Carousel
-          activeItemId={this.state.activeItemId}
-          controlWidth={25}
-          firstVisibleIndex={this.state.visibleIndex}
-          itemMargin={this.state.itemMargin}
-          itemWidth={50}
-          items={items}
-          onItemActivate={this.handleActivateItem}
-          onItemsScroll={this.handleScrollToIndex}
-          scrollStepDistance={this.state.scrollStepDistance}
-          />
-
-        <div style={{margin: '30px 10px'}}>
-          <table>
-            <tbody>
-              <tr>
-                <td>Item Margin: </td>
-                <td>
-                  <input
-                    defaultValue={this.state.itemMargin}
-                    onChange={this.handleSetItemMargin}
-                    style={{
-                      border: '1px solid #222',
-                      borderRadius: 4,
-                      outline: 'none',
-                      padding: 10
-                    }}
-                    type='number'
-                    />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-      </div>
+        {items}
+      </Carousel>
     </div>;
@@ -112,0 +60,0 @@ }

demo/webpack.config.js

@@ -32,9 +32,2 @@ /* eslint-disable no-process-env, id-match, no-var, object-shorthand, import/no-commonjs, filenames/match-regex */
         test: /\.js$/
-      },
-      {
-        loaders: [
-          'style-loader',
-          'css-loader'
-        ],
-        test: /\.css$/
       }
@@ -41,0 +34,0 @@ ]

package.json

@@ -6,2 +6,3 @@ {
     "babel-core": "^6.24.1",
+    "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-preset-es2015": "^6.24.1",
@@ -13,5 +14,8 @@ "babel-preset-react": "^6.24.1",
     "eslint-config-canonical": "^8.1.1",
+    "flow-bin": "^0.44.2",
+    "flow-copy-source": "^1.1.0",
     "mocha": "^3.2.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "semantic-release": "^6.3.2",
     "sinon": "^2.1.0",
@@ -28,3 +32,3 @@ "sinon-chai": "^2.9.0"
   "license": "BSD-3-Clause",
-  "main": "./dist/index.js",
+  "main": "./dist/Carousel.js",
   "name": "react-carousel",
@@ -36,7 +40,12 @@ "repository": {
   "scripts": {
-    "build": "rm -fr ./dist && NODE_ENV=production babel ./src --source-maps --copy-files --out-dir ./dist",
-    "lint": "eslint ./test ./src ./demo/src",
+    "build": "rm -fr ./dist && NODE_ENV=production babel ./src --source-maps --copy-files --out-dir ./dist && flow-copy-source src dist",
+    "lint": "eslint ./test ./src ./demo/src && flow",
     "test": "mocha --compilers js:babel-core/register"
   },
-  "version": "4.0.0"
-}
+  "version": "4.1.0",
+  "dependencies": {
+    "debounce": "^1.0.2",
+    "prop-types": "^15.5.8",
+    "range": "0.0.3"
+  }
+}

README.md

 # react-carousel
 
 [![Travis build status](http://img.shields.io/travis/gajus/react-carousel/master.svg?style=flat-square)](https://travis-ci.org/gajus/react-carousel)
-[![NPM version](http://img.shields.io/npm/v/react-carousel.svg?style=flat-square)](https://www.npmjs.com/package/react-carousel)
-[![js-canonical-style](https://img.shields.io/badge/code%20style-canonical-brightgreen.svg?style=flat-square)](https://github.com/gajus/canonical)
+[![NPM version](http://img.shields.io/npm/v/react-carousel.svg?style=flat-square)](https://www.npmjs.org/package/react-carousel)
+[![Canonical Code Style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical)
+[![Twitter Follow](https://img.shields.io/twitter/follow/kuizinas.svg?style=social&label=Follow)](https://twitter.com/kuizinas)
 
 A carousel.
 
+## Markup
+
+```css
+.react-carousel
+  .react-carousel__navigation-button .react-carousel__navigation-button--previous
+  ul
+    li
+  .react-carousel__navigation-button .react-carousel__navigation-button--next
+
+```
+
+## Usage
+
+> Refer to [demo](#demo) for a complete setup.
+
+```js
+<Carousel
+  controlWidth={50}
+  itemWidth={240}
+  itemMargin={20}
+>
+  <div>foo</div>
+  <div>bar</div>
+  <div>baz</div>
+</Carousel>
+```
+
+## Demo
+
+```bash
+git clone [e-mail]:applaudience/react-carousel.git
+cd ./react-carousel/example
+npm install
+npm start
+
+```
+
 ## Behaviour
@@ -15,10 +53,7 @@
 
-  * The component will show scroll buttons (two buttons in front and end of the carousel) if number of items in the carousel exceed the total number of items that can be displayed at a time.
-  * Total number if items that can be displayed in the carousel at a time is determined by the width of the container in which this component is kept and the `itemWidth` property value.
-  * Component reacts to change in size of its container such that there is never a partial item dispayed in the carousel. Carousel will shrink in size if the container width can't be filled with  "full" items. Please cehck the example for demonstration of this behavior and try resizing the window
-  * Previous scroll button is only displayed if there are items before `firstVisibleIndex`.
-  * Next scroll button is only displayed if there are items which can be scrolled left.
-  * `onItemActivate` will be given the `key` of the item that is clicked by the user
-  * `onItemsScroll` gets called when user clicks on next/previous scroll button. It gives **index** of the item which should become new `firstVisibleIndex`. This index' calculation depends on `scrollStepDistance` and total number of items displayed in the carousel
-  * Carousel performs no animations as of now during the transition (scroll)
+  * The component will show scroll buttons (two buttons; one in front of the carousel and one at the end) if number of items in the carousel exceed the total number of items that can be displayed without overflowing the contents.
+  * The total number of items that can be displayed in the carousel is determined using the width of the component container, the `itemWidth` property value and `itemMargin` property value.
+  * The carousel shrinks if the container width can't be filled with items.
+  * `onItemActivate` will be given the `key` of the item that is clicked by the user.
+  * `onItemScroll` gets called when user clicks on next/ previous scroll button. It gives index of the new `firstVisibleIndex` item.
 
@@ -39,3 +74,3 @@ ## Properties
  *
- * @typedef Carousel~onItemsScroll
+ * @typedef Carousel~onItemScroll
  * @property {Number} index Index to scroll to
@@ -45,22 +80,10 @@ */
 /**
- * @property {Carousel~activeItemId} string - Key prop of the item which is to be marked as active
- * @property {Carousel~items[]} JSX - Array of JSX components which are to be set as content of carousel items
- * @property {Carousel~firstVisibleIndex} number - Index to which the crousel is scrolled to. i.e the first index which is visible
- * @property {Carousel~itemWidth} number - Width of each item in the carousel
- * @property {Carousel~scrollStepDistance} number - Number of items to scroll at one time
- * @property {Carousel~itemMargin} number - Margin between two items in the carousel
- * @property {Carousel~controlWidth} number - Width of control buttons
- * @property {Carousel~onItemActivate} function - Called when user clicks on an item
- * @property {Carousel~onItemsScroll} function - Called when user clicks on control buttons
+ * @property {Carousel~controlWidth} Width of the carousel navigation button.
+ * @property {Carousel~firstVisibleIndex} Index to which the carousel is scrolled to (i.e the first index which is visible.) (default: `0`).
+ * @property {Carousel~itemMargin} Margin between two items in the carousel.
+ * @property {Carousel~itemWidth} Width of an item.
+ * @property {Carousel~onItemActivate} Called when user clicks on an item.
+ * @property {Carousel~onItemScroll} Called when user clicks on control buttons.
+ * @property {Carousel~scrollStepDistance} Number of items to scroll at one time (default: the current visible item count).
  */
 ```
-
-## Demo
-
-```bash
-git clone [e-mail]:applaudience/react-carousel.git
-cd ./react-carousel/example
-npm install
-npm start
-
-```

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

87

increased by35.94%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

46872

decreased by-12.98%

Dependency count

3

increased byInfinity%

Dev dependency count

17

increased by30.77%

Number of package files

13

decreased by-27.78%

Lines of code

523

decreased by-38.9%

Dependency changes

• + Addeddebounce@^1.0.2

• + Addedprop-types@^15.5.8

• + Addedrange@0.0.3

• + Addeddebounce@1.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedrange@0.0.3(transitive)

• + Addedreact-is@16.13.1(transitive)