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

CHANGELOG.md

@@ -4,12 +4,12 @@
 
 ---
 
-## 0.11.1 `developing`
+## 0.11.1 `2015-12-29`
 
 - 修复一个 Table 无法修改 pageSize 的问题。
 - 修复一个 Table 子表格展开的对齐问题。
-- 修复一个 chrome 下部分图标左侧切边的问题。
-- 修复搜索输入框在表单下使用的样式问题。
+- 修复一个 Chrome 下部分图标左侧切边的问题。
+- 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762)
 
 ## 0.11.0 `2015-12-28`
 

components/cascader/demo/basic.md

@@ -0,0 +1,43 @@
+# 基本
+
+- order: 0
+
+省市区级联。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <Cascader options={options} onChange={onChange} />
+, mountNode);
+````

components/cascader/demo/custom-trigger.md

@@ -0,0 +1,53 @@
+# 可以自定义显示
+
+- order: 1
+
+切换按钮和结果分开。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+  }],
+}];
+
+const CitySwitcher = React.createClass({
+  getInitialState() {
+    return {
+      text: '未选择',
+    };
+  },
+  onChange(value, selectedOptions) {
+    this.setState({
+      text: selectedOptions.map(o => o.label).join(', '),
+    });
+  },
+  render() {
+    return (
+      <span>
+        {this.state.text}
+        &nbsp;
+        <Cascader options={options} onChange={this.onChange}>
+          <a href="#">切换城市</a>
+        </Cascader>
+      </span>
+    );
+  },
+});
+
+ReactDOM.render(<CitySwitcher />, mountNode);
+````

components/cascader/demo/default-value.md

@@ -0,0 +1,43 @@
+# 默认值
+
+- order: 0
+
+默认值通过数组的方式指定。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />
+, mountNode);
+````

components/cascader/demo/hover.md

@@ -0,0 +1,49 @@
+# 移入展开
+
+- order: 2
+
+通过移入展开下级菜单，点击完成选择。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+// 只展示最后一项
+function displayRender(label) {
+  return label[label.length - 1];
+}
+
+ReactDOM.render(
+  <Cascader options={options} expandTrigger="hover"
+    displayRender={displayRender} onChange={onChange} />
+, mountNode);
+````

