diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md
index 1ac87fcf2e..bb4a4f54ab 100644
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -20,4 +20,5 @@ english: Affix
|-------------|----------------|--------------------|--------------|
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
+| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
diff --git a/components/auto-complete/demo/basic.md b/components/auto-complete/demo/basic.md
index eded8408bb..8f4b6651e5 100644
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@@ -1,6 +1,6 @@
---
order: 0
-title:
+title:
zh-CN: 基本使用
en-US: Basic Usage
---
diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md
index 34d8d5ff5f..57b9fe2435 100644
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@@ -1,6 +1,6 @@
---
order: 2
-title:
+title:
zh-CN: 自定义选项
en-US: Customized
---
@@ -16,6 +16,7 @@ Items in dataSource could be an `AutoComplete.Option`.
````jsx
import { AutoComplete } from 'antd';
+
const Option = AutoComplete.Option;
const Complete = React.createClass({
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index 063ce0092f..8e92ccd1be 100644
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -3,7 +3,7 @@ import Select, { Option, OptGroup } from '../select';
import classNames from 'classnames';
export interface AutoCompleteProps {
- size?: string;
+ size?: 'large' | 'small' | 'default';
className?: string;
notFoundContent?: Element;
dataSource: Array;
diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx
index 111de53212..f8a5873056 100644
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@@ -5,24 +5,28 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener';
import classNames from 'classnames';
import omit from 'object.omit';
-function getScroll(w, top) {
- let ret = w[`page${top ? 'Y' : 'X'}Offset`];
- const method = `scroll${top ? 'Top' : 'Left'}`;
- if (typeof ret !== 'number') {
- const d = w.document;
- // ie6,7,8 standard mode
- ret = d.documentElement[method];
- if (typeof ret !== 'number') {
- // quirks mode
- ret = d.body[method];
- }
+function getScroll(target, top) {
+ if (typeof window === 'undefined') {
+ return 0;
}
+
+ const prop = top ? 'pageYOffset' : 'pageXOffset';
+ const method = top ? 'scrollTop' : 'scrollLeft';
+ const isWindow = target === window;
+
+ let ret = isWindow ? target[prop] : target[method];
+ // ie6,7,8 standard mode
+ if (isWindow && typeof ret !== 'number') {
+ ret = window.document.documentElement[method];
+ }
+
return ret;
}
interface BackTopProps {
visibilityHeight?: number;
onClick?: (event) => void;
+ target?: () => HTMLElement | Window;
prefixCls?: string;
className?: string;
}
@@ -31,6 +35,9 @@ export default class BackTop extends React.Component {
static defaultProps = {
onClick() {},
visibilityHeight: 400,
+ target() {
+ return window;
+ },
prefixCls: 'ant-back-top',
};
@@ -38,9 +45,9 @@ export default class BackTop extends React.Component {
constructor(props) {
super(props);
- const scrollTop = getScroll(window, true);
+ const scrollTop = getScroll(props.target(), true);
this.state = {
- visible: scrollTop > this.props.visibilityHeight,
+ visible: scrollTop > props.visibilityHeight,
};
}
@@ -53,19 +60,25 @@ export default class BackTop extends React.Component {
}
setScrollTop(value) {
- document.body.scrollTop = value;
- document.documentElement.scrollTop = value;
+ const targetNode = this.props.target();
+ if (targetNode === window) {
+ document.body.scrollTop = value;
+ document.documentElement.scrollTop = value;
+ } else {
+ (targetNode as HTMLElement).scrollTop = value;
+ }
}
handleScroll = () => {
- const scrollTop = getScroll(window, true);
+ const { visibilityHeight, target } = this.props;
+ const scrollTop = getScroll(target(), true);
this.setState({
- visible: scrollTop > this.props.visibilityHeight,
+ visible: scrollTop > visibilityHeight,
});
}
componentDidMount() {
- this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
+ this.scrollEvent = addEventListener(this.props.target(), 'scroll', this.handleScroll);
}
componentWillUnmount() {
diff --git a/components/badge/demo/99plus.md b/components/badge/demo/99plus.md
index e3e12700bf..b284cdcdbc 100644
--- a/components/badge/demo/99plus.md
+++ b/components/badge/demo/99plus.md
@@ -18,10 +18,10 @@ import { Badge } from 'antd';
ReactDOM.render(, mountNode);
````
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
index 93c123fe87..ea20e74954 100644
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -18,7 +18,7 @@ import { Badge } from 'antd';
ReactDOM.render(
-
+
, mountNode);
````
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index 2919fcfba6..e7110f6932 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -44,10 +44,10 @@ const Test = React.createClass({
return (
-
+
-
+
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
index 9b2da4b871..45aa19a15f 100644
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -19,7 +19,7 @@ import { Badge } from 'antd';
ReactDOM.render(
-
+
, mountNode);
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index 245f64c2a4..c0a786dd4b 100644
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -18,10 +18,10 @@ import { Badge } from 'antd';
ReactDOM.render(, mountNode);
````
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
new file mode 100644
index 0000000000..de0ca28b84
--- /dev/null
+++ b/components/badge/demo/status.md
@@ -0,0 +1,36 @@
+---
+order: 7
+title:
+ zh-CN: 状态点
+ en-US: Status
+---
+
+## zh-CN
+
+用于表示状态的小圆点。
+
+## en-US
+
+Standalone badge with status.
+
+````jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(
+
-
+
```
@@ -28,3 +28,5 @@ Badge normally appears in proximity to notification or head picture with eye-cat
| count | Number to show in badge | Number | |
| overflowCount | Max count to show | Number | 99 |
| dot | whether to show red dot without number | Boolean | false |
+| status | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
+| text | If `status` is set, `text` is to set the text of status dot | String | '' |
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index e326905133..3864a63294 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -13,6 +13,8 @@ interface BadgeProps {
style?: React.CSSProperties;
prefixCls?: string;
className?: string;
+ status?: 'success' | 'processing' | 'default' | 'error' | 'warning';
+ text?: string;
}
export default class Badge extends React.Component {
@@ -21,6 +23,7 @@ export default class Badge extends React.Component {
count: null,
dot: false,
overflowCount: 99,
+ // status: 'default',
};
static propTypes = {
@@ -33,18 +36,25 @@ export default class Badge extends React.Component {
};
render() {
- let { count, prefixCls, overflowCount, className, style, children, dot } = this.props;
+ let { count, prefixCls, overflowCount, className, style, children, dot, status, text } = this.props;
+ const isDot = dot || status;
count = count > overflowCount ? `${overflowCount}+` : count;
// dot mode don't need count
- if (dot) {
+ if (isDot) {
count = '';
}
// null undefined "" "0" 0
- const hidden = (!count || count === '0') && !dot;
- const scrollNumberCls = prefixCls + (dot ? '-dot' : '-count');
+ const hidden = (!count || count === '0') && !isDot;
+ const scrollNumberCls = classNames({
+ [`${prefixCls}-dot`]: isDot,
+ [`${prefixCls}-count`]: !isDot,
+ [`${prefixCls}-status`]: status,
+ [`${prefixCls}-status-${status}`]: status,
+ [`${prefixCls}-status-with-text`]: text,
+ });
const badgeCls = classNames({
[className]: !!className,
[prefixCls]: true,
@@ -70,6 +80,10 @@ export default class Badge extends React.Component {
/>
}
+ {
+ hidden || !text ? null :
+ {text}
+ }
);
}
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index 4a93a7e40e..9a3284d631 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -15,7 +15,7 @@ english: Badge
```jsx
-
+
```
@@ -28,4 +28,6 @@ english: Badge
|----------------|----------------------------------|------------|---------|--------|
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number | | |
| overflowCount | 展示封顶的数字值 | Number | | 99 |
-| dot | 不展示数字，只有一个小红点 | boolean | | false |
+| dot | 不展示数字，只有一个小红点 | Boolean | | false |
+| status | 设置 Badge 为状态点 | Enum | 'success'、'processing'、'default'、'error'、'warning' | '' |
+| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | String | | '' |
diff --git a/components/badge/style/index.less b/components/badge/style/index.less
index 84f4f114f4..af5bcb6d1a 100644
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@@ -47,6 +47,38 @@
box-shadow: 0 0 0 1px #fff;
}
+ &-status {
+ width: 6px;
+ height: 6px;
+
+ &-success {
+ background-color: @success-color;
+ }
+ &-processing {
+ background-color: @primary-color;
+ animation: antStatusProcessing 1.2s infinite ease-in-out;
+ }
+ &-default {
+ background-color: @normal-color;
+ }
+ &-error {
+ background-color: @error-color;
+ }
+ &-warning {
+ background-color: @warning-color;
+ }
+
+ &-with-text {
+ top: 5px;
+ }
+
+ &-text {
+ color: @text-color;
+ font-size: @font-size-base;
+ margin-left: 8px; // 8 - (6 / 2) === 5
+ }
+ }
+
&-zoom-appear,
&-zoom-enter {
animation: antZoomBadgeIn .3s @ease-out-back;
@@ -66,6 +98,16 @@
}
}
+@keyframes antStatusProcessing {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+}
+
a & {
&-count:hover {
background: tint(@error-color, 20%);
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 10a7a189a9..b95679b4ec 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -35,6 +35,7 @@ interface ButtonProps {
shape?: ButtonShape;
size?: ButtonSize;
onClick?: React.FormEventHandler;
+ onMouseUp?: React.FormEventHandler;
loading?: boolean;
disabled?: boolean;
style?: React.CSSProperties;
diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx
index f2f3a4d9d4..9715e1dadd 100644
--- a/components/calendar/Header.tsx
+++ b/components/calendar/Header.tsx
@@ -7,7 +7,19 @@ const Option = Select.Option;
function noop() {}
-export default class Header extends React.Component {
+export interface HeaderProps {
+ prefixCls?: string;
+ locale?: any;
+ fullscreen?: boolean;
+ yearSelectOffset?: number;
+ yearSelectTotal?: number;
+ type?: string;
+ onValueChange?: (value) => void;
+ onTypeChange?: (type: string) => void;
+ value: any;
+}
+
+export default class Header extends React.Component {
static defaultProps = {
prefixCls: `${PREFIX_CLS}-header`,
yearSelectOffset: 10,
diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx
index 677977aaab..bb185e838e 100644
--- a/components/calendar/index.tsx
+++ b/components/calendar/index.tsx
@@ -16,7 +16,27 @@ function zerofixed(v) {
return `${v}`;
}
-export default class Calendar extends React.Component {
+interface CalendarContext {
+ antLocale?: {
+ Calendar?: any
+ };
+}
+
+export interface CalendarProps {
+ prefixCls?: string;
+ className?: string;
+ value?: Date;
+ defaultValue?: Date;
+ mode?: 'month' | 'year';
+ fullscreen?: boolean;
+ dateCellRender?: (date) => React.ReactNode;
+ monthCellRender?: (month) => React.ReactNode;
+ locale?: any;
+ style?: React.CSSProperties;
+ onPanelChange?: (date: Date, mode: string) => void;
+}
+
+export default class Calendar extends React.Component {
static defaultProps = {
monthCellRender: noop,
dateCellRender: noop,
@@ -43,6 +63,8 @@ export default class Calendar extends React.Component {
antLocale: PropTypes.object,
};
+ context: CalendarContext;
+
constructor(props) {
super(props);
this.state = {
diff --git a/components/calendar/locale/en_US.tsx b/components/calendar/locale/en_US.tsx
index 1fde2c098a..6847cc35d8 100644
--- a/components/calendar/locale/en_US.tsx
+++ b/components/calendar/locale/en_US.tsx
@@ -1 +1,2 @@
-module.exports = require('../../date-picker/locale/en_US');
+import en_US from '../../date-picker/locale/en_US';
+export default en_US;
diff --git a/components/calendar/locale/ru_RU.tsx b/components/calendar/locale/ru_RU.tsx
index aea2dd9a41..c1feaedaea 100644
--- a/components/calendar/locale/ru_RU.tsx
+++ b/components/calendar/locale/ru_RU.tsx
@@ -1 +1,2 @@
-module.exports = require('../../date-picker/locale/ru_RU');
+import ru_RU from '../../date-picker/locale/ru_RU';
+export default ru_RU;
diff --git a/components/calendar/locale/zh_CN.tsx b/components/calendar/locale/zh_CN.tsx
index 1880b1a980..9c83ec8453 100644
--- a/components/calendar/locale/zh_CN.tsx
+++ b/components/calendar/locale/zh_CN.tsx
@@ -1 +1,2 @@
-module.exports = require('../../date-picker/locale/zh_CN');
+import zh_CN from '../../date-picker/locale/zh_CN';
+export default zh_CN;
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index 721af47654..af7feeba4a 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -2,8 +2,9 @@
// https://github.com/WickyNilliams/enquire.js/issues/82
import assign from 'object-assign';
if (typeof window !== 'undefined') {
- const matchMediaPolyfill = function matchMediaPolyfill() {
+ const matchMediaPolyfill = function matchMediaPolyfill(mediaQuery: string): MediaQueryList {
return {
+ media: mediaQuery,
matches: false,
addListener() {
},
@@ -23,7 +24,7 @@ export interface CarouselProps {
/** 动画效果函数，可取 scrollx, fade */
effect?: CarouselEffect;
/** 是否显示面板指示点 */
- dots?: SlickCarouselboolean;
+ dots?: boolean;
/** 垂直显示 */
vertical?: boolean;
/** 是否自动切换 */
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index 24cc6fb05b..7d923ba552 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -59,12 +59,13 @@ export default class CheckboxGroup extends React.Component {
+ // https://github.com/Microsoft/TypeScript/issues/7960
+ return (options as Array).map(option => {
if (typeof option === 'string') {
return {
label: option,
value: option,
- };
+ } as CheckboxOptionType;
}
return option;
});
diff --git a/components/checkbox/demo/disable.md b/components/checkbox/demo/disabled.md
similarity index 100%
rename from components/checkbox/demo/disable.md
rename to components/checkbox/demo/disabled.md
diff --git a/components/date-picker/Calendar.tsx b/components/date-picker/Calendar.tsx
index ce7939bad1..bb60c4cf48 100644
--- a/components/date-picker/Calendar.tsx
+++ b/components/date-picker/Calendar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
import RcCalendar from 'rc-calendar';
-export default class Calendar extends React.Component {
+export default class Calendar extends React.Component {
static defaultProps = {
locale: CalendarLocale,
prefixCls: 'ant-calendar',
diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx
index 5755828661..0ef673c41f 100644
--- a/components/date-picker/RangePicker.tsx
+++ b/components/date-picker/RangePicker.tsx
@@ -5,7 +5,7 @@ import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import Icon from '../icon';
-export default class RangePicker extends React.Component {
+export default class RangePicker extends React.Component {
static defaultProps = {
defaultValue: [],
};
@@ -74,7 +74,7 @@ export default class RangePicker extends React.Component {
let pickerChangeHandler = {
onChange: this.handleChange,
};
- let calendarHandler = {
+ let calendarHandler: Object = {
onOk: this.handleChange,
};
if (props.timePicker) {
diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx
index 0aea0d27fa..d34fd5d59a 100644
--- a/components/date-picker/createPicker.tsx
+++ b/components/date-picker/createPicker.tsx
@@ -6,6 +6,11 @@ import classNames from 'classnames';
import assign from 'object-assign';
import Icon from '../icon';
+export interface PickerProps {
+ parseDateFromValue?: Function;
+ value?: string | Date;
+}
+
export default function createPicker(TheCalendar) {
// use class typescript error
const CalenderWrapper = React.createClass({
@@ -16,7 +21,7 @@ export default function createPicker(TheCalendar) {
};
},
- componentWillReceiveProps(nextProps) {
+ componentWillReceiveProps(nextProps: PickerProps) {
if ('value' in nextProps) {
this.setState({
value: nextProps.parseDateFromValue(nextProps.value),
@@ -60,10 +65,10 @@ export default function createPicker(TheCalendar) {
});
// 需要选择时间时，点击 ok 时才触发 onChange
- let pickerChangeHandler = {
+ let pickerChangeHandler: Object = {
onChange: this.handleChange,
};
- let calendarHandler = {
+ let calendarHandler: Object = {
onOk: this.handleChange,
// fix https://github.com/ant-design/ant-design/issues/1902
onSelect: (value, cause) => {
@@ -95,7 +100,7 @@ export default function createPicker(TheCalendar) {
);
// default width for showTime
- const pickerStyle = {};
+ const pickerStyle = { width: undefined };
if (props.showTime) {
pickerStyle.width = 180;
}
diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md
index 8e1ebcc655..eabd7a8511 100644
--- a/components/date-picker/demo/locale.md
+++ b/components/date-picker/demo/locale.md
@@ -7,11 +7,11 @@ title:
## zh-CN
-通过 `locale` 配置时区、语言等, 默认支持 `en_US`，`zh_CN`。
+通过 `locale` 配置时区、语言等, 默认支持 `en_US`，`zh_CN`。不同版本带有不同的时区配置，如果所在时区与默认配置不同，需要自行设置。上面的 demo 就是在东八区使用 en_US 版本的例子。
## en-US
-Use locale to set the properties like time zone, language and etc. en_US, zh_CN are supported by default.
+Use locale to set the properties like time zone, language and etc. `en_US`, `zh_CN` are supported by default. There are different time zone configuration in different versions, you must set it by yourself if your time zone does not match the default setting. The example above is to show how to use the `en_US` version at GMT+8 time zone.
````jsx
@@ -19,7 +19,7 @@ import { DatePicker } from 'antd';
import enUS from 'antd/lib/date-picker/locale/en_US';
const customLocale = {
- timezoneOffset: 0 * 60,
+ timezoneOffset: 8 * 60,
firstDayOfWeek: 0,
minimalDaysInFirstWeek: 1,
};
diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx
index 9c33a6efb4..108cc7824e 100644
--- a/components/date-picker/index.tsx
+++ b/components/date-picker/index.tsx
@@ -1,15 +1,49 @@
+import * as React from 'react';
+import assign from 'object-assign';
import RcCalendar from 'rc-calendar';
import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
import createPicker from './createPicker';
import wrapPicker from './wrapPicker';
import RangePicker from './RangePicker';
import Calendar from './Calendar';
+import { TimePickerProps } from '../time-picker';
-const DatePicker = wrapPicker(createPicker(RcCalendar));
-const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'yyyy-MM');
+interface PickerProps {
+ format?: string;
+ disabled?: boolean;
+ style?: React.CSSProperties;
+ popupStyle?: React.CSSProperties;
+ locale?: any;
+ size?: 'large' | 'small' | 'default';
+ getCalendarContainer?: (trigger) => React.ReactNode;
+}
-DatePicker.Calendar = Calendar;
-DatePicker.RangePicker = wrapPicker(RangePicker);
-DatePicker.MonthPicker = MonthPicker;
+interface SinglePickerProps {
+ value?: string | Date;
+ defaultValue?: string | Date;
+ onChange?: (date: Date, dateString: string) => void;
+}
+
+export interface DatePickerProps extends PickerProps, SinglePickerProps {
+ showTime?: TimePickerProps;
+}
+const DatePicker = wrapPicker(createPicker(RcCalendar)) as React.ClassicComponentClass;
+
+export interface MonthPickerProps extends PickerProps, SinglePickerProps {
+}
+const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'yyyy-MM') as React.ClassicComponentClass;
+
+export interface RangePickerProps extends PickerProps {
+ value?: [string | Date, string | Date];
+ defaultValue?: [string | Date, string | Date];
+ onChange?: (dates: [Date, Date], dateStrings: [String, String]) => void;
+ showTime?: TimePickerProps;
+}
+
+assign(DatePicker, {
+ RangePicker: wrapPicker(RangePicker) as React.ClassicComponentClass,
+ Calendar,
+ MonthPicker,
+});
export default DatePicker;
diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx
index 5eece135f8..bfb93b465c 100644
--- a/components/date-picker/wrapPicker.tsx
+++ b/components/date-picker/wrapPicker.tsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
import defaultLocale from './locale/zh_CN';
import assign from 'object-assign';
-export default function wrapPicker(Picker, defaultFormat) {
+export default function wrapPicker(Picker, defaultFormat?) {
const PickerWrapper = React.createClass({
getDefaultProps() {
return {
@@ -46,7 +46,7 @@ export default function wrapPicker(Picker, defaultFormat) {
getFormatter() {
const format = this.props.format;
- const formatter = new DateTimeFormat(format, this.getLocale().lang.format);
+ const formatter = new DateTimeFormat(format as string, this.getLocale().lang.format);
return formatter;
},
diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md
index 2c7e45a9d0..2f6b962545 100644
--- a/components/dropdown/demo/basic.md
+++ b/components/dropdown/demo/basic.md
@@ -19,13 +19,13 @@ import { Menu, Dropdown, Icon } from 'antd';
const menu = (
);
diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md
index 4668428509..8ab8c165a6 100644
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@@ -19,10 +19,10 @@ import { Menu, Dropdown, Icon } from 'antd';
const menu = (
diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md
index 3df1ce3224..6ed31b8d18 100644
--- a/components/upload/demo/fileList.md
+++ b/components/upload/demo/fileList.md
@@ -1,8 +1,12 @@
---
order: 2
-title: 完全控制的上传列表
+title:
+ zh-CN: 完全控制的上传列表
+ en-US: Complete control over file list
---
+## zh-CN
+
使用 `fileList` 对列表进行完全控制，可以实现各种自定义功能，以下演示三种情况：
1) 上传列表数量的限制。
@@ -11,6 +15,14 @@ title: 完全控制的上传列表
3) 按照服务器返回信息筛选成功上传的文件。
+## en-US
+
+You can gain full control over filelist by configuring `fileList`. You can accomplish all kinds of customed functions. The following shows three circumstances:
+
+1. limit the number of uploaded files
+2. read from response and show file link
+3. filter successfully uploaded files according to response from server
+
````jsx
import { Upload, Button, Icon } from 'antd';
@@ -28,20 +40,20 @@ const MyUpload = React.createClass({
handleChange(info) {
let fileList = info.fileList;
- // 1. 上传列表数量的限制
- // 只显示最近上传的一个，旧的会被新的顶掉
+ // 1. Limit the number of uploaded files
+ // Only to show two recent uploaded files, and old ones will be replaced by the new
fileList = fileList.slice(-2);
- // 2. 读取远程路径并显示链接
+ // 2. read from response and show file link
fileList = fileList.map((file) => {
if (file.response) {
- // 组件会将 file.url 作为链接进行展示
+ // Component will show file.url as link
file.url = file.response.url;
}
return file;
});
- // 3. 按照服务器返回信息筛选成功上传的文件
+ // 3. filter successfully uploaded files according to response from server
fileList = fileList.filter((file) => {
if (file.response) {
return file.response.status === 'success';
@@ -60,7 +72,7 @@ const MyUpload = React.createClass({
return (
);
diff --git a/components/upload/demo/multiple.md b/components/upload/demo/multiple.md
index be410c9616..b34c6dbd2f 100644
--- a/components/upload/demo/multiple.md
+++ b/components/upload/demo/multiple.md
@@ -1,11 +1,19 @@
---
order: 5
hidden: true
-title: 多文件选择
+title:
+ zh-CN: 多文件选择
+ en-US: Multifile Selection
---
+## zh-CN
+
按住 ctrl 可选择多个文件，`ie10+` 支持。
+## en-US
+
+You can select multiple files with CTRL holding down. `IE10+` supported.
+
````jsx
import { Upload, message, Button, Icon } from 'antd';
@@ -17,9 +25,9 @@ const props = {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
- message.success(`${info.file.name} 上传成功。`);
+ message.success(`${info.file.name} upload sucessfully。`);
} else if (info.file.status === 'error') {
- message.error(`${info.file.name} 上传失败。`);
+ message.error(`${info.file.name} upload unsuccessfully。`);
}
},
};
@@ -27,7 +35,7 @@ const props = {
ReactDOM.render(
, mountNode);
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index 03f280bd2c..6e810e88e4 100644
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@@ -1,10 +1,18 @@
---
order: 8
-title: 图片卡片样式
+title:
+ zh-CN: 图片卡片样式
+ en-US: Pictures with card tyle
---
+## zh-CN
+
上传文件为图片，可展示本地缩略图。
+## en-US
+
+If uploade file is picture, a thumbnail can be shown.
+
````jsx
import { Upload, Icon, Modal } from 'antd';
@@ -42,11 +50,11 @@ const ImageUploadList = React.createClass({
-
+
- 示例
+ sample
@@ -60,7 +68,7 @@ ReactDOM.render(
@@ -47,7 +55,7 @@ ReactDOM.render(
````
````css
-/* 加几行样式将上传项变成平铺样式 */
+/* tile uploaded pictures */
.upload-list-inline .ant-upload-list-item {
display: inline-block;
width: 200px;
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
new file mode 100644
index 0000000000..06d1b8373c
--- /dev/null
+++ b/components/upload/index.en-US.md
@@ -0,0 +1,74 @@
+---
+category: Components
+type: Form Controls
+english: Upload
+---
+
+Upload file by selecting or dragging
+
+## When to use
+
+Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.
+
+- When you need to upload one or more files.
+- When you need to show the process of uploading.
+- When you need to upload files by dragging and dropping.
+
+
+## API
+
+| Property | Description | Type | Default|
+|------------|----------------------------------------------------| ----------- |--------|
+| name | Optional. The name of uploading file | String | file |
+| defaultFileList | Optional. Default list of files that have been uploaded. | Array[Object] | - |
+| fileList | Optional. List of files that have been uploaded. | Array[Object] | - |
+| action | Required. Uploading URL | String | - |
+| data | Optional. Uploading params or function which can return uploading params. | Object or function(file) | - |
+| headers | Optional. Set request headers, valid above IE10. | Object | - |
+| showUploadList | Optional. Whether to show uploadList. | Boolean | true |
+| multiple | Optional. Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | Boolean | false |
+| accept | Optional. File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | String | - |
+| beforeUpload | Optional. Hook function which takes an argument: the uploaded file, will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported by old IE**。 | Function | - |
+| onChange | Optional. A callback function, can be executed when uploading state is changing. See [onChange](#onChange) | Function | - |
+| listType | Optional. Built-in stylesheets, support for two types: `text` or `picture` | String | 'text'|
+| onPreview | A callback function, will be executed when file link is clicked. | Function(file) | - |
+| onRemove | A callback function, will be executed when removing file button is clicked | Function(file) | - |
+| supportServerRender | Need to be turned on while the server side is rendering.| Boolean | false |
+
+### onChange
+
+> The function will be called when uploading is in progress, completed or failed
+
+When uploading state change, it returns:
+
+```js
+{
+ file: { /* ... */ },
+ fileList: [ /* ... */ ],
+ event: { /* ... */ },
+}
+```
+
+1. `file` File object for the current operation.
+
+ ```js
+ {
+ uid: 'uid', // unique identifier，negative is recommend，to prevent interference with internal generated id
+ name: 'xx.png' // file name
+ status: 'done', // options：uploading, done, error, removed
+ response: '{"status": "success"}', // response from server
+ }
+ ```
+
+ If multiple files are uploaded, this parameter will be Array Object `[file, ...]`
+
+2. `fileList` current list of files
+3. `event` response from server, including uploading progress, supported by advanced browsers.
+
+## show download links
+
+please set property `url` of property `fileList` to control content of link
+
+## IE note
+
+- [https://github.com/react-component/upload#ie89-note](https://github.com/react-component/upload#ie89-note)
diff --git a/components/upload/index.tsx b/components/upload/index.tsx
index 4996f5db83..710411e8af 100644
--- a/components/upload/index.tsx
+++ b/components/upload/index.tsx
@@ -84,6 +84,7 @@ export default class Upload extends React.Component {
recentUploadStatus: boolean | PromiseLike;
progressTimer: any;
refs: {
+ [key: string]: any;
upload: any;
};
diff --git a/components/upload/index.md b/components/upload/index.zh-CN.md
similarity index 96%
rename from components/upload/index.md
rename to components/upload/index.zh-CN.md
index 5d7d71174e..86017d2951 100644
--- a/components/upload/index.md
+++ b/components/upload/index.zh-CN.md
@@ -19,7 +19,7 @@ english: Upload
| 参数 | 说明 | 类型 | 默认值|
|------------|--------------------------------------------------------------| ----------- |-------|
-| name | 可选参数, 上传的文件 | String | file |
+ | name | 可选参数, 上传的文件 | String | file |
| defaultFileList | 可选参数，默认已经上传的文件列表 | Array[Object] | 无 |
| fileList | 可选参数，已经上传的文件列表 | Array[Object] | 无 |
| action | 必选参数, 上传的地址 | String | 无 |
diff --git a/components/upload/uploadList.tsx b/components/upload/uploadList.tsx
index ca166289c3..97d3d84200 100644
--- a/components/upload/uploadList.tsx
+++ b/components/upload/uploadList.tsx
@@ -76,7 +76,7 @@ export default class UploadList extends React.Component {
className={`${prefixCls}-list-item-thumbnail`}
onClick={e => this.handlePreview(file, e)}
href={file.url}
- target="_blank"
+ target="_blank" rel="noopener noreferrer"
>
@@ -104,7 +104,7 @@ export default class UploadList extends React.Component {
? (
this.handlePreview(file, e)}
>
@@ -125,7 +125,7 @@ export default class UploadList extends React.Component {
this.handlePreview(file, e)}
>
diff --git a/components/validation/index.tsx b/components/validation/index.tsx
deleted file mode 100644
index c2ce6f081e..0000000000
--- a/components/validation/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import warning from 'warning';
-
-export default class Validation extends React.Component {
- componentDidMount() {
- warning(false, '`Validation` is removed, please use `Form` which has supported validation after antd@0.12.0,' +
- ' or you can just import Validation from \'rc-form-validation\' for compatibility');
- }
- render() {
- return null;
- }
-}
-
-Validation.Validator = () => {};
-Validation.FieldMixin = {
- setField() {},
-};
diff --git a/components/validation/style/index.tsx b/components/validation/style/index.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/custom-typings.d.ts b/custom-typings.d.ts
index 6bec462f9c..609f79d503 100644
--- a/custom-typings.d.ts
+++ b/custom-typings.d.ts
@@ -8,11 +8,11 @@ declare module 'react-addons-pure-render-mixin' {
}
declare module 'gregorian-calendar-format' {
- export default function({}): string;
+ export default function(format: string, localeFormat: Object): void;
}
declare module 'gregorian-calendar' {
- export default function({}): string;
+ export default function({}): void;
}
declare module 'gregorian-calendar/lib/locale/en_US' {
@@ -127,7 +127,7 @@ declare module 'rc-cascader' {
}
declare module 'array-tree-filter' {
- export default function(): any;
+ export default function(tree: any, filter: any): any;
}
declare module 'rc-checkbox' {
@@ -143,16 +143,25 @@ declare module 'rc-dropdown' {
}
declare module 'rc-editor-mention' {
- export default function(): any;
+ export const Nav: any;
+ export const toString: any;
+ export const toEditorState: any;
+ export const getMentions: any;
+ const exports: any;
+ export default exports;
}
declare module 'rc-progress' {
- export default function(): any;
+ export const Circle: any;
+ const exports: any;
+ export default exports;
}
declare module 'rc-menu' {
export const SubMenu: any;
export const Item: any;
+ export const Divider: any;
+ export const ItemGroup: any;
export default function(): any;
}
@@ -162,6 +171,7 @@ declare module 'rc-tabs' {
}
declare module 'rc-tree' {
+ export const TreeNode: any;
export default function(): any;
}
@@ -178,11 +188,19 @@ declare module 'rc-input-number' {
}
declare module 'rc-pagination' {
- export default function(): any;
+ const exports: any;
+ export default exports;
+}
+
+declare module 'rc-pagination/lib/locale/zh_CN' {
+ const exports: any;
+ export default exports;
}
declare module 'rc-notification' {
- export default function(): any;
+ export function newInstance(config: Object): any;
+ const exports: any;
+ export default exports;
}
declare module 'rc-dialog' {
@@ -228,9 +246,11 @@ declare module 'rc-upload' {
}
declare module 'rc-collapse' {
- export default function(): any;
+ export const Panel: any;
+ const exports: any;
+ export default exports;
}
declare module 'rc-form/lib/createDOMForm' {
- export default function(): any;
+ export default function(Object): any;
}
diff --git a/docs/resource/download.zh-CN.md b/docs/resource/download.zh-CN.md
index 3dbb6fb436..69b0249cc8 100644
--- a/docs/resource/download.zh-CN.md
+++ b/docs/resource/download.zh-CN.md
@@ -10,17 +10,10 @@ english: Download
- Axure Components v2.0.1
+ Ant Design Library v2.0.1
一套强大的 Ant Design 的 Axure 部件库
-
- 
-
- Axure Box v1.3
- 强大的 Ant Design 组件拼装方式
-
-
diff --git a/index.d.ts b/index.d.ts
deleted file mode 100644
index fc8e724c57..0000000000
--- a/index.d.ts
+++ /dev/null
@@ -1,2011 +0,0 @@
-// originated by: bang88 , Bruce Mitchener {
-}
-
-type AlertType = 'success' | 'info' | 'warning' | 'error'
-
-// Alert
-interface AlertProps {
- /**
- * 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`
- */
- type:AlertType,
- /**可选参数，默认不显示关闭按钮 */
- closable?:boolean,
- /**可选参数，自定义关闭按钮 */
- closeText?:React.ReactNode,
- /**必选参数，警告提示内容 */
- message:React.ReactNode,
- /**可选参数，警告提示的辅助性文字介绍 */
- description?:React.ReactNode,
- /** 固定状态改变时触发的回调函数 */
- onChange?:(affixed: boolean) => void,
- /**可选参数，关闭时触发的回调函数 */
- onClose?:Function,
- /**可选参数，是否显示辅助图标 */
- showIcon?:boolean,
-
- style?:React.CSSProperties
-}
-
-/**
- * # Alert
- * 警告提示，展现需要关注的信息。
-
- * ## 何时使用
-
- * - 当某个页面需要向用户显示警告的信息时。
- * - 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
- * */
-export class Alert extends React.Component {
-}
-
-
-interface BadgeProps {
- /** 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏*/
- count:number,
- /** 展示封顶的数字值*/
- overflowCount?:number,
- /** 不展示数字，只有一个小红点*/
- dot?:boolean,
-
- style?:React.CSSProperties
-}
-// Badge
-/**
- * #Badge
- *
- * 图标右上角的圆形徽标数字。
-
- * ## 何时使用
-
- * 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
- *
- */
-export class Badge extends React.Component {
-}
-
-type ButtonType = 'primary' | 'ghost' | 'dashed'
-type ButtonShape = 'circle' | 'circle-outline'
-type ButtonSize = 'small' | 'large'
-// Button
-interface ButtonProps {
- /** 设置按钮类型，可选值为 `primary` `ghost` 或者不设 */
- type?:ButtonType,
- /** 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准*/
- htmlType?:string,
-
- icon?:string,
- /** 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设*/
- shape?:ButtonShape,
- /** 设置按钮大小，可选值为 `small` `large` 或者不设*/
- size?:ButtonSize,
- /** `click` 事件的 handler*/
- onClick?:React.FormEventHandler,
- /** 设置按钮载入状态*/
- loading?:boolean,
-
- disabled?:boolean,
-
- style?:React.CSSProperties
-}
-
-
-interface ButtonGroupProps {
- /** 设置按钮大小，可选值为 `small` `large` 或者不设*/
- size?:ButtonSize,
-
- style?:React.CSSProperties
-}
-
-/**
- 可以将多个 `Button` 放入 `Button.Group` 的容器中。
-
- 通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。*/
-declare class ButtonGroup extends React.Component {
-}
-
-/**
- * #Button
- 按钮用于开始一个即时操作。
-
- ## 何时使用
-
- 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。*/
-export class Button extends React.Component {
- static Group:typeof ButtonGroup
-}
-
-// Breadcrumb
-
-interface BreadcrumbItemProps {
- /** 链接，如不传则不可点击 */
- href?:string
-}
-export class BreadcrumbItem extends React.Component {
-}
-
-interface BreadcrumbProps {
- prefixCls?:string,
- /** router 的路由栈信息 */
- routes?:Array,
- /** 路由的参数*/
- params?:Object,
- /** 分隔符自定义*/
- separator?:string | React.ReactNode,
- linkRender?:(path:string, name:string) => React.ReactNode,
- nameRender?:(name:string) => React.ReactNode
-
- style?:React.CSSProperties
-}
-/**
- * #Breadcrumb
- 显示当前页面在系统层级结构中的位置，并能向上返回。
-
- ## 何时使用
-
- - 当系统拥有超过两级以上的层级结构时；
- - 当需要告知用户“你在哪里”时；
- - 当需要向上导航的功能时。*/
-export class Breadcrumb extends React.Component {
- static Item:typeof BreadcrumbItem
-}
-
-export interface GregorianCalendar {
- getMonth():number,
- getYear():number,
- getDayOfMonth():string,
- getHourOfDay():string,
- getMinutes():number,
- getSeconds():number,
- getMilliSeconds():number,
- getWeekOfYear():number,
- getWeekOfMonth():number,
- getDayOfYear():number,
- getDayOfWeek():number,
- getDayOfWeekInMonth():number,
- getWeekYear():number,
- getWeeksInWeekYear():number
-}
-
-type CalendarMode = 'month' | 'year';
-
-// Calendar
-interface CalendarProps {
- /** 自定义渲染月单元格*/
- monthCellRender?:(value:GregorianCalendar, locale:any) => React.ReactNode,
- /** 自定义渲染日期单元格*/
- dateCellRender?:(value:GregorianCalendar) => React.ReactNode,
- /** 是否全屏显示*/
- fullscreen?:boolean,
- /** 国际化配置*/
- locale?:Object,
- prefixCls?:string,
- className?:string,
- /** 日期面板变化回调*/
- onPanelChange?:(value:GregorianCalendar, mode:CalendarMode) => void,
- /** 展示日期*/
- value?:Date,
- /** 默认展示日期*/
- defaultValue?:Date,
- /** 初始模式，`month/year`*/
- mode?:CalendarMode,
-
- style?:React.CSSProperties
-}
-/**
- * #Calendar
- 按照日历形式展示数据的容器。
-
- ## 何时使用
-
- 当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
- */
-export class Calendar extends React.Component {
-}
-
-type CarouselEffect = 'scrollx' | 'fade'
-// Carousel
-interface CarouselProps {
- /** 动画效果函数，可取 scrollx, fade*/
- effect?:CarouselEffect,
- /** 是否显示面板指示点*/
- dots?:boolean,
- /** 垂直显示*/
- vertical?:boolean,
- /** 是否自动切换*/
- autoplay?:boolean,
- /** 动画效果*/
- easing?:string,
- /** 切换面板的回调*/
- beforeChange?:(from:number, to:number) => void,
- /** 切换面板的回调*/
- afterChange?:(current:number) => void,
-
- style?:React.CSSProperties
-}
-/**
- * #Carousel
- 旋转木马，一组轮播的区域。
-
- ## 何时使用
-
- - 当有一组平级的内容。
- - 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
- - 常用于一组图片或卡片轮播。
- */
-export class Carousel extends React.Component {
-}
-
-export interface CascaderOptionType {
- value:string,
- label:string,
- disabled?:boolean,
- children?:Array
-}
-
-type CascaderExpandTrigger = 'click' | 'hover'
-// Cascader
-interface CascaderProps {
- /** 可选项数据源*/
- options:Array,
- /** 默认的选中项*/
- defaultValue?:Array,
- /** 指定选中项*/
- value?:Array,
- /** 选择完成后的回调*/
- onChange?:(value:string, selectedOptions:CascaderOptionType) => void,
- /** 选择后展示的渲染函数*/
- displayRender?:(label:Array) => React.ReactNode,
- /** 自定义样式*/
- style?:React.CSSProperties,
- /** 自定义类名*/
- className?:string,
- /** 自定义浮层类名*/
- popupClassName?:string,
- /** 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` */
- popupPlacement?:string,
- /** 输入框占位文本*/
- placeholder?:string,
- /** 输入框大小，可选 `large` `default` `small` */
- size?:string,
- /** 禁用*/
- disabled?:boolean,
- /** 是否支持清除*/
- allowClear?:boolean,
-
- expandTrigger?:CascaderExpandTrigger,
-
- changeOnSelect?:boolean
-}
-/**
- * #Cascader
- 级联选择框。
-
-
- ## 何时使用
-
- - 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
- - 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
- - 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。*/
-export class Cascader extends React.Component {
-}
-
-// Checkbox
-interface CheckboxProps {
- /** 指定当前是否选中*/
- checked?:boolean,
- /** 初始是否选中*/
- defaultChecked?:boolean,
- /** 变化时回调函数*/
- onChange?:React.FormEventHandler,
-
- style?:React.CSSProperties
-}
-
-export interface CheckboxOptionType {
- label:string,
- value:string,
- disabled?:boolean
-}
-
-interface CheckboxGroupProps {
- /** 默认选中的选项*/
- defaultValue?:Array,
- /** 指定选中的选项*/
- value?:Array,
- /** 指定可选项*/
- options?:Array | Array,
- /** 变化时回调函数*/
- onChange?:(checkedValue:Array) => void,
-
- disabled?:boolean,
-
- style?:React.CSSProperties
-}
-/** Checkbox 组*/
-declare class CheckboxGroup extends React.Component {
-}
-/**
- * #Checkbox
- 多选框。
-
- ## 何时使用
-
- - 在一组可选项中进行多项选择时；
- - 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
- */
-export class Checkbox extends React.Component {
- static Group:typeof CheckboxGroup
-}
-
-// Collapse
-
-interface CollapseProps {
- /** 当前激活 tab 面板的 key*/
- activeKey?:Array | string,
- /** 初始化选中面板的key */
- defaultActiveKey?:Array,
- /** accordion 为 true 的时候，一次只可以打开一个面板 */
- accordion?:boolean,
- /** 切换面板的回调*/
- onChange?:(key:string) => void,
-
- style?:React.CSSProperties
-}
-
-interface CollapsePanelProps {
- /** 对应 activeKey */
- key:string,
- /** 面板头内容*/
- header:React.ReactNode,
-
- style?:React.CSSProperties
-}
-
-declare class CollapsePanel extends React.Component {
-}
-/**
- * #Collapse
- 可以折叠/展开的内容区域。
-
- ## 何时使用
-
- - 对复杂区域进行分组和隐藏，保持页面的整洁。
- - `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。*/
-export class Collapse extends React.Component {
- static Panel:typeof CollapsePanel
-}
-
-type DatePickerDateType = string | Date;
-
-// DatePicker
-interface DatePickerProps {
-
- value?:DatePickerDateType,
- defaultValue?:DatePickerDateType,
- /** 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format)*/
- format?:string,
- /** 不可选择的日期*/
- disabledDate?:Function,
- /** 时间发生变化的回调，发生在用户选择时间时*/
- onChange?:(date:Date, dateString:string) => void,
- /** 禁用*/
- disabled?:boolean,
- style?:React.CSSProperties,
- /** 格外的弹出日历样式*/
- popupStyle?:React.CSSProperties,
- /** 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px*/
- size?:'large' | 'small',
- /** 国际化配置*/
- locale?:Object,
- /** 增加时间选择功能*/
- showTime?:boolean,
- /** 点击确定按钮的回调*/
- onOk?:(value:Date) => void,
- /** 定义浮层的容器，默认为 body 上新建 div*/
- getCalendarContainer?:Function
-
-}
-
-interface RangePickProps {
- value?:Array,
- defaultValue?:Array,
- format?:string,
- onChange?:(date:Array, dateString:Array) => void,
- style:React.CSSProperties,
- showTime:boolean | Object
-
-}
-declare class RangePicker extends React.Component {
-}
-
-interface MonthPickProps {
- value?:DatePickerDateType,
- defaultValue?:DatePickerDateType,
- /** 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format)*/
- format?:string,
- /** 时间发生变化的回调，发生在用户选择时间时*/
- onChange?:(date:Date) => void,
- /** 禁用*/
- disabled?:boolean,
- style?:React.CSSProperties,
- /** 格外的弹出日历样式*/
- popupStyle?:React.CSSProperties,
- /** 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px*/
- size?:'large' | 'small',
- /** 国际化配置*/
- locale?:Object,
- /** 定义浮层的容器，默认为 body 上新建 div*/
- getCalendarContainer?:Function
-}
-declare class MonthPicker extends React.Component {
-}
-/**
- * #DatePicker
- 输入或选择日期的控件。
-
- ## 何时使用
-
- 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。*/
-export class DatePicker extends React.Component {
- static RangePicker:typeof RangePicker
- static MonthPicker:typeof MonthPicker
-}
-
-// Dropdown
-
-interface DropdownProps {
- /** 触发下拉的行为 ['click'] or ['hover']*/
- trigger?:Array,
- /** 菜单节点*/
- overlay:React.ReactNode,
-
- style?:React.CSSProperties
-}
-
-interface DropdownButtonProps {
- /** 按钮类型*/
- type?:'primary' | 'ghost' | 'dash',
- /** 点击左侧按钮的回调*/
- onClick?:React.FormEventHandler,
- /** 触发下拉的行为*/
- trigger?:'click' | 'hover',
- /** 菜单节点*/
- overlay:React.ReactNode,
-
- visible?:boolean,
-
- onVisibleChange?:(visible:boolean) => void,
-
- style?:React.CSSProperties
-}
-
-declare class DropdownButton extends React.Component {
-}
-/**
- * #Dropdown
- 向下弹出的列表。
-
- ## 何时使用
-
- 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
- */
-export class Dropdown extends React.Component {
- static Button:typeof DropdownButton
-}
-
-export interface FormItemLabelColOption {
- span:number,
- offset:number
-}
-
-// Form
-interface FormItemProps {
- prefixCls?:string,
- /** label 标签的文本*/
- label?:string,
- /** label 标签布局，通 ` {
-}
-
-interface FormComponentProps {
- form:CreateFormOptions
-}
-export class FormComponent extends React.Component {
-}
-
-// function create
-type CreateFormOptions = {
- /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值*/
- getFieldsValue():(fieldNames?:Array) => any
- /** 获取一个输入控件的值*/
- getFieldValue():(fieldName:string) => any
- /** 设置一组输入控件的值*/
- setFieldsValue():(obj:Object) => void
- /** 设置一组输入控件的值*/
- setFields():(obj:Object) => void
- /** 校验并获取一组输入域的值与 Error*/
- validateFields():(fieldNames?:Array, options?:Object, callback?:(erros:any, values:any) => void) => any
- /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */
- validateFieldsAndScroll():(fieldNames?:Array, options?:Object, callback?:(erros:any, values:any) => void) => any
- /** 获取某个输入控件的 Error */
- getFieldError():(name:string) => Object
- /** 判断一个输入控件是否在校验状态*/
- isFieldValidating():(name:string) => Object
- /**重置一组输入控件的值与状态，如不传入参数，则重置所有组件*/
- resetFields():(names?:Array) => void
-
- getFieldsValue():(id:string, options:{
- /** 子节点的值的属性，如 Checkbox 的是 'checked'*/
- valuePropName?:string,
- /** 子节点的初始值，类型、可选值均由子节点决定*/
- initialValue?:any,
- /** 收集子节点的值的时机*/
- trigger?:string,
- /** 校验子节点值的时机*/
- validateTrigger?:string,
- /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
- rules?:Array,
- /** 必填输入控件唯一标志*/
- id?:string
- }) => Array
-}
-
-interface ComponentDecorator {
- (component:T):T;
-}
-interface FormProps {
- prefixCls?:string,
- /** 水平排列布局*/
- horizontal?:boolean,
- /** 行内排列布局*/
- inline?:boolean,
- /** 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可*/
- form?:Object,
- /** 数据验证成功后回调事件*/
- onSubmit?:React.FormEventHandler,
-
- style?:React.CSSProperties
-}
-
-interface FormCreateOption {
- /**
- * 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store
- */
- onFieldsChange?:(props:any, fields:Array) => void,
- /** 把 props 转为对应的值，可用于把 Redux store 中的值读出 */
- mapPropsToFields?:(props:any) => void
-}
-/**
- * #Form
- 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
-
- ## 表单
-
- 我们为 `form` 提供了以下两种排列方式：
-
- - 水平排列：可以实现 `label` 标签和表单控件的水平排列;
- - 行内排列：使其表现为 `inline-block` 级别的控件。
- */
-export class Form extends React.Component {
- static Item:typeof FormItem
-
- static create(options?:FormCreateOption):ComponentDecorator
-}
-
-
-// Icon
-interface IconProps {
- /** 图标类型*/
- type:string,
-
- style?:React.CSSProperties
-}
-/**
- * #Icon
- 有含义的矢量图形，每一个图标打倒一个敌人。
-
- ## 图标的命名规范
-
- 我们为每个图标赋予了语义化的命名，命名规则如下:
-
- - 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；
-
- - 命名顺序：`[icon名]-[形状可选]-[描线与否]-[方向可选]`。
-
- ## 如何使用
-
- 使用 ` {
-}
-
-// Input
-interface InputProps {
- /** 【必须】声明 input 类型，同原生 input 标签的 type 属性*/
- type?:string,
- id?:string,
- /** 控件大小，默认值为 default 。注：标准表单内的输入框大小限制为 large。 {'large','default','small'}*/
- size?:string,
- /** 是否禁用状态，默认为 false*/
- disabled?:boolean,
- value?:any,
- /** 设置初始默认值*/
- defaultValue?:any,
- className?:string,
- /** 带标签的 input，设置前置标签*/
- addonBefore?:React.ReactNode,
- /** 带标签的 input，设置后置标签*/
- addonAfter?:React.ReactNode,
- prefixCls?:string,
- placeholder?:string,
- onChange?:React.FormEventHandler,
- style:React.CSSProperties
-}
-export class Input extends React.Component {
-}
-
-// InputNumber
-interface InputNumberProps {
- /** 最小值*/
- min:number,
- /** 最大值*/
- max:number,
- /** 当前值*/
- value?:number,
- /** 每次改变步数*/
- step?:number,
- /** 初始值*/
- defaultValue?:number,
- /** 变化回调*/
- onChange?:React.FormEventHandler,
- /** 禁用*/
- disabled?:boolean,
- /** 输入框大小*/
- size?:string,
-
- style?:React.CSSProperties
-
-}
-/**
- * #InputNumber
- 通过鼠标或键盘，输入范围内的数值。
-
- ## 何时使用
-
- 当需要获取标准数值时。*/
-export class InputNumber extends React.Component {
-}
-
-
-// Layout
-// Row
-interface RowProps {
- gutter?:number,
- type?:'flex',
- align?:'top' | 'middle' | 'bottom',
- justify?:'start' | 'end' | 'center' | 'space-around' | 'space-between',
- style?:React.CSSProperties,
- className?:string,
-}
-export class Row extends React.Component {
-}
-
-// Col
-interface ColProps {
- span?:number,
- lg?: number,
- md?:number,
- sm?:number,
- xs?:number,
- order?:number,
- offset?:string,
- push?:string,
- pull?:string,
- className?:string,
- style?:React.CSSProperties
-}
-/**
- 在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，我们将整个设计建议区域按照24等分的原则进行划分。
-
- 划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
-
- ## 概述
-
- 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
-
- * 通过`row`在水平方向建立一组`column`（简写col）
- * 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
- * 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
- * 如果一个`row`中的`col`总和超过24，那么多余的`col`会作为一个整体另起一行排列
-
- ## Flex 布局
-
- 我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
-
- Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。*/
-export class Col extends React.Component {
-}
-
-// Menu
-interface MenuItemProps {
- /**
- * (是否禁用)
- *
- * @type {boolean}
- */
- disabled?:boolean,
- key?:string,
- style?:React.CSSProperties
-
-}
-export class MenuItem extends React.Component {
-}
-
-interface MenuSubMenuProps {
- disabled?:boolean,
- key?:string,
- /**
- * (子菜单项值)
- *
- * @type {(string | React.ReactNode)}
- */
- title:string | React.ReactNode,
- /**
- * (子菜单的菜单项)
- *
- * @type {(MenuItem | MenuSubMenu)}
- */
- children?:Array
{introChildren}
+
+
{
- !!prev ?
+ prev ?
React.cloneElement(prev.props.children, { className: 'prev-page' }) :
null
}
{
- !!next ?
+ next ?
React.cloneElement(next.props.children, { className: 'next-page' }) :
null
}
diff --git a/site/theme/template/Content/index.jsx b/site/theme/template/Content/index.jsx
index 406e02e5af..868df86905 100644
--- a/site/theme/template/Content/index.jsx
+++ b/site/theme/template/Content/index.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import MainContent from './MainContent';
import Promise from 'bluebird';
+import MainContent from './MainContent';
// locale copy from layout
const locale = (
diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx
index 2baf34aa55..89c85f0fb4 100644
--- a/site/theme/template/Layout/Footer.jsx
+++ b/site/theme/template/Layout/Footer.jsx
@@ -2,6 +2,7 @@ import React from 'react';
import { Select, Modal } from 'antd';
import { version as antdVersion } from 'antd/package.json';
import { docVersions } from '../../';
+
const Option = Select.Option;
function isLocalStorageNameSupported() {
@@ -41,8 +42,8 @@ export default class Footer extends React.Component {
@@ -70,10 +71,13 @@ export default class Footer extends React.Component {
仓库
+
+
+
+
+
+
+
,
+ mountNode
+);
+````
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 9b40049c6a..1f13f4ead7 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -14,7 +14,7 @@ Badge normally appears in proximity to notification or head picture with eye-cat
```jsx
Status:
+ +
+
+
+
+
上传照片
+ upload pictures
- 示例
+ sample
- Axure Components v2.0.1
+ Ant Design Library v2.0.1
一套强大的 Ant Design 的 Axure 部件库
-
-
-
- Axure Box v1.3
- 强大的 Ant Design 组件拼装方式
-
-
diff --git a/index.d.ts b/index.d.ts
deleted file mode 100644
index fc8e724c57..0000000000
--- a/index.d.ts
+++ /dev/null
@@ -1,2011 +0,0 @@
-// originated by: bang88
- 您好，antd@1.0 已正式发布，欢迎升级。 - 如果您还需要使用旧版，请查阅 012x.ant.design + 您好，antd@1.0 已正式发布，欢迎升级。 + 如果您还需要使用旧版，请查阅 012x.ant.design ，也可通过页面右下角的文档版本选择框进行切换。
+ dva - 应用框架
Ant UX - 页面逻辑素材
联系我们
+社区
+
+
反馈和建议
diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx
index ddfe7b1001..edbc1d9dde 100644
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@@ -5,6 +5,7 @@ import enquire from 'enquire.js';
import debounce from 'lodash.debounce';
import classNames from 'classnames';
import { Select, Menu, Row, Col, Icon, Button } from 'antd';
+
const Option = Select.Option;
export default class Header extends React.Component {
@@ -116,6 +117,7 @@ export default class Header extends React.Component {
'home-nav-white': !this.state.isFirstFrame,
});
+ const searchPlaceholder = this.context.intl.locale === 'zh-CN' ? '搜索组件...' : 'Search...';
return (