mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
Merge branch 'master' into feature-3.8.0
This commit is contained in:
afc163
commit
636c343b16
1
.jest.js
1
.jest.js
@ -48,4 +48,5 @@ module.exports = {
|
||||
tsConfigFile: './tsconfig.test.json',
|
||||
}
|
||||
},
|
||||
testURL: 'http://localhost',
|
||||
};
|
||||
|
||||
@ -15,6 +15,38 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.7.3
|
||||
|
||||
`2018-07-28`
|
||||
|
||||
- 🐞 Fix issue resulting in title not vertical align with icon when setting `labelPlacement` to `vertical` in Steps. [#11426](https://github.com/ant-design/ant-design/pull/11426) [@yoyo837](https://github.com/yoyo837)
|
||||
- 🐞 Fix issue resulting in the children field specified in `fieldName` could not be read correctly in Cascader. [#11311](https://github.com/ant-design/ant-design/pull/11311) [@405go](https://github.com/405go)
|
||||
- TypeScript
|
||||
- 🐞 Fix type definition of Pagination. [#11474](https://github.com/ant-design/ant-design/pull/11474) [@kagd](https://github.com/kagd)
|
||||
- 🐞 Fix type definition of Select. [#11189](https://github.com/ant-design/ant-design/pull/11189<Paste>) [@thisJJ](https://github.com/thisJJ)
|
||||
|
||||
## 3.7.2
|
||||
|
||||
`2018-07-25`
|
||||
|
||||
- DatePicker
|
||||
- 🐞 **Fix issue resulting in year and month can not be changed in control mode.** [b9992f4](https://github.com/ant-design/ant-design/commit/b9992f4a08574efb47b6e6cd80eb1e888b9a1ede)
|
||||
- 🐞 Fix warning of `getDerivedStateFromProp`. [#11398](https://github.com/ant-design/ant-design/pull/11398) [@yoyo837](https://github.com/yoyo837)
|
||||
- Drawer
|
||||
- 🐞 Fix close animation when setting `destroyOnClose`. [#11307](https://github.com/ant-design/ant-design/issues/11307)
|
||||
- 🐞 Fix display issue when using a `vw` value as `width`. [#11326](https://github.com/ant-design/ant-design/issues/11326)
|
||||
- 🐞 Fix `wrapClassName` now working.
|
||||
- 🐞 Fix text overflow of Tooltip. [#11402](https://github.com/ant-design/ant-design/pull/11402) [@weidapao](https://github.com/weidapao)
|
||||
- 🐞 Fix style issue of dark theme Menu in Layout.Header. [#11400](https://github.com/ant-design/ant-design/pull/11400) [@hongxuWei](https://github.com/hongxuWei)
|
||||
- 🐞 Fix the arrow buttons of InputNumber showing wrong positon in a fixed table. [#11408](https://github.com/ant-design/ant-design/issues/11408)
|
||||
- 🐞 Fix issue resulting in Select.Option shows wrong border radius in Select.OptGroup. [6cb6f5c](https://github.com/ant-design/ant-design/commit/6cb6f5c83ed634e67d5b5d0816d11aa0788a74d8)
|
||||
- 🐞 Fix issue resulting in `onChange` was trigged twice when click the filter icon of Table. [#11164](https://github.com/ant-design/ant-design/issues/11164) [@adybionka](https://github.com/adybionka)
|
||||
- 🐞 Fix issue resulting title of Model.confirm shows scrollbar on Firefox. [#11432](https://github.com/ant-design/ant-design/issues/11432)
|
||||
- TypeScript
|
||||
- 🐞 Fix type definition of Radio.Group. [#11409](https://github.com/ant-design/ant-design/pull/11409) [@eddiemoore](https://github.com/eddiemoore)
|
||||
- 🐞 Fix type definition of TreeSelect. [#11442](https://github.com/ant-design/ant-design/pull/11442) [@JribiBelhassen](https://github.com/JribiBelhassen)
|
||||
- 🐞 Fix type definition of Badge. [#11421](https://github.com/ant-design/ant-design/pull/11421) [@zongzi531](https://github.com/zongzi531)
|
||||
|
||||
## 3.7.1
|
||||
|
||||
`2018-07-21`
|
||||
|
||||
@ -15,6 +15,38 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.7.3
|
||||
|
||||
`2018-07-28`
|
||||
|
||||
- 🐞 修复 Steps 在 `labelPlacement` 为 `vertical` 时标题与图标不对齐的问题。[#11426](https://github.com/ant-design/ant-design/pull/11426) [@yoyo837](https://github.com/yoyo837)
|
||||
- 🐞 修复 Cascader 设置 `fieldNames` 时不能正确读取子节点的问题。[#11311](https://github.com/ant-design/ant-design/pull/11311) [@405go](https://github.com/405go)
|
||||
- TypeScript
|
||||
- 🐞 修复 Pagination 类型定义。[#11474](https://github.com/ant-design/ant-design/pull/11474) [@kagd](https://github.com/kagd)
|
||||
- 🐞 修复 Select 类型定义。[#11189](https://github.com/ant-design/ant-design/pull/11189<Paste>) [@thisJJ](https://github.com/thisJJ)
|
||||
|
||||
## 3.7.2
|
||||
|
||||
`2018-07-25`
|
||||
|
||||
- DatePicker
|
||||
- 🐞 **修复在受控模式下不能切换年月的问题。**[b9992f4](https://github.com/ant-design/ant-design/commit/b9992f4a08574efb47b6e6cd80eb1e888b9a1ede)
|
||||
- 🐞 修复在 `getDerivedStateFromProp` 的警告。[#11398](https://github.com/ant-design/ant-design/pull/11398) [@yoyo837](https://github.com/yoyo837)
|
||||
- Drawer
|
||||
- 🐞 修复使用 `destroyOnClose` 时没有关闭动画的问题。[#11307](https://github.com/ant-design/ant-design/issues/11307)
|
||||
- 🐞 修复 `width` 以 `vw` 为单位时的显示错误。[#11326](https://github.com/ant-design/ant-design/issues/11326)
|
||||
- 🐞 修复 `wrapClassName` 属性无效的问题。
|
||||
- 🐞 修复 Tooltip 文字溢出的问题。[#11402](https://github.com/ant-design/ant-design/pull/11402) [@weidapao](https://github.com/weidapao)
|
||||
- 🐞 修复 Menu 在 `theme` 为 `dark` 是在 Layout.Header 里的样式问题。[#11400](https://github.com/ant-design/ant-design/pull/11400) [@hongxuWei](https://github.com/hongxuWei)
|
||||
- 🐞 修复 InputNumber 的箭头按钮在使用了固定列的 Table 里显示错位的问题。[#11408](https://github.com/ant-design/ant-design/issues/11408)
|
||||
- 🐞 修复 Select 使用分组时 Option 的圆角显示错误。[6cb6f5c](https://github.com/ant-design/ant-design/commit/6cb6f5c83ed634e67d5b5d0816d11aa0788a74d8)
|
||||
- 🐞 修复 Table 第一次点击过滤按钮的时候 `onChange` 会被触发两次的问题。[#11164](https://github.com/ant-design/ant-design/issues/11164) [@adybionka](https://github.com/adybionka)
|
||||
- 🐞 修复 Model.confirm 的标题在 Firefox 下会显示滚动条的问题。[#11432](https://github.com/ant-design/ant-design/issues/11432)
|
||||
- TypeScript
|
||||
- 🐞 修复 Radio.Group 类型定义。[#11409](https://github.com/ant-design/ant-design/pull/11409) [@eddiemoore](https://github.com/eddiemoore)
|
||||
- 🐞 修复 TreeSelect 类型定义。[#11442](https://github.com/ant-design/ant-design/pull/11442) [@JribiBelhassen](https://github.com/JribiBelhassen)
|
||||
- 🐞 修复 Badge 类型定义。[#11421](https://github.com/ant-design/ant-design/pull/11421) [@zongzi531](https://github.com/zongzi531)
|
||||
|
||||
## 3.7.1
|
||||
|
||||
`2018-07-21`
|
||||
@ -29,7 +61,7 @@ timeline: true
|
||||
|
||||
## 3.7.0
|
||||
|
||||
3.7.0是一个重磅更新，带来了很多激动人心的变化和新特性。
|
||||
3.7.0 是一个重磅更新，带来了很多激动人心的变化和新特性。
|
||||
以下是一些亮点✨：
|
||||
|
||||
- 🔥 增加抽屉组件 : [`Drawer`](https://ant.design/components/drawer-cn/) [#10791](https://github.com/ant-design/ant-design/pull/10791)
|
||||
|
||||
@ -190,4 +190,40 @@ describe('Cascader', () => {
|
||||
wrapper.setProps({ options: [options[0]] });
|
||||
expect(wrapper.find('.ant-cascader-menu-item').length).toBe(1);
|
||||
});
|
||||
|
||||
it('can use fieldNames', () => {
|
||||
const customerOptions = [{
|
||||
code: 'zhejiang',
|
||||
name: 'Zhejiang',
|
||||
items: [{
|
||||
code: 'hangzhou',
|
||||
name: 'Hangzhou',
|
||||
items: [{
|
||||
code: 'xihu',
|
||||
name: 'West Lake',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
code: 'jiangsu',
|
||||
name: 'Jiangsu',
|
||||
items: [{
|
||||
code: 'nanjing',
|
||||
name: 'Nanjing',
|
||||
items: [{
|
||||
code: 'zhonghuamen',
|
||||
name: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}];
|
||||
const wrapper = mount(<Cascader
|
||||
options={customerOptions}
|
||||
fieldNames={{
|
||||
children: 'items',
|
||||
label: 'name',
|
||||
value: 'code',
|
||||
}}
|
||||
/>);
|
||||
wrapper.instance().handleChange(['zhejiang', 'hangzhou', 'xihu'], customerOptions);
|
||||
expect(wrapper.find('.ant-cascader-picker-label').text().split('/').length).toBe(3);
|
||||
});
|
||||
});
|
||||
|
||||
@ -28,7 +28,7 @@ Cascade selection box.
|
||||
| disabled | whether disabled select | boolean | false |
|
||||
| displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
|
||||
| expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' |
|
||||
| fieldNames | custom field name for label and value and children | object | `{ label: 'label', value: 'value', children: 'children' }` |
|
||||
| fieldNames | custom field name for label and value and children (before 3.7.0 it calls `filedNames` which is typo）) | object | `{ label: 'label', value: 'value', children: 'children' }` |
|
||||
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
|
||||
| loadData | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void` | - |
|
||||
| notFoundContent | Specify content to show when no result matches. | string | 'Not Found' |
|
||||
|
||||
@ -253,6 +253,7 @@ export default class Cascader extends React.Component<CascaderProps, CascaderSta
|
||||
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value;
|
||||
const selectedOptions: CascaderOptionType[] = arrayTreeFilter(options,
|
||||
(o: CascaderOptionType, level: number) => o[names.value] === unwrappedValue[level],
|
||||
{ childrenKeyName: names.children },
|
||||
);
|
||||
const label = selectedOptions.map(o => o[names.label]);
|
||||
return displayRender(label, selectedOptions);
|
||||
|
||||
@ -29,7 +29,7 @@ subtitle: 级联选择
|
||||
| disabled | 禁用 | boolean | false |
|
||||
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
|
||||
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' |
|
||||
| fieldNames | 自定义 options 中 label name children 的字段 | object | `{ label: 'label', value: 'value', children: 'children' }` |
|
||||
| fieldNames | 自定义 options 中 label name children 的字段（注意，3.7.0 之前的版本为 `filedNames`） | object | `{ label: 'label', value: 'value', children: 'children' }` |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
|
||||
| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
|
||||
|
||||
@ -5,6 +5,7 @@ import { polyfill } from 'react-lifecycles-compat';
|
||||
import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
|
||||
import RcDatePicker from 'rc-calendar/lib/Picker';
|
||||
import classNames from 'classnames';
|
||||
import shallowequal from 'shallowequal';
|
||||
import Icon from '../icon';
|
||||
import Tag from '../tag';
|
||||
import warning from '../_util/warning';
|
||||
@ -77,8 +78,13 @@ class RangePicker extends React.Component<any, RangePickerState> {
|
||||
const value = nextProps.value || [];
|
||||
state = {
|
||||
value,
|
||||
showDate: getShowDateFromValue(value) || prevState.showDate,
|
||||
};
|
||||
if (!shallowequal(nextProps.value, prevState.value)) {
|
||||
state = {
|
||||
...state,
|
||||
showDate: getShowDateFromValue(value) || prevState.showDate,
|
||||
};
|
||||
}
|
||||
}
|
||||
if (('open' in nextProps) && prevState.open !== nextProps.open) {
|
||||
state = {
|
||||
|
||||
@ -165,4 +165,15 @@ describe('DatePicker', () => {
|
||||
const input = wrapper.find('.ant-calendar-picker-input').getDOMNode();
|
||||
expect(input.getAttribute('role')).toBe('search');
|
||||
});
|
||||
|
||||
it('changes year/month when under control', () => {
|
||||
const wrapper = mount(
|
||||
<DatePicker value={moment('2018-07-01')} />
|
||||
);
|
||||
openPanel(wrapper);
|
||||
expect(wrapper.find('.ant-calendar-my-select').text()).toBe('Jul2018');
|
||||
wrapper.find('.ant-calendar-prev-year-btn').simulate('click');
|
||||
wrapper.find('.ant-calendar-prev-month-btn').simulate('click');
|
||||
expect(wrapper.find('.ant-calendar-my-select').text()).toBe('Jun2017');
|
||||
});
|
||||
});
|
||||
|
||||
@ -3,7 +3,7 @@ import { mount, render } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import DatePicker from '..';
|
||||
import { setMockDate, resetMockDate } from '../../../tests/utils';
|
||||
import { selectDate } from './utils';
|
||||
import { selectDate, openPanel } from './utils';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
@ -215,4 +215,13 @@ describe('RangePicker', () => {
|
||||
wrapper.find('.ant-calendar-input').at(1).simulate('change', { target: { value: '2016-01-01' } })
|
||||
)).not.toThrow();
|
||||
});
|
||||
|
||||
it('changes year/month when under control', () => {
|
||||
const wrapper = mount(<RangePicker value={[moment('2018-07-01'), moment('2018-07-02')]} />);
|
||||
openPanel(wrapper);
|
||||
expect(wrapper.find('.ant-calendar-my-select').first().text()).toBe('Jul2018');
|
||||
wrapper.find('.ant-calendar-prev-year-btn').first().simulate('click');
|
||||
wrapper.find('.ant-calendar-prev-month-btn').first().simulate('click');
|
||||
expect(wrapper.find('.ant-calendar-my-select').first().text()).toBe('Jun2017');
|
||||
});
|
||||
});
|
||||
|
||||
@ -23,14 +23,20 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
|
||||
showToday: true,
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps(nextProps: PickerProps) {
|
||||
static getDerivedStateFromProps(nextProps: PickerProps, prevState: any) {
|
||||
let state = null;
|
||||
if ('value' in nextProps) {
|
||||
return {
|
||||
state = {
|
||||
value: nextProps.value,
|
||||
showDate: nextProps.value,
|
||||
};
|
||||
if (nextProps.value !== prevState.value) {
|
||||
state = {
|
||||
...state,
|
||||
showDate: nextProps.value,
|
||||
};
|
||||
}
|
||||
}
|
||||
return null;
|
||||
return state;
|
||||
}
|
||||
|
||||
private input: any;
|
||||
|
||||
@ -13,7 +13,6 @@ title:
|
||||
|
||||
The input box comes in three sizes. `default` will be used if `size` is omitted.
|
||||
|
||||
|
||||
````jsx
|
||||
import { DatePicker, Radio } from 'antd';
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
.@{calendar-prefix-cls}-picker-container {
|
||||
.reset-component;
|
||||
font-family: @font-family-no-number;
|
||||
position: absolute;
|
||||
z-index: @zindex-picker;
|
||||
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
}
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
padding-left: 32px;
|
||||
list-style: none;
|
||||
box-sizing: content-box;
|
||||
margin: 0;
|
||||
|
||||
@ -18,7 +18,7 @@ When a numeric value needs to be provided.
|
||||
| defaultValue | initial value | number | |
|
||||
| disabled | disable the input | boolean | false |
|
||||
| formatter | Specifies the format of the value presented | function(value: number \| string): string | - |
|
||||
| max | max vale | number | Infinity |
|
||||
| max | max value | number | Infinity |
|
||||
| min | min value | number | -Infinity |
|
||||
| parser | Specifies the value extracted from formatter | function( string): number | - |
|
||||
| precision | precision of input value | number | - |
|
||||
|
||||
@ -14,7 +14,6 @@ title:
|
||||
`autosize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content.
|
||||
An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
|
||||
|
||||
|
||||
````jsx
|
||||
import { Input } from 'antd';
|
||||
|
||||
|
||||
@ -9,12 +9,10 @@ title:
|
||||
|
||||
我们为 `<Input />` 输入框定义了三种尺寸（大、默认、小），高度分别为 `40px`、`32px` 和 `24px`。
|
||||
|
||||
|
||||
## en-US
|
||||
|
||||
There are three sizes of an Input box: `large` (40px)、`default` (32px) and `small` (24px).
|
||||
|
||||
|
||||
````jsx
|
||||
import { Input } from 'antd';
|
||||
|
||||
|
||||
@ -292,7 +292,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
|
||||
class="ant-layout-footer"
|
||||
style="text-align:center"
|
||||
>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -546,7 +546,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
class="ant-layout-footer"
|
||||
style="text-align:center"
|
||||
>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -650,7 +650,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
|
||||
class="ant-layout-footer"
|
||||
style="text-align:center"
|
||||
>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -820,7 +820,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
class="ant-layout-footer"
|
||||
style="text-align:center"
|
||||
>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -916,7 +916,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
|
||||
class="ant-layout-footer"
|
||||
style="text-align:center"
|
||||
>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1132,7 +1132,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
class="ant-layout-footer"
|
||||
style="text-align:center"
|
||||
>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -78,7 +78,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Layout>,
|
||||
|
||||
@ -43,7 +43,7 @@ ReactDOM.render(
|
||||
<div style={{ background: '#fff', padding: 24, minHeight: 380 }}>Content</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</Footer>
|
||||
</Layout>,
|
||||
mountNode);
|
||||
@ -53,7 +53,7 @@ ReactDOM.render(
|
||||
#components-layout-demo-fixed .logo {
|
||||
width: 120px;
|
||||
height: 31px;
|
||||
background: rgba(255,255,255,.2);
|
||||
background: rgba(255,255,255,.2);
|
||||
margin: 16px 24px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -58,7 +58,7 @@ ReactDOM.render(
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Layout>,
|
||||
|
||||
@ -18,7 +18,7 @@ Two-columns layout. The sider menu can be collapsed when horizontal space is lim
|
||||
|
||||
Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.
|
||||
|
||||
The level of the aisde navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents
|
||||
The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents
|
||||
|
||||
````jsx
|
||||
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
|
||||
@ -87,7 +87,7 @@ class SiderDemo extends React.Component {
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
@ -74,7 +74,7 @@ ReactDOM.render(
|
||||
</Layout>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</Footer>
|
||||
</Layout>,
|
||||
mountNode);
|
||||
@ -84,7 +84,7 @@ ReactDOM.render(
|
||||
#components-layout-demo-top-side .logo {
|
||||
width: 120px;
|
||||
height: 31px;
|
||||
background: rgba(255,255,255,.2);
|
||||
background: rgba(255,255,255,.2);
|
||||
margin: 16px 28px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@ ReactDOM.render(
|
||||
<div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
Ant Design ©2018 Created by Ant UED
|
||||
</Footer>
|
||||
</Layout>,
|
||||
mountNode);
|
||||
@ -59,7 +59,7 @@ ReactDOM.render(
|
||||
#components-layout-demo-top .logo {
|
||||
width: 120px;
|
||||
height: 31px;
|
||||
background: rgba(255,255,255,.2);
|
||||
background: rgba(255,255,255,.2);
|
||||
margin: 16px 24px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ class App extends React.Component {
|
||||
e.preventDefault();
|
||||
this.props.form.validateFields((errors, values) => {
|
||||
if (errors) {
|
||||
console.log('Errors in form!!!');
|
||||
console.log('Errors in the form!!!');
|
||||
return;
|
||||
}
|
||||
console.log('Submit!!!');
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to
|
||||
After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to
|
||||
set position of modal dialog.
|
||||
|
||||
````jsx
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 1.375;
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
// create BFC to avoid
|
||||
// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
|
||||
|
||||
@ -27,6 +27,7 @@ export interface PaginationProps {
|
||||
prefixCls?: string;
|
||||
selectPrefixCls?: string;
|
||||
itemRender?: (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next') => React.ReactNode;
|
||||
role?: string;
|
||||
}
|
||||
|
||||
export interface PaginationConfig extends PaginationProps {
|
||||
|
||||
@ -16,10 +16,10 @@ There are 12 `placement` options available. Use `arrowPointAtCenter` if you want
|
||||
````jsx
|
||||
import { Popconfirm, message, Button } from 'antd';
|
||||
|
||||
const text = 'Are you sure delete this task?';
|
||||
const text = 'Are you sure to delete this task?';
|
||||
|
||||
function confirm() {
|
||||
message.info('Click on Yes.');
|
||||
message.info('Clicked on Yes.');
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
You can custom text format by setting `format`.
|
||||
You can set a custom text by setting the `format` prop.
|
||||
|
||||
````jsx
|
||||
import { Progress } from 'antd';
|
||||
|
||||
@ -17,7 +17,6 @@ Coordinating the selection of provinces and cities is a common use case and demo
|
||||
|
||||
Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable.
|
||||
|
||||
|
||||
````jsx
|
||||
import { Select } from 'antd';
|
||||
|
||||
|
||||
@ -27,6 +27,7 @@ export interface AbstractSelectProps {
|
||||
dropdownMatchSelectWidth?: boolean;
|
||||
onSearch?: (value: string) => any;
|
||||
filterOption?: boolean | ((inputValue: string, option: React.ReactElement<OptionProps>) => any);
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export interface LabeledValue {
|
||||
@ -85,6 +86,7 @@ const SelectPropTypes = {
|
||||
optionLabelProp: PropTypes.string,
|
||||
transitionName: PropTypes.string,
|
||||
choiceTransitionName: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
};
|
||||
|
||||
// => It is needless to export the declaration of below two inner components.
|
||||
|
||||
@ -29,7 +29,8 @@ The whole of the step bar.
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |
|
||||
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
|
||||
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
|
||||
| labelPlacement | support vertial title and description | string | `horizontal` |
|
||||
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
|
||||
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
|
||||
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
|
||||
|
||||
|
||||
@ -30,7 +30,8 @@ title: Steps
|
||||
| --- | --- | --- | --- |
|
||||
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
|
||||
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
|
||||
| progressDot | 点状步骤条，可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
|
||||
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选`vertical`放图标下方 | string | `horizontal` |
|
||||
| progressDot | 点状步骤条，可以设置为一个 function,labelPlacement 将强制为`vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
|
||||
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
|
||||
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
|
||||
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
width: @steps-desciption-max-width;
|
||||
// icon左边距离+一半icon宽度，是content一半的宽度，垂直对齐icon
|
||||
width: (@steps-icon-size / 2 + 36px) * 2;
|
||||
}
|
||||
&-icon {
|
||||
display: inline-block;
|
||||
@ -21,8 +22,5 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,6 +44,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
width: @steps-desciption-max-width;
|
||||
}
|
||||
&-process .@{steps-prefix-cls}-item-icon {
|
||||
width: @steps-current-dot-size;
|
||||
height: @steps-current-dot-size;
|
||||
|
||||
@ -15,7 +15,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
This example shows how to fetch and present data from remote server, and how to implement filtering and sorting in server side by sending related parameters to server.
|
||||
This example shows how to fetch and present data from a remote server, and how to implement filtering and sorting in server side by sending related parameters to server.
|
||||
|
||||
**Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.**
|
||||
|
||||
|
||||
@ -13,7 +13,6 @@ title:
|
||||
|
||||
Another type Tabs, which doesn't support vertical mode.
|
||||
|
||||
|
||||
````jsx
|
||||
import { Tabs } from 'antd';
|
||||
|
||||
|
||||
@ -12,7 +12,6 @@ title:
|
||||
|
||||
Hide default plus icon, and bind event for customized trigger.
|
||||
|
||||
|
||||
````jsx
|
||||
import { Tabs, Button } from 'antd';
|
||||
|
||||
|
||||
@ -13,7 +13,6 @@ title:
|
||||
|
||||
You can add extra actions to the right of Tabs.
|
||||
|
||||
|
||||
````jsx
|
||||
import { Tabs, Button } from 'antd';
|
||||
|
||||
|
||||
@ -13,7 +13,6 @@ title:
|
||||
|
||||
The Tab with Icon.
|
||||
|
||||
|
||||
````jsx
|
||||
import { Tabs, Icon } from 'antd';
|
||||
|
||||
|
||||
@ -13,7 +13,6 @@ title:
|
||||
|
||||
A disabled state of the `TimePicker`.
|
||||
|
||||
|
||||
````jsx
|
||||
import { TimePicker } from 'antd';
|
||||
import moment from 'moment';
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
|
||||
.@{timepicker-prefix-cls}-panel {
|
||||
.reset-component;
|
||||
font-family: @font-family-no-number;
|
||||
z-index: @zindex-picker;
|
||||
position: absolute;
|
||||
|
||||
|
||||
@ -13,7 +13,6 @@ title:
|
||||
|
||||
The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content.
|
||||
|
||||
|
||||
````jsx
|
||||
import { TreeSelect } from 'antd';
|
||||
|
||||
|
||||
@ -4,7 +4,11 @@ import { AbstractSelectProps } from '../select';
|
||||
export interface TreeData {
|
||||
key: string;
|
||||
value: string;
|
||||
label: React.ReactNode;
|
||||
/**
|
||||
* @deprecated Please use `title` instead.
|
||||
*/
|
||||
label?: React.ReactNode;
|
||||
title?: React.ReactNode;
|
||||
children?: TreeData[];
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ title: Tree
|
||||
|
||||
## When To Use
|
||||
|
||||
Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a `Tree`.
|
||||
Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a `Tree`.
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -42,10 +42,10 @@ class MyUpload extends React.Component {
|
||||
let fileList = info.fileList;
|
||||
|
||||
// 1. Limit the number of uploaded files
|
||||
// Only to show two recent uploaded files, and old ones will be replaced by the new
|
||||
// Only to show two recent uploaded files, and old ones will be replaced by the new
|
||||
fileList = fileList.slice(-2);
|
||||
|
||||
// 2. read from response and show file link
|
||||
// 2. Read from response and show file link
|
||||
fileList = fileList.map((file) => {
|
||||
if (file.response) {
|
||||
// Component will show file.url as link
|
||||
@ -54,7 +54,7 @@ class MyUpload extends React.Component {
|
||||
return file;
|
||||
});
|
||||
|
||||
// 3. filter successfully uploaded files according to response from server
|
||||
// 3. Filter successfully uploaded files according to response from server
|
||||
fileList = fileList.filter((file) => {
|
||||
if (file.response) {
|
||||
return file.response.status === 'success';
|
||||
@ -74,7 +74,7 @@ class MyUpload extends React.Component {
|
||||
return (
|
||||
<Upload {...props} fileList={this.state.fileList}>
|
||||
<Button>
|
||||
<Icon type="upload" /> upload
|
||||
<Icon type="upload" /> Upload
|
||||
</Button>
|
||||
</Upload>
|
||||
);
|
||||
|
||||
@ -13,7 +13,6 @@ title:
|
||||
|
||||
If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
|
||||
|
||||
|
||||
````jsx
|
||||
import { Upload, Button, Icon } from 'antd';
|
||||
|
||||
@ -48,14 +47,14 @@ ReactDOM.render(
|
||||
<div>
|
||||
<Upload {...props}>
|
||||
<Button>
|
||||
<Icon type="upload" /> upload
|
||||
<Icon type="upload" /> Upload
|
||||
</Button>
|
||||
</Upload>
|
||||
<br />
|
||||
<br />
|
||||
<Upload {...props2}>
|
||||
<Button>
|
||||
<Icon type="upload" /> upload
|
||||
<Icon type="upload" /> Upload
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>,
|
||||
|
||||
@ -42,7 +42,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
|
||||
|
||||
### onChange
|
||||
|
||||
> The function will be called when uploading is in progress, completed or failed
|
||||
> The function will be called when uploading is in progress, completed or failed
|
||||
|
||||
When uploading state change, it returns:
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "3.7.1",
|
||||
"version": "3.7.3",
|
||||
"title": "Ant Design",
|
||||
"description": "An enterprise-class UI design language and React-based implementation",
|
||||
"homepage": "http://ant.design/",
|
||||
@ -125,7 +125,7 @@
|
||||
"eslint-config-airbnb": "^17.0.0",
|
||||
"eslint-plugin-babel": "^5.0.0",
|
||||
"eslint-plugin-import": "^2.2.0",
|
||||
"eslint-plugin-jsx-a11y": "6.0.2",
|
||||
"eslint-plugin-jsx-a11y": "6.1.1",
|
||||
"eslint-plugin-markdown": "~1.0.0-beta.4",
|
||||
"eslint-plugin-react": "^7.10.0",
|
||||
"eslint-tinker": "^0.5.0",
|
||||
@ -134,7 +134,7 @@
|
||||
"immutability-helper": "^2.5.0",
|
||||
"intersection-observer": "^0.5.0",
|
||||
"jest": "^23.2.0",
|
||||
"jsdom": "~11.10.0",
|
||||
"jsdom": "^11.12.0",
|
||||
"jsonml.js": "^0.1.0",
|
||||
"lint-staged": "^7.0.0",
|
||||
"lz-string": "^1.4.4",
|
||||
@ -168,7 +168,7 @@
|
||||
"reqwest": "^2.0.5",
|
||||
"rimraf": "^2.5.4",
|
||||
"scrollama": "^1.4.1",
|
||||
"stylelint": "9.3.0",
|
||||
"stylelint": "9.4.0",
|
||||
"stylelint-config-standard": "^18.0.0",
|
||||
"typescript": "~2.9.1",
|
||||
"unified": "^7.0.0",
|
||||
|
||||
@ -2,34 +2,20 @@ import React from 'react';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { Icon, Badge } from 'antd';
|
||||
|
||||
export default class CopyableIcon extends React.Component {
|
||||
state = {
|
||||
justCopied: false,
|
||||
};
|
||||
const CopyableIcon = ({ type, isNew, justCopied, onCopied }) => (
|
||||
<CopyToClipboard
|
||||
text={`<Icon type="${type}" />`}
|
||||
onCopy={() => onCopied(type)}
|
||||
>
|
||||
<li className={justCopied === type ? 'copied' : ''}>
|
||||
<Icon type={type} />
|
||||
<span className="anticon-class">
|
||||
<Badge dot={isNew}>
|
||||
{type}
|
||||
</Badge>
|
||||
</span>
|
||||
</li>
|
||||
</CopyToClipboard>
|
||||
);
|
||||
|
||||
onCopied = () => {
|
||||
this.setState({ justCopied: true }, () => {
|
||||
setTimeout(() => {
|
||||
this.setState({ justCopied: false });
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { type, isNew } = this.props;
|
||||
const { justCopied } = this.state;
|
||||
const text = `<Icon type="${type}" />`;
|
||||
return (
|
||||
<CopyToClipboard text={text} onCopy={this.onCopied}>
|
||||
<li className={justCopied ? 'copied' : ''}>
|
||||
<Icon type={type} />
|
||||
<span className="anticon-class">
|
||||
<Badge dot={isNew}>
|
||||
{type}
|
||||
</Badge>
|
||||
</span>
|
||||
</li>
|
||||
</CopyToClipboard>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default CopyableIcon;
|
||||
|
||||
@ -7,6 +7,18 @@ export default class IconSet extends React.Component {
|
||||
icons: [],
|
||||
}
|
||||
|
||||
state = {
|
||||
justCopied: null,
|
||||
};
|
||||
|
||||
onCopied = (type) => {
|
||||
this.setState({ justCopied: type }, () => {
|
||||
setTimeout(() => {
|
||||
this.setState({ justCopied: null });
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
icons = {
|
||||
direction: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'verticle-left', 'verticle-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold'],
|
||||
suggestion: ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'plus-square-o', 'minus-square', 'minus-square-o', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'close', 'close-circle', 'close-circle-o', 'close-square', 'close-square-o', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'clock-circle-o', 'clock-circle', 'warning'],
|
||||
@ -24,6 +36,7 @@ export default class IconSet extends React.Component {
|
||||
];
|
||||
|
||||
render() {
|
||||
const { justCopied } = this.state;
|
||||
const { className, catigory } = this.props;
|
||||
const listClassName = classNames({
|
||||
'anticons-list': true,
|
||||
@ -33,7 +46,13 @@ export default class IconSet extends React.Component {
|
||||
return (
|
||||
<ul className={listClassName}>
|
||||
{this.icons[catigory].map(type => (
|
||||
<CopyableIcon key={type} type={type} isNew={this.newIcons.indexOf(type) >= 0} />
|
||||
<CopyableIcon
|
||||
key={type}
|
||||
type={type}
|
||||
isNew={this.newIcons.indexOf(type) >= 0}
|
||||
justCopied={justCopied}
|
||||
onCopied={this.onCopied}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user