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

components/alert/index.tsx

@@ -4,7 +4,7 @@ import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';
 
-interface AlertProps {
+export interface AlertProps {
   /**
    * Type of Alert styles, options:`success`, `info`, `warning`, `error`
    */

components/back-top/index.tsx

@@ -3,7 +3,31 @@ import Animate from 'rc-animate';
 import Icon from '../icon';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
-import omit from 'object.omit';
+import omit from 'omit.js';
+
+const reqAnimFrame = (() => {
+  if (window.requestAnimationFrame) {
+    return window.requestAnimationFrame;
+  }
+  const a = ['moz', 'ms', 'webkit'];
+  const raf = a.filter(key => `${key}RequestAnimationFrame` in window);
+  return raf[0] ? window[`${raf[0]}RequestAnimationFrame`] :
+    ((callback) => window.setTimeout(callback, 1000 / 60));
+})();
+
+const currentScrollTop = () => {
+  return  window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+};
+
+const easeInOutCubic = (t, b, c, d) => {
+  const cc = c - b;
+  t /= d / 2;
+  if (t < 1) {
+    return cc / 2 * t * t * t + b;
+  } else {
+    return cc / 2 * ((t -= 2) * t * t + 2) + b;
+  }
+};
 
 function getScroll(target, top) {
   if (typeof window === 'undefined') {
@@ -23,7 +47,7 @@ function getScroll(target, top) {
   return ret;
 }
 
-interface BackTopProps {
+export interface BackTopProps {
   visibilityHeight?: number;
   onClick?: (event) => void;
   target?: () => HTMLElement | Window;
@@ -52,10 +76,17 @@ export default class BackTop extends React.Component<BackTopProps, any> {
   }
 
   scrollToTop = (e) => {
-    if (e) {
-      e.preventDefault();
+    const scrollTop = currentScrollTop();
+    const startTime = Date.now();
+    const frameFunc = () => {
+      const timestamp = Date.now();
+      const time = timestamp - startTime;
+      this.setScrollTop(easeInOutCubic(time, scrollTop, 0, 450));
+      if (time < 450) {
+        reqAnimFrame(frameFunc);
       }
-    this.setScrollTop(0);
+    };
+    reqAnimFrame(frameFunc);
     this.props.onClick(e);
   }
 

components/badge/ScrollNumber.tsx

@@ -3,7 +3,7 @@ import { createElement, Component } from 'react';
 import {findDOMNode} from 'react-dom';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
 import assign from 'object-assign';
-import omit from 'object.omit';
+import omit from 'omit.js';
 
 function getNumberArray(num) {
   return num ?

components/badge/demo/status.md

@@ -18,7 +18,7 @@ import { Badge } from 'antd';
 
 ReactDOM.render(
   <div>
-    <div>Status: &nbsp;</div>
+    <span>Status: &nbsp;</span>
     <Badge status="success" />
     <Badge status="error" />
     <Badge status="default" />

components/badge/index.tsx

@@ -3,7 +3,7 @@ import Animate from 'rc-animate';
 import ScrollNumber from './ScrollNumber';
 import classNames from 'classnames';
 
-interface BadgeProps {
+export interface BadgeProps {
   /** Number to show in badge */
   count: number | string;
   /** Max count to show */

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import splitObject from '../_util/splitObject';
 
-interface BreadcrumbItemProps {
+export interface BreadcrumbItemProps {
   separator?: React.ReactNode;
   href?: string;
 }

components/button/button-group.tsx

@@ -4,9 +4,9 @@ import splitObject from '../_util/splitObject';
 
 const prefix = 'ant-btn-group-';
 
-type ButtonSize = 'small' | 'large'
+export type ButtonSize = 'small' | 'large'
 
-interface ButtonGroupProps {
+export interface ButtonGroupProps {
   size?: ButtonSize;
   style?: React.CSSProperties;
   className?: string;

components/button/button.tsx

@@ -24,11 +24,11 @@ function insertSpace(child) {
   return child;
 }
 
-type ButtonType = 'primary' | 'ghost' | 'dashed'
-type ButtonShape = 'circle' | 'circle-outline'
-type ButtonSize = 'small' | 'large'
+export type ButtonType = 'primary' | 'ghost' | 'dashed'
+export type ButtonShape = 'circle' | 'circle-outline'
+export type ButtonSize = 'small' | 'large'
 
-interface ButtonProps {
+export interface ButtonProps {
   type?: ButtonType;
   htmlType?: string;
   icon?: string;

components/button/demo/icon.md

@@ -23,7 +23,7 @@ import { Button } from 'antd';
 ReactDOM.render(
   <div>
     <Button type="primary" shape="circle" icon="search" />
-    <Button type="primary" icon="search">搜索</Button>
+    <Button type="primary" icon="search">Search</Button>
     <br />
     <Button type="ghost" shape="circle-outline" icon="search" />
     <Button type="ghost" icon="search">Search</Button>

components/calendar/index.tsx

@@ -16,7 +16,7 @@ function zerofixed(v) {
   return `${v}`;
 }
 
-interface CalendarContext {
+export interface CalendarContext {
   antLocale?: {
     Calendar?: any
   };

components/card/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import splitObject from '../_util/splitObject';
 
-interface CardProps {
+export interface CardProps {
   title?: React.ReactNode;
   extra?: React.ReactNode;
   bordered?: boolean;

components/cascader/demo/basic.md

@@ -18,24 +18,24 @@ import { Cascader } from 'antd';
 
 const options = [{
   value: 'zhejiang',
-  label: '浙江',
+  label: 'Zhejiang',
   children: [{
     value: 'hangzhou',
-    label: '杭州',
+    label: 'Hangzhou',
     children: [{
       value: 'xihu',
-      label: '西湖',
+      label: 'West Lake',
     }],
   }],
 }, {
   value: 'jiangsu',
-  label: '江苏',
+  label: 'Jiangsu',
   children: [{
     value: 'nanjing',
-    label: '南京',
+    label: 'Nanjing',
     children: [{
       value: 'zhonghuamen',
-      label: '中华门',
+      label: 'Zhong Hua Men',
     }],
   }],
 }];
@@ -45,6 +45,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader options={options} onChange={onChange} placeholder="请选择地区" />
+  <Cascader options={options} onChange={onChange} placeholder="Please select" />
 , mountNode);
 ````

components/cascader/demo/change-on-select.md

@@ -18,24 +18,24 @@ import { Cascader } from 'antd';
 
 const options = [{
   value: 'zhejiang',
-  label: '浙江',
+  label: 'Zhejiang',
   children: [{
     value: 'hangzhou',
-    label: '杭州',
+    label: 'Hanzhou',
     children: [{
       value: 'xihu',
-      label: '西湖',
+      label: 'West Lake',
     }],
   }],
 }, {
   value: 'jiangsu',
-  label: '江苏',
+  label: 'Jiangsu',
   children: [{
     value: 'nanjing',
-    label: '南京',
+    label: 'Nanjing',
     children: [{
       value: 'zhonghuamen',
-      label: '中华门',
+      label: 'Zhong Hua Men',
     }],
   }],
 }];

components/cascader/demo/custom-render.md

@@ -18,25 +18,25 @@ import { Cascader } from 'antd';
 
 const options = [{
   value: 'zhejiang',
-  label: '浙江',
+  label: 'Zhejiang',
   children: [{
     value: 'hangzhou',
-    label: '杭州',
+    label: 'Hangzhou',
     children: [{
       value: 'xihu',
-      label: '西湖',
+      label: 'West Lake',
       code: 752100,
     }],
   }],
 }, {
   value: 'jiangsu',
-  label: '江苏',
+  label: 'Jiangsu',
   children: [{
     value: 'nanjing',
-    label: '南京',
+    label: 'Nanjing',
     children: [{
       value: 'zhonghuamen',
-      label: '中华门',
+      label: 'Zhong Hua Men',
       code: 453400,
     }],
   }],
@@ -44,7 +44,7 @@ const options = [{
 
 function handleAreaClick(e, label, option) {
   e.stopPropagation();
-  console.log('点击了', label, option);
+  console.log('clicked', label, option);
 }
 
 const displayRender = (labels, selectedOptions) => labels.map((label, i) => {

components/cascader/demo/default-value.md

@@ -18,24 +18,24 @@ import { Cascader } from 'antd';
 
 const options = [{
   value: 'zhejiang',
-  label: '浙江',
+  label: 'Zhejiang',
   children: [{
     value: 'hangzhou',
-    label: '杭州',
+    label: 'Hangzhou',
     children: [{
       value: 'xihu',
-      label: '西湖',
+      label: 'West Lake',
     }],
   }],
 }, {
   value: 'jiangsu',
-  label: '江苏',
+  label: 'Jiangsu',
   children: [{
     value: 'nanjing',
-    label: '南京',
+    label: 'Nanjing',
     children: [{
       value: 'zhonghuamen',
-      label: '中华门',
+      label: 'Zhong Hua Men',
     }],
   }],
 }];

components/cascader/demo/disabled-option.md

@@ -18,25 +18,25 @@ import { Cascader } from 'antd';
 
 const options = [{
   value: 'zhejiang',
-  label: '浙江',
+  label: 'Zhejiang',
   children: [{
     value: 'hangzhou',
-    label: '杭州',
+    label: 'Hangzhou',
     children: [{
       value: 'xihu',
-      label: '西湖',
+      label: 'West Lake',
     }],
   }],
 }, {
   value: 'jiangsu',
-  label: '江苏',
+  label: 'Jiangsu',
   disabled: true,
   children: [{
     value: 'nanjing',
-    label: '南京',
+    label: 'Nanjing',
     children: [{
       value: 'zhonghuamen',
-      label: '中华门',
+      label: 'Zhong Hua Men',
     }],
   }],
 }];

components/cascader/demo/hover.md

@@ -18,24 +18,24 @@ import { Cascader } from 'antd';
 
 const options = [{
   value: 'zhejiang',
-  label: '浙江',
+  label: 'Zhejiang',
   children: [{
     value: 'hangzhou',
-    label: '杭州',
+    label: 'Hangzhou',
     children: [{
       value: 'xihu',
-      label: '西湖',
+      label: 'West Lake',
     }],
   }],
 }, {
   value: 'jiangsu',
-  label: '江苏',
+  label: 'Jiangsu',
   children: [{
     value: 'nanjing',
-    label: '南京',
+    label: 'Nanjing',
     children: [{
       value: 'zhonghuamen',
-      label: '中华门',
+      label: 'Zhong Hua Men',
     }],
   }],
 }];
@@ -44,7 +44,7 @@ function onChange(value) {
   console.log(value);
 }
 
-// 只展示最后一项
+// Just show the latest item.
 function displayRender(label) {
   return label[label.length - 1];
 }

components/cascader/demo/search.md

@@ -18,24 +18,24 @@ import { Cascader } from 'antd';
 
 const options = [{
   value: 'zhejiang',
-  label: '浙江',
+  label: 'Zhejiang',
   children: [{
     value: 'hangzhou',
-    label: '杭州',
+    label: 'Hangzhou',
     children: [{
       value: 'xihu',
-      label: '西湖',
+      label: 'West Lake',
     }],
   }],
 }, {
   value: 'jiangsu',
-  label: '江苏',
+  label: 'Jiangsu',
   children: [{
     value: 'nanjing',
-    label: '南京',
+    label: 'Nanjing',
     children: [{
       value: 'zhonghuamen',
-      label: '中华门',
+      label: 'Zhong Hua men',
     }],
   }],
 }];
@@ -45,6 +45,13 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader options={options} onChange={onChange} placeholder="请选择地区" showSearch />
-, mountNode);
+  <Cascader
+    options={options}
+    onChange={onChange}
+    placeholder="Please select"
+    style={{ width: 230 }}
+    showSearch
+  />,
+  mountNode
+);
 ````

components/cascader/demo/size.md

@@ -18,24 +18,24 @@ import { Cascader } from 'antd';
 
 const options = [{
   value: 'zhejiang',
-  label: '浙江',
+  label: 'Zhejiang',
   children: [{
     value: 'hangzhou',
-    label: '杭州',
+    label: 'Hangzhou',
     children: [{
       value: 'xihu',
-      label: '西湖',
+      label: 'West Lake',
     }],
   }],
 }, {
   value: 'jiangsu',
-  label: '江苏',
+  label: 'Jiangsu',
   children: [{
     value: 'nanjing',
-    label: '南京',
+    label: 'Nanjing',
     children: [{
       value: 'zhonghuamen',
-      label: '中华门',
+      label: 'Zhong Hua Men',
     }],
   }],
 }];

components/cascader/index.tsx

@@ -5,7 +5,7 @@ import Icon from '../icon';
 import arrayTreeFilter from 'array-tree-filter';
 import classNames from 'classnames';
 import splitObject from '../_util/splitObject';
-import omit from 'object.omit';
+import omit from 'omit.js';
 
 export interface CascaderOptionType {
   value: string;

components/checkbox/demo/check-all.md

@@ -37,7 +37,7 @@ const App = React.createClass({
             onChange={this.onCheckAllChange}
             checked={this.state.checkAll}
           >
-						全选
+						Check all
           </Checkbox>
         </div>
         <br />

components/date-picker/index.en-US.md

@@ -25,8 +25,6 @@ moment.tz.setDefault('Aisa/Shanghai');
 <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
 ```
 
-> Note: `Datepicker` is renamed to `DatePicker` after `0.11`.
-
 | Property         | Description           | Type     | Default       |
 |--------------|----------------|----------|--------------|
 | value        | to set date           | [moment](http://momentjs.com/)   | -           |

components/date-picker/index.tsx

@@ -9,7 +9,7 @@ import RangePicker from './RangePicker';
 import Calendar from './Calendar';
 import { TimePickerProps } from '../time-picker';
 
-interface PickerProps {
+export interface PickerProps {
   format?: string;
   disabled?: boolean;
   style?: React.CSSProperties;
@@ -19,7 +19,7 @@ interface PickerProps {
   getCalendarContainer?: (trigger) => React.ReactNode;
 }
 
-interface SinglePickerProps {
+export interface SinglePickerProps {
   value?: moment.Moment;
   defaultValue?: moment.Moment;
   defaultPickerValue?: moment.Moment;

components/form/Form.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PropTypes } from 'react';
 import classNames from 'classnames';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-import omit from 'object.omit';
+import omit from 'omit.js';
 import warning from 'warning';
 import assign from 'object-assign';
 import FormItem from './FormItem';
@@ -70,7 +70,7 @@ export interface FormComponentProps {
   form: WrappedFormUtils;
 }
 
-class FormComponent extends React.Component<FormComponentProps, {}> {
+export class FormComponent extends React.Component<FormComponentProps, {}> {
 }
 
 export interface ComponentDecorator {

components/form/FormItem.tsx

@@ -120,7 +120,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
       return 'validating';
     } else if (!!getFieldError(field)) {
       return 'error';
-    } else if (getFieldValue(field) !== undefined) {
+    } else if (getFieldValue(field) !== undefined && getFieldValue(field) !== null) {
       return 'success';
     }
     return '';

components/input/Input.tsx

@@ -3,7 +3,7 @@ import { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 import calculateNodeHeight from './calculateNodeHeight';
 import assign from 'object-assign';
-import omit from 'object.omit';
+import omit from 'omit.js';
 
 function fixControlledValue(value) {
   if (typeof value === 'undefined' || value === null) {
@@ -27,7 +27,7 @@ function clearNextFrameAction(nextFrameId) {
   }
 }
 
-interface AutoSizeType {
+export interface AutoSizeType {
   minRows?: number;
   maxRows?: number;
 };
@@ -35,7 +35,7 @@ interface AutoSizeType {
 export interface InputProps {
   prefixCls?: string;
   className?: string;
-  type: string;
+  type?: string;
   id?: number | string;
   value?: any;
   defaultValue?: any;

components/input/demo/basic.md

@@ -16,5 +16,5 @@ Basic usage example
 ````jsx
 import { Input } from 'antd';
 
-ReactDOM.render(<Input placeholder="基本使用" />, mountNode);
+ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);
 ````

components/layout/col.tsx

@@ -7,7 +7,7 @@ import splitObject from '../_util/splitObject';
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
 
-interface ColSize {
+export interface ColSize {
   span?: number;
   order?: number;
   offset?: number;

components/menu/index.tsx

@@ -5,7 +5,7 @@ import animation from '../_util/openAnimation';
 function noop() {
 }
 
-interface SelectParam {
+export interface SelectParam {
   key: string;
   keyPath: Array<string>;
   item: any;
@@ -13,7 +13,7 @@ interface SelectParam {
   selectedKeys: Array<string>;
 }
 
-interface ClickParam {
+export interface ClickParam {
   key: string;
   keyPath: Array<string>;
   item: any;

components/message/index.tsx

@@ -57,7 +57,7 @@ type ConfigContent = React.ReactNode;
 type ConfigDuration = number;
 type ConfigOnClose = () => void;
 
-interface ConfigOptions {
+export interface ConfigOptions {
   top?: number;
   duration?: number;
   prefixCls?: string;

components/modal/demo/confirm-promise.md

@@ -23,9 +23,9 @@ function showConfirm() {
     title: 'Are you sure you want to delete this item ?',
     content: 'When clicked the OK button, this dialog will be closed after 1 second',
     onOk() {
-      return new Promise((resolve) => {
-        setTimeout(resolve, 1000);
-      });
+      return new Promise((resolve, reject) => {
+        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+      }).catch(() => console.log('Oops errors!'));
     },
     onCancel() {},
   });

components/radio/demo/disable.md

@@ -30,9 +30,9 @@ const App = React.createClass({
   render() {
     return (
       <div>
-        <Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
+        <Radio defaultChecked={false} disabled={this.state.disabled}>Disabled</Radio>
         <br />
-        <Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
+        <Radio defaultChecked disabled={this.state.disabled}>Disabled</Radio>
         <div style={{ marginTop: 20 }}>
           <Button type="primary" onClick={this.toggleDisabled}>
             Toggle disabled

components/radio/demo/radiobutton.md

@@ -25,26 +25,26 @@ function onChange(e) {
 ReactDOM.render(<div>
   <div>
     <RadioGroup onChange={onChange} defaultValue="a">
-      <RadioButton value="a">杭州</RadioButton>
-      <RadioButton value="b">上海</RadioButton>
-      <RadioButton value="c">北京</RadioButton>
-      <RadioButton value="d">成都</RadioButton>
+      <RadioButton value="a">Hangzhou</RadioButton>
+      <RadioButton value="b">Shanghai</RadioButton>
+      <RadioButton value="c">Beijing</RadioButton>
+      <RadioButton value="d">Chengdu</RadioButton>
     </RadioGroup>
   </div>
   <div style={{ marginTop: 16 }}>
     <RadioGroup onChange={onChange} defaultValue="a">
-      <RadioButton value="a">杭州</RadioButton>
+      <RadioButton value="a">Hangzhou</RadioButton>
       <RadioButton value="b" disabled>上海</RadioButton>
-      <RadioButton value="c">北京</RadioButton>
-      <RadioButton value="d">成都</RadioButton>
+      <RadioButton value="c">Beijing</RadioButton>
+      <RadioButton value="d">Chengdu</RadioButton>
     </RadioGroup>
   </div>
   <div style={{ marginTop: 16 }}>
     <RadioGroup disabled onChange={onChange} defaultValue="a">
-      <RadioButton value="a">杭州</RadioButton>
-      <RadioButton value="b">上海</RadioButton>
-      <RadioButton value="c">北京</RadioButton>
-      <RadioButton value="d">成都</RadioButton>
+      <RadioButton value="a">Hangzhou</RadioButton>
+      <RadioButton value="b">Shanghai</RadioButton>
+      <RadioButton value="c">Beijing</RadioButton>
+      <RadioButton value="d">Chengdu</RadioButton>
     </RadioGroup>
   </div>
 </div>, mountNode);

components/radio/demo/size.md

@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-There are three kinds of combination, large medium and small. It can coordinate with input box.
+There are three sizes available: large, medium, and small. It can coordinate with input box.
 
 ```jsx
 import { Radio } from 'antd';
@@ -21,26 +21,26 @@ const RadioGroup = Radio.Group;
 ReactDOM.render(<div>
   <div>
     <RadioGroup defaultValue="a" size="large">
-      <RadioButton value="a">杭州</RadioButton>
-      <RadioButton value="b">上海</RadioButton>
-      <RadioButton value="c">北京</RadioButton>
-      <RadioButton value="d">成都</RadioButton>
+      <RadioButton value="a">Hangzhou</RadioButton>
+      <RadioButton value="b">Shanghai</RadioButton>
+      <RadioButton value="c">Beijing</RadioButton>
+      <RadioButton value="d">Chengdu</RadioButton>
     </RadioGroup>
   </div>
   <div style={{ marginTop: 16 }}>
     <RadioGroup defaultValue="a">
-      <RadioButton value="a">杭州</RadioButton>
-      <RadioButton value="b">上海</RadioButton>
-      <RadioButton value="c">北京</RadioButton>
-      <RadioButton value="d">成都</RadioButton>
+      <RadioButton value="a">Hangzhou</RadioButton>
+      <RadioButton value="b">Shanghai</RadioButton>
+      <RadioButton value="c">Beijing</RadioButton>
+      <RadioButton value="d">Chengdu</RadioButton>
     </RadioGroup>
   </div>
   <div style={{ marginTop: 16 }}>
     <RadioGroup defaultValue="a" size="small">
-      <RadioButton value="a">杭州</RadioButton>
-      <RadioButton value="b">上海</RadioButton>
-      <RadioButton value="c">北京</RadioButton>
-      <RadioButton value="d">成都</RadioButton>
+      <RadioButton value="a">Hangzhou</RadioButton>
+      <RadioButton value="b">Shanghai</RadioButton>
+      <RadioButton value="c">Beijing</RadioButton>
+      <RadioButton value="d">Chengdu</RadioButton>
     </RadioGroup>
   </div>
 </div>, mountNode);

components/select/demo/combobox.md

@@ -41,13 +41,13 @@ const Test = React.createClass({
     this.setState({ options });
   },
   render() {
-    // filterOption 需要设置为 false，数据是动态设置的
+    // filterOption needs to be false，as the value is dynamically generated
     return (
       <Select combobox
         style={{ width: 200 }}
         onChange={this.handleChange}
         filterOption={false}
-        placeholder="请输入账户名"
+        placeholder="Enter the account name"
       >
         {this.state.options}
       </Select>

components/select/demo/coordinate.md

@@ -22,10 +22,10 @@ Using the [Cascader](/components/cascader) component is strongly recommended ins
 import { Select } from 'antd';
 const Option = Select.Option;
 
-const provinceData = ['浙江', '江苏'];
+const provinceData = ['Zhejiang', 'Jiangsu'];
 const cityData = {
-  浙江: ['杭州', '宁波', '温州'],
-  江苏: ['南京', '苏州', '镇江'],
+  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
+  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
 };
 
 const App = React.createClass({

components/select/demo/search.md

@@ -22,14 +22,14 @@ function handleChange(value) {
 ReactDOM.render(
   <Select showSearch
     style={{ width: 200 }}
-    placeholder="请选择人员"
+    placeholder="Select a person"
     optionFilterProp="children"
-    notFoundContent="无法找到"
+    notFoundContent="Nothing found"
     onChange={handleChange}
   >
-    <Option value="jack">杰克</Option>
-    <Option value="lucy">露西</Option>
-    <Option value="tom">汤姆</Option>
+    <Option value="jack">Jack</Option>
+    <Option value="lucy">Lucy</Option>
+    <Option value="tom">Tom</Option>
   </Select>
 , mountNode);
 ````

components/select/index.tsx

@@ -3,7 +3,7 @@ import { PropTypes } from 'react';
 import RcSelect, { Option, OptGroup } from 'rc-select';
 import classNames from 'classnames';
 
-type SelectValue = string | string[] | Array<{ key: string, label: React.ReactNode }>;
+export type SelectValue = string | string[] | Array<{ key: string, label: React.ReactNode }>;
 
 export interface SelectProps {
   prefixCls?: string;

components/slider/index.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { PropTypes } from 'react';
 import RcSlider from 'rc-slider';
 
-interface SliderMarks {
+export interface SliderMarks {
   [key: number]: React.ReactNode | {
     style: React.CSSProperties,
     label: React.ReactNode,
   };
 }
 
-type SliderValue = number | [number, number];
+export type SliderValue = number | [number, number];
 
 export interface SliderProps {
   range?: boolean;

components/spin/demo/tip.md

@@ -2,22 +2,22 @@
 order: 4
 title:
   zh-CN: 自定义描述文案
-  en-US: Customize description
+  en-US: Customized description
 ---
 
 ## zh-CN
 
-自定义描述文案，指定的 tip 文案会直接代替 `...`。
+自定义描述文案。
 
 ## en-US
 
-Customize description content, specified tip content will replace the dots in `Spin`.
+Customized description content.
 
 ````jsx
 import { Spin, Alert } from 'antd';
 
 ReactDOM.render(
-  <Spin tip="正在读取数据...">
+  <Spin tip="Loading...">
     <Alert message="消息提示的文案"
       description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
       type="info"

components/spin/index.tsx

@@ -4,7 +4,7 @@ import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
 import splitObject from '../_util/splitObject';
-import omit from 'object.omit';
+import omit from 'omit.js';
 
 export interface SpinProps {
   prefixCls?: string;

components/table/Table.tsx

@@ -33,7 +33,7 @@ const defaultPagination = {
   onShowSizeChange: noop,
 };
 
-interface TableRowSelection {
+export interface TableRowSelection {
   type?: 'checkbox' | 'radio';
   selectedRowKeys?: string[];
   onChange?: (selectedRowKeys: string[], selectedRows: Object[]) => any;
@@ -42,7 +42,7 @@ interface TableRowSelection {
   onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any;
 }
 
-interface TableColumnConfig {
+export interface TableColumnConfig {
   title?: React.ReactNode;
   key?: string;
   dataIndex?: string;
@@ -87,7 +87,7 @@ export interface TableProps {
   childrenColumnName?: 'string';
 }
 
-interface TableContext {
+export interface TableContext {
   antLocale?: {
     Table?: any,
   };

components/tabs/index.tsx

@@ -4,8 +4,8 @@ import { cloneElement } from 'react';
 import classNames from 'classnames';
 import Icon from '../icon';
 
-type TabsType = 'line' | 'card' | 'editable-card'
-type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
+export type TabsType = 'line' | 'card' | 'editable-card'
+export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
 
 export interface TabsProps {
   activeKey?: string;

components/tag/index.tsx

@@ -4,7 +4,7 @@ import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';
 import splitObject from '../_util/splitObject';
-import omit from 'object.omit';
+import omit from 'omit.js';
 
 export interface TagProps {
   /** 标签是否可以关闭 */

components/tooltip/index.tsx

@@ -4,7 +4,7 @@ import RcTooltip from 'rc-tooltip';
 import getPlacements from '../popover/placements';
 import classNames from 'classnames';
 
-type PopoverPlacement =
+export type PopoverPlacement =
   'top' | 'left' | 'right' | 'bottom' | 'topLeft' |
   'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' |
   'leftBottom' | 'rightTop' | 'rightBottom'

components/tree-select/interface.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-interface TreeData {
+export interface TreeData {
   key: string;
   value: string;
   label: React.ReactNode;

components/upload/interface.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed'
+export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed'
 
 export interface HttpRequestHeader {
   [key: string]: string;
@@ -18,7 +18,7 @@ export interface File {
   originFileObj?: File;
 }
 
-interface UploadChangeParam {
+export interface UploadChangeParam {
   file: File;
   fileList: Array<File>;
   event?: { percent: number };

docs/practice/bussiness.en-US.md

@@ -0,0 +1,7 @@
+---
+order: 1
+disabled: true
+title: Business
+---
+
+TBD Content ...

docs/practice/cases.en-US.md

@@ -0,0 +1,86 @@
+---
+order: 0
+title: Cases
+---
+
+Ant Design is a design language for enterprise-like complex UIs.
+
+Starting in April 2015, more and more products of Ant Financial follow Ant Design specification, covering multiple business lines and more than 40 systems.
+Designed for enterprise-like complex UIs, used by both professional and non-professional designers,
+Ant Design has a low learning curve that helps you getting started fast and achieve rapid results.
+ 
+With a strong focus on proof-based design and user experience, 
+Ant Design provides a complete front-end development solution that can greatly enhance the design and development efficiency.
+
+Currently, there are many products and sites using Ant Design.
+References to some of these implementations can be found [here](https://github.com/ant-design/ant-design/issues/477).
+If your solutions are using Ant Design, please leave us a message.
+
+## Best Practices
+
+---
+
+### Financial Cloud
+
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/kBgLUfEwxlBdwUr.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+
+Cloud-oriented financial services, used by financial institutions that benefit from customized business cloud computing services.
+It assists financial institutions to upgrade to a new financial restructuring, promotion of capacity platforms, data and technology.
+
+<p><a class="outside-link" href="https://www.cloud.alipay.com/" target="_blank">Website</a></p>
+
+---
+
+### OceanBase Cloud Platform
+
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/JUAXPZYtVyUQfGu.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">
+
+OceanBase Cloud is a distributed relational database in a real sense, but OceanBase Cloud Platform is the OceanBase cloud-based database service that can help users quickly create and use OceanBase service.
+
+<p><a class="outside-link internal" href="http://oceanbase.alipay.com/" target="_blank">Website</a></p>
+
+---
+
+### Service Experience Platform
+
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/PiSveQClPzmxPTy.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/vsoYArBwcPRZnVE.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/TMyfsUGQSjOdGIm.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">
+
+Experience Platform is used for collecting all the points of contact and information of the user (including microblogging and other channels). 
+Through data mining, it exposes the users's experience and it helps the company's internal business team / product managers, facilitating the experience problem solving, in order to achieve healthy functioning streams.
+
+<p><a class="outside-link internal" href="http://tiyan.alipay.com/" target="_blank">Website</a></p>
+
+---
+
+### AntV
+
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/yWNVSFBhKsoShvi.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/nvJftlNzfzhVDVW.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/LugOCvzybKsmQCj.png">
+
+AntV is a graphical library that is based on the work of a data group team 
+whose results of exploring data visualization were summarized 
+and shared them together with the required data visualization theory.
+
+<p><a class="outside-link internal" href="https://antv.alipay.com/" target="_blank">Website</a></p>
+
+<style>
+.preview-image-boxes {
+  margin-top: -36px;
+}
+.preview-image-wrapper {
+  padding: 0;
+  background: #fff;
+}
+.toc {
+  display: none;
+}
+</style>

docs/react/install.en-US.md

@@ -51,7 +51,7 @@ We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `antd/dis
 - https://unpkg.com/antd@beta/dist/antd.min.js
 - https://unpkg.com/antd@beta/dist/antd.min.css
 
-> Here is an [example](https://github.com/ant-design/antd-init/tree/master/examples/build-antd-standalone) about how to build your own antd.js if you are using antd@<1.0.0.
+> Here is an [example](https://github.com/ant-design/antd-init/tree/master/examples/build-antd-standalone) of how to build your own antd.js if you are using antd@<1.0.0.
 
 ## Development tool
 
@@ -63,6 +63,6 @@ $ npm install antd-init -g
 
 Inside an empty folder run `antd-init` to init.
 
-You can explore the latest structure of scaffold [there]((https://github.com/ant-design/antd-init/tree/master/boilerplates)), it is a good habit to watch this repo to get the latest features.
+You can explore the latest structure of scaffold [here](https://github.com/ant-design/antd-init/tree/master/boilerplates), it is a good habit to watch this repo to get the latest features.
 
 > [More development tools](http://ant-tool.github.io/)。

docs/spec/principle.en-US.md

@@ -31,16 +31,16 @@ After referring to the summary and reasoning of design principles from The Non-D
 </a>
 </div>
 
-#### Ant Design 十大设计原则
+#### Ant Design Principles
 
-- [亲密性 Proximity](/docs/spec/proximity)
-- [对齐 Alignment](/docs/spec/alignment)
-- [对比 Contrast](/docs/spec/contrast)
-- [重复 Repetition](/docs/spec/repetition)
-- [直截了当 Make it Direct](/docs/spec/direct)
-- [简化交互 Keep it Lightweight](/docs/spec/lightweight)
-- [足不出户 Stay on the Page](/docs/spec/stay)
-- [提供邀请 Provide Invitation](/docs/spec/invitation)
-- [巧用过渡 Use Transition](/docs/spec/transition)
-- [即时反应 React Immediately](/docs/spec/reaction)
+- [Proximity](/docs/spec/proximity)
+- [Alignment](/docs/spec/alignment)
+- [Contrast](/docs/spec/contrast)
+- [Repetition](/docs/spec/repetition)
+- [Make it Direct](/docs/spec/direct)
+- [Keep it Lightweight](/docs/spec/lightweight)
+- [Stay on the Page](/docs/spec/stay)
+- [Provide Invitation](/docs/spec/invitation)
+- [Use Transition](/docs/spec/transition)
+- [React Immediately](/docs/spec/reaction)
 

index.js

@@ -1,25 +1,34 @@
 /* eslint no-console:0 */
+// this file is not used if use https://github.com/ant-design/babel-plugin-antd
 
 function camelCase(name) {
   return name.charAt(0).toUpperCase() +
-    name.slice(1).replace(/-(\w)/g, (m, n) => n.toUpperCase());
+    name.slice(1).replace(/-(\w)/g, (m, n) => {
+      return n.toUpperCase();
+    });
 }
 
-var req = require.context('./components', true, /^\.\/[^_][\w-]+\/(style\/)?index\.tsx?$/);
+const req = require.context('./components', true, /^\.\/[^_][\w-]+\/(style\/)?index\.tsx?$/);
 
 req.keys().forEach((mod) => {
-  var v = req(mod);
+  let v = req(mod);
   if (v && v.default) {
     v = v.default;
   }
-  var match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/);
+  const match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/);
   if (match && match[1]) {
+    if (match[1] === 'message' || match[1] === 'notification') {
+      // message & notification should not be capitalized
+      exports[match[1]] = v;
+    } else {
       exports[camelCase(match[1])] = v;
     }
+  }
 });
 
-
+if (process.env.NODE_ENV !== 'production') {
   if (typeof console !== 'undefined' && console.warn) {
-  console.warn('you are using prebuild antd,\
-please use https://github.com/ant-design/babel-plugin-antd to reduce app bundle size.');
+    console.warn(`You are using prebuilt antd,
+please use https://github.com/ant-design/babel-plugin-antd to reduce app bundle size.`);
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "title": "Ant Design",
   "description": "An enterprise-class UI design language and React-based implementation",
   "homepage": "http://ant.design/",
@@ -40,7 +40,7 @@
     "gregorian-calendar": "~4.1.0",
     "gregorian-calendar-format": "~4.1.0",
     "object-assign": "~4.1.0",
-    "object.omit": "^2.0.0",
+    "omit.js": "^0.1.0",
     "rc-animate": "~2.3.0",
     "rc-calendar": "^7.0.3",
     "rc-cascader": "~0.10.1",
@@ -86,6 +86,7 @@
     "bisheng-plugin-description": "^0.1.1",
     "bisheng-plugin-react": "^0.2.0",
     "bisheng-plugin-toc": "^0.3.0",
+    "css-split-webpack-plugin": "^0.2.1",
     "dora-plugin-upload": "^0.3.1",
     "enquire.js": "^2.1.1",
     "es6-shim": "^0.35.0",

site/bisheng.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
 
 function pickerGenerator(module) {
   const tester = new RegExp(`^docs/${module}`);
@@ -68,6 +69,7 @@ module.exports = {
       site: path.join(process.cwd(), 'site'),
       'react-router': 'react-router/umd/ReactRouter',
     };
+    config.plugins.push(new CSSSplitWebpackPlugin({ imports: true }));
 
     config.babel.plugins.push([
       require.resolve('babel-plugin-transform-runtime'),

site/theme/template/Layout/Header.jsx

@@ -109,7 +109,7 @@ export default class Header extends React.Component {
               const url = `/components/${pathSnippet}`;
               const subtitle = meta.subtitle || meta.chinese;
               return (
-                <Option value={url} key={url} data-label={`${(meta.title || meta.english).toLowerCase()} ${meta.subtitle || meta.chinese}`}>
+                <Option value={url} key={url} data-label={`${(meta.title || meta.english).toLowerCase()} ${subtitle || ''}`}>
                   <strong>{meta.title || meta.english}</strong>
                   {subtitle && <span className="ant-component-decs">{subtitle}</span>}
                 </Option>

typings/custom-typings.d.ts

@@ -67,8 +67,8 @@ declare module "object-assign" {
   export default function(target: any, ...sources: any[]): any;
 }
 
-declare module "object.omit" {
-  export default function(target: any, ...sources: any[]): any;
+declare module "omit.js" {
+  export default function(obj: Object, fields: string[]): any;
 }
 
 declare module 'rc-animate' {