From 87753482bfa3cce08aa65f47bc20f4ca5716f9ee Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 27 Sep 2016 10:06:34 +0800 Subject: [PATCH] style: update code style to please lint, close: #2811 --- .eslintrc.js | 4 + components/breadcrumb/demo/router.md | 2 +- components/cascader/demo/custom-render.md | 2 +- components/checkbox/demo/check-all.md | 2 +- components/menu/demo/sider-current.md | 2 +- components/notification/demo/with-icon.md | 2 +- components/select/demo/search-box.md | 2 +- components/table/demo/ajax.md | 2 +- components/table/demo/basic.md | 2 +- components/table/demo/bordered.md | 2 +- package.json | 6 +- scripts/build-common.js | 36 ---- scripts/update-rc.js | 1 + site/theme/template/Content/Article.jsx | 4 +- site/theme/template/Content/ComponentDoc.jsx | 4 +- site/theme/template/Content/MainContent.jsx | 34 ++-- site/theme/template/Content/index.jsx | 2 +- site/theme/template/Home/Banner.jsx | 64 +++---- site/theme/template/Home/index.jsx | 189 +++++++++---------- site/theme/template/Layout/Footer.jsx | 40 ++-- site/theme/template/Layout/index.jsx | 4 +- 21 files changed, 185 insertions(+), 221 deletions(-) delete mode 100644 scripts/build-common.js mode change 100644 => 100755 scripts/update-rc.js diff --git a/.eslintrc.js b/.eslintrc.js index 59867ddbeb..7709a0729b 100644 --- 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, diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md index 35ff00be58..e3797ccdc4 100644 --- a/components/breadcrumb/demo/router.md +++ b/components/breadcrumb/demo/router.md @@ -29,7 +29,7 @@ const Apps = () => ( ); -const Home = (props) => ( +const Home = props => (
Home diff --git a/components/cascader/demo/custom-render.md b/components/cascader/demo/custom-render.md index 918f0cfd7e..fb68b4e525 100644 --- 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 ( - {label} ( handleAreaClick(e, label, option)}>{option.code}) + {label} ( handleAreaClick(e, label, option)}>{option.code}) ); } diff --git a/components/checkbox/demo/check-all.md b/components/checkbox/demo/check-all.md index 9b4f6d50f8..214e3a5285 100644 --- 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

diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md index 94b069cf0d..9a6b78f33e 100755 --- 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) { diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md index 9b4c3a494d..4ca89be8e6 100644 --- 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.', diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md index 047cf3d49a..53b77a41a6 100644 --- 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); diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index e4049d5502..58ded7cb4c 100644 --- 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; diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md index a0d8919a4c..43598609c7 100644 --- 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) => {text}, + render: text => {text}, }, { title: '年龄', dataIndex: 'age', diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md index 2774d393f0..904576cc9f 100644 --- 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) => {text}, + render: text => {text}, }, { title: '资产', className: 'column-money', diff --git a/package.json b/package.json index 432a5ccacd..e7d4434db4 100644 --- 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", diff --git a/scripts/build-common.js b/scripts/build-common.js deleted file mode 100644 index b6dff0bcd0..0000000000 --- a/scripts/build-common.js +++ /dev/null @@ -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); -}; diff --git a/scripts/update-rc.js b/scripts/update-rc.js old mode 100644 new mode 100755 index 0d24c74966..40b60c5d42 --- 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) => { diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx index 33019db375..e7b59861c1 100644 --- 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({temp}); temp = []; diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx index 839cf54dd6..e72a7801c0 100644 --- 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; diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index c17a67c318..cc2071a4be 100644 --- 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 : [ {item.title}, @@ -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; diff --git a/site/theme/template/Content/index.jsx b/site/theme/template/Content/index.jsx index 8ecc361b81..b15d27a1fd 100644 --- 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], diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx index 23a56649d5..73f4ffa194 100644 --- 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 ( - - ); - } +export default function Banner() { + return ( + + ); } diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx index 312115192c..78a6c8ca2b 100644 --- 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 ( - -
- - - - - - -