Merge branch 'develop-1.0.0' of github.com:ant-design/ant-design into develop-1.0.0

components/alert/index.jsx

@@ -4,22 +4,21 @@ import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-alert',
-      showIcon: false,
-      onClose() {},
-      type: 'info',
-    };
-  },
-  getInitialState() {
-    return {
+export default class Alert extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-alert',
+    showIcon: false,
+    onClose() {},
+    type: 'info',
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
       closing: true,
       closed: false
     };
-  },
-  handleClose(e) {
+  }
+  handleClose = (e) => {
     e.preventDefault();
     let dom = ReactDOM.findDOMNode(this);
     dom.style.height = `${dom.offsetHeight}px`;
@@ -31,13 +30,13 @@ export default React.createClass({
       closing: false
     });
     this.props.onClose.call(this, e);
-  },
-  animationEnd() {
+  }
+  animationEnd = () => {
     this.setState({
       closed: true,
       closing: true
     });
-  },
+  }
   render() {
     let {
       closable, description, type, prefixCls, message, closeText, showIcon
@@ -95,4 +94,4 @@ export default React.createClass({
       </Animate>
     );
   }
-});
+}

components/button/button.jsx

@@ -30,7 +30,7 @@ function clearButton(button) {
 }
 
 export default class Button extends React.Component {
-  handleClick(...args) {
+  handleClick = (...args) => {
     // Add click effect
     const buttonNode = findDOMNode(this);
     clearButton(buttonNode);
@@ -66,7 +66,7 @@ export default class Button extends React.Component {
       <button {...others}
         type={htmlType || 'button'}
         className={classes}
-        onClick={this.handleClick.bind(this)}>
+        onClick={this.handleClick}>
         {icon ? <Icon type={icon} /> : null}{kids}
       </button>
     );

components/calendar/Header.jsx

@@ -23,7 +23,7 @@ export default class Header extends React.Component {
         dropdownMatchSelectWidth={false}
         dropdownMenuStyle={{ minWidth: 103 }}
         className={`${prefixCls}-year-select`}
-        onChange={this.onYearChange.bind(this)}
+        onChange={this.onYearChange}
         value={String(year)}>
         { options }
       </Select>
@@ -47,23 +47,23 @@ export default class Header extends React.Component {
         dropdownMatchSelectWidth={false}
         className={`${prefixCls}-month-select`}
         value={String(month)}
-        onChange={this.onMonthChange.bind(this)}>
+        onChange={this.onMonthChange}>
         { options }
       </Select>
     );
   }
-  onYearChange(year) {
+  onYearChange = (year) => {
     const newValue = this.props.value.clone();
     newValue.setYear(parseInt(year, 10));
     this.props.onValueChange(newValue);
   }
 
-  onMonthChange(month) {
+  onMonthChange = (month) => {
     const newValue = this.props.value.clone();
     newValue.setMonth(parseInt(month, 10));
     this.props.onValueChange(newValue);
   }
-  onTypeChange(e) {
+  onTypeChange = (e) => {
     this.props.onTypeChange(e.target.value);
   }
   render() {
@@ -71,7 +71,7 @@ export default class Header extends React.Component {
     const yearSelect = this.getYearSelectElement(value.getYear());
     const monthSelect = type === 'date' ? this.getMonthSelectElement(value.getMonth()) : null;
     const typeSwitch = (
-      <Group onChange={this.onTypeChange.bind(this)} value={type}>
+      <Group onChange={this.onTypeChange} value={type}>
         <Button value="date">{locale.month}</Button>
         <Button value="month">{locale.year}</Button>
       </Group>

components/calendar/index.jsx

@@ -32,7 +32,7 @@ export default class Calendar extends React.Component {
       });
     }
   }
-  monthCellRender(value, locale) {
+  monthCellRender = (value, locale) => {
     const prefixCls = this.props.prefixCls;
     const month = value.getMonth();
     return (
@@ -46,7 +46,7 @@ export default class Calendar extends React.Component {
       </div>
     );
   }
-  dateCellRender(value) {
+  dateCellRender = (value) => {
     const prefixCls = this.props.prefixCls;
     return (
       <div className={`${prefixCls}-date`}>
@@ -59,13 +59,13 @@ export default class Calendar extends React.Component {
       </div>
     );
   }
-  setValue(value) {
+  setValue = (value) => {
     if (!('value' in this.props) && this.state.value !== value) {
       this.setState({ value });
     }
     this.props.onPanelChange(value, this.state.mode);
   }
-  setType(type) {
+  setType = (type) => {
     const mode = (type === 'date') ? 'month' : 'year';
     if (this.state.mode !== mode) {
       this.setState({ mode });
@@ -91,8 +91,8 @@ export default class Calendar extends React.Component {
           value={value}
           locale={locale.lang}
           prefixCls={prefixCls}
-          onTypeChange={this.setType.bind(this)}
-          onValueChange={this.setValue.bind(this)} />
+          onTypeChange={this.setType}
+          onValueChange={this.setValue} />
         <FullCalendar
           {...props}
           Select={noop}
@@ -101,8 +101,8 @@ export default class Calendar extends React.Component {
           prefixCls={prefixCls}
           showHeader={false}
           value={value}
-          monthCellRender={this.monthCellRender.bind(this)}
-          dateCellRender={this.dateCellRender.bind(this)} />
+          monthCellRender={this.monthCellRender}
+          dateCellRender={this.dateCellRender} />
       </div>
     );
   }

components/cascader/index.jsx

@@ -12,27 +12,20 @@ export default class Cascader extends React.Component {
       value: props.value || props.defaultValue || [],
       popupVisible: false,
     };
-    [
-      'handleChange',
-      'handlePopupVisibleChange',
-      'setValue',
-      'getLabel',
-      'clearSelection',
-    ].forEach((method) => this[method] = this[method].bind(this));
   }
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {
       this.setState({ value: nextProps.value || [] });
     }
   }
-  handleChange(value, selectedOptions) {
+  handleChange = (value, selectedOptions) => {
     this.setValue(value, selectedOptions);
   }
-  handlePopupVisibleChange(popupVisible) {
+  handlePopupVisibleChange = (popupVisible) => {
     this.setState({ popupVisible });
     this.props.onPopupVisibleChange(popupVisible);
   }
-  setValue(value, selectedOptions = []) {
+  setValue = (value, selectedOptions = []) => {
     if (!('value' in this.props)) {
       this.setState({ value });
     }
@@ -44,7 +37,7 @@ export default class Cascader extends React.Component {
       .map(o => o.label);
     return displayRender(label);
   }
-  clearSelection(e) {
+  clearSelection = (e) => {
     e.preventDefault();
     e.stopPropagation();
     this.setValue([]);

components/checkbox/Group.jsx

 import React from 'react';
 import Checkbox from './index';
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      options: [],
-      defaultValue: [],
-      onChange() {},
-    };
-  },
-  propTypes: {
+export default class CheckboxGroup extends React.Component {
+  static defaultProps = {
+    options: [],
+    defaultValue: [],
+    onChange() {},
+  }
+  static propTypes = {
     defaultValue: React.PropTypes.array,
     value: React.PropTypes.array,
     options: React.PropTypes.array.isRequired,
     onChange: React.PropTypes.func,
-  },
-  getInitialState() {
-    const props = this.props;
+  }
+  constructor(props) {
+    super(props);
     let value;
     if ('value' in props) {
       value = props.value;
     } else if ('defaultValue' in props) {
       value = props.defaultValue;
     }
-    return { value };
-  },
+    this.state = { value };
+  }
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {
       this.setState({
         value: nextProps.value || [],
       });
     }
-  },
+  }
   getOptions() {
     const { options } = this.props;
     return options.map(option => {
@@ -43,8 +41,8 @@ export default React.createClass({
       }
       return option;
     });
-  },
-  toggleOption(option) {
+  }
+  toggleOption = (option) => {
     const optionIndex = this.state.value.indexOf(option.value);
     const value = [...this.state.value];
     if (optionIndex === - 1) {
@@ -56,7 +54,7 @@ export default React.createClass({
       this.setState({ value });
     }
     this.props.onChange(value);
-  },
+  }
   render() {
     const options = this.getOptions();
     return (
@@ -73,5 +71,5 @@ export default React.createClass({
         }
       </div>
     );
-  },
-});
+  }
+}

components/checkbox/index.jsx

 import RcCheckbox from 'rc-checkbox';
 import React from 'react';
-import Group from './Group';
+import CheckboxGroup from './Group';
 import classNames from 'classnames';
 
 export default class Checkbox extends React.Component {
+  static Group = CheckboxGroup;
+  static defaultProps = {
+    prefixCls: 'ant-checkbox'
+  }
   render() {
     const { prefixCls, style, children, className, ...restProps } = this.props;
     const classString = classNames({
@@ -18,9 +22,3 @@ export default class Checkbox extends React.Component {
     );
   }
 }
-
-Checkbox.defaultProps = {
-  prefixCls: 'ant-checkbox'
-};
-
-Checkbox.Group = Group;

components/layout/col.jsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
 
-const Col = React.createClass({
-  propTypes: {
+export default class Col extends React.Component {
+  static propTypes = {
     span: stringOrNumber,
     order: stringOrNumber,
     offset: stringOrNumber,
@@ -17,7 +17,7 @@ const Col = React.createClass({
     sm: objectOrNumber,
     md: objectOrNumber,
     lg: objectOrNumber,
-  },
+  }
   render() {
     const props = this.props;
     const { span, order, offset, push, pull, className, children, ...others } = props;
@@ -49,7 +49,5 @@ const Col = React.createClass({
     });
 
     return <div {...others} className={classes}>{children}</div>;
-  },
-});
-
-export default Col;
+  }
+}

components/layout/row.jsx

 import React, { Children, cloneElement } from 'react';
 import classNames from 'classnames';
 
-const Row = React.createClass({
-  propTypes: {
+export default class Row extends React.Component {
+  static defaultProps = {
+    gutter: 0,
+  }
+  static propTypes = {
     type: React.PropTypes.string,
     align: React.PropTypes.string,
     justify: React.PropTypes.string,
     className: React.PropTypes.string,
     children: React.PropTypes.node,
     gutter: React.PropTypes.number,
-  },
-  getDefaultProps() {
-    return {
-      gutter: 0,
-    };
-  },
+  }
   render() {
     const { type, justify, align, className, gutter, style, children, ...others } = this.props;
     const classes = classNames({
@@ -41,7 +39,5 @@ const Row = React.createClass({
       });
     });
     return <div {...others} className={classes} style={rowStyle}>{cols}</div>;
-  },
-});
-
-export default Row;
+  }
+}

components/menu/index.jsx

@@ -5,40 +5,43 @@ import animation from '../common/openAnimation';
 function noop() {
 }
 
-const Menu = React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-menu',
-      onClick: noop,
-      onOpen: noop,
-      onClose: noop,
-      className: '',
-      theme: 'light',  // or dark
-    };
-  },
-  getInitialState() {
-    return {
+export default class Menu extends React.Component {
+  static Divider = Divider;
+  static Item = Item;
+  static SubMenu = SubMenu;
+  static ItemGroup = ItemGroup;
+  static defaultProps = {
+    prefixCls: 'ant-menu',
+    onClick: noop,
+    onOpen: noop,
+    onClose: noop,
+    className: '',
+    theme: 'light',  // or dark
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
       openKeys: []
     };
-  },
-  handleClick(e) {
+  }
+  handleClick = (e) => {
     this.setState({
       openKeys: []
     });
     this.props.onClick(e);
-  },
-  handleOpenKeys(e) {
+  }
+  handleOpenKeys = (e) => {
     this.setState({
       openKeys: e.openKeys
     });
     this.props.onOpen(e);
-  },
-  handleCloseKeys(e) {
+  }
+  handleCloseKeys = (e) => {
     this.setState({
       openKeys: e.openKeys
     });
     this.props.onClose(e);
-  },
+  }
   render() {
     let openAnimation = this.props.openAnimation || this.props.openTransitionName;
     if (!openAnimation) {
@@ -78,11 +81,4 @@ const Menu = React.createClass({
     }
     return <RcMenu {...this.props} {...props} />;
   }
-});
-
-Menu.Divider = Divider;
-Menu.Item = Item;
-Menu.SubMenu = SubMenu;
-Menu.ItemGroup = ItemGroup;
-
-export default Menu;
+}

components/radio/group.jsx

@@ -15,17 +15,15 @@ function getCheckedValue(children) {
   return matched ? { value } : undefined;
 }
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-radio-group',
-      disabled: false,
-      onChange() {
-      },
-    };
-  },
-  getInitialState() {
-    let props = this.props;
+export default class RadioGroup extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-radio-group',
+    disabled: false,
+    onChange() {
+    },
+  }
+  constructor(props) {
+    super(props);
     let value;
     if ('value' in props) {
       value = props.value;
@@ -35,10 +33,10 @@ export default React.createClass({
       const checkedValue = getCheckedValue(props.children);
       value = checkedValue && checkedValue.value;
     }
-    return {
+    this.state = {
       value,
     };
-  },
+  }
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {
       this.setState({
@@ -52,15 +50,15 @@ export default React.createClass({
         });
       }
     }
-  },
-  onRadioChange(ev) {
+  }
+  onRadioChange = (ev) => {
     if (!('value' in this.props)) {
       this.setState({
         value: ev.target.value,
       });
     }
     this.props.onChange(ev);
-  },
+  }
   render() {
     const props = this.props;
     const children = React.Children.map(props.children, (radio) => {
@@ -84,5 +82,5 @@ export default React.createClass({
       [`${props.prefixCls}-${props.size}`]: props.size,
     });
     return <div className={classString} style={props.style}>{children}</div>;
-  },
-});
+  }
+}

components/radio/radio.jsx

@@ -2,12 +2,10 @@ import RcRadio from 'rc-radio';
 import React from 'react';
 import classNames from 'classnames';
 
-const Radio = React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-radio'
-    };
-  },
+export default class Radio extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-radio'
+  }
   render() {
     const { prefixCls, children, checked, disabled, className, style } = this.props;
     const classString = classNames({
@@ -23,6 +21,4 @@ const Radio = React.createClass({
       </label>
     );
   }
-});
-
-export default Radio;
+}

components/radio/radioButton.jsx

 import React from 'react';
 import Radio from './radio';
 
-const RadioButton = React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-radio-button',
-    };
-  },
+export default class RadioButton extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-radio-button',
+  }
   render() {
     return (
       <Radio {...this.props} />
     );
   }
-});
-
-export default RadioButton;
+}

components/tabs/index.jsx

@@ -4,25 +4,17 @@ import classNames from 'classnames';
 import Icon from '../icon';
 
 export default class Tabs extends React.Component {
-  constructor(props) {
-    super(props);
-    [
-      'createNewTab',
-      'removeTab',
-      'handleChange',
-    ].forEach((method) => this[method] = this[method].bind(this));
-  }
-  createNewTab(targetKey) {
+  createNewTab = (targetKey) => {
     this.props.onEdit(targetKey, 'add');
   }
-  removeTab(targetKey, e) {
+  removeTab = (targetKey, e) => {
     e.stopPropagation();
     if (!targetKey) {
       return;
     }
     this.props.onEdit(targetKey, 'remove');
   }
-  handleChange(activeKey) {
+  handleChange = (activeKey) => {
     this.props.onChange(activeKey);
   }
   render() {

components/tag/index.jsx

@@ -14,7 +14,7 @@ export default class Tag extends React.Component {
     };
   }
 
-  close(e) {
+  close = (e) => {
     this.props.onClose(e);
     if (e.defaultPrevented) return;
     const dom = ReactDOM.findDOMNode(this);
@@ -26,7 +26,7 @@ export default class Tag extends React.Component {
     });
   }
 
-  animationEnd(key, existed) {
+  animationEnd = (key, existed) => {
     if (!existed) {
       this.setState({
         closed: true,
@@ -38,7 +38,7 @@ export default class Tag extends React.Component {
 
   render() {
     const { prefixCls, closable, color, className, children, ...restProps } = this.props;
-    const close = closable ? <Icon type="cross" onClick={this.close.bind(this)} /> : '';
+    const close = closable ? <Icon type="cross" onClick={this.close} /> : '';
     const classString = classNames({
       [prefixCls]: true,
       [`${prefixCls}-${color}`]: !!color,
@@ -50,7 +50,7 @@ export default class Tag extends React.Component {
         showProp="data-show"
         transitionName={`${prefixCls}-zoom`}
         transitionAppear
-        onEnd={this.animationEnd.bind(this)}>
+        onEnd={this.animationEnd}>
         {this.state.closed ? null : (
           <div data-show={!this.state.closing} {...restProps} className={classString}>
             <span className={`${prefixCls}-text`}>{children}</span>

components/tooltip/index.jsx

 import React from 'react';
-import Tooltip from 'rc-tooltip';
+import RcTooltip from 'rc-tooltip';
 import getPlacements from '../popover/placements';
 
 const placements = getPlacements({
   verticalArrowShift: 8,
 });
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-tooltip',
-      placement: 'top',
-      mouseEnterDelay: 0.1,
-      mouseLeaveDelay: 0.1
-    };
-  },
-  getInitialState() {
-    return {
+export default class Tooltip extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-tooltip',
+    placement: 'top',
+    mouseEnterDelay: 0.1,
+    mouseLeaveDelay: 0.1
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
       visible: false
     };
-  },
-  onVisibleChange(visible) {
+  }
+  onVisibleChange = (visible) => {
     this.setState({ visible });
-  },
+  }
   render() {
     let transitionName = ({
       top: 'zoom-down',
@@ -46,14 +45,14 @@ export default React.createClass({
     }
 
     return (
-      <Tooltip transitionName={transitionName}
+      <RcTooltip transitionName={transitionName}
         builtinPlacements={placements}
         overlay={this.props.title}
         visible={visible}
         onVisibleChange={this.onVisibleChange}
         {...this.props}>
         {this.props.children}
-      </Tooltip>
+      </RcTooltip>
     );
   }
-});
+}

components/transfer/index.jsx

@@ -44,7 +44,7 @@ export default class Transfer extends React.Component {
     };
   }
 
-  moveTo(direction) {
+  moveTo = (direction) => {
     const { targetKeys } = this.props;
     const { leftCheckedKeys, rightCheckedKeys } = this.state;
     const moveKeys = direction === 'right' ? leftCheckedKeys : rightCheckedKeys;
@@ -96,7 +96,7 @@ export default class Transfer extends React.Component {
     return text.match(regex);
   }
 
-  handleSelectAll(direction) {
+  handleSelectAll = (direction) => {
     const { leftDataSource, rightDataSource } = this.splitDataSource();
     const { leftFilter, rightFilter } = this.state;
     const dataSource = direction === 'left' ? leftDataSource : rightDataSource;
@@ -110,7 +110,7 @@ export default class Transfer extends React.Component {
     });
   }
 
-  handleFilter(direction, e) {
+  handleFilter = (direction, e) => {
     this.setState({
       // deselect all
       [`${direction}CheckedKeys`]: [],
@@ -119,13 +119,13 @@ export default class Transfer extends React.Component {
     });
   }
 
-  handleClear(direction) {
+  handleClear = (direction) => {
     this.setState({
       [`${direction}Filter`]: '',
     });
   }
 
-  handleSelect(direction, selectedItem, checked) {
+  handleSelect = (direction, selectedItem, checked) => {
     const { leftCheckedKeys, rightCheckedKeys } = this.state;
     const holder = direction === 'left' ? leftCheckedKeys : rightCheckedKeys;
     let index;

components/transfer/list.jsx

@@ -24,21 +24,21 @@ export default class TransferList extends React.Component {
     }, 0);
   }
 
-  handleSelectAll() {
+  handleSelectAll = () => {
     this.props.handleSelectAll();
   }
 
-  handleSelect(selectedItem) {
+  handleSelect = (selectedItem) => {
     const { checkedKeys } = this.props;
     const result = checkedKeys.some((key) => key === selectedItem.key);
     this.props.handleSelect(selectedItem, !result);
   }
 
-  handleFilter(e) {
+  handleFilter = (e) => {
     this.props.handleFilter(e);
   }
 
-  handleClear() {
+  handleClear = () => {
     this.props.handleClear();
   }
 
@@ -57,7 +57,7 @@ export default class TransferList extends React.Component {
     return (
       <span ref="checkbox"
         className={checkboxCls}
-        onClick={(!props.disabled) && this.handleSelectAll.bind(this)}>
+        onClick={(!props.disabled) && this.handleSelectAll}>
         {customEle}
       </span>
     );
@@ -90,7 +90,7 @@ export default class TransferList extends React.Component {
     }).map((item) => {
       const renderedText = this.props.render(item);
       return (
-        <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
+        <li onClick={() => { this.handleSelect(item); }} key={item.key} title={renderedText}>
           <Checkbox checked={checkedKeys.some(key => key === item.key)} />
           {renderedText}
         </li>
@@ -131,8 +131,8 @@ export default class TransferList extends React.Component {
         <div className={ showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
           { showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
             <Search prefixCls={`${prefixCls}-search`}
-              onChange={this.handleFilter.bind(this)}
-              handleClear={this.handleClear.bind(this)}
+              onChange={this.handleFilter}
+              handleClear={this.handleClear}
               placeholder={searchPlaceholder || '请输入搜索内容'}
               value={filter} />
           </div> : null }

components/transfer/search.jsx

@@ -4,11 +4,11 @@ function noop() {
 }
 
 export default class Search extends React.Component {
-  handleChange(e) {
+  handleChange = (e) => {
     this.props.onChange(e);
   }
 
-  handleClear(e) {
+  handleClear = (e) => {
     e.preventDefault();
     this.props.handleClear(e);
   }
@@ -18,9 +18,9 @@ export default class Search extends React.Component {
     return (
       <div>
         <input placeholder={placeholder} className={ `${prefixCls} ant-input` } value={ value } ref="input"
-          onChange={this.handleChange.bind(this)} />
+          onChange={this.handleChange} />
         { value && value.length > 0 ?
-          <a href="#" className={ `${prefixCls}-action` } onClick={this.handleClear.bind(this)}>
+          <a href="#" className={ `${prefixCls}-action` } onClick={this.handleClear}>
             <Icon type="cross-circle" />
           </a>
           : <span className={ `${prefixCls}-action` }><Icon type="search" /></span>

package.json

@@ -52,8 +52,8 @@
     "rc-progress": "~1.0.4",
     "rc-queue-anim": "~0.11.2",
     "rc-radio": "~2.0.0",
-    "rc-select": "~5.10.0",
-    "rc-slider": "^3.5.1",
+    "rc-select": "~6.0.1",
+    "rc-slider": "~3.5.1",
     "rc-steps": "~1.4.1",
     "rc-switch": "~1.3.2",
     "rc-table": "~4.0.0-beta.3",
@@ -65,7 +65,7 @@
     "rc-trigger": "~1.2.0",
     "rc-upload": "~1.9.0",
     "rc-util": "~3.1.2",
-    "react-slick": "^0.11.0",
+    "react-slick": "~0.11.0",
     "velocity-animate": "~1.2.2",
     "warning": "~2.1.0"
   },

site/component/Header/index.jsx

@@ -43,7 +43,7 @@ export default class Header extends React.Component {
   }
 
   handleSearch(value) {
-    this.props.history.push({ pathname: value });
+    this.context.router.push({ pathname: value });
   }
 
   handleSelectFilter(value, option) {
@@ -137,3 +137,7 @@ export default class Header extends React.Component {
     );
   }
 }
+
+Header.contextTypes = {
+  router: React.PropTypes.object.isRequired,
+};