update eslintrc and fix code

.eslintrc

@@ -1,35 +1,43 @@
 {
-  "rules": {
-    "indent": [
-      2,
-      2,
-      { "SwitchCase": 1 }
-    ],
-    "quotes": [
-      2,
-      "single"
-    ],
-    "linebreak-style": [
-      2,
-      "unix"
-    ],
-    "semi": [
-      2,
-      "always"
-    ],
-    "react/react-in-jsx-scope": 1,
-    "react/jsx-uses-react": 1
-  },
+  "extends": ["eslint-config-airbnb"],
   "env": {
-    "es6": true,
     "browser": true,
     "node": true
   },
   "ecmaFeatures": {
-    "jsx": true,
-    "modules": true
+    "jsx": true
   },
+  "parser": "babel-eslint",
   "plugins": [
-    "react"
-  ]
+    "react",
+    "babel"
+  ],
+  "rules": {
+    "constructor-super": 2,
+    "comma-dangle": 0,
+    "func-names": 0,
+    "guard-for-in": 0,
+    "one-var": [2, { "initialized": "never" }],
+    "prefer-const": 0,
+    "key-spacing": 0,
+    "no-eq-null": 0,
+    "no-else-return": 0,
+    "no-param-reassign": 0,
+    "no-this-before-super": 2,
+    "no-undef": 2,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "babel/object-shorthand": 0,
+    "react/jsx-boolean-value": 0,
+    "react/jsx-no-duplicate-props": 2,
+    "react/prop-types": [2, { "ignore": [ "children", "className", "style" ] }],
+    "react/sort-comp": 0,
+    "react/wrap-multilines": 0,
+    "react/no-multi-comp": 0,
+    "react/prop-types": 0,
+    "space-after-keywords": 0,
+    "space-before-blocks": 0,
+    "space-before-function-paren": 0,
+    "spaced-comment": 0,
+    "vars-on-top": 0
+  }
 }

components/affix/demo/offset.md

@@ -10,7 +10,7 @@
 var Affix = antd.Affix;
 
 React.render(
-  <Affix offset="75">
+  <Affix offset={75}>
     <button className="ant-btn ant-btn-primary">固定在距离顶部 75px 的位置</button>
   </Affix>
 , document.getElementById('components-affix-demo-offset'));

components/affix/index.jsx

