style: update code style to please lint

2025-08-06 16:06:28 +08:00 · 2016-02-17 18:04:42 +08:00 · 2016-02-17 18:04:42 +08:00 · 29825f20c8
commit 29825f20c8
parent 0df30b49a4
63 changed files with 162 additions and 162 deletions
--- a/.eslintrc.json
+++ b/.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,
--- a/components/affix/index.jsx
+++ b/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
--- a/components/alert/index.jsx
+++ b/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>
--- a/components/badge/ScrollNumber.jsx
+++ b/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,
--- a/components/badge/index.jsx
+++ b/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 :
--- a/components/breadcrumb/index.jsx
+++ b/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>;
      });
--- a/components/button/button.jsx
+++ b/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
    });

--- a/components/calendar/index.jsx
+++ b/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 (
--- a/components/carousel/index.jsx
+++ b/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 (
--- a/components/checkbox/demo/basic.md
+++ b/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>
--- a/components/checkbox/demo/controller.md
+++ b/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' }}>
--- a/components/date-picker/index.jsx
+++ b/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>
                );
--- a/components/dropdown/demo/event.md
+++ b/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 = (
--- a/components/form/FormItem.jsx
+++ b/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>
    );
--- a/components/form/ValueMixin.jsx
+++ b/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 {
--- a/components/form/demo/form-controls.md
+++ b/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(
--- a/components/input/index.jsx
+++ b/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}
--- a/components/layout/col.jsx
+++ b/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>;
--- a/components/layout/row.jsx
+++ b/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>;
--- a/components/menu/index.jsx
+++ b/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') {
      // 这组属性的目的是
      // 弹出型的菜单需要点击后立即关闭
--- a/components/message/index.jsx
+++ b/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>,
--- a/components/notification/demo/with-btn.md
+++ b/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);
--- a/components/notification/index.jsx
+++ b/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>,
--- a/components/popconfirm/index.jsx
+++ b/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>
--- a/components/popover/index.jsx
+++ b/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>
--- a/components/progress/demo/format.md
+++ b/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);
--- a/components/progress/index.jsx
+++ b/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}
--- a/components/radio/demo/radiobutton.md
+++ b/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>
--- a/components/radio/demo/radiogroup.md
+++ b/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
    });
--- a/components/radio/radio.jsx
+++ b/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 (
--- a/components/select/demo/basic.md
+++ b/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(
--- a/components/select/demo/combobox.md
+++ b/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>;
      });
    }
--- a/components/select/demo/multiple.md
+++ b/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(
--- a/components/select/demo/optgroup.md
+++ b/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(
--- a/components/select/demo/search.md
+++ b/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(
--- a/components/select/demo/size.md
+++ b/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(
--- a/components/select/demo/tags.md
+++ b/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(
--- a/components/slider/demo/tip-formatter.md
+++ b/components/slider/demo/tip-formatter.md
@ -10,7 +10,7 @@
 import { Slider } from 'antd';

 function formatter(value) {
-  return value + '%';
+  return `${value}%`;
 }

 ReactDOM.render(<div>
--- a/components/spin/index.jsx
+++ b/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>
--- a/components/steps/demo/step-next.md
+++ b/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}`
  };
 });

--- a/components/switch/demo/basic.md
+++ b/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(
--- a/components/table/demo/fixed-header.md
+++ b/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}号`
  });
 }

--- a/components/table/demo/paging.md
+++ b/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}号`
  });
 }

--- a/components/table/demo/row-selection-and-operation.md
+++ b/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}号`
  });
 }

--- a/components/table/demo/row-selection-props.md
+++ b/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);
--- a/components/table/demo/row-selection.md
+++ b/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);
--- a/components/table/index.jsx
+++ b/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>
--- a/components/tabs/demo/editable-card.md
+++ b/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 });
  },
--- a/components/tabs/index.jsx
+++ b/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>
    );
--- a/components/tag/demo/control.md
+++ b/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() {
--- a/components/tag/index.jsx
+++ b/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>
        )}
--- a/components/time-picker/index.jsx
+++ b/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;
--- a/components/timeline/index.jsx
+++ b/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}>
--- a/components/transfer/demo/advanced.md
+++ b/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} />
    );
  }
--- a/components/transfer/demo/basic.md
+++ b/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) {
--- a/components/transfer/demo/search.md
+++ b/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) {
--- a/components/transfer/index.jsx
+++ b/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>
    );
  }
--- a/components/transfer/list.jsx
+++ b/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 ||
--- a/components/transfer/search.jsx
+++ b/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>
    );
--- a/components/upload/demo/basic.md
+++ b/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} 上传失败。`);
    }
  }
 };
--- a/components/upload/demo/multiple.md
+++ b/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} 上传失败。`);
    }
  }
 };
--- a/components/upload/index.jsx
+++ b/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 (
--- a/components/upload/uploadList.jsx
+++ b/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>