components/cascader/index.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import Cascader from 'rc-cascader';
+import Input from '../input';
+import Icon from '../icon';
+import arrayTreeFilter from 'array-tree-filter';
+import classNames from 'classnames';
+
+class AntCascader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      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) {
+    this.setValue(value, selectedOptions);
+  }
+  handlePopupVisibleChange(popupVisible) {
+    this.setState({ popupVisible });
+    this.props.onPopupVisibleChange(popupVisible);
+  }
+  setValue(value, selectedOptions = []) {
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+    this.props.onChange(value, selectedOptions);
+  }
+  getLabel() {
+    const { options, displayRender } = this.props;
+    const label = arrayTreeFilter(options, (o, level) => o.value === this.state.value[level])
+      .map(o => o.label);
+    return displayRender(label);
+  }
+  clearSelection(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setValue([]);
+    this.setState({ popupVisible: false });
+  }
+  render() {
+    const { prefixCls, children, placeholder, style, size } = this.props;
+    const sizeCls = classNames({
+      'ant-input-lg': size === 'large',
+      'ant-input-sm': size === 'small',
+    });
+    const clearIcon = this.state.value.length > 0 ?
+      <Icon type="cross-circle"
+        className={`${prefixCls}-picker-clear`}
+        onClick={this.clearSelection} /> : null;
+    const arrowCls = classNames({
+      [`${prefixCls}-picker-arrow`]: true,
+      [`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
+    });
+    return (
+      <Cascader {...this.props}
+        value={this.state.value}
+        popupVisible={this.state.popupVisible}
+        onPopupVisibleChange={this.handlePopupVisibleChange}
+        onChange={this.handleChange}>
+        {children ||
+          <span className={`${prefixCls}-picker`}>
+            <Input placeholder={placeholder}
+              className={`${prefixCls}-input ant-input ${sizeCls}`}
+              style={style}
+              value={this.getLabel()}
+              readOnly />
+            {clearIcon}
+            <Icon type="down" className={arrowCls} />
+          </span>
+        }
+      </Cascader>
+    );
+  }
+}
+
+AntCascader.defaultProps = {
+  prefixCls: 'ant-cascader',
+  placeholder: '请选择',
+  transitionName: 'slide-up',
+  onChange() {},
+  options: [],
+  displayRender(label) {
+    return label.join(' / ');
+  },
+  size: 'default',
+  onPopupVisibleChange() {},
+};
+
+export default AntCascader;

components/cascader/index.md

@@ -0,0 +1,34 @@
+# Cascader
+
+- category: Components
+- chinese: 级联选择
+- type: 表单
+
+---
+
+级联选择框。
+
+
+## 何时使用
+
+- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
+- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
+- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
+
+## API
+
+```html
+<Cascader options={options} onChange={onChange} />
+```
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| options | 可选项数据源 | object | - |
+| defaultValue | 默认的选中项 | array  |[] |
+| value | 指定选中项 | array  | - |
+| onChange | 选择完成后的回调 | `function(value, selectedOptions)` | - |
+| displayRender | 选择后展示的渲染函数 | `function(label)`` | `function(label) { return label.join(' / ') }` |
+| style | 自定义样式 | string | - |
+| popupClassName | 自定义浮层类名 | string | - |
+| placeholder | 输入框占位文本 | string | '请选择' |
+| size | 输入框大小，可选 `large` `default` `small` | string | `default` |

components/date-picker/locale/en_US.js

@@ -5,7 +5,8 @@ import CalendarLocale from 'rc-calendar/lib/locale/en_US';
 // 统一合并为完整的 Locale
 let locale = objectAssign({}, GregorianCalendarLocale);
 locale.lang = objectAssign({
-  placeholder: 'Select a date'
+  placeholder: 'Select date',
+  timePlaceholder: 'Select time',
 }, CalendarLocale);
 
 // All settings at:

components/form/demo/advanced-search-form.md

@@ -0,0 +1,121 @@
+# 高级搜索
+
+- order: 10
+
+三列栅格式的表单排列方式，常用于数据表格的高级搜索。
+
+有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
+
+---
+
+````jsx
+import { Form, Input, Row, Col, Button } from 'antd';
+const FormItem = Form.Item;
+
+ReactDOM.render(
+<Form horizontal className="advanced-search-form">
+  <Row>
+    <Col span="8">
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="较长搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+    </Col>
+    <Col span="8">
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="较长搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+    </Col>
+    <Col span="8">
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="较长搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+    </Col>
+  </Row>
+  <Row>
+    <Col span="8" offset="16" style={{textAlign: 'right'}}>
+      <Button type="primary" htmlType="submit">搜索</Button>
+      <Button type="ghost">清除条件</Button>
+    </Col>
+  </Row>
+</Form>
+, mountNode);
+````
+
+````css
+/* 定制样式 */
+
+.advanced-search-form {
+  padding: 16px 8px;
+  background: #f8f8f8;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+
+/* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
+.advanced-search-form > .row {
+  margin-left: -10px;
+}
+
+.advanced-search-form > .row > .col-8 {
+  padding: 0 8px;
+}
+
+.advanced-search-form .ant-form-item {
+  margin-bottom: 16px;
+}
+
+.advanced-search-form .ant-btn + .ant-btn {
+  margin-left: 8px;
+}
+````
+
+<style>
+#components-form-demo-advanced-search-form .ant-form-horizontal {
+  max-width: none;
+}
+</style>

components/form/index.md

@@ -3,6 +3,7 @@
 - category: Components
 - chinese: 表单
 - type: 表单
+- cols: 1
 
 ---
 
@@ -86,3 +87,8 @@ Mixin：当表单控件的输入值改变时，更新 formData。
 </Input.Group>
 ```
 
+<style>
+.code-box-demo .ant-form-horizontal {
+  max-width: 540px;
+}
+</style>

components/select/demo/coordinate.md

@@ -4,6 +4,8 @@
 
 省市联动是典型的例子。
 
+推荐使用 [cascader](/components/cascader/) 组件。
+
 ---
 
 ````jsx

components/tree-select/demo/basic.md

@@ -0,0 +1,55 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+import { TreeSelect } from 'antd';
+const TreeNode = TreeSelect.TreeNode;
+
+const Demo = React.createClass({
+  getInitialState() {
+    return {
+      value: 'leaf1',
+    };
+  },
+  onChange(e) {
+    let value;
+    if (e.target) {
+      value = e.target.value;
+    } else {
+      value = e;
+    }
+    this.setState({value});
+  },
+  render() {
+    return (
+      <div style={{margin: 20}}>
+        <h2>Single Select</h2>
+        <TreeSelect style={{width: 300}} showSearch
+              value={this.state.value} optionLabelProp="title"
+              dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
+              treeDefaultExpandAll
+              onChange={this.onChange}>
+          <TreeNode value="parent 1" title="parent 1" key="0-1">
+            <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
+              <TreeNode value="leaf1" title="my leaf" key="random" />
+              <TreeNode value="leaf2" title="your leaf" key="random1" />
+            </TreeNode>
+            <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
+              <TreeNode value="sss" title={<span style={{color: 'red'}}>sss</span>} key="random3" />
+            </TreeNode>
+          </TreeNode>
+        </TreeSelect>
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <Demo />
+, document.getElementById('components-tree-select-demo-basic'));
+````

components/tree-select/demo/enhance.md

@@ -0,0 +1,89 @@
+# 更多功能
+
+- order: 1
+
+更多功能。
+
+---
+
+````jsx
+import { TreeSelect } from 'antd';
+const TreeNode = TreeSelect.TreeNode;
+
+const x = 3;
+const y = 2;
+const z = 1;
+const gData = [];
+const generateData = (_level, _preKey, _tns) => {
+  const preKey = _preKey || '0';
+  const tns = _tns || gData;
+
+  const children = [];
+  for (let i = 0; i < x; i++) {
+    const key = `${preKey}-${i}`;
+    tns.push({title: key, key: key});
+    if (i < y) {
+      children.push(key);
+    }
+  }
+  if (_level < 0) {
+    return tns;
+  }
+  const __level = _level - 1;
+  children.forEach((key, index) => {
+    tns[index].children = [];
+    return generateData(__level, key, tns[index].children);
+  });
+};
+generateData(z);
+
+const Demo = React.createClass({
+  getInitialState() {
+    return {
+      value: ['0-0'],
+    };
+  },
+  onSelect(selectedKey, node, selectedKeys) {
+    console.log('selected: ', selectedKey, selectedKeys);
+    this.setState({
+      value: selectedKeys,
+    });
+  },
+  onChange(value) {
+    console.log('selected ' + value);
+    this.setState({
+      value: value,
+    });
+  },
+  render() {
+    const loop = data => {
+      return data.map((item) => {
+        if (item.children) {
+          return <TreeNode key={item.key} value={item.key} title={item.key}>{loop(item.children)}</TreeNode>;
+        }
+        return <TreeNode key={item.key} value={item.key} title={item.key} />;
+      });
+    };
+    const tProps = {
+      // defaultValue: this.state.value,
+      value: this.state.value,
+      onChange: this.onChange,
+      onSelect: this.onSelect,
+      multiple: true,
+      // treeCheckable: true,
+      treeDefaultExpandAll: true,
+    };
+    return (<div style={{padding: '10px 30px'}}>
+      <h3>more</h3>
+      <TreeSelect style={{width: 300}} {...tProps}>
+        {loop(gData)}
+      </TreeSelect>
+    </div>);
+  },
+});
+
+ReactDOM.render(<div>
+  <Demo />
+</div>
+, document.getElementById('components-tree-select-demo-enhance'));
+````

components/tree-select/index.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import TreeSelect, { TreeNode } from 'rc-tree-select';
+import classNames from 'classnames';
+// import assign from 'object-assign';
+// import animation from '../common/openAnimation';
+
+const AntTreeSelect = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-tree-select',
+      transitionName: 'slide-up',
+      optionLabelProp: 'value',
+      choiceTransitionName: 'zoom',
+      showSearch: false,
+      size: 'default'
+    };
+  },
+  render() {
+    const props = this.props;
+    let {
+      size, className, combobox, notFoundContent
+    } = this.props;
+
+    const cls = classNames({
+      'ant-select-lg': size === 'large',
+      'ant-select-sm': size === 'small',
+      [className]: !!className,
+    });
+
+    if (combobox) {
+      notFoundContent = null;
+    }
+
+    let checkable = props.treeCheckable;
+    if (checkable) {
+      checkable = <span className={`${props.prefixCls}-tree-checkbox-inner`}></span>;
+    }
+
+    return (
+      <TreeSelect {...this.props}
+        treeCheckable={checkable}
+        className={cls}
+        notFoundContent={notFoundContent} />
+    );
+  }
+});
+
+AntTreeSelect.TreeNode = TreeNode;
+export default AntTreeSelect;

components/tree-select/index.md

@@ -0,0 +1,49 @@
+# TreeSelect
+
+- category: Components
+- chinese: 树选择控件
+- type: 表单
+
+---
+
+## 何时使用
+
+当需要从树控件中灵活地筛选数据时
+
+## API
+
+### Tree props
+
+| 参数       | 说明                                      | 类型       | 默认值 |
+|-----------|------------------------------------------|------------|--------|
+| value    | 指定当前选中的条目 | string/Array<String>   |  无  |
+| defaultValue | 指定默认选中的条目 | string/Array<String>   |  无  |
+| multiple   | 支持多选 | boolean | false |
+| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false |
+| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无   |
+| onChange | 选中option，或input的value变化(combobox 模式下)时，调用此函数 | function(value, label) | 无 |
+| allowClear | 显示清除按钮 | boolean | false |
+| onSearch | 文本框值变化时回调 | function(value: String) |  |
+| placeholder | 选择框默认文字 | string | 无 |
+| searchPlaceholder | 搜索框默认文字 | string | 无 |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
+| combobox | 输入框自动提示模式 | boolean | false |
+| size    | 选择框大小，可选 `large` `small`  | String      |      default      |
+| showSearch | 在下拉中显示搜索框 | boolean | false |
+| disabled | 是否禁用 | boolean | false |
+| treeDefaultExpandAll | 默认展开所有树节点 | bool | false |
+| treeCheckable | 显示checkbox | bool | false |
+| filterTreeNode | 是否根据输入项进行筛选，返回值true | function(treeNode) | - |
+| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | String | 'value' |
+| treeNodeLabelProp | 作为显示的prop设置 | String | 'value' |
+| loadData | 异步加载数据 | function(node) | - |
+
+### TreeNode props
+
+| 参数       | 说明                                      | 类型       | 默认值 |
+|-----------|------------------------------------------|------------|--------|
+| disabled    | 是否禁用 | Boolean   |  false  |
+| key   | 此项必须设置 |  String |  |
+| value   | 默认根据此属性值进行筛选 | String | - |
+| title | 树节点显示的内容 | String | '---' |
+| isLeaf | 是否是叶子节点 | bool | false |

docs/getting-started.md

@@ -9,9 +9,9 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 
 ## 第一个例子
 
-最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 Bug Report, 注意不要在实际项目中这样使用。
+最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。
 
-- [antd JSFiddle](http://jsfiddle.net/yiminghe/9zrstuto/1/)
+- [antd JSFiddle](http://jsfiddle.net/9zrstuto/70/)
 
 
 ## 标准开发

index.js

@@ -29,6 +29,7 @@ const antd = {
   Alert: require('./components/alert'),
   Validation: require('./components/validation'),
   Tree: require('./components/tree'),
+  TreeSelect: require('./components/tree-select'),
   Upload: require('./components/upload'),
   Badge: require('./components/badge'),
   Menu: require('./components/menu'),
@@ -43,6 +44,7 @@ const antd = {
   Calendar: require('./components/calendar'),
   TimePicker: require('./components/time-picker'),
   Transfer: require('./components/transfer'),
+  Cascader: require('./components/cascader'),
 };
 
 antd.version = require('./package.json').version;

package.json

@@ -32,6 +32,7 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "array-tree-filter": "~1.0.0",
     "classnames": "~2.2.0",
     "css-animation": "1.1.x",
     "gregorian-calendar": "~4.1.0",
@@ -39,6 +40,7 @@
     "object-assign": "~4.0.1",
     "rc-animate": "~2.0.2",
     "rc-calendar": "~5.2.0",
+    "rc-cascader": "~0.5.0",
     "rc-checkbox": "~1.1.1",
     "rc-collapse": "~1.4.4",
     "rc-dialog": "~5.2.2",
@@ -59,7 +61,8 @@
     "rc-tabs": "~5.6.0",
     "rc-time-picker": "~1.0.0",
     "rc-tooltip": "~3.3.0",
-    "rc-tree": "~0.19.0",
+    "rc-tree": "^0.23.1",
+    "rc-tree-select": "^0.3.3",
     "rc-trigger": "~1.0.6",
     "rc-upload": "~1.7.0",
     "rc-util": "~3.0.1",
@@ -99,10 +102,10 @@
     "lodash": "^3.10.0",
     "nico-jsx": "~0.7.0",
     "pre-commit": "1.x",
-    "react": "~0.14.2",
-    "react-addons-test-utils": "~0.14.2",
+    "react": "~0.14.5",
+    "react-addons-test-utils": "~0.14.5",
     "react-copy-to-clipboard": "^3.0.4",
-    "react-dom": "~0.14.2",
+    "react-dom": "~0.14.5",
     "react-router": "~1.0.3",
     "react-stateless-wrapper": "~1.0.2",
     "reqwest": "~2.0.5",

site/static/style.css

@@ -556,13 +556,6 @@ footer ul li > a {
   margin: 20px 0;
 }
 
-.markdown code,
-.markdown kbd,
-.markdown pre,
-.markdown samp {
-  font-family: Consolas, monospace;
-}
-
 .markdown p,
 .markdown pre {
   margin: 1.2em 0;
@@ -590,14 +583,13 @@ footer ul li > a {
 }
 
 .markdown pre {
-  background: #F7F7F7;
   border-radius: 6px;
 }
 
 .markdown pre code {
-  background: #F7F7F7;
   border: none;
-  padding: 12px 20px;
+  padding: 1em 2em;
+  background: #f9f9f9;
   margin: 0;
 }
 

site/static/tomorrow.css

@@ -35,22 +35,23 @@
 }
 
 code {
-  background: #f6f6f6;
+  background: #f7f7f7;
   padding: 1px 6px;
   border-radius: 3px;
   color: #888;
-  font-size: 90%;
+  font-size: 0.8rem;
   border: 1px solid #e9e9e9;
+  white-space: nowrap;
 }
 
 pre code {
   display: block;
   background: white;
   color: #666;
-  font-family: Consolas, monospace;
   line-height: 1.5;
   border: 1px solid #e9e9e9;
   padding: 10px 15px;
   border-radius: 6px;
-  font-size: 14px;
+  font-size: 0.9rem;
+  white-space: pre;
 }

style/components/cascader.less

@@ -0,0 +1,133 @@
+@cascader-prefix-cls: ant-cascader;
+
+.@{cascader-prefix-cls} {
+  font-size: @font-size-base;
+  &-input {
+    width: 172px;
+    display: block;
+    cursor: pointer;
+  }
+  &-picker {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+
+    &-clear {
+      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;
+      &:hover {
+        color: #999;
+      }
+    }
+
+    &:hover &-clear {
+      opacity: 1;
+    }
+
+    // arrow
+    &-arrow {
+      position: absolute;
+      top: 50%;
+      right: 8px;
+      width: 12px;
+      height: 12px;
+      margin-top: -6px;
+      line-height: 12px;
+      .iconfont-size-under-12px(8px);
+      &:before {
+        transition: transform 0.2s ease;
+      }
+      &&-expand {
+        .ie-rotate(2);
+        &:before {
+          .rotate(180deg);
+        }
+      }
+    }
+  }
+  &-menus {
+    font-size: 12px;
+    overflow: hidden;
+    background: #fff;
+    position: absolute;
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-base;
+    box-shadow: @box-shadow-base;
+    &-hidden {
+      display: none;
+    }
+    &.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;
+    }
+  }
+  &-menu {
+    float: left;
+    width: 111px;
+    height: 180px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-right: 1px solid @border-color-split;
+    &:last-child {
+      border-right-color: transparent;
+      margin-right: -1px;
+    }
+  }
+  &-menu-item {
+    height: 32px;
+    line-height: 32px;
+    padding: 0 16px;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: all 0.3s ease;
+    &:hover {
+      background: tint(@primary-color, 90%);
+    }
+    &-active {
+      background: tint(@primary-color, 80%);
+      &:hover {
+        background: tint(@primary-color, 80%);
+      }
+    }
+    &-expand {
+      position: relative;
+      &:after {
+        content: '\e600';
+        font-family: 'anticon';
+        .iconfont-size-under-12px(8px);
+        color: #999;
+        position: absolute;
+        right: 15px;
+        line-height: 32px;
+      }
+    }
+  }
+}

style/components/index.less

@@ -27,6 +27,7 @@
 @import "tag";
 @import "alert";
 @import "tree";
+@import "treeSelect";
 @import "carousel/slick";
 @import "carousel/slick-theme";
 @import "upload";
@@ -38,3 +39,4 @@
 @import "calendar";
 @import "timepicker";
 @import "transfer";
+@import "cascader";

style/components/treeSelect.less

@@ -0,0 +1,580 @@
+@tree-select-tree-prefix-cls: ant-tree-select-tree;
+.antCheckboxFn(@checkbox-prefix-cls: ant-tree-select-tree-checkbox);
+@import "../mixins/iconfont";
+.antTreeSwitcherIcon() {
+  position: relative;
+  &:after {
+    .iconfont-size-under-12px(6px);
+    content: '\e611';
+    display: inline-block;
+    font-family: 'anticon';
+    font-weight: bold;
+    position: absolute;
+    top: 10px;
+    right: 4px;
+    color: #666;
+    transition: transform .3s ease;
+  }
+}
+.@{tree-select-tree-prefix-cls} {
+  margin: 0;
+  padding: 5px;
+  font-size: 12px;
+  li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    white-space: nowrap;
+    outline: 0;
+    ul {
+      margin: 0;
+      padding: 0 0 0 18px;
+    }
+    a {
+      display: inline-block;
+      padding: 1px 4px;
+      border-radius: 2px;
+      margin: 0;
+      cursor: pointer;
+      height: 20px;
+      text-decoration: none;
+      vertical-align: top;
+      color: #666;
+    }
+    span {
+      &.@{tree-select-tree-prefix-cls}-checkbox {
+        margin: 3px 4px 0 0;
+      }
+      &.@{tree-select-tree-prefix-cls}-switcher-noop,
+      &.@{tree-select-tree-prefix-cls}-switcher,
+      &.@{tree-select-tree-prefix-cls}-iconEle {
+        line-height: 0;
+        margin: 0;
+        width: 16px;
+        height: 18px;
+        display: inline-block;
+        vertical-align: middle;
+        border: 0 none;
+        cursor: pointer;
+        outline: none;
+      }
+      &.@{tree-select-tree-prefix-cls}-icon_loading {
+        &:after {
+          content: '\e6a1';
+          display: inline-block;
+          font-family: 'anticon';
+          font-weight: bold;
+          .animation(loadingCircle 1s infinite linear);
+          margin-top: 8px;
+        }
+      }
+      &.@{tree-select-tree-prefix-cls}-switcher {
+        &-disabled {
+          background: #fff;
+          position: relative;
+          &:after {
+            content: '-';
+            position: absolute;
+            top: 8px;
+            left: 6px;
+            color: gray;
+          }
+        }
+        &.@{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 {
+          .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 {
+          .antTreeSwitcherIcon();
+          .ie-rotate(3);
+          &:after {
+            transform: rotate(270deg) scale(0.5);
+          }
+        }
+      }
+    }
+  }
+  &-child-tree {
+    display: none;
+    &-open {
+      display: block;
+    }
+  }
+  &-treenode-disabled {
+    >span,
+    >a {
+      color: gray;
+    }
+  }
+  &-node-selected {
+    background-color: tint(@primary-color, 90%);
+  }
+  &-icon__open {
+    margin-right: 2px;
+    vertical-align: top;
+  }
+  &-icon__close {
+    margin-right: 2px;
+    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 #d9d9d9;
+    .transition(all .3s @ease-in-out);
+
+    &:hover {
+      .hover;
+    }
+    &:active {
+      .active;
+    }
+  }
+
+  &-disabled {
+    color: #ccc;
+  }
+
+  &-disabled &-selection {
+    &:hover,
+    &:active {
+      border-color: #d9d9d9;
+    }
+  }
+
+  &-disabled &-selection--single {
+    cursor: not-allowed;
+  }
+
+  &-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 {
+    .ant-select-selection--single {
+      height: 32px;
+      .ant-select-selection__rendered {
+        line-height: 30px;
+      }
+    }
+
+    .ant-select-selection--multiple {
+      min-height: 32px;
+      .ant-select-selection__rendered {
+        li {
+          height: 24px;
+          .ant-select-selection__choice__content {
+            font-size: 14px;
+            line-height: 24px;
+          }
+        }
+      }
+    }
+  }
+
+  &-sm {
+    .ant-select-selection--single {
+      height: 22px;
+      .ant-select-selection__rendered {
+        line-height: 20px;
+      }
+    }
+    .ant-select-selection--multiple {
+      min-height: 22px;
+      .ant-select-selection__rendered {
+        li {
+          height: 14px;
+          .ant-select-selection__choice__content {
+            line-height: 14px;
+            position: relative;
+            top: -3px;
+          }
+          .ant-select-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 {
+      top: 6px;
+      left: 10px;
+    }
+
+    .@{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 #d9d9d9;
+  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 #d9d9d9;
+      border-radius: 4px;
+      outline: none;
+    }
+    &.@{tree-select-prefix-cls}-search--hide {
+      display: none;
+    }
+  }
+}