style: update code style to please lint

.eslintrc.json

@@ -20,7 +20,6 @@
     "comma-dangle": 0,
     "func-names": 0,
     "prefer-const": 0,
-    "prefer-template": 0,
     "arrow-body-style": 0,
     "react/sort-comp": 0,
     "react/no-multi-comp": 0,

components/affix/index.jsx

@@ -4,8 +4,8 @@ import rcUtil from 'rc-util';
 import classNames from 'classnames';
 
 function getScroll(w, top) {
-  let ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
-  let method = 'scroll' + (top ? 'Top' : 'Left');
+  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
+  let method = `scroll${top ? 'Top' : 'Left'}`;
   if (typeof ret !== 'number') {
     let d = w.document;
     // ie6,7,8 standard mode

components/alert/index.jsx

@@ -21,10 +21,10 @@ export default React.createClass({
   handleClose(e) {
     e.preventDefault();
     let dom = ReactDOM.findDOMNode(this);
-    dom.style.height = dom.offsetHeight + 'px';
+    dom.style.height = `${dom.offsetHeight}px`;
     // Magic code
     // 重复一次后才能正确设置 height
-    dom.style.height = dom.offsetHeight + 'px';
+    dom.style.height = `${dom.offsetHeight}px`;
 
     this.setState({
       closing: false
@@ -67,10 +67,10 @@ export default React.createClass({
 
     let alertCls = classNames({
       [prefixCls]: true,
-      [prefixCls + '-' + type]: true,
-      [prefixCls + '-close']: !this.state.closing,
-      [prefixCls + '-with-description']: !!description,
-      [prefixCls + '-no-icon']: !showIcon,
+      [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-close`]: !this.state.closing,
+      [`${prefixCls}-with-description`]: !!description,
+      [`${prefixCls}-no-icon`]: !showIcon,
     });
 
     // closeable when closeText is assigned
@@ -85,9 +85,9 @@ export default React.createClass({
         onEnd={this.animationEnd}>
         <div data-show={this.state.closing} className={alertCls}>
           {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
-          <span className={prefixCls + '-message'}>{message}</span>
-          <span className={prefixCls + '-description'}>{description}</span>
-          {closable ? <a onClick={this.handleClose} className={prefixCls + '-close-icon'}>
+          <span className={`${prefixCls}-message`}>{message}</span>
+          <span className={`${prefixCls}-description`}>{description}</span>
+          {closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
             {closeText || <Icon type="cross" />}
           </a> : null}
         </div>

components/badge/ScrollNumber.jsx

@@ -76,7 +76,7 @@ class AntScrollNumber extends React.Component {
       className: `${this.props.prefixCls}-only`,
       style: {
         transition: removeTransition && 'none',
-        transform: 'translate3d(0, ' + (-position * height) + 'px, 0)',
+        transform: `translate3d(0, ${-position * height}px, 0)`,
         height,
       },
       key: i,

components/badge/index.jsx

@@ -33,7 +33,7 @@ class AntBadge extends React.Component {
         {children}
         <Animate component=""
           showProp="data-show"
-          transitionName={prefixCls + '-zoom'}
+          transitionName={`${prefixCls}-zoom`}
           transitionAppear>
           {
             hidden ? null :

components/breadcrumb/index.jsx

@@ -17,14 +17,14 @@ const BreadcrumbItem = React.createClass({
   },
   render() {
     const { prefixCls, separator, children } = this.props;
-    let link = <a className={prefixCls + '-link'} {...this.props}>{children}</a>;
+    let link = <a className={`${prefixCls}-link`} {...this.props}>{children}</a>;
     if (typeof this.props.href === 'undefined') {
-      link = <span className={prefixCls + '-link'} {...this.props}>{children}</span>;
+      link = <span className={`${prefixCls}-link`} {...this.props}>{children}</span>;
     }
     return (
       <span>
         {link}
-        <span className={prefixCls + '-separator'}>{separator}</span>
+        <span className={`${prefixCls}-separator`}>{separator}</span>
       </span>
     );
   }
@@ -62,7 +62,7 @@ const Breadcrumb = React.createClass({
         let link;
         let path = route.path.replace(/^\//, '');
         Object.keys(params).forEach(key => {
-          path = path.replace(':' + key, params[key]);
+          path = path.replace(`:${key}`, params[key]);
         });
         if (path) {
           paths.push(path);
@@ -71,7 +71,7 @@ const Breadcrumb = React.createClass({
         if (i === routes.length - 1) {
           link = <span>{name}</span>;
         } else {
-          link = <a href={'#/' + paths.join('/')}>{name}</a>;
+          link = <a href={`#/${paths.join('/')}`}>{name}</a>;
         }
         return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
       });

components/button/button.jsx

@@ -46,7 +46,7 @@ export default class Button extends React.Component {
       [prefix + type]: type,
       [prefix + shape]: shape,
       [prefix + sizeCls]: sizeCls,
-      [prefix + 'loading']: ('loading' in props && props.loading !== false),
+      [`${prefix}loading`]: ('loading' in props && props.loading !== false),
       [className]: className
     });
 

components/calendar/index.jsx

@@ -8,8 +8,8 @@ import Header from './Header';
 function noop() { return null; }
 
 function zerofixed(v) {
-  if (v < 10) return '0' + v;
-  return v + '';
+  if (v < 10) return `0${v}`;
+  return `${v}`;
 }
 
 class Calendar extends Component {
@@ -80,7 +80,7 @@ class Calendar extends Component {
 
     let cls = className || '';
     if (fullscreen) {
-      cls += (' ' + prefixCls + '-fullscreen');
+      cls += (` ${prefixCls}-fullscreen`);
     }
 
     return (

components/carousel/index.jsx

@@ -34,7 +34,7 @@ const AntCarousel = React.createClass({
 
     let className = 'ant-carousel';
     if (props.vertical) {
-      className = className + ' ant-carousel-vertical';
+      className = `${className} ant-carousel-vertical`;
     }
 
     return (

components/checkbox/demo/basic.md

@@ -10,7 +10,7 @@
 import { Checkbox } from 'antd';
 
 function onChange(e) {
-  console.log('checked = ' + e.target.checked);
+  console.log(`checked = ${e.target.checked}`);
 }
 
 ReactDOM.render(<label>

components/checkbox/demo/controller.md

@@ -17,8 +17,7 @@ const App = React.createClass({
     };
   },
   render() {
-    const label = (this.state.checked ? '选中' : '取消') + '-' +
-      (this.state.disabled ? '不可用' : '可用');
+    const label = `${this.state.checked ? '选中' : '取消'}-${this.state.disabled ? '不可用' : '可用'}`;
     return (
       <div>
         <p style={{ marginBottom: '20px' }}>

components/date-picker/index.jsx

@@ -119,7 +119,7 @@ function createPicker(TheCalendar, defaultFormat) {
                       value={value && this.getFormatter().format(value)}
                       placeholder={placeholder}
                       style={this.props.style}
-                      className={'ant-calendar-picker-input ant-input' + sizeClass}/>
+                      className={`ant-calendar-picker-input ant-input${sizeClass}`}/>
                     <span className="ant-calendar-picker-icon"/>
                   </span>
                 );

components/dropdown/demo/event.md

@@ -9,7 +9,7 @@
 ````jsx
 import { Menu, Dropdown, Icon } from 'antd';
 const onClick = function ({ key }) {
-  console.log('点击了菜单' + key);
+  console.log(`点击了菜单${key}`);
 };
 
 const menu = (

components/form/FormItem.jsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 function prefixClsFn(prefixCls, ...args) {
   return args.map((s) => {
-    return prefixCls + '-' + s;
+    return `${prefixCls}-${s}`;
   }).join(' ');
 }
 
@@ -13,8 +13,8 @@ class FormItem extends React.Component {
       return '';
     }
     const { span, offset } = colDef;
-    const col = span ? 'col-' + span : '';
-    const offsetCol = offset ? ' col-offset-' + offset : '';
+    const col = span ? `col-${span}` : '';
+    const offsetCol = offset ? ` col-offset-${offset}` : '';
     return col + offsetCol;
   }
 
@@ -80,7 +80,7 @@ class FormItem extends React.Component {
       );
     }
     return (
-      <div className={this.props.prefixCls + '-item-control ' + classes}>
+      <div className={`${this.props.prefixCls}-item-control ${classes}`}>
         {c1}{c2}{c3}
       </div>
     );

components/form/ValueMixin.jsx

@@ -14,7 +14,7 @@ const ValueMixin = {
     let v = e;
     const target = e && e.target;
     if (target) {
-      if ((target.nodeName + '').toLowerCase() === 'input' &&
+      if ((`${target.nodeName}`).toLowerCase() === 'input' &&
         target.type === 'checkbox') {
         v = target.checked;
       } else {

components/form/demo/form-controls.md

@@ -15,7 +15,7 @@ const Option = Select.Option;
 const RadioGroup = Radio.Group;
 
 function handleSelectChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(

components/input/index.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 function prefixClsFn(prefixCls, ...args) {
   return args.map((s) => {
-    return prefixCls + '-' + s;
+    return `${prefixCls}-${s}`;
   }).join(' ');
 }
 
@@ -25,7 +25,10 @@ function fixControlledValue(value) {
 
 class Group extends React.Component {
   render() {
-    const className = 'ant-input-group ' + (this.props.className || '');
+    const className = classNames({
+      'ant-input-group': true,
+      [this.props.className]: !!this.props.className,
+    });
     return (
       <span className={className} style={this.props.style}>
         {this.props.children}

components/layout/col.jsx

@@ -14,11 +14,11 @@ const Col = React.createClass({
   render() {
     const { span, order, offset, push, pull, className, ...others } = this.props;
     const classes = classNames({
-      ['col-' + span]: span,
-      ['col-order-' + order]: order,
-      ['col-offset-' + offset]: offset,
-      ['col-push-' + push]: push,
-      ['col-pull-' + pull]: pull,
+      [`col-${span}`]: span,
+      [`col-order-${order}`]: order,
+      [`col-offset-${offset}`]: offset,
+      [`col-push-${push}`]: push,
+      [`col-pull-${pull}`]: pull,
       [className]: className,
     });
     return <div {...others} className={classes}>{ this.props.children }</div>;

components/layout/row.jsx

@@ -13,9 +13,9 @@ const Row = React.createClass({
     const { type, justify, align, className, ...others } = this.props;
     const classes = classNames({
       row: true,
-      ['row-' + type]: type,
-      ['row-' + type + '-' + justify]: justify,
-      ['row-' + type + '-' + align]: align,
+      [`row-${type}`]: type,
+      [`row-${type}-${justify}`]: justify,
+      [`row-${type}-${align}`]: align,
       [className]: className,
     });
     return <div {...others} className={classes}>{ this.props.children }</div>;

components/menu/index.jsx

@@ -57,7 +57,7 @@ const AntMenu = React.createClass({
     }
 
     let props = {};
-    const className = this.props.className + ' ' + this.props.prefixCls + '-' + this.props.theme;
+    const className = `${this.props.className} ${this.props.prefixCls}-${this.props.theme}`;
     if (this.props.mode !== 'inline') {
       // 这组属性的目的是
       // 弹出型的菜单需要点击后立即关闭

components/message/index.jsx

@@ -40,7 +40,7 @@ function notice(content, duration = defaultDuration, type, onClose) {
     key,
     duration,
     style: {},
-    content: <div className={'ant-message-custom-content ' + iconClass}>
+    content: <div className={`ant-message-custom-content ${iconClass}`}>
       <Icon className={iconClass} type={iconType} />
       <span>{content}</span>
     </div>,

components/notification/demo/with-btn.md

@@ -14,7 +14,7 @@ const close = function () {
 };
 
 const openNotification = function () {
-  const key = 'open' + Date.now();
+  const key = `open${Date.now()}`;
   const btnClick = function () {
     // 隐藏提醒框
     notification.close(key);

components/notification/index.jsx

@@ -50,11 +50,11 @@ function notice(args) {
 
     getNotificationInstance().notice({
       content: <div>
-        <Icon className={prefixCls + 'icon-' + args.icon + prefixCls + 'icon'} type={iconType} />
+        <Icon className={`${prefixCls}icon-${args.icon}${prefixCls}icon`} type={iconType} />
 
-        <div className={prefixCls + 'message'}>{args.message}</div>
+        <div className={`${prefixCls}message`}>{args.message}</div>
 
-        <div className={prefixCls + 'description'}>{args.description}</div>
+        <div className={`${prefixCls}description`}>{args.description}</div>
       </div>,
       duration,
       closable: true,
@@ -67,9 +67,9 @@ function notice(args) {
     if (!args.btn) {
       getNotificationInstance().notice({
         content: <div>
-          <div className={prefixCls + 'message'}>{args.message}</div>
+          <div className={`${prefixCls}message`}>{args.message}</div>
 
-          <div className={prefixCls + 'description'}>{args.description}</div>
+          <div className={`${prefixCls}description`}>{args.description}</div>
         </div>,
         duration,
         closable: true,
@@ -80,10 +80,10 @@ function notice(args) {
     } else {
       getNotificationInstance().notice({
         content: <div>
-          <div className={prefixCls + 'message'}>{args.message}</div>
+          <div className={`${prefixCls}message`}>{args.message}</div>
 
-          <div className={prefixCls + 'description'}>{args.description}</div>
-          <span className={prefixCls + 'btn'}>
+          <div className={`${prefixCls}description`}>{args.description}</div>
+          <span className={`${prefixCls}btn`}>
             {args.btn}
           </span>
         </div>,

components/popconfirm/index.jsx

@@ -65,12 +65,12 @@ export default React.createClass({
     const { title, okText, cancelText, placement, overlayStyle, trigger, ...restProps } = this.props;
     const overlay = (
       <div>
-        <div className={prefixCls + '-content'}>
-          <p className={prefixCls + '-message'}>
+        <div className={`${prefixCls}-content`}>
+          <p className={`${prefixCls}-message`}>
             <Icon type="exclamation-circle" />
             {title}
           </p>
-          <div className={prefixCls + '-buttons'}>
+          <div className={`${prefixCls}-buttons`}>
             <Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
             <Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
           </div>

components/popover/index.jsx

@@ -48,8 +48,8 @@ const Popover = React.createClass({
   getOverlay() {
     return (
       <div>
-        {this.props.title && <div className={prefixCls + '-title'}>{this.props.title}</div>}
-        <div className={prefixCls + '-content'}>
+        {this.props.title && <div className={`${prefixCls}-title`}>{this.props.title}</div>}
+        <div className={`${prefixCls}-content`}>
           {this.props.overlay}
         </div>
       </div>

components/progress/demo/format.md

@@ -12,7 +12,7 @@ const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
-    <ProgressCircle percent={75} format={percent => percent / 10.0 + '折' } />
+    <ProgressCircle percent={75} format={percent => `${percent / 10.0}折` } />
     <ProgressCircle percent={100} format={() => '成功'} />
   </div>
   , mountNode);

components/progress/index.jsx

@@ -60,35 +60,35 @@ let Line = React.createClass({
     if (props.showInfo === true) {
       if (props.status === 'exception') {
         progressInfo = (
-          <span className={prefixCls + '-line-text'}>
+          <span className={`${prefixCls}-line-text`}>
             {props.format ? text : <Icon type="exclamation" />}
           </span>
         );
       } else if (props.status === 'success') {
         progressInfo = (
-          <span className={prefixCls + '-line-text'}>
+          <span className={`${prefixCls}-line-text`}>
             {props.format ? text : <Icon type="check" />}
           </span>
         );
       } else {
         progressInfo = (
-          <span className={prefixCls + '-line-text'}>{text}</span>
+          <span className={`${prefixCls}-line-text`}>{text}</span>
         );
       }
     } else {
-      fullCls = ' ' + prefixCls + '-line-wrap-full';
+      fullCls = ` ${prefixCls}-line-wrap-full`;
     }
     let percentStyle = {
-      width: props.percent + '%',
+      width: `${props.percent}%`,
       height: props.strokeWidth
     };
 
     return (
-      <div className={prefixCls + '-line-wrap clearfix status-' + props.status + fullCls} style={props.style}>
+      <div className={`${prefixCls}-line-wrap clearfix status-${props.status}${fullCls}`} style={props.style}>
         {progressInfo}
-        <div className={prefixCls + '-line-outer'}>
-          <div className={prefixCls + '-line-inner'}>
-            <div className={prefixCls + '-line-bg'} style={percentStyle}></div>
+        <div className={`${prefixCls}-line-outer`}>
+          <div className={`${prefixCls}-line-inner`}>
+            <div className={`${prefixCls}-line-bg`} style={percentStyle}></div>
           </div>
         </div>
       </div>
@@ -147,25 +147,25 @@ let Circle = React.createClass({
 
     if (props.status === 'exception') {
       progressInfo = (
-        <span className={prefixCls + '-circle-text'}>
+        <span className={`${prefixCls}-circle-text`}>
           {props.format ? text : <Icon type="exclamation" />}
         </span>
       );
     } else if (props.status === 'success') {
       progressInfo = (
-        <span className={prefixCls + '-circle-text'}>
+        <span className={`${prefixCls}-circle-text`}>
           {props.format ? text : <Icon type="check" />}
         </span>
       );
     } else {
       progressInfo = (
-        <span className={prefixCls + '-circle-text'}>{text}</span>
+        <span className={`${prefixCls}-circle-text`}>{text}</span>
       );
     }
 
     return (
-      <div className={prefixCls + '-circle-wrap status-' + props.status} style={props.style}>
-        <div className={prefixCls + '-circle-inner'} style={style}>
+      <div className={`${prefixCls}-circle-wrap status-${props.status}`} style={props.style}>
+        <div className={`${prefixCls}-circle-inner`} style={style}>
           <Progresscircle percent={props.percent} strokeWidth={props.strokeWidth}
             strokeColor={statusColorMap[props.status]} trailColor={props.trailColor} />
           {progressInfo}

components/radio/demo/radiobutton.md

@@ -12,7 +12,7 @@ const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 
 function onChange(e) {
-  console.log('radio checked:' + e.target.value);
+  console.log(`radio checked:${e.target.value}`);
 }
 
 ReactDOM.render(<div>

components/radio/demo/radiogroup.md

@@ -17,7 +17,7 @@ const App = React.createClass({
     };
   },
   onChange(e) {
-    console.log('radio checked:' + e.target.value);
+    console.log(`radio checked:${e.target.value}`);
     this.setState({
       value: e.target.value
     });

components/radio/radio.jsx

@@ -12,8 +12,8 @@ const AntRadio = React.createClass({
     const { prefixCls, children, checked, disabled, className } = this.props;
     const classString = classNames({
       [prefixCls]: true,
-      [prefixCls + '-checked']: checked,
-      [prefixCls + '-disabled']: disabled,
+      [`${prefixCls}-checked`]: checked,
+      [`${prefixCls}-disabled`]: disabled,
       [className]: !!className,
     });
     return (

components/select/demo/basic.md

@@ -11,7 +11,7 @@ import { Select } from 'antd';
 const Option = Select.Option;
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(

components/select/demo/combobox.md

@@ -23,7 +23,7 @@ const Test = React.createClass({
       options = [];
     } else {
       options = ['gmail.com', '163.com', 'qq.com'].map((domain) => {
-        const email = value + '@' + domain;
+        const email = `${value}@${domain}`;
         return <Option key={email}>{email}</Option>;
       });
     }

components/select/demo/multiple.md

@@ -17,7 +17,7 @@ for (let i = 10; i < 36; i++) {
 }
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(

components/select/demo/optgroup.md

@@ -12,7 +12,7 @@ const Option = Select.Option;
 const OptGroup = Select.OptGroup;
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(

components/select/demo/search.md

@@ -11,7 +11,7 @@ import { Select } from 'antd';
 const Option = Select.Option;
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(

components/select/demo/size.md

@@ -11,7 +11,7 @@ import { Select } from 'antd';
 const Option = Select.Option;
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(

components/select/demo/tags.md

@@ -17,7 +17,7 @@ for (let i = 10; i < 36; i++) {
 }
 
 function handleChange(value) {
-  console.log('selected ' + value);
+  console.log(`selected ${value}`);
 }
 
 ReactDOM.render(

components/slider/demo/tip-formatter.md

@@ -10,7 +10,7 @@
 import { Slider } from 'antd';
 
 function formatter(value) {
-  return value + '%';
+  return `${value}%`;
 }
 
 ReactDOM.render(<div>

components/spin/index.jsx

@@ -46,9 +46,9 @@ const AntSpin = React.createClass({
 
     if (this.isNestedPattern()) {
       return (
-        <div className={this.props.spining ? (prefixCls + '-nested-loading') : ''}>
+        <div className={this.props.spining ? (`${prefixCls}-nested-loading`) : ''}>
           {spinElement}
-          <div className={prefixCls + '-container'}>
+          <div className={`${prefixCls}-container`}>
             {this.props.children}
           </div>
         </div>

components/steps/demo/step-next.md

@@ -18,7 +18,7 @@ const Step = Steps.Step;
 const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
 const steps = array.map((item, i) => {
   return {
-    title: '步骤' + (i + 1)
+    title: `步骤${i + 1}`
   };
 });
 

components/switch/demo/basic.md

@@ -10,7 +10,7 @@
 import { Switch } from 'antd';
 
 function onChange(checked) {
-  console.log('switch to ' + checked);
+  console.log(`switch to ${checked}`);
 }
 
 ReactDOM.render(

components/table/demo/fixed-header.md

@@ -26,9 +26,9 @@ const data = [];
 for (let i = 0; i < 100; i++) {
   data.push({
     key: i,
-    name: '李大嘴' + i,
+    name: `李大嘴${i}`,
     age: 32,
-    address: '西湖区湖底公园' + i + '号'
+    address: `西湖区湖底公园${i}号`
   });
 }
 

components/table/demo/paging.md

@@ -27,9 +27,9 @@ const data = [];
 for (let i = 0; i < 46; i++) {
   data.push({
     key: i,
-    name: '李大嘴' + i,
+    name: `李大嘴${i}`,
     age: 32,
-    address: '西湖区湖底公园' + i + '号'
+    address: `西湖区湖底公园${i}号`
   });
 }
 

components/table/demo/row-selection-and-operation.md

@@ -26,9 +26,9 @@ const data = [];
 for (let i = 0; i < 46; i++) {
   data.push({
     key: i,
-    name: '李大嘴' + i,
+    name: `李大嘴${i}`,
     age: 32,
-    address: '西湖区湖底公园' + i + '号'
+    address: `西湖区湖底公园${i}号`
   });
 }
 

components/table/demo/row-selection-props.md

@@ -48,7 +48,7 @@ const rowSelection = {
     };
   },
   onChange(selectedRowKeys) {
-    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+    console.log(`selectedRowKeys changed: ${selectedRowKeys}`);
   },
   onSelect(record, selected, selectedRows) {
     console.log(record, selected, selectedRows);

components/table/demo/row-selection.md

@@ -42,7 +42,7 @@ const data = [{
 // 通过 rowSelection 对象表明需要行选择
 const rowSelection = {
   onChange(selectedRowKeys) {
-    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+    console.log(`selectedRowKeys changed: ${selectedRowKeys}`);
   },
   onSelect(record, selected, selectedRows) {
     console.log(record, selected, selectedRows);

components/table/index.jsx

@@ -420,16 +420,16 @@ let AntTable = React.createClass({
           }
         }
 
+        const isAscend = isSortColumn && this.state.sortOrder === 'ascend';
+        const isDescend = isSortColumn && this.state.sortOrder === 'descend';
         sortButton = (
           <div className="ant-table-column-sorter">
-            <span className={'ant-table-column-sorter-up ' +
-                             ((isSortColumn && this.state.sortOrder === 'ascend') ? 'on' : 'off')}
+            <span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
               title="↑"
               onClick={this.toggleSortOrder.bind(this, 'ascend', column)}>
               <Icon type="caret-up"/>
             </span>
-            <span className={'ant-table-column-sorter-down ' +
-                             ((isSortColumn && this.state.sortOrder === 'descend') ? 'on' : 'off')}
+            <span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
               title="↓"
               onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
               <Icon type="caret-down"/>
@@ -601,7 +601,7 @@ let AntTable = React.createClass({
       table = <Spin className={spinClassName}>{table}</Spin>;
     }
     return (
-      <div className={'clearfix' + emptyClass}>
+      <div className={`clearfix${emptyClass}`}>
         {table}
         {this.renderPagination()}
       </div>

components/tabs/demo/editable-card.md

@@ -30,7 +30,7 @@ const Demo = React.createClass({
   },
   add() {
     const panes = this.state.panes;
-    const activeKey = 'newTab' + this.newTabIndex++;
+    const activeKey = `newTab${this.newTabIndex++}`;
     panes.push(<TabPane tab="新建页签" key={activeKey}>新页面</TabPane>);
     this.setState({ panes, activeKey });
   },

components/tabs/index.jsx

@@ -30,9 +30,9 @@ class AntTabs extends React.Component {
           children, tabBarExtraContent } = this.props;
     let className = classNames({
       [this.props.className]: !!this. props.className,
-      [prefixCls + '-mini']: size === 'small' || size === 'mini',
-      [prefixCls + '-vertical']: tabPosition === 'left' || tabPosition === 'right',
-      [prefixCls + '-card']: type.indexOf('card') >= 0,
+      [`${prefixCls}-mini`]: size === 'small' || size === 'mini',
+      [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
+      [`${prefixCls}-card`]: type.indexOf('card') >= 0,
     });
     if (tabPosition === 'left' || tabPosition === 'right' || type.indexOf('card') >= 0) {
       animation = null;
@@ -53,14 +53,14 @@ class AntTabs extends React.Component {
       // Add new tab handler
       tabBarExtraContent = (
         <span>
-          <Icon type="plus" className={prefixCls + '-new-tab'} onClick={this.createNewTab} />
+          <Icon type="plus" className={`${prefixCls}-new-tab`} onClick={this.createNewTab} />
           {tabBarExtraContent}
         </span>
       );
     }
     // Wrap the extra content
     tabBarExtraContent = (
-      <div className={prefixCls + '-extra-content'}>
+      <div className={`${prefixCls}-extra-content`}>
         {tabBarExtraContent}
       </div>
     );

components/tag/demo/control.md

@@ -29,7 +29,7 @@ const App = React.createClass({
   addTag() {
     const tags = [...this.state.tags];
     index += 1;
-    tags.push({ key: index, name: '新标签' + index });
+    tags.push({ key: index, name: `新标签${index}` });
     this.setState({ tags });
   },
   render() {

components/tag/index.jsx

@@ -16,9 +16,9 @@ class AntTag extends React.Component {
 
   close(e) {
     const dom = ReactDOM.findDOMNode(this);
-    dom.style.width = dom.offsetWidth + 'px';
+    dom.style.width = `${dom.offsetWidth}px`;
     // It's Magic Code, don't know why
-    dom.style.width = dom.offsetWidth + 'px';
+    dom.style.width = `${dom.offsetWidth}px`;
     this.setState({
       closing: true,
     });
@@ -40,18 +40,18 @@ class AntTag extends React.Component {
     const close = closable ? <Icon type="cross" onClick={this.close.bind(this)} /> : '';
     const className = classNames({
       [prefixCls]: true,
-      [prefixCls + '-' + color]: !!color,
-      [prefixCls + '-close']: this.state.closing,
+      [`${prefixCls}-${color}`]: !!color,
+      [`${prefixCls}-close`]: this.state.closing,
     });
     return (
       <Animate component=""
         showProp="data-show"
-        transitionName={prefixCls + '-zoom'}
+        transitionName={`${prefixCls}-zoom`}
         transitionAppear
         onEnd={this.animationEnd.bind(this)}>
         {this.state.closed ? null : (
           <div data-show={!this.state.closing} className={className}>
-            <span className={prefixCls + '-text'} {...restProps} />
+            <span className={`${prefixCls}-text`} {...restProps} />
             {close}
           </div>
         )}

components/time-picker/index.jsx

@@ -86,7 +86,7 @@ const AntTimePicker = React.createClass({
     }
     let className = classNames({
       [props.className]: !!props.className,
-      [props.prefixCls + '-' + props.size]: true,
+      [`${props.prefixCls}-${props.size}`]: true,
     });
     if (props.format.indexOf('ss') < 0) {
       props.showSecond = false;

components/timeline/index.jsx

@@ -13,15 +13,15 @@ const TimelineItem = React.createClass({
   render() {
     const { prefixCls, color, last, children, pending } = this.props;
     const itemClassName = classNames({
-      [prefixCls + '-item']: true,
-      [prefixCls + '-item-last']: last,
-      [prefixCls + '-item-pending']: pending,
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-last`]: last,
+      [`${prefixCls}-item-pending`]: pending,
     });
     return (
       <li className={itemClassName}>
-        <div className={prefixCls + '-item-tail'} />
-        <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color} />
-        <div className={prefixCls + '-item-content'}>{children}</div>
+        <div className={`${prefixCls}-item-tail`} />
+        <div className={`${prefixCls}-item-head ${prefixCls}-item-head-${color}`} />
+        <div className={`${prefixCls}-item-content`}>{children}</div>
       </li>
     );
   }
@@ -38,7 +38,7 @@ const Timeline = React.createClass({
     const pendingNode = typeof pending === 'boolean' ? null : pending;
     const className = classNames({
       [prefixCls]: true,
-      [prefixCls + '-pending']: !!pending,
+      [`${prefixCls}-pending`]: !!pending,
     });
     return (
       <ul className={className}>

components/transfer/demo/advanced.md

@@ -26,8 +26,8 @@ const App = React.createClass({
     for (let i = 0; i < 20; i++) {
       const data = {
         key: i,
-        title: '内容' + (i + 1),
-        description: '内容' + (i + 1) + '的描述',
+        title: `内容${i + 1}`,
+        description: `内容${i + 1}的描述`,
         chosen: Math.random() * 2 > 1
       };
       if (data.chosen) {
@@ -60,7 +60,7 @@ const App = React.createClass({
         operations={['向右操作文案', '向左操作文案']}
         targetKeys={this.state.targetKeys}
         onChange={this.handleChange}
-        render={item => item.title + '-' + item.description}
+        render={item => `${item.title}-${item.description}`}
         footer={this.renderFooter} />
     );
   }

components/transfer/demo/basic.md

@@ -25,8 +25,8 @@ const App = React.createClass({
     for (let i = 0; i < 20; i++) {
       const data = {
         key: i,
-        title: '内容' + (i + 1),
-        description: '内容' + (i + 1) + '的描述',
+        title: `内容${i + 1}`,
+        description: `内容${i + 1}的描述`,
         chosen: Math.random() * 2 > 1
       };
       if (data.chosen) {

components/transfer/demo/search.md

@@ -25,8 +25,8 @@ const App = React.createClass({
     for (let i = 0; i < 20; i++) {
       const data = {
         key: i,
-        title: '内容' + (i + 1),
-        description: '内容' + (i + 1) + '的描述',
+        title: `内容${i + 1}`,
+        description: `内容${i + 1}的描述`,
         chosen: Math.random() * 2 > 1
       };
       if (data.chosen) {

components/transfer/index.jsx

@@ -105,22 +105,22 @@ class Transfer extends Component {
       this.filterDataSource(dataSource, filter).map(item => item.key);
 
     this.setState({
-      [direction + 'CheckedKeys']: holder,
+      [`${direction}CheckedKeys`]: holder,
     });
   }
 
   handleFilter(direction, e) {
     this.setState({
       // deselect all
-      [direction + 'CheckedKeys']: [],
+      [`${direction}CheckedKeys`]: [],
       // add filter
-      [direction + 'Filter']: e.target.value,
+      [`${direction}Filter`]: e.target.value,
     });
   }
 
   handleClear(direction) {
     this.setState({
-      [direction + 'Filter']: '',
+      [`${direction}Filter`]: '',
     });
   }
 
@@ -140,7 +140,7 @@ class Transfer extends Component {
       holder.push(selectedItem.key);
     }
     this.setState({
-      [direction + 'CheckedKeys']: holder,
+      [`${direction}CheckedKeys`]: holder,
     });
   }
 
@@ -181,14 +181,14 @@ class Transfer extends Component {
           searchPlaceholder={searchPlaceholder}
           body={body}
           footer={footer}
-          prefixCls={prefixCls + '-list'}/>
+          prefixCls={`${prefixCls}-list`}/>
         <Operation rightActive={rightActive}
           rightArrowText={operations[0]}
           moveToRight={this.moveTo.bind(this, 'right')}
           leftActive={leftActive}
           leftArrowText={operations[1]}
           moveToLeft={this.moveTo.bind(this, 'left')}
-          className={prefixCls + '-operation'}/>
+          className={`${prefixCls}-operation`}/>
         <List titleText={titles[1]}
           dataSource={rightDataSource}
           filter={rightFilter}
@@ -205,7 +205,7 @@ class Transfer extends Component {
           searchPlaceholder={searchPlaceholder}
           body={body}
           footer={footer}
-          prefixCls={prefixCls + '-list'}/>
+          prefixCls={`${prefixCls}-list`}/>
       </div>
     );
   }

components/transfer/list.jsx

@@ -78,7 +78,7 @@ class TransferList extends Component {
 
     const listCls = classNames({
       [prefixCls]: true,
-      [prefixCls + '-with-footer']: !!footerDom,
+      [`${prefixCls}-with-footer`]: !!footerDom,
     });
 
     const showItems = dataSource.map((item) => {
@@ -105,7 +105,7 @@ class TransferList extends Component {
             checked: checkStatus === 'all',
             checkPart: checkStatus === 'part',
             checkable: <span className={`ant-transfer-checkbox-inner`}></span>
-          })}<span className={`${prefixCls}-header-selected`}><span>{(checkedKeys.length > 0 ? checkedKeys.length + '/' : '') + dataSource.length} 条</span>
+          })}<span className={`${prefixCls}-header-selected`}><span>{(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} 条</span>
           <span className={`${prefixCls}-header-title`}>{titleText}</span></span>
         </div>
         { bodyDom ||

components/transfer/search.jsx

@@ -21,13 +21,13 @@ class Search extends Component {
     const { placeholder, value, prefixCls } = this.props;
     return (
       <div>
-        <input placeholder={placeholder} className={ prefixCls + ' ant-input' } value={ value } ref="input"
+        <input placeholder={placeholder} className={ `${prefixCls} ant-input` } value={ value } ref="input"
           onChange={this.handleChange.bind(this)}/>
         { value && value.length > 0 ?
-          <a href="#" className={ prefixCls + '-action' } onClick={this.handleClear.bind(this)}>
+          <a href="#" className={ `${prefixCls}-action` } onClick={this.handleClear.bind(this)}>
             <Icon type="cross-circle" />
           </a>
-          : <span className={ prefixCls + '-action' }><Icon type="search" /></span>
+          : <span className={ `${prefixCls}-action` }><Icon type="search" /></span>
         }
       </div>
     );

components/upload/demo/basic.md

@@ -17,9 +17,9 @@ const props = {
       console.log(info.file, info.fileList);
     }
     if (info.file.status === 'done') {
-      message.success(info.file.name + ' 上传成功。');
+      message.success(`${info.file.name} 上传成功。`);
     } else if (info.file.status === 'error') {
-      message.error(info.file.name + ' 上传失败。');
+      message.error(`${info.file.name} 上传失败。`);
     }
   }
 };

components/upload/demo/multiple.md

@@ -18,9 +18,9 @@ const props = {
       console.log(info.file, info.fileList);
     }
     if (info.file.status === 'done') {
-      message.success(info.file.name + ' 上传成功。');
+      message.success(`${info.file.name} 上传成功。`);
     } else if (info.file.status === 'error') {
-      message.error(info.file.name + ' 上传失败。');
+      message.error(`${info.file.name} 上传失败。`);
     }
   }
 };

components/upload/index.jsx

@@ -245,13 +245,12 @@ const AntUpload = React.createClass({
         ? `${prefixCls}-drag-hover` : '';
       return (
         <span className={this.props.className}>
-          <div className={prefixCls + ' ' + prefixCls + '-drag '
-            + dragUploadingClass + ' ' + draggingClass}
+          <div className={`${prefixCls} ${prefixCls}-drag ${dragUploadingClass} ${draggingClass}`}
             onDrop={this.onFileDrop}
             onDragOver={this.onFileDrop}
             onDragLeave={this.onFileDrop}>
             <Upload {...props}>
-              <div className={prefixCls + '-drag-container'}>
+              <div className={`${prefixCls}-drag-container`}>
                 {this.props.children}
               </div>
             </Upload>
@@ -262,8 +261,8 @@ const AntUpload = React.createClass({
     } else if (type === 'select') {
       const uploadButtonCls = classNames({
         [prefixCls]: true,
-        [prefixCls + '-select']: true,
-        [prefixCls + '-select-' + this.props.listType]: true,
+        [`${prefixCls}-select`]: true,
+        [`${prefixCls}-select-${this.props.listType}`]: true,
       });
       if (this.props.listType === 'picture-card') {
         return (

components/upload/uploadList.jsx

@@ -59,12 +59,12 @@ export default React.createClass({
       if (this.props.listType === 'picture' || this.props.listType === 'picture-card') {
         if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
           if (this.props.listType === 'picture-card') {
-            icon = <div className={prefixCls + '-list-item-uploading-text'}>文件上传中</div>;
+            icon = <div className={`${prefixCls}-list-item-uploading-text`}>文件上传中</div>;
           } else {
-            icon = <Icon className={prefixCls + '-list-item-thumbnail'} type="picture" />;
+            icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
           }
         } else {
-          icon = (<a className={prefixCls + '-list-item-thumbnail'}
+          icon = (<a className={`${prefixCls}-list-item-thumbnail`}
             href={file.url}
             target="_blank"><img src={file.thumbUrl || file.url} alt={file.name} /></a>
           );
@@ -73,7 +73,7 @@ export default React.createClass({
 
       if (file.status === 'uploading') {
         progress = (
-          <div className={prefixCls + '-list-item-progress'}>
+          <div className={`${prefixCls}-list-item-progress`}>
             <Line {...this.props.progressAttr} percent={file.percent} />
           </div>
         );
@@ -84,9 +84,9 @@ export default React.createClass({
       });
       return (
         <div className={infoUploadingClass} key={file.uid}>
-          <div className={prefixCls + '-list-item-info'}>
+          <div className={`${prefixCls}-list-item-info`}>
             {icon}
-            <span className={prefixCls + '-list-item-name'}>{file.name}</span>
+            <span className={`${prefixCls}-list-item-name`}>{file.name}</span>
             {
               this.props.listType === 'picture-card' && file.status !== 'uploading'
               ? (
@@ -107,7 +107,7 @@ export default React.createClass({
     });
     return (
       <div className={listClassNames}>
-        <Animate transitionName={prefixCls + '-margin-top'}>
+        <Animate transitionName={`${prefixCls}-margin-top`}>
           {list}
         </Animate>
       </div>