Merge branch 'master' of github.com:ant-design/ant-design

2024-12-12 23:35:38 +08:00 · 2016-03-02 23:20:33 +08:00 · 2016-03-02 23:20:33 +08:00 · 85fcb20e43
commit 85fcb20e43
parent 070a8ce62a d68f36a422
37 changed files with 266 additions and 709 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,25 @@

 ---

+## 0.12.6
+
+`2016-03-02`
+
+- 优化 Table 本地排序在 Chrome 下的稳定性问题。
+- 修正 Pagination 的 pageSize 属性为受控属性，并补充了 `defaultPageSize` 属性。[#1087](https://github.com/ant-design/ant-design/issues/1087)
+- 优化 Select 的 combobox 模式的交互体验。
+- 升级 react-slick 依赖到 `0.11`，修复自动播放有时会失效的问题。[#1009](https://github.com/ant-design/ant-design/issues/1009)
+- 修复 TreeSelect 的 allowClear 属性失效的问题。[#1084](https://github.com/ant-design/ant-design/issues/1084)
+- 修复 Input 组件的 className 属性失效的问题。[#1103](https://github.com/ant-design/ant-design/issues/1103)
+- 修复 Dropdown 的 onClick 属性失效的问题。[#1097](https://github.com/ant-design/ant-design/issues/1097)
+- 修复多个 CheckboxGroup 选项互相影响的问题。[#1101](https://github.com/ant-design/ant-design/pull/1101)
+- 修复 FormItem 的子元素为 `null` 时报错的问题。
+- 修复 Table 组件的选择功能和展开功能配合使用的问题。[#1102](https://github.com/ant-design/ant-design/issues/1102)
+- 增加了一个搜索框和提示功能结合的 [例子](http://ant.design/components/select/#demo-search-box)。
+- 允许可编辑的 Tabs 删除最后一个页签。[#1071](https://github.com/ant-design/ant-design/issues/1071)
+- Table 的 `rowSelect.onSelectAll` 补充了第三个参数 `deselectedRows`, `rowSelect.onChange` 补充了第二个参数 `selectedRows`。[#1105](https://github.com/ant-design/ant-design/issues/1105)
+- 修复了部分组件样式的小问题。
+
 ## 0.12.5

 `2016-02-25`
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.jsx
@ -51,7 +51,8 @@ class AntCascader extends React.Component {
    this.setState({ popupVisible: false });
  }
  render() {
-    const { prefixCls, children, placeholder, size, disabled, className, allowClear } = this.props;
+    const { prefixCls, children, placeholder, size, disabled,
+            className, style, allowClear, ...otherProps } = this.props;
    const sizeCls = classNames({
      'ant-input-lg': size === 'large',
      'ant-input-sm': size === 'small',
@ -77,9 +78,10 @@ class AntCascader extends React.Component {
        onChange={this.handleChange}>
        {children ||
          <span
-            {...this.props}
+            style={style}
            className={pickerCls}>
-            <Input placeholder={placeholder}
+            <Input {...otherProps}
+              placeholder={placeholder}
              className={`${prefixCls}-input ant-input ${sizeCls}`}
              style={{ width: '100%' }}
              value={this.getLabel()}
--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.jsx
@ -34,7 +34,7 @@ export default React.createClass({
  },
  toggleOption(option) {
    const optionIndex = this.state.value.indexOf(option);
-    const value = this.state.value;
+    const value = [...this.state.value];
    if (optionIndex === - 1) {
      value.push(option);
    } else {
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@ -14,6 +14,6 @@ function onChange(value) {
 }

 ReactDOM.render(
-<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" onChange={onChange} style={{ width: 160 }} />
+<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" onChange={onChange} style={{ width: 160 }} />
 , mountNode);
 ````
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@ -10,22 +10,24 @@
 import { Menu, Dropdown } from 'antd';
 const DropdownButton = Dropdown.Button;

+function handleButtonClick() {
+  console.log('click button');
+}
+
+function handleMenuClick(e) {
+  console.log('click', e);
+}
+
 const menu = (
-  <Menu>
-    <Menu.Item>
-      <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
-    </Menu.Item>
-    <Menu.Item>
-      <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
-    </Menu.Item>
-    <Menu.Item>
-      <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
-    </Menu.Item>
+  <Menu onClick={handleMenuClick}>
+    <Menu.Item key="1">第一个菜单项</Menu.Item>
+    <Menu.Item key="2">第二个菜单项</Menu.Item>
+    <Menu.Item key="3">第三个菜单项</Menu.Item>
  </Menu>
 );

 ReactDOM.render(
-  <DropdownButton overlay={menu} type="primary">
+  <DropdownButton onClick={handleButtonClick} overlay={menu} type="primary">
    某功能按钮
  </DropdownButton>
 , mountNode);
--- a/components/dropdown/dropdown-button.jsx
+++ b/components/dropdown/dropdown-button.jsx
@ -3,8 +3,12 @@ import Button from '../button';
 import Icon from '../icon';
 import Dropdown from './dropdown';
 const ButtonGroup = Button.Group;
+import classNames from 'classnames';

-const align = {
+export default React.createClass({
+  getDefaultProps() {
+    return {
+      align: {
        points: ['tr', 'br'],
        overlay: {
          adjustX: 1,
@ -12,23 +16,21 @@ const align = {
        },
        offset: [0, 4],
        targetOffset: [0, 0],
-};
-
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      align,
+      },
      type: 'default',
    };
  },
  render() {
+    const { type, overlay, trigger, align, children, className, ...restProps } = this.props;
+    const cls = classNames({
+      'ant-dropdown-button': true,
+      className: !!className,
+    });
    return (
-      <ButtonGroup className="ant-dropdown-button">
-        <Button type={this.props.type}>
-          {this.props.children}
-        </Button>
-        <Dropdown {...this.props}>
-          <Button type={this.props.type}>
+      <ButtonGroup {...restProps} className={cls}>
+        <Button type={type}>{children}</Button>
+        <Dropdown align={align} overlay={overlay} trigger={trigger}>
+          <Button type={type}>
            <Icon type="down" />
          </Button>
        </Dropdown>
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@ -131,10 +131,9 @@ class FormItem extends React.Component {
  renderChildren() {
    const props = this.props;
    const children = React.Children.map(props.children, (child) => {
-      if (typeof child.type === 'function' && !child.props.size) {
+      if (child && typeof child.type === 'function' && !child.props.size) {
        return React.cloneElement(child, { size: 'large' });
      }
-
      return child;
    });
    return [
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@ -1,4 +1,4 @@
-# 水平排列的表单
+# 典型表单

 - order: 2

@ -7,7 +7,7 @@
 ---

 ````jsx
-import { Form, Input, Button, Checkbox, Radio, Row, Col } from 'antd';
+import { Form, Input, Button, Checkbox, Radio, Row, Col, Tooltip, Icon } from 'antd';
 const FormItem = Form.Item;
 const RadioGroup = Radio.Group;

@ -19,38 +19,39 @@ let Demo = React.createClass({

  render() {
    const { getFieldProps } = this.props.form;
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 },
+    };
    return (
      <Form horizontal onSubmit={this.handleSubmit}>
        <FormItem
-          label="用户名："
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 14 }}>
+          {...formItemLayout}
+          label="用户名：">
          <p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
        </FormItem>
        <FormItem
-          label="密码："
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 14 }}>
+          {...formItemLayout}
+          label="密码：">
          <Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
        </FormItem>
        <FormItem
-          label="您的性别："
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 14 }}>
+          {...formItemLayout}
+          label="您的性别：">
          <RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
            <Radio value="male">男的</Radio>
            <Radio value="female">女的</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem
+          {...formItemLayout}
          label="备注："
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 14 }}
          help="随便写点什么">
          <Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
        </FormItem>
        <FormItem
-          wrapperCol={{ span: 14, offset: 6 }}>
+          {...formItemLayout}
+          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip> ：</span>}>
          <label>
            <Checkbox {...getFieldProps('agreement')} />同意
          </label>
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@ -2,12 +2,6 @@ import React from 'react';
 import assign from 'object-assign';
 import classNames from 'classnames';

-function prefixClsFn(prefixCls, ...args) {
-  return args.map((s) => {
-    return `${prefixCls}-${s}`;
-  }).join(' ');
-}
-
 function ieGT9() {
  if (typeof document === undefined) {
    return false;
@ -44,8 +38,8 @@ Group.propTypes = {
 class Input extends React.Component {
  renderLabledInput(children) {
    const props = this.props;
-    const wrapperClassName = prefixClsFn(props.prefixCls, 'input-group');
-    const addonClassName = prefixClsFn(wrapperClassName, 'addon');
+    const wrapperClassName = `${props.prefixCls}-group`;
+    const addonClassName = `${wrapperClassName}-addon`;
    const addonBefore = props.addonBefore ? (
      <span className={addonClassName}>
        {props.addonBefore}
@ -59,9 +53,10 @@ class Input extends React.Component {
    ) : null;

    const className = classNames({
-      [`${props.prefixCls}-input-wrapper`]: true,
+      [`${props.prefixCls}-wrapper`]: true,
      [wrapperClassName]: (addonBefore || addonAfter),
    });
+
    return (
      <span className={className}>
        {addonBefore}
@ -74,16 +69,17 @@ class Input extends React.Component {
  renderInput() {
    const props = assign({}, this.props);
    const prefixCls = props.prefixCls;
-    let inputClassName = prefixClsFn(prefixCls, 'input');
    if (!props.type) {
      return props.children;
    }

-    switch (props.size) {
-      case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
-      case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
-      default:
-    }
+    const inputClassName = classNames({
+      [prefixCls]: true,
+      [`${prefixCls}-sm`]: props.size === 'small',
+      [`${prefixCls}-lg`]: props.size === 'large',
+      [props.className]: !!props.className,
+    });
+
    let placeholder = props.placeholder;
    if (placeholder && ieGT9()) {
      placeholder = null;
@ -93,12 +89,8 @@ class Input extends React.Component {
    }
    switch (props.type) {
      case 'textarea':
-        return (
-          <textarea {...props} placeholder={placeholder}
-            className={inputClassName} ref="input" />
-        );
+        return <textarea {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
      default:
-        inputClassName = props.className ? props.className : inputClassName;
        return <input {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
    }
  }
@ -127,7 +119,7 @@ Input.propTypes = {
 Input.defaultProps = {
  defaultValue: '',
  disabled: false,
-  prefixCls: 'ant',
+  prefixCls: 'ant-input',
  type: 'text',
 };

--- a/components/pagination/index.md
+++ b/components/pagination/index.md
@ -24,7 +24,8 @@
 | current          | 当前页数                           | Number        | 无                       |
 | defaultCurrent   | 默认的当前页数                     | Number        | 1                        |
 | total            | 数据总数                           | Number        | 0                        |
-| pageSize         | 每页条数                           | Number        | 10                       |
+| defaultPageSize  | 初始的每页条数                      | Number        | 10                       |
+| pageSize         | 每页条数                           | Number        |                          |
 | onChange         | 页码改变的回调，参数是改变后的页码 | Function      | noop                     |
 | showSizeChanger  | 是否可以改变 pageSize              | Bool          | false                    |
 | pageSizeOptions  | 指定每页可以显示多少条             | Array<String> | ['10', '20', '30', '40'] |
--- a/components/popconfirm/index.md
+++ b/components/popconfirm/index.md
@ -23,5 +23,6 @@
 | title     | 确认框的描述                             | string        | 无     |
 | onConfirm | 点击确认的回调                           | function      | 无     |
 | onCancel  | 卡片内容                                 | function      | 无     |
+| onVisibleChange | 显示隐藏的回调                      | function(visible) | 无     |
 | okText    | 确认按钮文字                              | String        | 确定   |
 | cancelText| 取消按钮文字                              | String        | 取消   |
--- a/components/radio/group.jsx
+++ b/components/radio/group.jsx
@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';

 function getCheckedValue(children) {
  let value = null;
@ -76,10 +77,10 @@ export default React.createClass({
      }
      return radio;
    });
-    return (
-      <div className={`${props.prefixCls} ${props.prefixCls}-${props.size}`}>
-        {children}
-      </div>
-    );
+    const classString = classNames({
+      [props.prefixCls]: true,
+      [`${props.prefixCls}-${props.size}`]: props.size,
+    });
+    return <div className={classString}>{children}</div>;
  },
 });
--- a/components/table/demo/expand.md
+++ b/components/table/demo/expand.md
@ -9,19 +9,11 @@
 ````jsx
 import { Table } from 'antd';

-function renderAction() {
-  return <a href="#">删除</a>;
-}
-
-function expandedRowRender(record) {
-  return <p>{record.description}</p>;
-}
-
 const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '住址', dataIndex: 'address', key: 'address' },
-  { title: '操作', dataIndex: '', key: 'x', render: renderAction }
+  { title: '操作', dataIndex: '', key: 'x', render: () => <a href="#">删除</a> }
 ];

 const data = [
@ -32,7 +24,7 @@ const data = [

 ReactDOM.render(
 <Table columns={columns}
-  expandedRowRender={expandedRowRender}
+  expandedRowRender={record => <p>{record.description}</p>}
  dataSource={data}
  className="table" />
 , mountNode);
--- a/components/table/demo/paging-columns.md
+++ b/components/table/demo/paging-columns.md
@ -1,4 +1,4 @@
-# 滚屏分页的列
+# 横向滚屏表格

 - order: 16

--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@ -4,8 +4,6 @@

 选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。

-此版本换页后将会清空选中。
-
 ---

 ````jsx
--- a/components/table/demo/row-selection.md
+++ b/components/table/demo/row-selection.md
@ -41,14 +41,14 @@ const data = [{

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

--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@ -110,7 +110,9 @@ let AntTable = React.createClass({
      this.setState({ selectedRowKeys });
    }
    if (this.props.rowSelection && this.props.rowSelection.onChange) {
-      this.props.rowSelection.onChange(selectedRowKeys);
+      const data = this.getCurrentPageData();
+      const selectedRows = data.filter(row => selectedRowKeys.indexOf(row.key) >= 0);
+      this.props.rowSelection.onChange(selectedRowKeys, selectedRows);
    }
  },

@ -136,19 +138,18 @@ let AntTable = React.createClass({
      }
    }
    if (typeof column.sorter === 'function') {
-      sorter = function (...args) {
-        let result = column.sorter.apply(this, args);
-        if (sortOrder === 'ascend') {
-          return result;
-        } else if (sortOrder === 'descend') {
-          return -result;
+      sorter = (a, b) => {
+        let result = column.sorter(a, b);
+        if (result !== 0) {
+          return (sortOrder === 'descend') ? -result : result;
        }
+        return a.index - b.index;
      };
    }
    const newState = {
      sortOrder,
      sortColumn,
-      sorter
+      sorter,
    };
    this.setState(newState);
    this.props.onChange.apply(this, this.prepareParamsArguments(
@ -250,10 +251,13 @@ let AntTable = React.createClass({
    });
    this.setSelectedRowKeys(selectedRowKeys);
    if (this.props.rowSelection.onSelectAll) {
-      let selectedRows = data.filter((row, i) => {
+      const selectedRows = data.filter((row, i) => {
        return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
      });
-      this.props.rowSelection.onSelectAll(checked, selectedRows);
+      const deselectedRows = checked ? [] : data.filter((row, i) => {
+        return changableRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
+      });
+      this.props.rowSelection.onSelectAll(checked, selectedRows, deselectedRows);
    }
  },

@ -375,8 +379,7 @@ let AntTable = React.createClass({
          className: 'ant-table-selection-column'
        };
      }
-      if (columns[0] &&
-        columns[0].key === 'selection-column') {
+      if (columns[0] && columns[0].key === 'selection-column') {
        columns[0] = selectionColumn;
      } else {
        columns.unshift(selectionColumn);
@ -495,9 +498,7 @@ let AntTable = React.createClass({
  },

  findColumn(myKey) {
-    return this.props.columns.filter((c) => {
-      return this.getColumnKey(c) === myKey;
-    })[0];
+    return this.props.columns.filter(c => this.getColumnKey(c) === myKey)[0];
  },

  getCurrentPageData(dataSource) {
@ -515,7 +516,7 @@ let AntTable = React.createClass({
    }
    // 分页
    // ---
-    // 当数据量少于每页数量时，直接设置数据
+    // 当数据量少于等于每页数量时，直接设置数据
    // 否则进行读取分页数据
    if (data.length > pageSize || pageSize === Number.MAX_VALUE) {
      data = data.filter((item, i) => {
@ -530,6 +531,10 @@ let AntTable = React.createClass({
    let data = dataSource || this.props.dataSource;
    // 排序
    if (state.sortOrder && state.sorter) {
+      data = data.slice(0);
+      for (let i = 0; i < data.length; i++) {
+        data[i].index = i;
+      }
      data = data.sort(state.sorter);
    }
    // 筛选
@ -552,12 +557,12 @@ let AntTable = React.createClass({
  },

  render() {
-    let data = this.getCurrentPageData();
+    const data = this.getCurrentPageData();
    let columns = this.renderRowSelection();
-    let expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
-    let locale = objectAssign({}, defaultLocale, this.props.locale);
+    const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
+    const locale = objectAssign({}, defaultLocale, this.props.locale);

-    let classString = classNames({
+    const classString = classNames({
      [`ant-table-${this.props.size}`]: true,
      'ant-table-bordered': this.props.bordered,
      [this.props.className]: !!this.props.className,
@ -586,7 +591,7 @@ let AntTable = React.createClass({
          data={data}
          columns={columns}
          className={classString}
-          expandIconColumnIndex={columns[0].key === 'selection-column' ? 1 : 0}
+          expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0}
          expandIconAsCell={expandIconAsCell} />
          {emptyText}
      </div>
@ -594,10 +599,10 @@ let AntTable = React.createClass({
    if (this.props.loading) {
      // if there is no pagination or no data,
      // the height of spin should decrease by half of pagination
-      let paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
+      const paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
              ? 'ant-table-with-pagination'
              : 'ant-table-without-pagination';
-      let spinClassName = `${paginationPatchClass} ant-table-spin-holder`;
+      const spinClassName = `${paginationPatchClass} ant-table-spin-holder`;
      table = <Spin className={spinClassName}>{table}</Spin>;
    }
    return (
--- a/components/table/index.md
+++ b/components/table/index.md
@ -97,10 +97,10 @@ const columns = [{
 |------------------|--------------------------|-----------------|---------------------|---------|
 | type | 多选/单选，`checkbox` or `radio` | String | `checkbox`  |
 | selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | Array | []  |
-| onChange | 选中项发生变化的时的回调，用户手动点选、换页、更新数据均会触发 | Function(selectedRowKeys) | -   |
+| onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | -   |
 | getCheckboxProps | 选择框的默认属性配置        | Function(record) |  -   |
 | onSelect | 用户手动选择/取消选择某列的回调         | Function(record, selected, selectedRows) |   -   |
-| onSelectAll | 用户手动选择/取消选择所有列的回调    | Function(selected, selectedRows) |   -   |
+| onSelectAll | 用户手动选择/取消选择所有列的回调    | Function(selected, selectedRows, deselectedRows) |   -   |


 ## 注意
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@ -36,10 +36,15 @@ const Demo = React.createClass({
  },
  remove(targetKey) {
    let activeKey = this.state.activeKey;
-    let lastIndex = this.state.panes.findIndex(pane => pane.key === targetKey) - 1;
+    let lastIndex;
+    this.state.panes.forEach((pane, i) => {
+      if (pane.key === targetKey) {
+        lastIndex = i - 1;
+      }
+    });
    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
-    if (activeKey === targetKey) {
-      activeKey = panes[lastIndex >= 0 ? lastIndex : 0].key;
+    if (lastIndex >= 0 && activeKey === targetKey) {
+      activeKey = panes[lastIndex].key;
    }
    this.setState({ panes, activeKey });
  },
@ -55,4 +60,3 @@ const Demo = React.createClass({

 ReactDOM.render(<Demo />, mountNode);
 ````
-
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@ -33,13 +33,13 @@ class AntTabs extends React.Component {
      [`${prefixCls}-mini`]: size === 'small' || size === 'mini',
      [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
      [`${prefixCls}-card`]: type.indexOf('card') >= 0,
+      [`${prefixCls}-${type}`]: true,
    });
    if (tabPosition === 'left' || tabPosition === 'right' || type.indexOf('card') >= 0) {
      animation = null;
    }
    // only card type tabs can be added and closed
    if (type === 'editable-card') {
-      if (children.length > 1) {
      children = children.map((child, index) => {
        return cloneElement(child, {
          tab: <div>
@ -49,7 +49,6 @@ class AntTabs extends React.Component {
          key: child.key || index,
        });
      });
-      }
      // Add new tab handler
      tabBarExtraContent = (
        <span>
@ -58,16 +57,15 @@ class AntTabs extends React.Component {
        </span>
      );
    }
-    // Wrap the extra content
-    tabBarExtraContent = (
-      <div className={`${prefixCls}-extra-content`}>
-        {tabBarExtraContent}
-      </div>
-    );
+
    return (
      <Tabs {...this.props}
        className={className}
-        tabBarExtraContent={tabBarExtraContent}
+        tabBarExtraContent={
+          <div className={`${prefixCls}-extra-content`}>
+            {tabBarExtraContent}
+          </div>
+        }
        onChange={this.handleChange}
        animation={animation}>
        {children}
--- a/components/time-picker/demo/basic.md
+++ b/components/time-picker/demo/basic.md
@ -11,6 +11,9 @@ import { TimePicker } from 'antd';

 function onChange(time) {
  console.log(time);
+  if (time) {
+    console.log(time.toLocaleTimeString('zh-CN', { hour12: false })); // Get time string
+  }
 }

 ReactDOM.render(
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@ -24,8 +24,9 @@ const Demo = React.createClass({
    return (
      <TreeSelect style={{ width: 300 }}
        value={this.state.value}
-        dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="请选择"
+        allowClear
        treeDefaultExpandAll
        onChange={this.onChange}>
        <TreeNode value="parent 1" title="parent 1" key="0-1">
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@ -42,7 +42,7 @@ const Demo = React.createClass({
    return (
      <TreeSelect style={{ width: 300 }}
        value={this.state.value}
-        dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        treeData={treeData}
        placeholder="请选择"
        treeDefaultExpandAll
--- a/components/tree-select/index.jsx
+++ b/components/tree-select/index.jsx
@ -1,27 +1,25 @@
 import React from 'react';
 import TreeSelect, { TreeNode } from 'rc-tree-select';
 import classNames from 'classnames';
-// import animation from '../common/openAnimation';

 const AntTreeSelect = React.createClass({
  getDefaultProps() {
    return {
-      prefixCls: 'ant-tree-select',
+      prefixCls: 'ant-select',
      transitionName: 'slide-up',
      choiceTransitionName: 'zoom',
      showSearch: false,
-      // openAnimation: animation,
    };
  },
  render() {
    const props = this.props;
    let {
-      size, className, combobox, notFoundContent
+      size, className, combobox, notFoundContent, prefixCls
    } = this.props;

    const cls = classNames({
-      'ant-tree-select-lg': size === 'large',
-      'ant-tree-select-sm': size === 'small',
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-sm`]: size === 'small',
      [className]: !!className,
    });

@ -31,7 +29,7 @@ const AntTreeSelect = React.createClass({

    let checkable = props.treeCheckable;
    if (checkable) {
-      checkable = <span className={`${props.prefixCls}-tree-checkbox-inner`}></span>;
+      checkable = <span className={`${prefixCls}-tree-checkbox-inner`}></span>;
    }

    return (
--- a/components/tree-select/index.md
+++ b/components/tree-select/index.md
@ -28,6 +28,7 @@
 | onSearch | 文本框值变化时回调 | function(value: String) |  |
 | placeholder | 选择框默认文字 | string | 无 |
 | searchPlaceholder | 搜索框默认文字 | string | 无 |
+| dropdownStyle | 下拉菜单的样式 | object | 无 |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
 | combobox | 输入框自动提示模式 | boolean | false |
 | size    | 选择框大小，可选 `large` `small`  | String      |      default      |
--- a/docs/react/getting-started.md
+++ b/docs/react/getting-started.md
@ -138,7 +138,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。

 ## 自行构建

-如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试，可以参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js)。
+如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.htm)。

 ### 改变主色系

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "0.12.5",
+  "version": "0.12.6",
  "title": "Ant Design",
  "description": "一个 UI 设计语言",
  "homepage": "http://ant.design/",
@ -43,31 +43,31 @@
    "rc-cascader": "~0.9.0",
    "rc-checkbox": "~1.3.0",
    "rc-collapse": "~1.4.4",
-    "rc-dialog": "~5.3.1",
+    "rc-dialog": "~5.4.0",
    "rc-dropdown": "~1.4.3",
-    "rc-form": "~0.13.0",
+    "rc-form": "~0.14.0",
    "rc-form-validation": "~2.5.0",
    "rc-input-number": "~2.4.1",
    "rc-menu": "~4.10.2",
    "rc-notification": "~1.3.1",
-    "rc-pagination": "~1.4.0",
+    "rc-pagination": "~1.5.1",
    "rc-progress": "~1.0.4",
    "rc-queue-anim": "~0.11.2",
    "rc-radio": "~2.0.0",
-    "rc-select": "~5.9.1",
+    "rc-select": "~5.10.0",
    "rc-slider": "~3.3.0",
    "rc-steps": "~1.4.1",
    "rc-switch": "~1.3.2",
-    "rc-table": "~3.10.1",
+    "rc-table": "~3.11.1",
    "rc-tabs": "~5.7.0",
    "rc-time-picker": "~1.1.0",
    "rc-tooltip": "~3.3.1",
    "rc-tree": "~1.1.0",
    "rc-tree-select": "~1.1.1",
-    "rc-trigger": "~1.1.1",
+    "rc-trigger": "~1.2.0",
    "rc-upload": "~1.8.0",
    "rc-util": "~3.1.2",
-    "react-slick": "^0.10.0",
+    "react-slick": "^0.11.0",
    "velocity-animate": "~1.2.2",
    "warning": "~2.1.0"
  },
--- a/site/static/style.less
+++ b/site/static/style.less
@ -415,7 +415,6 @@ footer ul li > a {
  transition: all 0.3s ease;
 }

-
 .aside-container li[open=open] h4:after {
  -webkit-transform: scale(0.6) rotate(180deg);
  transform: scale(0.6) rotate(180deg);
@ -922,6 +921,7 @@ footer ul li > a {
  margin: 0.5em 0;
  padding-right: 25px;
  width: 100%;
+  word-break: break-word;
 }

 .code-box .collapse {
@ -1441,9 +1441,9 @@ a.entry-link:hover .anticon-smile {
    float: none;
    width: 100%;
  }
-
  .preview-image-box {
    padding-left: 0;
+    margin: 10px 0;
  }
 }

--- a/style/components/datepicker/Calendar.less
+++ b/style/components/datepicker/Calendar.less
@ -153,7 +153,7 @@
    display: block;
    margin: 0 auto;
    color: #666;
-    border-radius: 4px;
+    border-radius: @border-radius-sm;
    width: 20px;
    height: 20px;
    line-height: 18px;
@ -167,6 +167,7 @@
      background: tint(@primary-color, 90%);
      cursor: pointer;
    }
+
    &:active {
      color: #fff;
      background: tint(@primary-color, 20%);
--- a/style/components/datepicker/RangePicker.less
+++ b/style/components/datepicker/RangePicker.less
@ -66,11 +66,12 @@
  }
  .@{calendar-prefix-cls}-input {
    border: 1px solid @border-color-base;
-    border-radius: @border-radius-base;
+    border-radius: @border-radius-sm;
  }
  .@{calendar-prefix-cls}-input,
  .@{css-prefix}time-picker-input {
-    padding: 1px 7px;
+    .input;
+    border-radius: @border-radius-sm;
    height: @input-height-sm;
    width: 96px;
  }
@ -121,9 +122,11 @@
  }
  .@{calendar-prefix-cls}-ok-btn {
    position: static;
-    margin: 7px 9px 9px;
+    height: 22px;
+    margin: 8px;
  }
  .@{calendar-prefix-cls}-today-btn {
-    margin: 9px;
+    margin: 8px 12px;
+    height: 22px;
  }
 }
--- a/style/components/datepicker/TimePicker.less
+++ b/style/components/datepicker/TimePicker.less
@ -17,7 +17,8 @@
  .@{calendar-prefix-cls}-input,
  .@{timepicker-prefix-cls}-input {
    .input;
-    height: 22px;
+    border-radius: @border-radius-sm;
+    height: @input-height-sm;
    width: 96px;
    margin-right: 6px;
  }
--- a/style/components/form.less
+++ b/style/components/form.less
@ -21,9 +21,6 @@ label {
 }

 // Input styles
-.@{css-prefix}input-wrapper {
-  display: block;
-}
 .@{css-prefix}input {
  .input;
 }
@ -256,10 +253,6 @@ form {
    vertical-align: middle;
  }

-  .@{calendar-prefix-cls}-picker-input {
-    width: 100%!important;
-  }
-
  .@{css-prefix}form-text {
    display: inline-block;
  }
--- a/style/components/inputNumber.less
+++ b/style/components/inputNumber.less
@ -22,7 +22,7 @@
  height: 28px;
  display: inline-block;
  vertical-align: middle;
-  border: 1px solid #d9d9d9;
+  border: 1px solid @border-color-base;
  border-radius: @border-radius-base;
  overflow: hidden;
  width: 90px;
@ -110,7 +110,6 @@
    input {
      height: 32px;
      line-height: 32px;
-      font-size: 14px;
    }

    .@{input-number-prefix-cls}-handler-up-inner {
@ -159,11 +158,13 @@
  }

  &-handler-wrap {
-    float: right;
-    border-left: 1px solid #d9d9d9;
+    border-left: 1px solid @border-color-base;
    width: 22px;
    height: 28px;
-    position: relative;
+    background: #fff;
+    position: absolute;
+    top: 0;
+    right: 0;
    opacity: 0;
    transition: opacity 0.24s linear 0.1s;
  }
@ -190,7 +191,7 @@
  }

  &-handler-down {
-    border-top: 1px solid #d9d9d9;
+    border-top: 1px solid @border-color-base;
    top: -1px;
    cursor: pointer;
    &-inner {
--- a/style/components/pagination.less
+++ b/style/components/pagination.less
@ -229,12 +229,12 @@
      width: 30px;
      height: 24px;
      text-align: center;
+      transition: border-color 0.3s ease;

      &:hover {
        border-color: @primary-color;
      }
    }
-
  }
 }

--- a/style/components/select.less
+++ b/style/components/select.less
@ -4,6 +4,37 @@

@import "../mixins/iconfont";

+.selection__clear() {
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  opacity: 0;
+  position: absolute;
+  right: 8px;
+  z-index: 1;
+  background: #fff;
+  top: 50%;
+  font-size: 12px;
+  color: #ccc;
+  width: 12px;
+  height: 12px;
+  margin-top: -6px;
+  line-height: 12px;
+  cursor: pointer;
+  transition: color 0.3s ease, opacity 0.15s ease;
+  &:before {
+    display: block;
+    font-family: "anticon" !important;
+    content: "\E631";
+  }
+  &:hover {
+    color: #999;
+  }
+}
+
 .@{select-prefix-cls} {
  box-sizing: border-box;
  display: inline-block;
@ -53,39 +84,13 @@
    &:hover {
      .hover;
    }
+
    &:active {
      .active;
    }

    &__clear {
-      display: inline-block;
-      font-style: normal;
-      vertical-align: baseline;
-      text-align: center;
-      text-transform: none;
-      text-rendering: auto;
-      opacity: 0;
-      position: absolute;
-      right: 8px;
-      z-index: 1;
-      background: #fff;
-      top: 50%;
-      font-size: 12px;
-      color: #ccc;
-      width: 12px;
-      height: 12px;
-      margin-top: -6px;
-      line-height: 12px;
-      cursor: pointer;
-      transition: color 0.3s ease, opacity 0.15s ease;
-      &:before {
-        display: block;
-        font-family: "anticon" !important;
-        content: "\E631";
-      }
-      &:hover {
-        color: #999;
-      }
+      .selection__clear();
    }

    &:hover &__clear {
--- a/style/components/tabs.less
+++ b/style/components/tabs.less
@ -39,6 +39,7 @@
    overflow: hidden;
    font-size: 14px;
    line-height: @line-height-base;
+    height: 36px;
    box-sizing: border-box;
    position: relative;
    white-space: nowrap;
@ -65,6 +66,12 @@
    background-color: transparent;
    position: absolute;
    text-align: center;
+    color: #999;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: #666;
+    }

    &-icon {
      position: relative;
@ -87,9 +94,11 @@
  }

  &-tab-btn-disabled {
-    cursor: default;
+    cursor: not-allowed;
+    &,
+    &:hover {
      color: #ccc;
-    pointer-events: none;
+    }
  }

  &-tab-next {
@ -411,7 +420,7 @@
    }
  }

-  &&-card &-tab:not(&-tab-active):hover &-tab-inner {
+  &&-editable-card &-tab:not(&-tab-active):hover &-tab-inner {
    padding-left: 8px;
    padding-right: 8px;
  }
--- a/style/components/treeSelect.less
+++ b/style/components/treeSelect.less
@ -1,8 +1,9 @@
-@tree-select-tree-prefix-cls: ant-tree-select-tree;
-.antCheckboxFn(@checkbox-prefix-cls: ant-tree-select-tree-checkbox);
+@select-tree-prefix-cls: ant-select-tree;
@import "../mixins/iconfont";

-.@{tree-select-tree-prefix-cls} {
+.antCheckboxFn(@checkbox-prefix-cls: ant-select-tree-checkbox);
+
+.@{select-tree-prefix-cls} {
  margin: 0;
  padding: 8px;
  font-size: 12px;
@ -35,16 +36,16 @@
      &:hover {
        background-color: tint(@primary-color, 90%);
      }
-      &.@{tree-select-tree-prefix-cls}-node-selected {
+      &.@{select-tree-prefix-cls}-node-selected {
        background-color: tint(@primary-color, 80%);
      }
    }
    span {
-      &.@{tree-select-tree-prefix-cls}-checkbox {
+      &.@{select-tree-prefix-cls}-checkbox {
        margin: 2px 4px 0 0;
      }
-      &.@{tree-select-tree-prefix-cls}-switcher,
-      &.@{tree-select-tree-prefix-cls}-iconEle {
+      &.@{select-tree-prefix-cls}-switcher,
+      &.@{select-tree-prefix-cls}-iconEle {
        margin: 0;
        width: 16px;
        height: 16px;
@ -55,7 +56,7 @@
        cursor: pointer;
        outline: none;
      }
-      &.@{tree-select-tree-prefix-cls}-icon_loading {
+      &.@{select-tree-prefix-cls}-icon_loading {
        &:after {
          content: '\e6a1';
          display: inline-block;
@ -65,17 +66,17 @@
          margin-top: 8px;
        }
      }
-      &.@{tree-select-tree-prefix-cls}-switcher {
-        &.@{tree-select-tree-prefix-cls}-roots_open,
-        &.@{tree-select-tree-prefix-cls}-center_open,
-        &.@{tree-select-tree-prefix-cls}-bottom_open,
-        &.@{tree-select-tree-prefix-cls}-noline_open {
+      &.@{select-tree-prefix-cls}-switcher {
+        &.@{select-tree-prefix-cls}-roots_open,
+        &.@{select-tree-prefix-cls}-center_open,
+        &.@{select-tree-prefix-cls}-bottom_open,
+        &.@{select-tree-prefix-cls}-noline_open {
          .antTreeSwitcherIcon();
        }
-        &.@{tree-select-tree-prefix-cls}-roots_close,
-        &.@{tree-select-tree-prefix-cls}-center_close,
-        &.@{tree-select-tree-prefix-cls}-bottom_close,
-        &.@{tree-select-tree-prefix-cls}-noline_close {
+        &.@{select-tree-prefix-cls}-roots_close,
+        &.@{select-tree-prefix-cls}-center_close,
+        &.@{select-tree-prefix-cls}-bottom_close,
+        &.@{select-tree-prefix-cls}-noline_close {
          .antTreeSwitcherIcon();
          .ie-rotate(3);
          &:after {
@ -108,480 +109,3 @@
    vertical-align: top;
  }
 }
-
-
-@tree-select-prefix-cls: ant-tree-select;
-
-@duration: .3s;
-
-@import "../mixins/iconfont";
-//mixin
-.selection__clear() {
-  cursor: pointer;
-  float: right;
-  font-weight: bold;
-}
-
-.@{tree-select-prefix-cls} {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  position: relative;
-  vertical-align: middle;
-  color: #666;
-  font-size: @font-size-base;
-
-  > ul > li > a {
-    padding: 0;
-    background-color: #fff;
-  }
-
-  // arrow
-  &-arrow {
-    .iconfont-mixin();
-    position: absolute;
-    top: 50%;
-    right: 8px;
-    line-height: 1;
-    margin-top: -5px;
-    .iconfont-size-under-12px(8px);
-
-    * {
-      display: none;
-    }
-
-    &:before {
-      content: '\e603';
-      transition: transform 0.2s ease;
-    }
-  }
-
-  &-selection {
-    outline: none;
-    user-select: none;
-
-    box-sizing: border-box;
-    display: block;
-
-    background-color: #fff;
-    border-radius: @border-radius-base;
-    border: 1px solid @border-color-base;
-    .transition(all .3s @ease-in-out);
-
-    &:hover {
-      .hover;
-    }
-    &:active {
-      .active;
-    }
-  }
-
-  &-disabled {
-    color: #ccc;
-  }
-
-  &-disabled &-selection {
-    background: #f4f4f4;
-    cursor: not-allowed;
-    &:hover,
-    &:active {
-      border-color: @border-color-base;
-    }
-  }
-
-  &-disabled &-selection--multiple &-selection__choice {
-    background: #e9e9e9;
-    color: #999;
-    padding-right: 10px;
-    &__remove {
-      display: none;
-    }
-  }
-
-  &-selection--single {
-    height: 28px;
-    cursor: pointer;
-
-    .@{tree-select-prefix-cls}-selection__rendered {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      padding-left: 8px;
-      padding-right: 24px;
-      line-height: 26px;
-    }
-
-    .@{tree-select-prefix-cls}-selection__clear {
-      .selection__clear();
-    }
-
-    .@{tree-select-prefix-cls}-selection__placeholder {
-      color: #ccc;
-    }
-  }
-
-  &-lg {
-    .@{tree-select-prefix-cls}-selection--single {
-      height: 32px;
-      .@{tree-select-prefix-cls}-selection__rendered {
-        line-height: 30px;
-      }
-    }
-
-    .@{tree-select-prefix-cls}-selection--multiple {
-      min-height: 32px;
-
-      .@{tree-select-prefix-cls}-search__field__placeholder {
-        left: 10px;
-        margin-top: 4px;
-        font-size: 14px;
-        line-height: 24px;
-        height: 24px;
-      }
-
-      .@{tree-select-prefix-cls}-selection__rendered {
-        li {
-          height: 22px;
-          .@{tree-select-prefix-cls}-selection__choice__content {
-            font-size: 14px;
-            line-height: 22px;
-          }
-        }
-      }
-    }
-  }
-
-  &-sm {
-    .@{tree-select-prefix-cls}-selection {
-      border-radius: @border-radius-sm;
-    }
-    .@{tree-select-prefix-cls}-selection--single {
-      height: 22px;
-      .@{tree-select-prefix-cls}-selection__rendered {
-        line-height: 20px;
-      }
-    }
-    .@{tree-select-prefix-cls}-selection--multiple {
-      min-height: 22px;
-      .@{tree-select-prefix-cls}-selection__rendered {
-        li {
-          height: 14px;
-          .@{tree-select-prefix-cls}-selection__choice__content {
-            line-height: 10px;
-            font-size: 8px;
-            position: relative;
-            top: -3px;
-          }
-          .@{tree-select-prefix-cls}-selection__choice__remove {
-            position: relative;
-            top: -4px;
-          }
-        }
-      }
-    }
-  }
-
-  &-disabled &-selection__choice__remove {
-    color: #ccc;
-    cursor: default;
-    &:hover {
-      color: #ccc;
-    }
-  }
-
-  &-search__field__wrap {
-    display: inline-block;
-    position: relative;
-  }
-
-  &-search__field__placeholder {
-    position: absolute;
-    top: 0;
-    left: 3px;
-    color: #aaa;
-  }
-
-  &-search--inline {
-    float: left;
-
-    .@{tree-select-prefix-cls}-search__field__wrap {
-      width: 100%;
-    }
-
-    .@{tree-select-prefix-cls}-search__field {
-      border: 0;
-      font-size: 100%;
-      background: transparent;
-      outline: 0;
-    }
-    > i {
-      float: right;
-    }
-  }
-
-  &-selection--multiple {
-    min-height: 28px;
-    cursor: text;
-
-    .@{tree-select-prefix-cls}-search__field__placeholder {
-      left: 10px;
-      margin-top: 4px;
-      height: 20px;
-      line-height: 20px;
-    }
-
-    .@{tree-select-prefix-cls}-search--inline {
-      width: auto;
-      .@{tree-select-prefix-cls}-search__field {
-        width: 0.75em;
-      }
-    }
-
-    .@{tree-select-prefix-cls}-selection__rendered {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding-left: 6px;
-      padding-bottom: 4px;
-    }
-
-    .@{tree-select-prefix-cls}-selection__clear {
-      .selection__clear();
-      margin-top: 5px;
-      margin-right: 10px;
-    }
-
-    > ul > li {
-      margin-top: 4px;
-      height: 20px;
-      line-height: 20px;
-    }
-
-    .@{tree-select-prefix-cls}-selection__choice {
-      background-color: #f3f3f3;
-      border-radius: 4px;
-      cursor: default;
-      float: left;
-      padding: 0 15px;
-      margin-right: 4px;
-      max-width: 99%;
-      position: relative;
-      overflow: hidden;
-      transition: padding @duration @ease-in-out;
-      padding: 0 20px 0 10px;
-    }
-
-    .@{tree-select-prefix-cls}-selection__choice__content {
-      display: inline-block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 100%;
-      transition: margin @duration @ease-in-out;
-    }
-
-    .@{tree-select-prefix-cls}-selection__choice__remove {
-      .iconfont-mixin();
-      color: #999;
-      line-height: 20px;
-      cursor: pointer;
-      display: inline-block;
-      font-weight: bold;
-      transition: all 0.3s @ease-in-out;
-      .iconfont-size-under-12px(8px);
-      position: absolute;
-      right: 4px;
-      padding: 0 0 0 8px;
-      &:hover {
-        color: #404040;
-      }
-      &:before {
-        content: "\e62d";
-      }
-    }
-  }
-
-  &-open {
-    .@{tree-select-prefix-cls}-arrow {
-      .ie-rotate(2);
-      -ms-transform: rotate(180deg);
-      &:before {
-        .rotate(180deg);
-      }
-    }
-    .@{tree-select-prefix-cls}-selection {
-      .active();
-    }
-  }
-
-  &-combobox {
-    .@{tree-select-prefix-cls}-arrow {
-      display: none;
-    }
-    .@{tree-select-prefix-cls}-search--inline {
-      height: 100%;
-      float: none;
-    }
-    .@{tree-select-prefix-cls}-search__field__placeholder {
-      left: 10px;
-      cursor: text;
-    }
-    .@{tree-select-prefix-cls}-search__field__wrap {
-      width: 100%;
-      height: 100%;
-    }
-    .@{tree-select-prefix-cls}-search__field {
-      padding: 0 10px;
-      width: 100%;
-      height: 100%;
-      position: relative;
-      z-index: 1;
-    }
-    .@{tree-select-prefix-cls}-selection__rendered {
-      padding: 0;
-      height: 100%;
-    }
-  }
-}
-
-.@{tree-select-prefix-cls}-dropdown {
-  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
-  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
-    animation-name: antSlideUpIn;
-  }
-
-  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-  &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
-    animation-name: antSlideDownIn;
-  }
-
-  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
-    animation-name: antSlideUpOut;
-  }
-
-  &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
-    animation-name: antSlideDownOut;
-  }
-
-  &-hidden {
-    display: none;
-  }
-
-  background-color: white;
-  border: 1px solid @border-color-base;
-  box-shadow: @box-shadow-base;
-  border-radius: @border-radius-base;
-  box-sizing: border-box;
-  z-index: 1070;
-  left: -9999px;
-  top: -9999px;
-  position: absolute;
-  outline: none;
-  overflow: hidden;
-  font-size: @font-size-base;
-
-  &-menu {
-    outline: none;
-    margin-bottom: 0;
-    padding-left: 0; // Override default ul/ol
-    list-style: none;
-    max-height: 250px;
-    overflow: auto;
-
-    &-item-group-list {
-      margin: 0;
-      padding: 0;
-
-      > .@{tree-select-prefix-cls}-dropdown-menu-item {
-        padding-left: 24px;
-      }
-    }
-
-    &-item-group-title {
-      color: #999;
-      line-height: 1.5;
-      padding: 8px 15px;
-    }
-
-    &-item {
-      position: relative;
-      display: block;
-      padding: 7px 15px;
-      font-weight: normal;
-      color: #666;
-      white-space: nowrap;
-      cursor: pointer;
-      overflow: hidden;
-      transition: background 0.3s ease;
-
-      &:first-child {
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
-      }
-      &:last-child {
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-      }
-      &:hover,
-      &-active {
-        background-color: tint(@primary-color, 90%);
-      }
-
-      &-selected {
-        background-color: tint(@primary-color, 80%);
-        &:hover {
-          background-color: tint(@primary-color, 80%);
-        }
-      }
-
-      &-disabled {
-        color: #ccc;
-        cursor: not-allowed;
-
-        &:hover {
-          color: #ccc;
-          background-color: #fff;
-          cursor: not-allowed;
-        }
-      }
-
-      &-divider {
-        height: 1px;
-        margin: 1px 0;
-        overflow: hidden;
-        background-color: #e5e5e5;
-        line-height: 0;
-      }
-    }
-  }
-
-  &-container-open,
-  &-open {
-    .@{tree-select-prefix-cls}-dropdown {
-      display: block;
-    }
-  }
-
-  .@{tree-select-prefix-cls}-dropdown-search {
-    display: block;
-    padding: 4px;
-    .@{tree-select-prefix-cls}-search__field__placeholder {
-      left: 7px;
-      top: 5px;
-    }
-    .@{tree-select-prefix-cls}-search__field__wrap {
-      width: 100%;
-    }
-    .@{tree-select-prefix-cls}-search__field {
-      padding: 4px 7px;
-      width: 100%;
-      box-sizing: border-box;
-      border: 1px solid @border-color-base;
-      border-radius: 4px;
-      outline: none;
-    }
-    &.@{tree-select-prefix-cls}-search--hide {
-      display: none;
-    }
-  }
-}