mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-27 23:12:16 +08:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/ant-design/ant-design into feature-2.11

Browse Source
This commit is contained in:
乐仪 2017-05-31 20:01:07 +08:00
commit f03e5549bf
76 changed files with 1136 additions and 820 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.babelrc
View File

@ -1,6 +1,10 @@
{
"presets": ["es2015", "react", "stage-0"],
"plugins": [
"add-module-exports"
]
"env": {
"test": {
"presets": ["es2015", "react", "stage-0"],
"plugins": [
"add-module-exports"
]
}
}
}

1
.gitignore vendored
View File

@ -26,6 +26,7 @@ _site
_data
dist
/lib
/es
elasticsearch-*
config/base.yaml
/.vscode/

32
CHANGELOG.en-US.md
View File

@ -17,6 +17,38 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
---
## 2.10.3
`2017-05-31`
- **Calendar**
- Fix disabledDate not be supported, and make supplement for the types and documentation. [#6074](https://github.com/ant-design/ant-design/issues/6074)
- Upgrade rc-calendar to 8.4.0, support Bulgarian, and user can select end date first. [commit/a4a6db](https://github.com/ant-design/ant-design/commit/a4a6db76de57ac2559a2be80208121ab5e168fbf)
- **Alert** Remove default margin-bottom. [commit/5ef482](https://github.com/ant-design/ant-design/commit/5ef48289747409b6d962f75627ddb11e2765f965)
- **Tabs** Fix inactive tab panel behavious. [#6237](https://github.com/ant-design/ant-design/issues/6237)
- **Layout** Fix children in the collapsed Sider not be hidden. [#6131](https://github.com/ant-design/ant-design/issues/6131)
- **Table** Fix table filter menu overflow issue. [#6245](https://github.com/ant-design/ant-design/issues/6245)
- **InputNumber** Fix hasFeedback misplaced validated icon. [#6289](https://github.com/ant-design/ant-design/issues/6289)
- **Typescript**
- Upgrade TypeScript to 2.3.x. [#6263](https://github.com/ant-design/ant-design/issues/6263)
- Add missing props in Table. [commit/acdc56](https://github.com/ant-design/ant-design/commit/acdc563a547c49960521b2b48cd5c707ac1e4cf2) [pull/6291](https://github.com/ant-design/ant-design/pull/6291) [@jch254](https://github.com/jch254)
- Fix wrong type in Mention and Form. [pull/6268](https://github.com/ant-design/ant-design/pull/6268) [@jch254](https://github.com/jch254)
- Fix wrong type in Badge. [pull/6291](https://github.com/ant-design/ant-design/pull/6291) [@jch254](https://github.com/jch254)
- Add missing props in Input related Components. [pull/6276](https://github.com/ant-design/ant-design/pull/6276/commits/94901de2e8c0a2ed6f62f5aa50c98994aad71844) [@panjiesw](https://github.com/panjiesw) [commit/220264](https://github.com/ant-design/ant-design/commit/2202648d6e1c53409ade2141955232922b0040d6#diff-26cb6da96d10397e18e7dbd6c5d8f7a1L265) [@clinyong](https://github.com/clinyong)
## 2.10.2
`2017-05-23`
- Fix `prop-types` warnings which due to upgrading React. [#5678](https://github.com/ant-design/ant-design/issues/5678)
- Fix `defaultValue` issue of DatePicker and RangePicker in showTime mode. [#6160](https://github.com/ant-design/ant-design/pull/6160)
- Fix style issue of TreeSelect. [#6137](https://github.com/ant-design/ant-design/issues/6137)
- Fix style issue of Input with prefix and addon. [#6144](https://github.com/ant-design/ant-design/issues/6144)
- Fix some bugs of `notification.destroy`. [#6161](https://github.com/ant-design/ant-design/issues/6161)
- Fix missing translations of Upload and Table. [#6218](https://github.com/ant-design/ant-design/issues/6218)
- Fix style issue of Cascader inside Input.Group. [#6208](https://github.com/ant-design/ant-design/issues/6208)
- Increase click area of Tree icons. [#6120](https://github.com/ant-design/ant-design/issues/6120)
## 2.10.1
`2017-05-14`

32
CHANGELOG.zh-CN.md
View File

@ -17,6 +17,38 @@ timeline: true
---
## 2.10.3
`2017-05-31`
- **Calendar**
- 修复了样式问题以支持 disabledDate，补充了 Type 定义及文档。[#6074](https://github.com/ant-design/ant-design/issues/6074)
- rc-calendar 依赖升级至 8.4.0，支持保加利亚语，支持首先选择结束日期。[commit/a4a6db](https://github.com/ant-design/ant-design/commit/a4a6db76de57ac2559a2be80208121ab5e168fbf)
- **Alert** 去掉了默认的下边距。[commit/5ef482](https://github.com/ant-design/ant-design/commit/5ef48289747409b6d962f75627ddb11e2765f965)
- **Tabs** 修复了隐藏标签下内容的表现问题。[#6237](https://github.com/ant-design/ant-design/issues/6237)
- **Layout** 修复了折叠侧边栏中的内容不能自动隐藏的问题。[#6131](https://github.com/ant-design/ant-design/issues/6131)
- **Table** 修复了 filter 被 Table 截断的问题。[#6245](https://github.com/ant-design/ant-design/issues/6245)
- **InputNumber** 修复了配置 hasFeedback 时校验结果图标位置有误的问题。[#6289](https://github.com/ant-design/ant-design/issues/6289)
- **Typescript**
- typescript 升级至 2.3.x。[#6263](https://github.com/ant-design/ant-design/issues/6263)
- 补充了 Table 的 type 定义. [commit/acdc56](https://github.com/ant-design/ant-design/commit/acdc563a547c49960521b2b48cd5c707ac1e4cf2) [pull/6291](https://github.com/ant-design/ant-design/pull/6291) [@jch254](https://github.com/jch254)
- 修复了 Mention、Form 组件中错误的 type 定义. [pull/6268](https://github.com/ant-design/ant-design/pull/6268) [@jch254](https://github.com/jch254)
- 修复了 Badge 组件中错误的 type 定义. [pull/6291](https://github.com/ant-design/ant-design/pull/6291) [@jch254](https://github.com/jch254)
- 补充了 Input 相关组件的 type 定义。[pull/6276](https://github.com/ant-design/ant-design/pull/6276/commits/94901de2e8c0a2ed6f62f5aa50c98994aad71844) [@panjiesw](https://github.com/panjiesw) [commit/220264](https://github.com/ant-design/ant-design/commit/2202648d6e1c53409ade2141955232922b0040d6#diff-26cb6da96d10397e18e7dbd6c5d8f7a1L265) [@clinyong](https://github.com/clinyong)
## 2.10.2
`2017-05-23`
- 修复了 React 升级引起的 `prop-types` 相关的 warning 问题。[#5678](https://github.com/ant-design/ant-design/issues/5678)
- 修复 DatePicker 和 RangePicker showTime 模式下 defaultValue 的问题。[#6160](https://github.com/ant-design/ant-design/pull/6160)
- 修复 TreeSelect 的样式问题。[#6137](https://github.com/ant-design/ant-design/issues/6137)
- 修复 包含 prefix 和 addon 的 Input 的样式问题。[#6144](https://github.com/ant-design/ant-design/issues/6144)
- 修复 `notification.destroy` 的 Bug。[#6161](https://github.com/ant-design/ant-design/issues/6161)
- 修复了 Upload 和 Table 组件中缺失的翻译。
- 修复了在 Input.Group 中的 Cascader 的样式问题。[#6208](https://github.com/ant-design/ant-design/issues/6208)
- 增大了 Tree 图标的可点击区域面积。
## 2.10.1
`2017-05-14`

2
README.md
View File

@ -29,7 +29,7 @@ An enterprise-class UI design language and React-based implementation.
## Environment Support
* Browser: Modern browsers and Internet Explorer 9+
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
* Server-side Rendering
* [Electron](http://electron.atom.io/)

2
components/affix/index.tsx
View File

@ -40,7 +40,7 @@ function noop() {}
function getDefaultTarget() {
return typeof window !== 'undefined' ?
window : null;
};
}
// Affix
export interface AffixProps {

6
components/alert/demo/basic.md
View File

@ -20,3 +20,9 @@ ReactDOM.render(
<Alert message="Success Text" type="success" />
, mountNode);
````
<style>
.ant-alert {
margin-bottom: 16px;
}
</style>

1
components/alert/index.zh-CN.md
View File

@ -24,4 +24,3 @@ title: Alert
| onClose | 关闭时触发的回调函数 | Function | 无 |
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
| banner | 是否用作顶部公告 | boolean | false |

2
components/alert/style/index.less
View File

@ -12,7 +12,6 @@
color: @alert-text-color;
font-size: @font-size-base;
line-height: 16px;
margin-bottom: 10px;
&&-no-icon {
padding: 8px 48px 8px 16px;
@ -91,7 +90,6 @@
padding: 16px 16px 16px 60px;
position: relative;
border-radius: @border-radius-base;
margin-bottom: 10px;
color: @text-color;
line-height: 1.5;
}

3
components/auto-complete/index.tsx
View File

@ -5,7 +5,7 @@ import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps }
import Input from '../input';
import InputElement from './InputElement';
export interface DataSourceItemObject { value: string; text: string; };
export interface DataSourceItemObject { value: string; text: string; }
export type DataSourceItemType = string | DataSourceItemObject;
export interface InputProps {
@ -23,7 +23,6 @@ export interface AutoCompleteProps extends AbstractSelectProps {
defaultValue?: SelectValue;
dataSource: DataSourceItemType[];
optionLabelProp?: string;
filterOption?: boolean | ((inputValue: string, option: Object) => any);
onChange?: (value: SelectValue) => void;
onSelect?: (value: SelectValue, option: Object) => any;
children?: ValidInputElement |

10
components/auto-complete/style/index.less
View File

@ -16,11 +16,11 @@
margin-left: 0;
margin-right: 0;
height: 100%;
line-height: @input-height-base;
}
&__placeholder {
margin-left: 8px;
margin-right: 8px;
top: @input-height-base / 2;
}
}
}
@ -36,8 +36,8 @@
}
&-lg {
.@{select-prefix-cls}-selection__placeholder {
top: @input-height-lg / 2;
.@{select-prefix-cls}-selection__rendered {
line-height: @input-height-lg;
}
.@{input-prefix-cls} {
.input-lg();
@ -45,8 +45,8 @@
}
&-sm {
.@{select-prefix-cls}-selection__placeholder {
top: @input-height-sm / 2;
.@{select-prefix-cls}-selection__rendered {
line-height: @input-height-sm;
}
.@{input-prefix-cls} {
.input-sm();

4
components/badge/index.tsx
View File

@ -7,7 +7,7 @@ import warning from '../_util/warning';
export interface BadgeProps {
/** Number to show in badge */
count: number | string;
count?: number | string;
showZero?: boolean;
/** Max count to show */
overflowCount?: number;
@ -54,7 +54,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
...restProps,
} = this.props;
const isDot = dot || status;
let displayCount = count > (overflowCount as number) ? `${overflowCount}+` : count;
let displayCount = (count as number) > (overflowCount as number) ? `${overflowCount}+` : count;
// dot mode don't need count
if (isDot) {
displayCount = '';

2
components/breadcrumb/Breadcrumb.tsx
View File

@ -13,7 +13,7 @@ export interface BreadcrumbProps {
itemRender?: (route: any, params: any, routes: Array<any>, paths: Array<string>) => React.ReactNode;
style?: React.CSSProperties;
className?: string;
};
}
function getBreadcrumbName(route, params) {
if (!route.breadcrumbName) {

1
components/calendar/index.en-US.md
View File

@ -43,3 +43,4 @@ moment.locale('zh-cn');
| locale | set locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| onPanelChange| callback when panel change | function(date: moment, mode: string) | - |
| onSelect | callback when select date | function(date: moment） | - |
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | 无 |

1
components/calendar/index.tsx
View File

@ -39,6 +39,7 @@ export interface CalendarProps {
style?: React.CSSProperties;
onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
onSelect?: (date?: moment.Moment) => void;
disabledDate?: (current: moment.Moment) => boolean;
}
export interface CalendarState {

1
components/calendar/index.zh-CN.md
View File

@ -45,3 +45,4 @@ moment.locale('zh-cn');
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |
| onSelect | 点击选择日期回调 | function(date: moment） | 无 |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |

33
components/calendar/style/index.less
View File

@ -125,18 +125,6 @@
color: #fff;
}
&-disabled-cell &-value {
cursor: not-allowed;
color: @disabled-color;
background: @disabled-bg;
border-radius: 0;
width: auto;
&:hover {
background: @disabled-bg;
}
}
&-disabled-cell-first-of-row &-value {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
@ -254,4 +242,25 @@
left: auto;
bottom: auto;
}
&-disabled-cell &-date {
&,
&:hover {
cursor: not-allowed;
}
}
&-disabled-cell:not(&-today) &-date {
&,
&:hover {
background: transparent;
}
}
&-disabled-cell &-value {
color: @disabled-color;
border-radius: 0;
width: auto;
cursor: not-allowed;
}
}

1
components/card/index.en-US.md
View File

@ -23,3 +23,4 @@ A card can be used to display content related to a single subject. The content c
| extra | Content to render in the top-right corner of the card | string\|ReactNode | - |
| bordered | Toggles rendering of the border around the card | boolean | true |
| bodyStyle | Inline style to apply to the card content | object | - |
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |

1
components/card/index.zh-CN.md
View File

@ -24,3 +24,4 @@ cols: 1
| extra | 卡片右上角的操作区域 | string\|ReactNode | - |
| bordered | 是否有边框 | boolean | true |
| bodyStyle | 内容区域自定义样式 | object | - |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |

78
components/cascader/__tests__/__snapshots__/demo.test.js.snap
View File

@ -5,6 +5,9 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
@ -13,9 +16,6 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
@ -27,6 +27,9 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
@ -35,9 +38,6 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
@ -50,13 +50,6 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
style="width:270px;"
tabindex="0"
>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
readonly=""
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
>
@ -74,6 +67,13 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
)
</span>
</span>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
readonly=""
type="text"
value=""
/>
<i
class="anticon anticon-cross-circle ant-cascader-picker-clear"
/>
@ -100,6 +100,11 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
>
Zhejiang / Hangzhou / West Lake
</span>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
@ -107,11 +112,6 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
>
Zhejiang / Hangzhou / West Lake
</span>
<i
class="anticon anticon-cross-circle ant-cascader-picker-clear"
/>
@ -126,6 +126,9 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
@ -134,9 +137,6 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
@ -148,6 +148,9 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
@ -156,9 +159,6 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
@ -170,6 +170,9 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
@ -178,9 +181,6 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
@ -192,6 +192,9 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
@ -199,9 +202,6 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
@ -214,6 +214,9 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input ant-input-lg"
@ -222,9 +225,6 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
@ -235,6 +235,9 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
@ -243,9 +246,6 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>
@ -256,6 +256,9 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input ant-input-sm"
@ -264,9 +267,6 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>

6
components/cascader/index.tsx
View File

@ -330,6 +330,9 @@ export default class Cascader extends React.Component<CascaderProps, any> {
style={style}
className={pickerCls}
>
<span className={`${prefixCls}-picker-label`}>
{this.getLabel()}
</span>
<Input
{...inputProps}
ref="input"
@ -344,9 +347,6 @@ export default class Cascader extends React.Component<CascaderProps, any> {
onKeyDown={this.handleKeyDown}
onChange={showSearch ? this.handleInputChange : undefined}
/>
<span className={`${prefixCls}-picker-label`}>
{this.getLabel()}
</span>
{clearIcon}
<Icon type="down" className={arrowCls} />
</span>

1
components/cascader/style/index.less
View File

@ -13,7 +13,6 @@
background-color: transparent!important;
cursor: pointer;
width: 100%;
z-index: 1;
display: block;
}

1
components/checkbox/Checkbox.tsx
View File

@ -16,6 +16,7 @@ export interface AbstractCheckboxProps {
onMouseEnter?: React.MouseEventHandler<any>;
onMouseLeave?: React.MouseEventHandler<any>;
value?: any;
name?: string;
}
export interface CheckboxProps extends AbstractCheckboxProps {

29
components/date-picker/RangePicker.tsx
View File

@ -33,7 +33,7 @@ function pickerValueAdapter(value?: moment.Moment | moment.Moment[]): moment.Mom
export default class RangePicker extends React.Component<any, any> {
static contextTypes = {
antLocale: PropTypes.object,
antLocale: PropTypes.object,
};
static defaultProps = {
prefixCls: 'ant-calendar',
@ -56,6 +56,7 @@ export default class RangePicker extends React.Component<any, any> {
this.state = {
value,
open: props.open,
hoverValue: [],
};
}
@ -78,6 +79,8 @@ export default class RangePicker extends React.Component<any, any> {
this.handleChange([]);
}
clearHoverValue = () => this.setState({ hoverValue: [] });
handleChange = (value: moment.Moment[]) => {
const props = this.props;
if (!('value' in props)) {
@ -100,6 +103,8 @@ export default class RangePicker extends React.Component<any, any> {
handleShowDateChange = showDate => this.setState({ showDate });
handleHoverChange = hoverValue => this.setState({ hoverValue });
setValue(value) {
this.handleChange(value);
if (!this.props.showTime) {
@ -115,7 +120,16 @@ export default class RangePicker extends React.Component<any, any> {
const operations = Object.keys(ranges).map((range) => {
const value = ranges[range];
return <a key={range} onClick={() => this.setValue(value)}>{range}</a>;
return (
<a
key={range}
onClick={() => this.setValue(value)}
onMouseEnter={() => this.setState({ hoverValue: value })}
onMouseLeave={this.clearHoverValue}
>
{range}
</a>
);
});
return (
<div className={`${prefixCls}-range-quick-selector`}>
@ -126,7 +140,7 @@ export default class RangePicker extends React.Component<any, any> {
render() {
const { state, props, context } = this;
const { value, showDate, open } = state;
const { value, showDate, hoverValue, open } = state;
const localeCode = getLocaleCode(context);
if (value && localeCode) {
if (value[0]) {
@ -138,9 +152,10 @@ export default class RangePicker extends React.Component<any, any> {
}
const {
disabledDate, disabledTime, showTime, showToday,
ranges, prefixCls, popupStyle,
style, onOk, locale, format,
prefixCls, popupStyle, style,
disabledDate, disabledTime,
showTime, showToday,
ranges, onOk, locale, format,
} = props;
warning(!('onOK' in props), 'It should be `RangePicker[onOk]`, instead of `onOK`!');
@ -182,6 +197,8 @@ export default class RangePicker extends React.Component<any, any> {
onOk={onOk}
value={showDate || pickerValueAdapter(props.defaultPickerValue) || pickerValueAdapter(moment())}
onValueChange={this.handleShowDateChange}
hoverValue={hoverValue}
onHoverChange={this.handleHoverChange}
showToday={showToday}
/>
);

21
components/date-picker/__tests__/RangePicker.test.js
View File

@ -41,6 +41,25 @@ describe('RangePicker', () => {
.toMatchSnapshot();
});
it('highlight range when hover presetted range', () => {
const wrapper = mount(
<RangePicker
ranges={{
'This Month': [moment().startOf('month'), moment().endOf('month')],
}}
getCalendarContainer={trigger => trigger}
format="YYYY/MM/DD"
open
/>
);
let rangeCalendarWrapper = mount(wrapper.find('Trigger').node.getComponent());
rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a')
.simulate('mouseEnter');
rangeCalendarWrapper = mount(wrapper.find('Trigger').node.getComponent());
expect(rangeCalendarWrapper.find('.ant-calendar-selected-day').length).toBe(2);
});
// issue: https://github.com/ant-design/ant-design/issues/5872
it('should not throw error when value is reset to `[]`', () => {
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
@ -53,7 +72,7 @@ describe('RangePicker', () => {
);
wrapper.setProps({ value: [] });
const rangeCalendarWrapper = mount(wrapper.find('Trigger').node.getComponent());
expect(() => rangeCalendarWrapper.find('.ant-calendar-today').simulate('click').simulate('click'))
expect(() => rangeCalendarWrapper.find('.ant-calendar-today').at(0).simulate('click').simulate('click'))
.not.toThrow();
});
});

2
components/date-picker/index.en-US.md
View File

@ -42,7 +42,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
| popupStyle | to customize the style of the popup calendar | object | {} |
| size | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | string | - |
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| disabledDate | to specify the date that cannot be selected | function | - |
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
| open | open state of picker | boolean | - |
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |

2
components/date-picker/index.zh-CN.md
View File

@ -43,7 +43,7 @@ moment.locale('zh-cn');
| popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| disabledDate | 不可选择的日期 | function | 无 |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| open | 控制弹层是否展开 | boolean | - |
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |

27
components/form/Form.tsx
View File

@ -30,6 +30,31 @@ export interface FormProps {
hideRequiredMark?: boolean;
}
export type ValidationRule = {
/** validation error message */
message?: string;
/** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
type?: string;
/** indicates whether field is required */
required?: boolean;
/** treat required fields that only contain whitespace as errors */
whitespace?: boolean;
/** validate the exact length of a field */
len?: number;
/** validate the min length of a field */
min?: number;
/** validate the max length of a field */
max?: number;
/** validate the value from a list of possible values */
enum?: string | string[];
/** validate from a regular expression */
pattern?: RegExp;
/** transform a value before validation */
transform?: (value: any) => any;
/** custom validate function (Note: callback must be called) */
validator?: (rule: any, value: any, callback: any, source?: any, options?: any) => any;
};
export type ValidateCallback = (erros: any, values: any) => void;
// function create
@ -74,7 +99,7 @@ export type WrappedFormUtils = {
/** 校验子节点值的时机 */
validateTrigger?: string | string[];
/** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
rules?: Array<any>;
rules?: ValidationRule[];
/** 是否和其他控件互斥，特别用于 Radio 单选控件 */
exclusive?: boolean;
}): (node: React.ReactNode) => React.ReactNode;

76
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1232,6 +1232,11 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-cascader-picker"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
>
Zhejiang / Hangzhou / West Lake
</span>
<input
autocomplete="off"
class="ant-input ant-cascader-input ant-input-lg"
@ -1241,11 +1246,6 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
>
Zhejiang / Hangzhou / West Lake
</span>
<i
class="anticon anticon-cross-circle ant-cascader-picker-clear"
/>
@ -1277,51 +1277,55 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
class="ant-form-item-control "
>
<span
class="ant-input-wrapper ant-input-group"
class="ant-input-group-wrapper"
>
<span
class="ant-input-group-addon"
class="ant-input-wrapper ant-input-group"
>
<div
class="icp-selector ant-select ant-select-enabled"
<span
class="ant-input-group-addon"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0"
class="icp-selector ant-select ant-select-enabled"
>
<div
class="ant-select-selection__rendered"
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0"
>
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1;"
title="+86"
class="ant-select-selection__rendered"
>
+86
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1;"
title="+86"
>
+86
</div>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable"
>
<b />
</span>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable"
>
<b />
</span>
</div>
</div>
</span>
<input
class="ant-input ant-input-lg"
data-__meta="[object Object]"
id="phone"
type="text"
value=""
/>
</span>
<input
class="ant-input ant-input-lg"
data-__meta="[object Object]"
id="phone"
type="text"
value=""
/>
</span>
</div>
</div>

1
components/input-number/index.tsx
View File

@ -17,6 +17,7 @@ export interface InputNumberProps {
placeholder?: string;
style?: React.CSSProperties;
className?: string;
name?: string;
}
export default class InputNumber extends React.Component<InputNumberProps, any> {

1
components/input-number/style/index.less
View File

@ -113,6 +113,7 @@
opacity: 0;
border-radius: 0 @border-radius-base @border-radius-base 0;
transition: opacity 0.24s linear 0.1s;
z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
}
&-handler-wrap:hover &-handler {

14
components/input/Input.tsx
View File

@ -31,7 +31,7 @@ function clearNextFrameAction(nextFrameId) {
export interface AutoSizeType {
minRows?: number;
maxRows?: number;
};
}
export interface InputProps {
prefixCls?: string;
@ -59,6 +59,7 @@ export interface InputProps {
prefix?: React.ReactNode;
suffix?: React.ReactNode;
spellCheck?: boolean;
autoFocus?: boolean;
}
export default class Input extends Component<InputProps, any> {
@ -175,18 +176,23 @@ export default class Input extends Component<InputProps, any> {
</span>
) : null;
const className = classNames({
[`${props.prefixCls}-wrapper`]: true,
const className = classNames(`${props.prefixCls}-wrapper`, {
[wrapperClassName]: (addonBefore || addonAfter),
});
return (
const node = (
<span className={className}>
{addonBefore}
{children}
{addonAfter}
</span>
);
// Need another wrapper for changing display:table to display:inline-block
if (addonBefore || addonAfter) {
return <span className={`${props.prefixCls}-group-wrapper`}>{node}</span>;
}
return node;
}
renderLabeledIcon(children) {

1
components/input/Search.tsx
View File

@ -15,6 +15,7 @@ export interface SearchProps {
size?: 'large' | 'default' | 'small';
disabled?: boolean;
readOnly?: boolean;
name?: string;
}
export default class Search extends React.Component<SearchProps, any> {

254
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6,129 +6,141 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
style="margin-bottom:16px;"
>
<span
class="ant-input-wrapper ant-input-group"
class="ant-input-group-wrapper"
>
<span
class="ant-input-group-addon"
class="ant-input-wrapper ant-input-group"
>
Http://
</span>
<input
class="ant-input"
type="text"
value="mysite"
/>
<span
class="ant-input-group-addon"
>
.com
</span>
</span>
</div>
<div
style="margin-bottom:16px;"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-enabled"
style="width:80px;"
<span
class="ant-input-group-addon"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1;"
title="Http://"
>
Http://
</div>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable"
>
<b />
</span>
</div>
</div>
</span>
<input
class="ant-input"
type="text"
value="mysite"
/>
<span
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-enabled"
style="width:70px;"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1;"
title=".com"
>
.com
</div>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable"
>
<b />
</span>
</div>
</div>
</span>
</span>
</div>
<div
style="margin-bottom:16px;"
>
<span
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
type="text"
value="mysite"
/>
<span
class="ant-input-group-addon"
>
<i
class="anticon anticon-setting"
Http://
</span>
<input
class="ant-input"
type="text"
value="mysite"
/>
<span
class="ant-input-group-addon"
>
.com
</span>
</span>
</span>
</div>
<div
style="margin-bottom:16px;"
>
<span
class="ant-input-group-wrapper"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-enabled"
style="width:80px;"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1;"
title="Http://"
>
Http://
</div>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable"
>
<b />
</span>
</div>
</div>
</span>
<input
class="ant-input"
type="text"
value="mysite"
/>
<span
class="ant-input-group-addon"
>
<div
class="ant-select ant-select-enabled"
style="width:70px;"
>
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox"
tabindex="0"
>
<div
class="ant-select-selection__rendered"
>
<div
class="ant-select-selection-selected-value"
style="display:block;opacity:1;"
title=".com"
>
.com
</div>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable"
>
<b />
</span>
</div>
</div>
</span>
</span>
</span>
</div>
<div
style="margin-bottom:16px;"
>
<span
class="ant-input-group-wrapper"
>
<span
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
type="text"
value="mysite"
/>
<span
class="ant-input-group-addon"
>
<i
class="anticon anticon-setting"
/>
</span>
</span>
</span>
</div>
@ -615,6 +627,9 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
style="width:70%;"
tabindex="0"
>
<span
class="ant-cascader-picker-label"
/>
<input
autocomplete="off"
class="ant-input ant-cascader-input "
@ -623,9 +638,6 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
type="text"
value=""
/>
<span
class="ant-cascader-picker-label"
/>
<i
class="anticon anticon-down ant-cascader-picker-arrow"
/>

4
components/input/style/index.less
View File

@ -11,6 +11,10 @@
//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
.input-group(~"@{ant-prefix}-input");
&-wrapper {
display: inline-block;
vertical-align: middle;
}
}
// Input with affix: prefix or suffix

2
components/layout/Sider.tsx
View File

@ -168,7 +168,7 @@ export default class Sider extends React.Component<SiderProps, any> {
});
return (
<div className={siderCls} {...divProps} style={divStyle}>
{this.props.children}
<div className={`${prefixCls}-children`}>{this.props.children}</div>
{collapsible || (this.state.below && zeroWidthTrigger) ? triggerDom : null}
</div>
);

964
components/layout/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

10
components/layout/layout.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import classNames from 'classnames';
import { SiderProps } from './Sider';
export interface BasicProps {
style?: React.CSSProperties;
@ -8,7 +9,7 @@ export interface BasicProps {
}
function generator(props) {
return (Basic) : any => {
return (Basic): any => {
return class Adapter extends React.Component<BasicProps, any> {
static Header: any;
static Footer: any;
@ -40,7 +41,12 @@ class Basic extends React.Component<BasicProps, any> {
}
}
const Layout = generator({
const Layout: React.ComponentClass<BasicProps> & {
Header: React.ComponentClass<BasicProps>;
Footer: React.ComponentClass<BasicProps>;
Content: React.ComponentClass<BasicProps>;
Sider: React.ComponentClass<SiderProps>;
} = generator({
prefixCls: 'ant-layout',
})(Basic);

8
components/locale-provider/pt_BR.tsx
View File

@ -18,6 +18,8 @@ export default {
filterConfirm: 'OK',
filterReset: 'Resetar',
emptyText: 'Não há dados',
selectAll: 'Selecionar página atual',
selectInvert: 'Inverter seleção',
},
Modal: {
okText: 'OK',
@ -37,4 +39,10 @@ export default {
Select: {
notFoundContent: 'Não encontrado',
},
Upload: {
uploading: 'Enviando...',
removeFile: 'Remover arquivo',
uploadError: 'Erro no envio',
previewFile: 'Visualizar arquivo',
},
};

5
components/mention/index.tsx
View File

@ -5,7 +5,7 @@ import shallowequal from 'shallowequal';
import Icon from '../icon';
export interface MentionProps {
prefixCls: string;
prefixCls?: string;
suggestionStyle?: React.CSSProperties;
suggestions?: Array<any>;
onSearchChange?: Function;
@ -54,7 +54,8 @@ export default class Mention extends React.Component<MentionProps, MentionState>
};
}
componentWillReceiveProps({ suggestions }) {
componentWillReceiveProps(nextProps: MentionProps) {
const { suggestions } = nextProps;
if (!shallowequal(suggestions, this.props.suggestions)) {
this.setState({
suggestions,

1
components/modal/Modal.tsx
View File

@ -36,6 +36,7 @@ export interface ModalProps {
maskTransitionName?: string;
transitionName?: string;
className?: string;
getContainer?: (instance: React.ReactInstance) => HTMLElement;
}
export interface ModalContext {

1
components/modal/index.en-US.md
View File

@ -32,6 +32,7 @@ and so on.
| style | Style of floating layer, typically used at least for adjusting the position. | object | - |
| wrapClassName | The class name of the container of the modal dialog | string | - |
| afterClose | Specify a function that will be called when modal is closed completely. | function | - |
| getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body |
#### Destroy on close

2
components/modal/index.tsx
View File

@ -2,7 +2,7 @@ import Modal, { ModalFuncProps } from './Modal';
import confirm from './confirm';
import assign from 'object-assign';
export { ModalFuncProps }
export { ModalFuncProps };
Modal.info = function (props: ModalFuncProps) {
const config = assign({}, {

1
components/modal/index.zh-CN.md
View File

@ -31,6 +31,7 @@ title: Modal
| style | 可用于设置浮层的样式，调整浮层位置等 | object | - |
| wrapClassName | 对话框外层容器的类名 | string | - |
| afterClose | Modal 完全关闭后的回调 | function | 无 |
| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |
#### 清空旧数据

2
components/pagination/Pagination.tsx
View File

@ -33,7 +33,7 @@ abstract class Pagination extends React.Component<PaginationProps, any> {
selectPrefixCls: 'ant-select',
};
abstract getLocale()
abstract getLocale();
render() {
const { className, size, ...restProps } = this.props;

2
components/popconfirm/index.tsx
View File

@ -28,7 +28,7 @@ abstract class Popconfirm extends React.Component<PopconfirmProps, any> {
};
}
abstract getLocale()
abstract getLocale();
componentWillReceiveProps(nextProps: PopconfirmProps) {
if ('visible' in nextProps) {

9
components/select/index.tsx
View File

@ -16,6 +16,11 @@ export interface AbstractSelectProps {
disabled?: boolean;
style?: React.CSSProperties;
placeholder?: string;
dropdownClassName?: string;
dropdownStyle?: React.CSSProperties;
dropdownMenuStyle?: React.CSSProperties;
onSearch?: (value: string) => any;
filterOption?: boolean | ((inputValue: string, option: Object) => any);
}
export interface LabeledValue {
@ -33,18 +38,14 @@ export interface SelectProps extends AbstractSelectProps {
tags?: boolean;
combobox?: boolean;
optionLabelProp?: string;
filterOption?: boolean | ((inputValue: string, option: Object) => any);
onChange?: (value: SelectValue) => void;
onSelect?: (value: SelectValue, option: Object) => any;
onDeselect?: (value: SelectValue) => any;
onSearch?: (value: string) => any;
dropdownMatchSelectWidth?: boolean;
optionFilterProp?: string;
defaultActiveFirstOption?: boolean;
labelInValue?: boolean;
getPopupContainer?: (triggerNode: Element) => HTMLElement;
dropdownStyle?: React.CSSProperties;
dropdownMenuStyle?: React.CSSProperties;
tokenSeparators?: string[];
getInputElement?: () => React.ReactElement<any>;
}

2
components/select/index.zh-CN.md
View File

@ -44,7 +44,7 @@ title: Select
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
| size | 选择框大小，可选 `large` `small` | string | default |
| showSearch | 在选择框中显示搜索框 | boolean | false |
| showSearch | 使单选模式可搜索 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true
| dropdownStyle | 下拉菜单的 style 属性 | object | - |

4
components/select/style/index.less
View File

@ -227,6 +227,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
&-search__field__placeholder {
@ -298,7 +299,8 @@
}
.@{select-prefix-cls}-selection__choice {
background-color: #f3f3f3;
color: @tag-default-color;
background-color: @tag-default-bg;
border-radius: 4px;
cursor: default;
float: left;

2
components/spin/style/index.less
View File

@ -115,7 +115,7 @@
&-dot {
position: relative;
display: block;
display: inline-block;
.square(@spin-dot-size);
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;

5
components/style/themes/default.less
View File

@ -294,6 +294,11 @@
@table-padding-vertical: 16px;
@table-padding-horizontal: 8px;
// Tag
// --
@tag-default-bg: #f3f3f3;
@tag-default-color: @text-color;
// TimePicker
// ---
@time-picker-panel-column-width: 56px;

3
components/table/Column.tsx
View File

@ -10,6 +10,8 @@ export interface ColumnProps<T> {
onFilter?: (value: any, record: T) => boolean;
filterMultiple?: boolean;
filterDropdown?: React.ReactNode;
filterDropdownVisible?: boolean;
onFilterDropdownVisibleChange?: (visible: boolean) => void;
sorter?: boolean | ((a: any, b: any) => number);
colSpan?: number;
width?: string | number;
@ -19,6 +21,7 @@ export interface ColumnProps<T> {
filteredValue?: any[];
sortOrder?: boolean | ('ascend' | 'descend');
children?: ColumnProps<T>[];
onCellClick?: (record: T, event: any) => void;
}
export default class Column<T> extends (RcTable.Column as React.ComponentClass<ColumnProps<T>>) {}

5
components/table/SelectionCheckboxAll.tsx
View File

@ -22,6 +22,7 @@ export interface SelectionCheckboxAllProps {
prefixCls: string | undefined;
onSelect: (key: string, index: number, selectFunc: any) => void;
selections?: SelectionDecorator[] | boolean;
getPopupContainer: (triggerNode?: Element) => HTMLElement;
}
export default class SelectionCheckboxAll extends React.Component<SelectionCheckboxAllProps, any> {
@ -152,7 +153,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
}
render() {
const { disabled, prefixCls, selections } = this.props;
const { disabled, prefixCls, selections, getPopupContainer } = this.props;
const { checked, indeterminate } = this.state;
let selectionPrefixCls = `${prefixCls}-selection`;
@ -175,7 +176,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
customSelections = (
<Dropdown
overlay={menu}
getPopupContainer={(trigger: HTMLElement) => trigger.parentNode as HTMLElement}
getPopupContainer={getPopupContainer}
>
<div className={`${selectionPrefixCls}-down`}>
<Icon type="down" />

12
components/table/Table.tsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import { findDOMNode } from 'react-dom';
import RcTable from 'rc-table';
import PropTypes from 'prop-types';
import classNames from 'classnames';
@ -615,6 +616,10 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
return recordKey === undefined ? index : recordKey;
}
getPopupContainer = () => {
return findDOMNode(this) as HTMLElement;
}
renderRowSelection() {
const { prefixCls, rowSelection } = this.props;
const columns = this.columns.concat();
@ -646,6 +651,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
prefixCls={prefixCls}
onSelect={this.handleSelectRow}
selections={rowSelection.selections}
getPopupContainer={this.getPopupContainer}
/>
);
}
@ -700,6 +706,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
confirmFilter={this.handleFilter}
prefixCls={`${prefixCls}-filter`}
dropdownPrefixCls={dropdownPrefixCls || 'ant-dropdown'}
getPopupContainer={this.getPopupContainer}
/>
);
}
@ -939,7 +946,10 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
}
return (
<div className={classNames(`${prefixCls}-wrapper`, className)} style={style}>
<div
className={classNames(`${prefixCls}-wrapper`, className)}
style={style}
>
<Spin
{...loading}
className={loading ? `${paginationPatchClass} ${prefixCls}-spin-holder` : ''}

6
components/table/demo/custom-filter-panel.md
View File

@ -91,7 +91,11 @@ class App extends React.Component {
),
filterIcon: <Icon type="smile-o" style={{ color: this.state.filtered ? '#108ee9' : '#aaa' }} />,
filterDropdownVisible: this.state.filterDropdownVisible,
onFilterDropdownVisibleChange: visible => this.setState({ filterDropdownVisible: visible }, () => this.searchInput.focus()),
onFilterDropdownVisibleChange: (visible) => {
this.setState({
filterDropdownVisible: visible,
}, () => this.searchInput.focus());
},
}, {
title: 'Age',
dataIndex: 'age',

4
components/table/filterDropdown.tsx
View File

@ -24,6 +24,7 @@ export interface FilterMenuProps {
confirmFilter: (column: Object, selectedKeys: string[]) => any;
prefixCls: string;
dropdownPrefixCls: string;
getPopupContainer: (triggerNode?: Element) => HTMLElement;
}
export default class FilterMenu extends React.Component<FilterMenuProps, any> {
@ -182,7 +183,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
}) : <Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />;
}
render() {
const { column, locale, prefixCls, dropdownPrefixCls } = this.props;
const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this.props;
// default multiple selection in filter dropdown
const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
const dropdownMenuClass = classNames({
@ -228,6 +229,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
overlay={menus}
visible={this.neverShown ? false : this.state.visible}
onVisibleChange={this.onVisibleChange}
getPopupContainer={getPopupContainer}
>
{this.renderFilterIcon()}
</Dropdown>

1
components/tabs/style/index.less
View File

@ -200,6 +200,7 @@
opacity: 0;
height: 0;
padding: 0!important;
pointer-events: none;
}
}
> .@{tab-prefix-cls}-content-animated {

3
components/tag/style/index.less
View File

@ -3,9 +3,6 @@
@tag-prefix-cls: ~"@{ant-prefix}-tag";
@tag-default-bg: @background-color-base;
@tag-default-color: @text-color;
.@{tag-prefix-cls} {
display: inline-block;
line-height: 20px;

2
components/time-picker/index.tsx
View File

@ -58,7 +58,7 @@ abstract class TimePicker extends React.Component<TimePickerProps, any> {
};
}
abstract getLocale()
abstract getLocale();
componentWillReceiveProps(nextProps: TimePickerProps) {
if ('value' in nextProps) {

2
components/tooltip/index.tsx
View File

@ -27,7 +27,7 @@ export interface AbstractTooltipProps {
// getTooltipContainer had been rename to getPopupContainer
getTooltipContainer?: (triggerNode: Element) => HTMLElement;
getPopupContainer?: (triggerNode: Element) => HTMLElement;
children?: React.ReactElement<any>;
children?: React.ReactNode;
}
export interface TooltipProps extends AbstractTooltipProps {

6
components/transfer/index.tsx
View File

@ -91,7 +91,7 @@ abstract class Transfer extends React.Component<TransferProps, any> {
};
}
abstract getLocale()
abstract getLocale();
componentWillReceiveProps(nextProps: TransferProps) {
const { sourceSelectedKeys, targetSelectedKeys } = this.state;
@ -227,10 +227,10 @@ abstract class Transfer extends React.Component<TransferProps, any> {
handleLeftSelectAll = (filteredDataSource, checkAll) => (
this.handleSelectAll('left', filteredDataSource, checkAll)
);
)
handleRightSelectAll = (filteredDataSource, checkAll) => (
this.handleSelectAll('right', filteredDataSource, checkAll)
);
)
handleFilter = (direction, e) => {
this.setState({

2
components/tree-select/index.tsx
View File

@ -20,7 +20,7 @@ abstract class TreeSelect extends React.Component<TreeSelectProps, any> {
dropdownClassName: 'ant-select-tree-dropdown',
};
abstract getLocale()
abstract getLocale();
render() {
const locale = this.getLocale();

15
components/tree-select/style/index.less
View File

@ -27,9 +27,9 @@
margin: 0;
padding: 0 0 0 18px;
}
> span {
.@{select-tree-prefix-cls}-node-content-wrapper {
display: inline-block;
padding: 1px 5px;
padding: 3px 5px;
border-radius: 2px;
margin: 0;
cursor: pointer;
@ -41,22 +41,25 @@
background-color: @item-hover-bg;
}
&.@{select-tree-prefix-cls}-node-selected {
background-color: @item-active-bg;
background-color: @primary-2;
}
}
> span {
&.@{select-tree-prefix-cls}-checkbox {
margin: 2px 4px 0 0;
}
&.@{select-tree-prefix-cls}-switcher,
&.@{select-tree-prefix-cls}-iconEle {
margin: 0;
width: 16px;
height: 16px;
line-height: 16px;
width: 24px;
height: 24px;
line-height: 24px;
display: inline-block;
vertical-align: middle;
border: 0 none;
cursor: pointer;
outline: none;
text-align: center;
}
&.@{select-tree-prefix-cls}-icon_loading {
&:after {

11
components/tree/style/index.less
View File

@ -55,7 +55,7 @@
}
.@{tree-prefix-cls}-node-content-wrapper {
display: inline-block;
padding: 1px 5px;
padding: 3px 5px;
border-radius: 2px;
margin: 0;
cursor: pointer;
@ -78,14 +78,15 @@
&.@{tree-prefix-cls}-switcher,
&.@{tree-prefix-cls}-iconEle {
margin: 0;
width: 16px;
height: 16px;
line-height: 16px;
width: 24px;
height: 24px;
line-height: 24px;
display: inline-block;
vertical-align: middle;
border: 0 none;
cursor: pointer;
outline: none;
text-align: center;
}
&.@{tree-prefix-cls}-icon_loading {
&:after {
@ -187,7 +188,7 @@
border-left: 1px solid @border-color-base;
height: 100%;
position: absolute;
left: 6px;
left: 12px;
margin: 18px 0;
}
}

2
docs/react/introduce.en-US.md
View File

@ -34,7 +34,7 @@ Following the Ant Design specification, we developed a React UI library `antd` t
## Environment Support
* Modern browsers and Internet Explorer 9+
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
* Server-side Rendering
* [Electron](http://electron.atom.io/)

2
docs/react/introduce.zh-CN.md
View File

@ -34,7 +34,7 @@ title: Ant Design of React
## 支持环境
* 现代浏览器和 IE9 及以上。
* 现代浏览器和 IE9 及以上（需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性)）。
* 支持服务端渲染。
* [Electron](http://electron.atom.io/)

72
docs/react/use-with-create-react-app.en-US.md
View File

@ -56,7 +56,7 @@ It is the default directory structure below.
Now we install `antd` from yarn or npm.
```bash
$ yarn add antd --save
$ yarn add antd
```
Modify `src/App.js`, import Button component from `antd`.
@ -113,7 +113,7 @@ $ yarn run eject
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([principle](/docs/react/getting-started#Import-on-Demand)). After eject all config files to antd-demo, we allowed to install it and modify `config/webpack.config.dev.js` now.
```bash
$ yarn add babel-plugin-import --save-dev
$ yarn add babel-plugin-import --dev
```
```diff
@ -121,10 +121,10 @@ $ yarn add babel-plugin-import --save-dev
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: {
loader: require.resolve('babel-loader'),
options: {
+ plugins: [
+ ['import', [{ libraryName: "antd", style: 'css' }]],
+ ['import', { libraryName: 'antd', style: 'css' }],
+ ],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
@ -145,22 +145,27 @@ Then reboot `yarn start` and visit demo page, you should find that the above war
According to [Customize Theme documentation](/docs/react/customize-theme), we need `less` variables modify ability of [less-loader](https://github.com/webpack/less-loader), so we add it.
```bash
$ yarn add less less-loader --save-dev
$ yarn add less less-loader --dev
```
```diff
loaders: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
+ /\.less$/,
/\.css$/,
+ /\.less$/,
/\.json$/,
/\.svg$/
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: 'url',
},
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
...
@ -169,21 +174,48 @@ loaders: [
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: {
options: {
plugins: [
- ['import', [{ libraryName: "antd", style: 'css' }]],
+ ['import', [{ libraryName: "antd", style: true }]], // import less
- ['import', [{ libraryName: 'antd', style: 'css' }]],
+ ['import', [{ libraryName: 'antd', style: true }]], // import less
],
},
...
+ // Parse less files and modify variables
+ {
+ test: /\.less$/,
+ loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
+ },
]
+ // Parse less files and modify variables
+ {
+ test: /\.less$/,
+ use: [
+ require.resolve('style-loader'),
+ require.resolve('css-loader'),
+ {
+ loader: require.resolve('postcss-loader'),
+ options: {
+ ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+ plugins: () => [
+ require('postcss-flexbugs-fixes'),
+ autoprefixer({
+ browsers: [
+ '>1%',
+ 'last 4 versions',
+ 'Firefox ESR',
+ 'not ie < 9', // React doesn't support IE8 anyway
+ ],
+ flexbox: 'no-2009',
+ }),
+ ],
+ },
+ },
+ {
+ loader: require.resolve('less-loader'),
+ options: {
+ modifyVars: { "@primary-color": "#1DA57A" },
+ },
+ },
+ ],
+ },
],
```
We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, you can see a green button rendered on the page after reboot start server.

72
docs/react/use-with-create-react-app.zh-CN.md
View File

@ -55,7 +55,7 @@ $ yarn start
现在从 yarn 或 npm 安装并引入 antd。
```bash
$ yarn add antd --save
$ yarn add antd
```
修改 `src/App.js`，引入 antd 的按钮组件。
@ -110,7 +110,7 @@ $ yarn run eject
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/docs/react/getting-started#按需加载)），现在我们尝试安装它并修改 `config/webpack.config.dev.js` 文件。
```bash
$ yarn add babel-plugin-import --save-dev
$ yarn add babel-plugin-import --dev
```
```diff
@ -118,10 +118,10 @@ $ yarn add babel-plugin-import --save-dev
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: {
loader: require.resolve('babel-loader'),
options: {
+ plugins: [
+ ['import', [{ libraryName: "antd", style: 'css' }]],
+ ['import', { libraryName: 'antd', style: 'css' }],
+ ],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
@ -142,22 +142,27 @@ $ yarn add babel-plugin-import --save-dev
按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到 less 变量覆盖功能，因此首先我们需要引入 [less-loader](https://github.com/webpack/less-loader) 来加载 less 样式，同时修改 `config/webpack.config.dev.js` 文件。
```bash
$ yarn add less less-loader --save-dev
$ yarn add less less-loader --dev
```
```diff
loaders: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
+ /\.less$/,
/\.css$/,
+ /\.less$/,
/\.json$/,
/\.svg$/
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: 'url',
},
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
...
@ -166,21 +171,48 @@ loaders: [
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: {
options: {
plugins: [
- ['import', [{ libraryName: "antd", style: 'css' }]],
+ ['import', [{ libraryName: "antd", style: true }]], // 加载 less 文件
- ['import', [{ libraryName: 'antd', style: 'css' }]],
+ ['import', [{ libraryName: 'antd', style: true }]], // import less
],
},
...
+ // 解析 less 文件，并加入变量覆盖配置
+ {
+ test: /\.less$/,
+ loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'
+ },
]
+ // Parse less files and modify variables
+ {
+ test: /\.less$/,
+ use: [
+ require.resolve('style-loader'),
+ require.resolve('css-loader'),
+ {
+ loader: require.resolve('postcss-loader'),
+ options: {
+ ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+ plugins: () => [
+ require('postcss-flexbugs-fixes'),
+ autoprefixer({
+ browsers: [
+ '>1%',
+ 'last 4 versions',
+ 'Firefox ESR',
+ 'not ie < 9', // React doesn't support IE8 anyway
+ ],
+ flexbox: 'no-2009',
+ }),
+ ],
+ },
+ },
+ {
+ loader: require.resolve('less-loader'),
+ options: {
+ modifyVars: { "@primary-color": "#1DA57A" },
+ },
+ },
+ ],
+ },
],
```
这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，

20
package.json
View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "2.10.1",
"version": "2.10.3",
"title": "Ant Design",
"description": "An enterprise-class UI design language and React-based implementation",
"homepage": "http://ant.design/",
@ -26,9 +26,11 @@
"url": "https://github.com/ant-design/ant-design/issues"
},
"main": "lib/index.js",
"module": "es/index.js",
"files": [
"dist",
"lib"
"lib",
"es"
],
"typings": "lib/index.d.ts",
"license": "MIT",
@ -45,7 +47,7 @@
"omit.js": "^0.1.0",
"prop-types": "^15.5.7",
"rc-animate": "~2.3.0",
"rc-calendar": "~8.2.0",
"rc-calendar": "~8.4.0",
"rc-cascader": "~0.11.0",
"rc-checkbox": "~2.0.0",
"rc-collapse": "~1.7.0",
@ -80,7 +82,7 @@
"@types/react": "^15.0.8",
"@types/react-dom": "~0.14.18",
"antd-demo-jest": "^1.0.5",
"antd-tools": "~0.19.1",
"antd-tools": "^1.4.2",
"babel-cli": "^6.18.0",
"babel-eslint": "^7.1.0",
"babel-jest": "^19.0.0",
@ -138,7 +140,7 @@
"rimraf": "^2.5.4",
"stylelint": "^7.8.0",
"stylelint-config-standard": "^16.0.0",
"typescript": "~2.2.1",
"typescript": "~2.3.0",
"typescript-babel-jest": "^1.0.2",
"values.js": "^1.0.3",
"xhr2": "^0.1.3"
@ -198,8 +200,8 @@
"/_site/"
],
"testPathIgnorePatterns": [
"dekko",
"/node_modules/",
"dekko",
"node"
],
"transform": {
@ -210,11 +212,13 @@
"testRegex": ".*\\.test\\.js$",
"collectCoverageFrom": [
"components/**/*.{ts,tsx}",
"!components/*/style/index.tsx"
"!components/*/style/index.tsx",
"!components/style/index.tsx",
"!components/*/locale/index.tsx"
],
"transformIgnorePatterns": [
"/node_modules/",
"/dist/antd.js"
"/dist/"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"

1
site/theme/static/demo.less
View File

@ -62,6 +62,7 @@
transform: scale(0.9);
background: #fff;
padding-right: 6px;
text-decoration: none;
}
&-demo {

1
site/theme/static/home.less
View File

@ -50,6 +50,7 @@
font-weight: 500;
border-radius: @border-radius-base;
border: 1px solid @start-button-color;
text-decoration: none;
color: #0ae;
font-size: 15px;
background: transparent;

1
site/theme/static/markdown.less
View File

@ -164,6 +164,7 @@
display: inline-block;
margin-left: 10px;
height: 12px;
text-decoration: none;
i {
color: #999;

1
site/theme/static/page-nav.less
View File

@ -14,6 +14,7 @@
float: left;
line-height: 72px;
height: 72px;
text-decoration: none;
}
> a.prev-page {

10
tests/index.test.js
View File

@ -1,5 +1,3 @@
import fs from 'fs';
import path from 'path';
import pkg from '../package.json';
describe('antd dist files', () => {
@ -13,14 +11,6 @@ describe('antd dist files', () => {
// https://github.com/ant-design/ant-design/issues/1970
// https://github.com/ant-design/ant-design/issues/1804
if (process.env.CI) {
it('should be compatible in IE8', () => {
const antdJsContent = fs.readFileSync(path.join(process.cwd(), 'dist', 'antd.js'));
expect(
antdJsContent.toString()
.indexOf('function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }')
).toBe(-1);
});
it('should have antd.version', () => {
const antd = require('../dist/antd'); // eslint-disable-line global-require
expect(antd.version).toBe(pkg.version);

6
tsconfig.json
View File

@ -5,6 +5,8 @@
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "preserve",
"noUnusedParameters": true,
"noUnusedLocals": true,
"target": "es6",
"lib": [
"dom",
@ -12,6 +14,8 @@
]
},
"exclude": [
"node_modules"
"node_modules",
"lib",
"es"
]
}

11
webpack.config.js
View File

@ -10,14 +10,6 @@ function ignoreMomentLocale(webpackConfig) {
webpackConfig.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
}
// Fix ie8 compatibility
function es3ify(webpackConfig) {
webpackConfig.module.loaders.unshift({
test: /\.(tsx|jsx?)$/,
loader: 'es3ify-loader',
});
}
function addLocales(webpackConfig) {
let packageName = 'antd-with-locales';
if (webpackConfig.entry['antd.min']) {
@ -28,10 +20,9 @@ function addLocales(webpackConfig) {
}
module.exports = function (webpackConfig) {
webpackConfig = getWebpackConfig(webpackConfig);
webpackConfig = getWebpackConfig(webpackConfig, true);
if (process.env.RUN_ENV === 'PRODUCTION') {
webpackConfig.forEach((config) => {
es3ify(config);
ignoreMomentLocale(config);
addLocales(config);
});