style: update code style to please lint, close: #2811

.eslintrc.js

@@ -35,6 +35,9 @@ const eslintrc = {
     'consistent-return': 0,
     'no-redeclare': 0,
     'react/require-extension': 0,
+    'react/jsx-indent': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
+    'jsx-a11y/anchor-has-content': 0,
   },
 };
 
@@ -47,6 +50,7 @@ if (process.env.RUN_ENV === 'DEMO') {
 
   Object.assign(eslintrc.rules, {
     'no-console': 0,
+    'no-plusplus': 0,
     'eol-last': 0,
     'prefer-rest-params': 0,
     'react/no-multi-comp': 0,

components/breadcrumb/demo/router.md

@@ -29,7 +29,7 @@ const Apps = () => (
   </ul>
 );
 
-const Home = (props) => (
+const Home = props => (
   <div>
     <div className="demo-nav">
       <Link to="/">Home</Link>

components/cascader/demo/custom-render.md

@@ -52,7 +52,7 @@ const displayRender = (labels, selectedOptions) => labels.map((label, i) => {
   if (i === labels.length - 1) {
     return (
       <span key={option.value}>
-        {label} (<a onClick={(e) => handleAreaClick(e, label, option)}>{option.code}</a>)
+        {label} (<a onClick={e => handleAreaClick(e, label, option)}>{option.code}</a>)
       </span>
     );
   }

components/checkbox/demo/check-all.md

@@ -37,7 +37,7 @@ const App = React.createClass({
             onChange={this.onCheckAllChange}
             checked={this.state.checkAll}
           >
-						Check all
+            Check all
           </Checkbox>
         </div>
         <br />

components/menu/demo/sider-current.md

@@ -33,7 +33,7 @@ const Sider = React.createClass({
     this.setState({ current: e.key });
   },
   onOpenChange(openKeys) {
-    const latestOpenKey = openKeys.find((key) => !(this.state.openKeys.indexOf(key) > -1));
+    const latestOpenKey = openKeys.find(key => !(this.state.openKeys.indexOf(key) > -1));
     this.setState({ openKeys: this.getKeyPath(latestOpenKey) });
   },
   getKeyPath(key) {

components/notification/demo/with-icon.md

@@ -16,7 +16,7 @@ A notification box with a icon at the left side.
 ````jsx
 import { Button, notification } from 'antd';
 
-const openNotificationWithIcon = (type) => () => (
+const openNotificationWithIcon = type => () => (
   notification[type]({
     message: 'Notification Title',
     description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',

components/select/demo/search-box.md

@@ -64,7 +64,7 @@ const SearchInput = React.createClass({
   },
   handleChange(value) {
     this.setState({ value });
-    fetch(value, (data) => this.setState({ data }));
+    fetch(value, data => this.setState({ data }));
   },
   handleSubmit() {
     console.log('输入框内容是: ', this.state.value);

components/table/demo/ajax.md

@@ -75,7 +75,7 @@ const Test = React.createClass({
         ...params,
       },
       type: 'json',
-    }).then(data => {
+    }).then((data) => {
       const pagination = this.state.pagination;
       // Read total count from server
       // pagination.total = data.totalCount;

components/table/demo/basic.md

@@ -20,7 +20,7 @@ const columns = [{
   title: '姓名',
   dataIndex: 'name',
   key: 'name',
-  render: (text) => <a href="#">{text}</a>,
+  render: text => <a href="#">{text}</a>,
 }, {
   title: '年龄',
   dataIndex: 'age',

components/table/demo/bordered.md

@@ -19,7 +19,7 @@ import { Table } from 'antd';
 const columns = [{
   title: '姓名',
   dataIndex: 'name',
-  render: (text) => <a href="#">{text}</a>,
+  render: text => <a href="#">{text}</a>,
 }, {
   title: '资产',
   className: 'column-money',

package.json

@@ -91,13 +91,13 @@
     "enquire.js": "^2.1.1",
     "es6-shim": "^0.35.0",
     "eslint": "^3.0.1",
-    "eslint-config-airbnb": "^10.0.1",
+    "eslint-config-airbnb": "latest",
     "eslint-plugin-babel": "^3.0.0",
     "eslint-plugin-import": "^1.6.1",
     "eslint-plugin-jsx-a11y": "^2.0.1",
     "eslint-plugin-markdown": "*",
     "eslint-plugin-react": "^6.1.2",
-    "eslint-tinker": "^0.3.1",
+    "eslint-tinker": "^0.4.0",
     "history": "^3.0.0",
     "jest-cli": "^13.2.3",
     "jsonml-to-react-component": "~0.2.0",
@@ -140,7 +140,7 @@
     "tslint": "antd-tools run ts-lint",
     "demolint": "RUN_ENV=DEMO eslint components/*/demo/*.md --ext '.md'",
     "lesshint": "lesshint components -r scripts/lesshint-report.js",
-    "eslint-fix": "eslint --fix components test site scripts ./*.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md",
+    "eslint-fix": "eslint --fix test site scripts ./.eslintrc.js ./webpack.config.js --ext '.js,.jsx,.tsx' --ignore-pattern '!.eslintrc.js' && eslint-tinker ./components/*/demo/*.md",
     "test": "npm run lint && npm run dist",
     "jest": "jest",
     "pre-publish": "node ./scripts/prepub",

scripts/build-common.js

@@ -1,36 +0,0 @@
-/* eslint strict: 0 */
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const utils = require('./utils');
-
-module.exports = function buildCommon(dirs, outputFile) {
-  const mds = utils.findMDFile(dirs, true)
-    .filter((file) => !/\/demo$/i.test(path.dirname(file)))
-    .filter((file) => !/install_en\.md$/gi.test(file)); // TODO
-
-  const addedMd = [];
-  let content = 'module.exports = {';
-  mds.forEach((fileName) => {
-    const localeId = path.basename(fileName, '.md').split('.')[1];
-    const simplifiedFileName = fileName.replace(`.${localeId}`, '');
-    if (addedMd.indexOf(simplifiedFileName) > -1) return;
-
-    const isLocalized = ['zh-CN', 'en-US'].indexOf(localeId) > -1;
-    if (isLocalized) {
-      content += `\n  '${simplifiedFileName}': {` +
-        '\n    localized: true,' +
-        `\n    'zh-CN': require('${path.relative(path.dirname(outputFile), fileName.replace(localeId, 'zh-CN'))}'),` +
-        `\n    'en-US': require('${path.relative(path.dirname(outputFile), fileName.replace(localeId, 'en-US'))}'),` +
-        '\n  },';
-      addedMd.push(simplifiedFileName);
-    } else {
-      const requirePath = path.relative(path.dirname(outputFile), fileName);
-      content += `\n  '${simplifiedFileName}': require('${requirePath}'),`;
-    }
-  });
-  content += '\n};';
-
-  fs.writeFile(outputFile, content);
-};

scripts/update-rc.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 /* eslint strict:0, camelcase:0 */
+
 'use strict';
 
 require('antd-tools/lib/updateComponents')((name) => {

site/theme/template/Content/Article.jsx

@@ -20,7 +20,7 @@ export default class Article extends React.Component {
       return;
     }
     const checkImgUrl = 'http://alipay-rmsdeploy-dev-image.oss-cn-hangzhou-zmf.aliyuncs.com/rmsportal/JdVaTbZzPxEldUi.png';
-    this.pingTimer = utils.ping(checkImgUrl, status => {
+    this.pingTimer = utils.ping(checkImgUrl, (status) => {
       if (status === 'responded') {
         links.forEach(link => (link.style.display = 'block'));
       } else {
@@ -40,7 +40,7 @@ export default class Article extends React.Component {
     const timelineItems = [];
     let temp = [];
     let i = 1;
-    Children.forEach(article.props.children, child => {
+    Children.forEach(article.props.children, (child) => {
       if (child.type === 'h2' && temp.length > 0) {
         timelineItems.push(<Timeline.Item key={i}>{temp}</Timeline.Item>);
         temp = [];

site/theme/template/Content/ComponentDoc.jsx

@@ -31,8 +31,8 @@ export default class ComponentDoc extends React.Component {
     const { doc, location } = props;
     const { content, meta } = doc;
     const locale = this.context.intl.locale;
-    const demos = Object.keys(props.demos).map((key) => props.demos[key])
+    const demos = Object.keys(props.demos).map(key => props.demos[key])
-      .filter((demoData) => !demoData.meta.hidden);
+      .filter(demoData => !demoData.meta.hidden);
     const expand = this.state.expandAll;
 
     const isSingleCol = meta.cols === 1;

site/theme/template/Content/MainContent.jsx

@@ -8,6 +8,19 @@ import config from '../../';
 
 const SubMenu = Menu.SubMenu;
 
+function getActiveMenuItem(props) {
+  return props.params.children || props.location.pathname;
+}
+
+function fileNameToPath(filename) {
+  const snippets = filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').split('/');
+  return snippets[snippets.length - 1];
+}
+
+function isNotTopLevel(level) {
+  return level !== 'topLevel';
+}
+
 export default class MainContent extends React.Component {
   static contextTypes = {
     intl: PropTypes.object.isRequired,
@@ -60,18 +73,9 @@ export default class MainContent extends React.Component {
     this.setState({ openKeys });
   }
 
-  getActiveMenuItem(props) {
-    return props.params.children || props.location.pathname;
-  }
-
-  fileNameToPath(filename) {
-    const snippets = filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').split('/');
-    return snippets[snippets.length - 1];
-  }
-
   generateMenuItem(isTop, item) {
     const locale = this.context.intl.locale;
-    const key = this.fileNameToPath(item.filename);
+    const key = fileNameToPath(item.filename);
     const text = isTop ?
             item.title[locale] || item.title : [
               <span key="english">{item.title}</span>,
@@ -94,13 +98,9 @@ export default class MainContent extends React.Component {
     );
   }
 
-  isNotTopLevel(level) {
-    return level !== 'topLevel';
-  }
-
   generateSubMenuItems(obj) {
     const topLevel = (obj.topLevel || []).map(this.generateMenuItem.bind(this, true));
-    const itemGroups = Object.keys(obj).filter(this.isNotTopLevel)
+    const itemGroups = Object.keys(obj).filter(isNotTopLevel)
       .sort((a, b) => config.typeOrder[a] - config.typeOrder[b])
       .map((type, index) => {
         const groupItems = obj[type].sort((a, b) => {
@@ -134,7 +134,7 @@ export default class MainContent extends React.Component {
       moduleData, this.context.intl.locale
     );
     const topLevel = this.generateSubMenuItems(menuItems.topLevel);
-    const subMenu = Object.keys(menuItems).filter(this.isNotTopLevel)
+    const subMenu = Object.keys(menuItems).filter(isNotTopLevel)
       .sort((a, b) => config.categoryOrder[a] - config.categoryOrder[b])
       .map((category) => {
         const subMenuItems = this.generateSubMenuItems(menuItems[category]);
@@ -174,7 +174,7 @@ export default class MainContent extends React.Component {
 
   render() {
     const props = this.props;
-    const activeMenuItem = this.getActiveMenuItem(props);
+    const activeMenuItem = getActiveMenuItem(props);
     const menuItems = this.getMenuItems();
     const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
     const localizedPageData = props.localizedPageData;

site/theme/template/Content/index.jsx

@@ -28,7 +28,7 @@ export function collect(nextProps, callback) {
     promises.push(demos());
   }
   Promise.all(promises)
-    .then((list) => callback(null, {
+    .then(list => callback(null, {
       ...nextProps,
       localizedPageData: list[0],
       demos: list[1],

site/theme/template/Home/Banner.jsx

@@ -7,39 +7,37 @@ import 'react-github-button/assets/style.css';
 import { Icon } from 'antd';
 import QueueAnim from 'rc-queue-anim';
 
-export default class Banner extends React.Component {
+function typeFunc(a) {
-  typeFunc(a) {
+  if (a.key === 'line') {
-    if (a.key === 'line') {
+    return 'right';
-      return 'right';
+  } else if (a.key === 'button') {
-    } else if (a.key === 'button') {
+    return 'bottom';
-      return 'bottom';
-    }
-    return 'left';
-  }
-
-  render() {
-    return (
-      <section id="banner">
-        <ScrollElement scrollName="banner" className="page">
-          <QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
-            <h2 key="h2">ANT <p>DESIGN</p></h2>
-            <p key="content"><FormattedMessage id="app.home.slogan" /></p>
-            <span className="line" key="line" />
-            <div key="button1" className="start-button clearfix">
-              <Link to="/docs/spec/introduce">
-                <FormattedMessage id="app.home.introduce" />
-              </Link>
-              <Link to="/docs/react/introduce">
-                <FormattedMessage id="app.home.start" />
-              </Link>
-            </div>
-            <GitHubButton key="github-button" type="stargazers"
-              namespace="ant-design" repo="ant-design"
-            />
-          </QueueAnim>
-          <Icon type="down" className="down" />
-        </ScrollElement>
-      </section>
-    );
   }
+  return 'left';
+}
+
+export default function Banner() {
+  return (
+    <section id="banner">
+      <ScrollElement scrollName="banner" className="page">
+        <QueueAnim className="banner-text-wrapper" type={typeFunc} delay={300}>
+          <h2 key="h2">ANT <p>DESIGN</p></h2>
+          <p key="content"><FormattedMessage id="app.home.slogan" /></p>
+          <span className="line" key="line" />
+          <div key="button1" className="start-button clearfix">
+            <Link to="/docs/spec/introduce">
+              <FormattedMessage id="app.home.introduce" />
+            </Link>
+            <Link to="/docs/react/introduce">
+              <FormattedMessage id="app.home.start" />
+            </Link>
+          </div>
+          <GitHubButton key="github-button" type="stargazers"
+            namespace="ant-design" repo="ant-design"
+          />
+        </QueueAnim>
+        <Icon type="down" className="down" />
+      </ScrollElement>
+    </section>
+  );
 }

site/theme/template/Home/index.jsx

@@ -6,101 +6,98 @@ import Page1 from './Page1';
 import Page2 from './Page2';
 import Page3 from './Page3';
 import Page4 from './Page4';
-
+// To store style which is only for Home and has conflicts with others.
-export default class Home extends React.Component {
+function getStyle() {
-  // To store style which is only for Home and has conflicts with others.
+  return `
-  getStyle() {
+    #react-content,
-    return `
+    #react-content > div {
-      #react-content,
+      height: 100%;
-      #react-content > div {
+    }
-        height: 100%;
+    .main-wrapper {
-      }
+      background: transparent;
-      .main-wrapper {
+      width: auto;
-        background: transparent;
+      margin: 0;
-        width: auto;
+      border-radius: 0;
-        margin: 0;
+      padding: 0;
-        border-radius: 0;
+      overflow: unset;
-        padding: 0;
+      display: inline;
-        overflow: unset;
+      min-height: 600px;
-        display: inline;
+    }
-        min-height: 600px;
+    #header {
-      }
+      position: fixed;
-      #header {
+      z-index: 999;
-        position: fixed;
+      background: rgba(0, 0, 0, 0.25);
-        z-index: 999;
+      border-bottom: 1px solid transparent;
-        background: rgba(0, 0, 0, 0.25);
+      transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-        border-bottom: 1px solid transparent;
+    }
-        transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    #header .ant-select-selection,
-      }
+    #header .ant-menu {
-      #header .ant-select-selection,
+      background: transparent;
-      #header .ant-menu {
+    }
-        background: transparent;
+    #header.home-nav-white {
-      }
+      background: rgba(255, 255, 255, 0.9);
-      #header.home-nav-white {
+      border-bottom-color: #EBEDEE;
-        background: rgba(255, 255, 255, 0.9);
+    }
-        border-bottom-color: #EBEDEE;
+    .home-nav-white #search-box {
-      }
+      border-left-color: #EBEDEE;
-      .home-nav-white #search-box {
+    }
-        border-left-color: #EBEDEE;
+    .home-nav-white #nav a {
-      }
+      color: #666;
-      .home-nav-white #nav a {
+    }
-        color: #666;
+    .home-nav-white #lang {
-      }
+      color: #666;
-      .home-nav-white #lang {
+      border-color: #666;
-        color: #666;
+    }
-        border-color: #666;
+    .nav-phone-icon:before {
-      }
+      background: #eee;
-      .nav-phone-icon:before {
+      box-shadow: 0 7px 0 0 #eee, 0 14px 0 0 #eee;
-        background: #eee;
+    }
-        box-shadow: 0 7px 0 0 #eee, 0 14px 0 0 #eee;
+    .home-nav-white .nav-phone-icon:before {
-      }
+      background: #777;
-      .home-nav-white .nav-phone-icon:before {
+      box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777;
-        background: #777;
+    }
-        box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777;
+    #lang,
-      }
+    #nav a {
-      #lang,
+      color: #eee;
-      #nav a {
+      transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-        color: #eee;
+    }
-        transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    #search-box {
-      }
+      border-left-color: rgba(235, 237, 238, .5);
-      #search-box {
+      transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-        border-left-color: rgba(235, 237, 238, .5);
+    }
-        transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    section {
-      }
+      height: 100%;
-      section {
+      width: 100%;
-        height: 100%;
+      background: #fff;
-        width: 100%;
+    }
-        background: #fff;
+    #footer {
-      }
+      background: #000;
-      #footer {
+    }
-        background: #000;
+    #footer,
-      }
+    #footer h2 {
-      #footer,
+      color: #999;
-      #footer h2 {
+    }
-        color: #999;
+    #footer a {
-      }
+      color: #eee;
-      #footer a {
+    }
-        color: #eee;
+    .down {
-      }
+      animation: upDownMove 1.2s ease-in-out infinite;
-      .down {
+    }
-        animation: upDownMove 1.2s ease-in-out infinite;
+  `;
-      }
+}
-    `;
+
-  }
+export default function Home() {
-
+  return (
-  render() {
+    <DocumentTitle title="Ant Design - 一个 UI 设计语言">
-    return (
+      <div className="main-wrapper">
-      <DocumentTitle title="Ant Design - 一个 UI 设计语言">
+        <Link />
-        <div className="main-wrapper">
+        <Banner />
-          <Link />
+        <Page1 />
-          <Banner />
+        <Page2 />
-          <Page1 />
+        <Page3 />
-          <Page2 />
+        <Page4 />
-          <Page3 />
+        <style dangerouslySetInnerHTML={{ __html: getStyle() }} />
-          <Page4 />
+      </div>
-          <style dangerouslySetInnerHTML={{ __html: this.getStyle() }} />
+    </DocumentTitle>
-        </div>
+  );
-      </DocumentTitle>
-    );
-  }
 }

site/theme/template/Layout/Footer.jsx

@@ -18,6 +18,25 @@ function isLocalStorageNameSupported() {
   }
 }
 
+function infoNewVersion() {
+  Modal.info({
+    title: 'antd 新版发布！',
+    content: (
+      <div>
+        <img src="https://os.alipayobjects.com/rmsportal/nyqBompsynAQCpJ.svg" alt="Ant Design" />
+        <p>
+          您好，<a target="_blank" rel="noopener noreferrer" href="/#/changelog">antd@1.0</a> 已正式发布，欢迎升级。
+          如果您还需要使用旧版，请查阅 <a target="_blank" rel="noopener noreferrer" href="http://012x.ant.design">012x.ant.design</a>
+          ，也可通过页面右下角的文档版本选择框进行切换。
+        </p>
+      </div>
+    ),
+    onOk: () => localStorage.setItem('infoNewVersionSent', 'true'),
+    className: 'new-version-info-modal',
+    width: 470,
+  });
+}
+
 docVersions[antdVersion] = antdVersion;
 
 export default class Footer extends React.Component {
@@ -32,29 +51,10 @@ export default class Footer extends React.Component {
     //   2. 超过截止日期后不再提示
     if (localStorage.getItem('infoNewVersionSent') !== 'true' &&
         new Date().getTime() < new Date('2016/05/22').getTime()) {
-      this.infoNewVersion();
+      infoNewVersion();
     }
   }
 
-  infoNewVersion() {
-    Modal.info({
-      title: 'antd 新版发布！',
-      content: (
-        <div>
-          <img src="https://os.alipayobjects.com/rmsportal/nyqBompsynAQCpJ.svg" alt="Ant Design" />
-          <p>
-            您好，<a target="_blank" rel="noopener noreferrer" href="/#/changelog">antd@1.0</a> 已正式发布，欢迎升级。
-            如果您还需要使用旧版，请查阅 <a target="_blank" rel="noopener noreferrer" href="http://012x.ant.design">012x.ant.design</a>
-            ，也可通过页面右下角的文档版本选择框进行切换。
-          </p>
-        </div>
-      ),
-      onOk: () => localStorage.setItem('infoNewVersionSent', 'true'),
-      className: 'new-version-info-modal',
-      width: 470,
-    });
-  }
-
   handleVersionChange = (url) => {
     window.location.href = url;
   }

site/theme/template/Layout/index.jsx

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom';
 import { addLocaleData, IntlProvider } from 'react-intl';
 import Header from './Header';
 import Footer from './Footer';
-import enLocale from '../../en-US.js';
+import enLocale from '../../en-US';
-import cnLocale from '../../zh-CN.js';
+import cnLocale from '../../zh-CN';
 import '../../static/style';
 
 // Expose to iframe