Merge pull request akiran#55 from vramana/cleanup-es6

Better formatting + ES6

Author: akiran

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "rules": {
+    "no-extra-parens": 0,
+    "react/jsx-uses-vars": 1,
+    "global-strict": true,
+    "quotes": [2, "single"],
+    "no-underscore-dangle": false,
+    "space-infix-ops": false,
+    "no-alert": false
+  },
+  "ecmaFeatures": {
+    "jsx": true,
+  },
+  "env": {
+    "node": true,
+    "browser": true,
+    "es6": true,
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+      "react"
+  ]
+}

docs/_style.scss

@@ -1,61 +1,64 @@
 h3 {
-  background:$primary-color;
+  background: $primary-color;
   color: #fff;
-  font-size:36px;
-  line-height:100px;
-  margin:10px;
-  padding:2%;
-  position:relative;
-  text-align:center;
+  font-size: 36px;
+  line-height: 100px;
+  margin: 10px;
+  padding: 2%;
+  position: relative;
+  text-align: center;
 }
 .variable-width .slick-slide p {
   background: $primary-color;
   height: 100px;
-  color:#fff;
+  color: #fff;
   margin: 5px;
   line-height: 100px;
 }
-.center .slick-center h3{
-  color:#e67e22;
-  opacity:1;
-  transform:scale(1.08);
+.center .slick-center h3 {
+  color: #e67e22;
+  opacity: 1;
+  transform: scale(1.08);
 }
 .center h3{
-  opacity:0.8;transition:all 300ms ease;
+  opacity: 0.8;
+  transition: all 300ms ease;
 }
 .content {
-  padding:20px;
-  margin: auto; 
+  padding: 20px;
+  margin: auto;
   width: 90%;
 }
-.slick-slide .image{
-  padding:10px;
+.slick-slide .image {
+  padding: 10px;
 }
 .slick-slide img{
-  border:5px solid #FFF;
-  display:block;
-  width:100%;
+  border: 5px solid #FFF;
+  display: block;
+  width: 100%;
 }
-.slick-slide img.slick-loading{
-  border:0
+.slick-slide img.slick-loading {
+  border: 0
 }
 .slick-slider{
-  margin:30px auto 50px;
+  margin: 30px auto 50px;
 }
 @media (max-width: 768px) {
-  h3{font-size:24px;}
-  .center{
-    margin-left:-40px;
-    margin-right:-40px;
+  h3 {
+    font-size:24px;
   }
-  .center .slick-center h3{
-    color:#e67e22;
-    opacity:1;
-    transform:scale(1);
+  .center {
+    margin-left: -40px;
+    margin-right: -40px;
   }
-  .center h3{
-    opacity:0.8;
-    transform:scale(0.95);
-    transition:all 300ms ease;
+  .center .slick-center h3 {
+    color: #e67e22;
+    opacity: 1;
+    transform: scale(1);
   }
-}
+  .center h3 {
+    opacity: 0.8;
+    transform: scale(0.95);
+    transition: all 300ms ease;
+  }
+}

docs/demos.jsx

@@ -1,3 +1,5 @@
+'use strict';
+
 var React = require('react');
 var Slider = require('../');
 
@@ -8,7 +10,7 @@ var SingleItem = React.createClass({
       infinite: true,
       speed: 500,
       slidesToShow: 1,
-      slidesToScroll: 1,
+      slidesToScroll: 1
     };
     return (
       <div>
@@ -38,7 +40,7 @@ var MultipleItems = React.createClass({
     };
     return (
       <div>
-        <h2> Multiple items </h2> 
+        <h2> Multiple items </h2>
         <Slider {...settings}>
           <div><h3>1</h3></div>
           <div><h3>2</h3></div>
@@ -84,7 +86,7 @@ var Responsive = React.createClass({
                 slidesToScroll: 1
             }
         }]
-    }
+    };
     return (
       <div>
         <h2> Responsive </h2>
@@ -111,7 +113,7 @@ var UnevenSets = React.createClass({
       speed: 500,
       slidesToScroll: 4,
       slidesToShow: 4
-    }
+    };
     return (
       <div>
         <h2>Uneven sets</h2>
@@ -136,10 +138,11 @@ var CenterMode = React.createClass({
       infinite: true,
       centerPadding: '60px',
       slidesToShow: 3,
-      speed: 500,   afterChange:function(a){
-        alert("Slider Changed to :"+a);
+      speed: 500,
+      afterChange: function (a) {
+        alert('Slider Changed to :' + a);
       }
-    }
+    };
     return (
       <div>
         <h2>Center Mode</h2>
@@ -166,10 +169,11 @@ var CenterModeWithInitial = React.createClass({
       centerPadding: '60px',
       slidesToShow: 3,
       initialSlide: 3,
-      speed: 500,   afterChange:function(index){
-        console.log('%c Slider Changed to:'+index, 'background: #222; color: #bada55');
+      speed: 500,
+      afterChange: function (index) {
+        console.log(`%c Slider Changed to: + ${index}, background: #222; color: #bada55`);
       }
-    }
+    };
     return (
       <div>
         <h2>Center Mode With InitalSlideSet</h2>
@@ -195,8 +199,8 @@ var AutoPlay = React.createClass({
       slidesToShow: 3,
       slidesToScroll: 1,
       autoplay: true,
-      autoplaySpeed: 2000,
-    }
+      autoplaySpeed: 2000
+    };
     return (
       <div>
         <h2>Auto Play</h2>
@@ -223,7 +227,7 @@ var VariableWidth = React.createClass({
       slidesToShow: 1,
       slidesToScroll: 1,
       variableWidth: true
-    }
+    };
     return (
       <div>
         <h2>Variable width</h2>
@@ -249,7 +253,7 @@ var AdaptiveHeight = React.createClass({
       slidesToShow: 1,
       slidesToScroll: 1,
       adaptiveHeight: true
-    }
+    };
     return (
       <div>
         <h2>Adaptive height</h2>
@@ -298,4 +302,4 @@ var App = React.createClass({
   }
 });
 
-module.exports = App;
+module.exports = App;

docs/docs.jsx

@@ -1,3 +1,5 @@
+'use strict';
+
 var React = require('react');
 var Demos = require('./demos');
 

docs/index.jsx

@@ -1,8 +1,10 @@
+'use strict';
+
 var React = require('react');
 var Router = require('react-router');
 var routes = require('./routes');
 
 React.initializeTouchEvents(true);
 Router.run(routes, Router.HistoryLocation, function (Handler) {
   React.render(<Handler />, document.getElementById('rapp'));
-});
+});

docs/routes.jsx

@@ -1,12 +1,14 @@
+'use strict';
+
 var React = require('react');
 var Router = require('react-router');
-var Route= Router.Route;
+var Route = Router.Route;
 var Docs = require('./docs');
 
 var path = (process.env.NODE_ENV === 'dev_docs') ? '/': '/opensource/react-slick';
 var routes = (
   <Route name='app' path={path} handler={Docs}>
-  </Route> 
+  </Route>
 );
 
 module.exports = routes;

lib/initial-state.js

@@ -12,15 +12,15 @@ var initialState = {
     slideCount: null,
     slideWidth: null,
     // sliding: false,
-    // slideOffset: 0, 
+    // slideOffset: 0,
     swipeLeft: null,
     touchObject: {
       startX: 0,
       startY: 0,
       curX: 0,
       curY: 0
     },
-     
+
     // added for react
     initialized: false,
     trackStyle: {},
@@ -36,4 +36,4 @@ var initialState = {
     // $slides: null,
 };
 
-module.exports = initialState;
+module.exports = initialState;

lib/inner-slider.jsx

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 var React = require('react');
 var cloneWithProps = require('react/lib/cloneWithProps');
@@ -29,7 +29,7 @@ var Slider = React.createClass({
     if (this.props.dots === true && this.state.slideCount > this.props.slidesToShow) {
       for (var i=0; i <= this.getDotCount(); i += 1) {
         var className = classnames({
-          'slick-active': (this.state.currentSlide === i * this.props.slidesToScroll),
+          'slick-active': (this.state.currentSlide === i * this.props.slidesToScroll)
         });
         dotOptions = {
           message: 'index',
@@ -58,7 +58,7 @@ var Slider = React.createClass({
         key: index,
         'data-index': index,
         className: this.getSlideClasses(index),
-        style: _assign({}, this.getSlideStyle(), child.props.style),
+        style: _assign({}, this.getSlideStyle(), child.props.style)
       }));
 
       if (this.props.infinite === true) {
@@ -74,7 +74,7 @@ var Slider = React.createClass({
             key: key,
             'data-index': key,
             className: this.getSlideClasses(key),
-            style: _assign({}, this.getSlideStyle(), child.props.style),
+            style: _assign({}, this.getSlideStyle(), child.props.style)
           }));
         }
 
@@ -84,7 +84,7 @@ var Slider = React.createClass({
             key: key,
             'data-index': key,
             className: this.getSlideClasses(key),
-            style: _assign({}, this.getSlideStyle(), child.props.style),
+            style: _assign({}, this.getSlideStyle(), child.props.style)
           }));
         }
       }
@@ -131,31 +131,33 @@ var Slider = React.createClass({
       var prevArrowProps = {
         key: '0',
         ref: 'previous',
-        'data-role': "none",
+        'data-role': 'none',
         className: classnames(prevClasses),
         style: {display: 'block'},
         onClick: prevHandler
-      }
+      };
+      var prevArrow;
 
       if (this.props.prevArrow) {
-        var prevArrow = <this.props.prevArrow {...prevArrowProps} />;
+        prevArrow = <this.props.prevArrow {...prevArrowProps} />;
       } else {
-        var prevArrow = <button type="button" {...prevArrowProps}> Previous</button>;
+        prevArrow = <button type="button" {...prevArrowProps}> Previous</button>;
       }
 
       var nextArrowProps = {
         key: '1',
         ref: 'next',
-        'data-role': "none",
+        'data-role': 'none',
         className: classnames(nextClasses),
         style: {display: 'block'},
         onClick: nextHandler
-      }
+      };
+      var nextArrow;
 
       if (this.props.nextArrow) {
-        var nextArrow = <this.props.nextArrow {...nextArrowProps} />;
+        nextArrow = <this.props.nextArrow {...nextArrowProps} />;
       } else {
-        var nextArrow = <button type="button" {...nextArrowProps}> Next</button>;
+        nextArrow = <button type="button" {...nextArrowProps}> Next</button>;
       }
 
       return [prevArrow, nextArrow];