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

8 years ago · 87753482bf
21 changed files with 185 additions and 221 deletions
--- a/.eslintrc.js
+++ b/.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,
--- a/components/breadcrumb/demo/router.md
+++ b/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>
--- a/components/cascader/demo/custom-render.md
+++ b/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>
    );
  }
--- a/components/checkbox/demo/check-all.md
+++ b/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 />
--- a/components/menu/demo/sider-current.md
+++ b/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) {
--- a/components/notification/demo/with-icon.md
+++ b/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.',
--- a/components/select/demo/search-box.md
+++ b/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);
--- a/components/table/demo/ajax.md
+++ b/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;
--- a/components/table/demo/basic.md
+++ b/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',
--- a/components/table/demo/bordered.md
+++ b/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',
--- a/package.json
+++ b/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",
--- a/scripts/build-common.js
+++ b/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);
-};
--- a/scripts/update-rc.js
+++ b/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) => {
--- a/site/theme/template/Content/Article.jsx
+++ b/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 = [];
--- a/site/theme/template/Content/ComponentDoc.jsx
+++ b/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])
-      .filter((demoData) => !demoData.meta.hidden);
+    const demos = Object.keys(props.demos).map(key => props.demos[key])
+      .filter(demoData => !demoData.meta.hidden);
    const expand = this.state.expandAll;

    const isSingleCol = meta.cols === 1;
--- a/site/theme/template/Content/MainContent.jsx
+++ b/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;
--- a/site/theme/template/Content/index.jsx
+++ b/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],
--- a/site/theme/template/Home/Banner.jsx
+++ b/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 {
-  typeFunc(a) {
-    if (a.key === 'line') {
-      return 'right';
-    } else if (a.key === 'button') {
-      return 'bottom';
-    }
-    return 'left';
+function typeFunc(a) {
+  if (a.key === 'line') {
+    return 'right';
+  } else if (a.key === 'button') {
+    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>
-    );
-  }
+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>
+  );
 }
--- a/site/theme/template/Home/index.jsx
+++ b/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.
+function getStyle() {
+  return `
+    #react-content,
+    #react-content > div {
+      height: 100%;
+    }
+    .main-wrapper {
+      background: transparent;
+      width: auto;
+      margin: 0;
+      border-radius: 0;
+      padding: 0;
+      overflow: unset;
+      display: inline;
+      min-height: 600px;
+    }
+    #header {
+      position: fixed;
+      z-index: 999;
+      background: rgba(0, 0, 0, 0.25);
+      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 {
+      background: transparent;
+    }
+    #header.home-nav-white {
+      background: rgba(255, 255, 255, 0.9);
+      border-bottom-color: #EBEDEE;
+    }
+    .home-nav-white #search-box {
+      border-left-color: #EBEDEE;
+    }
+    .home-nav-white #nav a {
+      color: #666;
+    }
+    .home-nav-white #lang {
+      color: #666;
+      border-color: #666;
+    }
+    .nav-phone-icon:before {
+      background: #eee;
+      box-shadow: 0 7px 0 0 #eee, 0 14px 0 0 #eee;
+    }
+    .home-nav-white .nav-phone-icon:before {
+      background: #777;
+      box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777;
+    }
+    #lang,
+    #nav a {
+      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);
+      transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    }
+    section {
+      height: 100%;
+      width: 100%;
+      background: #fff;
+    }
+    #footer {
+      background: #000;
+    }
+    #footer,
+    #footer h2 {
+      color: #999;
+    }
+    #footer a {
+      color: #eee;
+    }
+    .down {
+      animation: upDownMove 1.2s ease-in-out infinite;
+    }
+  `;
+}

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

 // Expose to iframe