@@ -3,10 +3,10 @@ import joinClasses from 'react/lib/joinClasses';
 import rcUtil from 'rc-util';
 
 function getScroll(w, top) {
-  var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
-  var method = 'scroll' + (top ? 'Top' : 'Left');
+  let ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
+  let method = 'scroll' + (top ? 'Top' : 'Left');
   if (typeof ret !== 'number') {
-    var d = w.document;
+    let d = w.document;
     //ie6,7,8 standard mode
     ret = d.documentElement[method];
     if (typeof ret !== 'number') {
@@ -18,12 +18,12 @@ function getScroll(w, top) {
 }
 
 function getOffset(element) {
-  var rect = element.getBoundingClientRect();
-  var body = document.body;
-  var clientTop = element.clientTop || body.clientTop || 0;
-  var clientLeft = element.clientLeft || body.clientLeft || 0;
-  var scrollTop = getScroll(window, true);
-  var scrollLeft = getScroll(window);
+  let rect = element.getBoundingClientRect();
+  let body = document.body;
+  let clientTop = element.clientTop || body.clientTop || 0;
+  let clientLeft = element.clientLeft || body.clientLeft || 0;
+  let scrollTop = getScroll(window, true);
+  let scrollLeft = getScroll(window);
 
   return {
     top: rect.top + scrollTop - clientTop,
@@ -31,7 +31,7 @@ function getOffset(element) {
   };
 }
 
-var Affix = React.createClass({
+let Affix = React.createClass({
 
   getDefaultProps() {
     return {
@@ -39,6 +39,10 @@ var Affix = React.createClass({
     };
   },
 
+  propTypes: {
+    offset: React.PropTypes.number
+  },
+
   getInitialState() {
     return {
       affix: false,
@@ -47,9 +51,9 @@ var Affix = React.createClass({
   },
 
   handleScroll() {
-    var affix = this.state.affix;
-    var scrollTop = getScroll(window, true);
-    var elemOffset = getOffset(this.getDOMNode());
+    let affix = this.state.affix;
+    let scrollTop = getScroll(window, true);
+    let elemOffset = getOffset(this.getDOMNode());
 
     if (!affix && (elemOffset.top - this.props.offset) < scrollTop) {
       this.setState({
@@ -85,8 +89,8 @@ var Affix = React.createClass({
   },
 
   render() {
-    var affix = this.state.affix ? 'ant-affix' : '';
-    var className = this.props.className;
+    let affix = this.state.affix ? 'ant-affix' : '';
+    let className = this.props.className;
 
     return (
       <div {...this.props}>

components/alert/index.jsx

@@ -34,29 +34,30 @@ export default React.createClass({
     });
   },
   render() {
-    var iconClass = this.props.description ?
+    let iconClass = this.props.description ?
       'ant-alert-with-description-icon anticon-' : 'ant-alert-icon anticon-';
     switch (this.props.type) {
-      case 'success':
-        iconClass += 'check-circle';
-        break;
-      case 'info':
-        iconClass += 'info-circle';
-        break;
-      case 'error':
-        iconClass += 'exclamation-circle';
-        break;
-      case 'warn':
-        iconClass += 'question-circle';
-        break;
-      default:
-        iconClass += 'default';
+    case 'success':
+      iconClass += 'check-circle';
+      break;
+    case 'info':
+      iconClass += 'info-circle';
+      break;
+    case 'error':
+      iconClass += 'exclamation-circle';
+      break;
+    case 'warn':
+      iconClass += 'question-circle';
+      break;
+    default:
+      iconClass += 'default';
     }
-    let html, closeName = !this.state.closing ? ' ' + this.props.prefixCls + '-close' : '';
+    let html;
+    let closeName = !this.state.closing ? ' ' + this.props.prefixCls + '-close' : '';
     if (this.props.description) {
       let close = this.props.closable ?
         <a onClick={this.handleClose} className={'ant-alert-with-description-close-icon'}>
-          <span className='ant-alert-with-description-close-icon-x'></span>
+          <span className="ant-alert-with-description-close-icon-x"></span>
         </a> : '';
       html = <div data-show={this.state.closing} className={'ant-alert-with-description ant-alert-with-description-' + this.props.type + closeName}>
         <i className={'anticon ' + iconClass}></i>
@@ -74,7 +75,7 @@ export default React.createClass({
       } else {
         let close = this.props.closable ?
           <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
-            <span className='ant-alert-close-icon-x'></span>
+            <span className="ant-alert-close-icon-x"></span>
           </a> : '';
         html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
           <i className={'anticon ' + iconClass}></i>
@@ -85,7 +86,7 @@ export default React.createClass({
     }
     return this.state.closed ? null : <Animate
       component=""
-      showProp='data-show'
+      showProp="data-show"
       transitionName="slide-up"
       onEnd={this.animationEnd}>
       {html}

components/badge/index.jsx

@@ -38,4 +38,8 @@ AntBadge.defaultProps = {
   dot: false
 };
 
+AntBadge.propTypes = {
+  dot: React.PropTypes.bool
+};
+
 export default AntBadge;

components/breadcrumb/index.jsx

@@ -3,9 +3,12 @@ import React from 'react';
 let prefixCls = 'ant-breadcrumb';
 
 let BreadcrumbItem = React.createClass({
+  propTypes: {
+    href: React.PropTypes.string
+  },
   render() {
-    var link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
-    var slash = <span className={prefixCls + '-slash'}>/</span>;
+    let link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
+    let slash = <span className={prefixCls + '-slash'}>/</span>;
     if (typeof this.props.href === 'undefined') {
       link = <span className={prefixCls + '-link'} {...this.props}>{this.props.children}</span>;
     }
@@ -14,6 +17,9 @@ let BreadcrumbItem = React.createClass({
 });
 
 let Breadcrumb = React.createClass({
+  propTypes: {
+    router: React.PropTypes.object
+  },
   contextTypes: {
     router: React.PropTypes.object
   },
@@ -21,14 +27,14 @@ let Breadcrumb = React.createClass({
     let crumbs, routes, params;
     let ReactRouter = this.props.router;
     if (this.context.router && ReactRouter) {
-      var Link = ReactRouter.Link;
+      let Link = ReactRouter.Link;
       routes = this.context.router.state.branch;
       params = this.context.router.state.params;
       crumbs = routes.map(function(route, i) {
-        var name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
+        let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
           return params[key] || replacement;
         });
-        var link;
+        let link;
         if (i === routes.length - 1) {
           link = <span>{name}</span>;
         } else {

components/datepicker/index.jsx

@@ -16,10 +16,10 @@ let defaultCalendarValue = new GregorianCalendar(zhCn);
 defaultCalendarValue.setTime(Date.now());
 
 
-function createPicker(Calendar) {
+function createPicker(TheCalendar) {
   return React.createClass({
     getInitialState() {
-      var value;
+      let value;
       if (this.props.value) {
         value = new GregorianCalendar(zhCn);
         value.setTime(new Date(this.props.value).valueOf());
@@ -56,8 +56,8 @@ function createPicker(Calendar) {
       this.props.onSelect(new Date(v.getTime()));
     },
     render() {
-      var calendar = (
-        <Calendar
+      let calendar = (
+        <TheCalendar
           disabledDate={this.props.disabledDate}
           locale={CalendarLocale}
           orient={['top', 'left']}
@@ -65,9 +65,9 @@ function createPicker(Calendar) {
           showTime={this.props.showTime}
           prefixCls="ant-calendar"
           showOk={this.props.showTime}
-          showClear={false}/>
+          showClear={false} />
       );
-      var sizeClass = '';
+      let sizeClass = '';
       if (this.props.size === 'large') {
         sizeClass = ' ant-input-lg';
       } else if (this.props.size === 'small') {

components/input-number/index.jsx

@@ -8,7 +8,7 @@ export default React.createClass({
     };
   },
   render() {
-    var sizeClass = '';
+    let sizeClass = '';
     if (this.props.size === 'large') {
       sizeClass = 'ant-input-number-lg';
     } else if (this.props.size === 'small') {

components/menu/index.jsx

@@ -11,15 +11,16 @@ const AntMenu = React.createClass({
   render() {
     let openAnimation = '';
     switch (this.props.mode) {
-      case 'horizontal':
-        openAnimation = 'slide-up';
-        break;
-      case 'vertical':
-        openAnimation = 'zoom';
-        break;
-      case 'inline':
-        openAnimation = animation;
-        break;
+    case 'horizontal':
+      openAnimation = 'slide-up';
+      break;
+    case 'vertical':
+      openAnimation = 'zoom';
+      break;
+    case 'inline':
+      openAnimation = animation;
+      break;
+    default:
     }
     if (this.props.mode === 'inline') {
       return <Menu {...this.props} openAnimation={openAnimation} />;

components/message/index.jsx

@@ -3,8 +3,7 @@ import Notification from 'rc-notification';
 
 let defaultDuration = 1.5;
 let top;
-
-var messageInstance;
+let messageInstance;
 
 function getMessageInstance() {
   messageInstance = messageInstance || Notification.newInstance({

components/modal/confirm.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import Dialog from './index';
-var div;
+let div;
 
 export default function (props) {
-  var d;
+  let d;
   props = props || {};
   props.iconClassName = props.iconClassName || 'anticon-exclamation-circle';
-  var width = props.width || 375;
+  let width = props.width || 375;
 
   function close() {
     d.setState({
@@ -15,9 +15,9 @@ export default function (props) {
   }
 
   function onCancel() {
-    var cancelFn = props.onCancel;
+    let cancelFn = props.onCancel;
     if (cancelFn) {
-      var ret;
+      let ret;
       if (cancelFn.length) {
         ret = cancelFn(close);
       } else {
@@ -35,9 +35,9 @@ export default function (props) {
   }
 
   function onOk() {
-    var okFn = props.onOk;
+    let okFn = props.onOk;
     if (okFn) {
-      var ret;
+      let ret;
       if (okFn.length) {
         ret = okFn(close);
       } else {
@@ -54,12 +54,12 @@ export default function (props) {
     }
   }
 
-  var body = <div className="ant-confirm-body">
+  let body = <div className="ant-confirm-body">
     <i className={'anticon ' + props.iconClassName}></i>
     <span className="ant-confirm-title">{props.title}</span>
     <div className="ant-confirm-content">{props.content}</div>
   </div>;
-  var footer = <div className="ant-confirm-btns">
+  let footer = <div className="ant-confirm-btns">
     <button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
     <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
   </div>;

components/notification/index.jsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import Notification from 'rc-notification';
 import assign from 'object-assign';
-import React from 'react';
 
 let top = 24;
 let notificationInstance;
@@ -31,20 +31,20 @@ function notice(args) {
     let prefixCls = ' ant-notification-notice-content-icon-';
     let iconClass = 'anticon anticon-';
     switch (args.icon) {
-      case 'success':
-        iconClass += 'check-circle-o';
-        break;
-      case 'info':
-        iconClass += 'info-circle-o';
-        break;
-      case 'error':
-        iconClass += 'exclamation-circle-o';
-        break;
-      case 'warn':
-        iconClass += 'question-circle-o';
-        break;
-      default:
-        iconClass += 'info-circle';
+    case 'success':
+      iconClass += 'check-circle-o';
+      break;
+    case 'info':
+      iconClass += 'info-circle-o';
+      break;
+    case 'error':
+      iconClass += 'exclamation-circle-o';
+      break;
+    case 'warn':
+      iconClass += 'question-circle-o';
+      break;
+    default:
+      iconClass += 'info-circle';
     }
 
     getNotificationInstance().notice({
@@ -94,7 +94,7 @@ function notice(args) {
   }
 }
 
-var api = {
+let api = {
   open(args){
     notice(args);
   },
@@ -110,7 +110,7 @@ var api = {
 
 ['success', 'info', 'warn', 'error'].forEach((type) => {
   api[type] = (args) => {
-    var newArgs = assign({}, args, {
+    let newArgs = assign({}, args, {
       icon: type
     });
     return api.open(newArgs);

components/progress/index.jsx

@@ -10,7 +10,7 @@ const statusColorMap = {
   'success': '#87d068'
 };
 
-var Line = React.createClass({
+let Line = React.createClass({
   propTypes: {
     status: React.PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
     showInfo: React.PropTypes.bool,
@@ -26,13 +26,14 @@ var Line = React.createClass({
     };
   },
   render() {
-    var props = assign({}, this.props);
+    let props = assign({}, this.props);
 
-    if (parseInt(props.percent) === 100) {
+    if (parseInt(props.percent, 10) === 100) {
       props.status = 'success';
     }
 
-    var progressInfo, fullCls = '';
+    let progressInfo;
+    let fullCls = '';
     if(props.showInfo === true){
       if (props.status === 'exception') {
         progressInfo = (
@@ -54,7 +55,7 @@ var Line = React.createClass({
     }else {
       fullCls = ' ' + prefixCls + '-line-wrap-full';
     }
-    var percentStyle = {
+    let percentStyle = {
       width: props.percent + '%',
       height: props.strokeWidth
     };
@@ -72,7 +73,7 @@ var Line = React.createClass({
   }
 });
 
-var Circle = React.createClass({
+let Circle = React.createClass({
   getDefaultProps: function () {
     return {
       width: 132,
@@ -82,22 +83,22 @@ var Circle = React.createClass({
     };
   },
   render() {
-    var props = assign({}, this.props);
+    let props = assign({}, this.props);
 
-    if (parseInt(props.percent) === 100) {
+    if (parseInt(props.percent, 10) === 100) {
       props.status = 'success';
     }
 
-    var style = {
+    let style = {
       'width': props.width,
       'height': props.width,
       'fontSize': props.width * 0.16 + 6
     };
-    var progressInfo;
+    let progressInfo;
     if (props.status === 'exception') {
       progressInfo = (
         <span className={prefixCls + '-circle-text'}>
-          <i className='anticon anticon-exclamation'></i>
+          <i className="anticon anticon-exclamation"></i>
         </span>
       );
     } else if (props.status === 'success') {
@@ -128,5 +129,3 @@ export default {
   Line: Line,
   Circle: Circle
 };
-
-

components/radio/group.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Radio from './radio';
 
 function getCheckedValue(children) {
-  var checkedValue = null;
+  let checkedValue = null;
   React.Children.forEach(children, function (radio) {
     if (radio.props && radio.props.checked) {
       checkedValue = radio.props.value;
@@ -20,7 +20,7 @@ export default React.createClass({
     };
   },
   getInitialState: function () {
-    var props = this.props;
+    let props = this.props;
     return {
       value: props.value || props.defaultValue || getCheckedValue(props.children)
     };
@@ -33,8 +33,8 @@ export default React.createClass({
     }
   },
   render: function () {
-    var props = this.props;
-    var children = React.Children.map(props.children, (radio) => {
+    let props = this.props;
+    let children = React.Children.map(props.children, (radio) => {
       if (radio.props) {
         return <Radio
           key={radio.props.value}

components/select/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Select from 'rc-select';
 
-var AntSelect = React.createClass({
+let AntSelect = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-select',

components/steps/index.jsx

@@ -22,4 +22,4 @@ const AntSteps = React.createClass({
 });
 AntSteps.Step = Steps.Step;
 
-export default AntSteps;
+export default AntSteps;

components/table/filterDropdown.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Menu from 'rc-menu';
 import Dropdown from '../dropdown';
 
-var FilterMenu = React.createClass({
+let FilterMenu = React.createClass({
   getInitialState() {
     return {
       selectedKeys: this.props.selectedKeys

components/table/index.jsx

@@ -35,7 +35,7 @@ class DataSource {
   }
 }
 
-var AntTable = React.createClass({
+let AntTable = React.createClass({
   getInitialState() {
     return {
       // 减少状态

components/tabs/index.jsx

@@ -4,7 +4,7 @@ const prefixCls = 'ant-tabs';
 
 class AntTabs extends React.Component {
   render() {
-    var sizeCls = '';
+    let sizeCls = '';
     if (this.props.size === 'mini') {
       sizeCls = prefixCls + '-mini';
     }

components/tag/index.jsx

@@ -39,7 +39,7 @@ class AntTag extends React.Component {
 
     return this.state.closed ? null
       : <Animate component=""
-                 showProp='data-show'
+                 showProp="data-show"
                  transitionName="zoom-tag"
                  onEnd={this.animationEnd.bind(this)}>
         <div data-show={!this.state.closing} className={className}>

components/tooltip/index.jsx

@@ -8,7 +8,7 @@ export default React.createClass({
     };
   },
   render() {
-    var transitionName = ({
+    let transitionName = ({
       top: 'zoom-down',
       bottom: 'zoom-up',
       left: 'zoom-right',

components/upload/uploadList.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import getFileItem from './getFileItem';
 const prefixCls = 'ant-upload';
 import Animate from 'rc-animate';
 

package.json

@@ -65,14 +65,17 @@
     "velocity-animate": "^1.2.2"
   },
   "devDependencies": {
-    "autoprefixer-loader": "~2.0.0",
+    "autoprefixer-loader": "^2.0.0",
     "babel": "^5.8.12",
     "babel-core": "^5.8.12",
+    "babel-eslint": "^4.1.0",
     "babel-loader": "^5.3.2",
     "busboy": "^0.2.9",
     "chalk": "^1.1.0",
     "css-loader": "^0.14.1",
     "eslint": "^1.1.0",
+    "eslint-config-airbnb": "^0.0.8",
+    "eslint-plugin-babel": "^2.1.1",
     "eslint-plugin-react": "^3.3.1",
     "extract-text-webpack-plugin": "^0.8.1",
     "gh-pages": "^0.3.1",