mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
Merge branch 'feature-3.8.0' of https://github.com/ant-design/ant-design into feature/svg-icon
This commit is contained in:
HeskeyBaozi
commit
6c42d711e8
@ -21,6 +21,52 @@ references:
|
||||
environment:
|
||||
REACT: 16
|
||||
|
||||
workflow: &workflow
|
||||
jobs:
|
||||
- setup:
|
||||
filters:
|
||||
branches:
|
||||
ignore: gh-pages
|
||||
- dist:
|
||||
requires:
|
||||
- setup
|
||||
- compile:
|
||||
requires:
|
||||
- setup
|
||||
- lint:
|
||||
requires:
|
||||
- setup
|
||||
- test_dist:
|
||||
requires:
|
||||
- dist
|
||||
- test_lib:
|
||||
requires:
|
||||
- compile
|
||||
- test_es:
|
||||
requires:
|
||||
- compile
|
||||
- test_dom:
|
||||
requires:
|
||||
- setup
|
||||
- test_node:
|
||||
requires:
|
||||
- setup
|
||||
- test_dist_15:
|
||||
requires:
|
||||
- dist
|
||||
- test_lib_15:
|
||||
requires:
|
||||
- compile
|
||||
- test_es_15:
|
||||
requires:
|
||||
- compile
|
||||
- test_dom_15:
|
||||
requires:
|
||||
- setup
|
||||
- test_node_15:
|
||||
requires:
|
||||
- setup
|
||||
|
||||
jobs:
|
||||
setup:
|
||||
<<: *container_config
|
||||
@ -177,45 +223,14 @@ jobs:
|
||||
|
||||
workflows:
|
||||
version: 2
|
||||
build-test:
|
||||
jobs:
|
||||
- setup
|
||||
- dist:
|
||||
requires:
|
||||
- setup
|
||||
- compile:
|
||||
requires:
|
||||
- setup
|
||||
- lint:
|
||||
requires:
|
||||
- setup
|
||||
- test_dist:
|
||||
requires:
|
||||
- dist
|
||||
- test_lib:
|
||||
requires:
|
||||
- compile
|
||||
- test_es:
|
||||
requires:
|
||||
- compile
|
||||
- test_dom:
|
||||
requires:
|
||||
- setup
|
||||
- test_node:
|
||||
requires:
|
||||
- setup
|
||||
- test_dist_15:
|
||||
requires:
|
||||
- dist
|
||||
- test_lib_15:
|
||||
requires:
|
||||
- compile
|
||||
- test_es_15:
|
||||
requires:
|
||||
- compile
|
||||
- test_dom_15:
|
||||
requires:
|
||||
- setup
|
||||
- test_node_15:
|
||||
requires:
|
||||
- setup
|
||||
build_test:
|
||||
<<: *workflow
|
||||
nightly:
|
||||
<<: *workflow
|
||||
triggers:
|
||||
- schedule:
|
||||
cron: "0 0 * * *"
|
||||
filters:
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
|
||||
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)
|
||||
|
||||
@ -44,3 +44,4 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
|
||||
| value | The current selected date | [moment](http://momentjs.com/) | current date |
|
||||
| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - |
|
||||
| onSelect | Callback for when a date is selected | function(date: moment） | - |
|
||||
| onChange | Callback for when date changes | function(date: moment） | - |
|
||||
|
||||
@ -36,6 +36,7 @@ export interface CalendarProps {
|
||||
style?: React.CSSProperties;
|
||||
onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
|
||||
onSelect?: (date?: moment.Moment) => void;
|
||||
onChange?: (date?: moment.Moment) => void;
|
||||
disabledDate?: (current: moment.Moment) => boolean;
|
||||
validRange ?: [moment.Moment, moment.Moment];
|
||||
}
|
||||
@ -53,6 +54,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
|
||||
mode: 'month',
|
||||
onSelect: noop,
|
||||
onPanelChange: noop,
|
||||
onChange: noop,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
@ -68,6 +70,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
|
||||
onPanelChange: PropTypes.func,
|
||||
value: PropTypes.object,
|
||||
onSelect: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
constructor(props: CalendarProps) {
|
||||
@ -157,10 +160,13 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
|
||||
}
|
||||
|
||||
onPanelChange(value: moment.Moment, mode: CalendarMode | undefined) {
|
||||
const { onPanelChange } = this.props;
|
||||
const { onPanelChange, onChange } = this.props;
|
||||
if (onPanelChange) {
|
||||
onPanelChange(value, mode);
|
||||
}
|
||||
if (onChange && value !== this.state.value) {
|
||||
onChange(value);
|
||||
}
|
||||
}
|
||||
|
||||
onSelect = (value: moment.Moment) => {
|
||||
|
||||
@ -45,3 +45,4 @@ title: Calendar
|
||||
| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
|
||||
| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 |
|
||||
| onSelect | 点击选择日期回调 | function(date: moment） | 无 |
|
||||
| onChange | 日期变化回调 | function(date: moment） | 无 |
|
||||
|
||||
@ -773,13 +773,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="false"
|
||||
class=" ant-tabs-tab"
|
||||
aria-selected="true"
|
||||
class="ant-tabs-tab-active ant-tabs-tab"
|
||||
role="tab"
|
||||
>
|
||||
tab1
|
||||
@ -792,6 +789,9 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
>
|
||||
tab2
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -799,11 +799,11 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-content ant-tabs-content-animated"
|
||||
style="display:none"
|
||||
style="margin-left:0%"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
|
||||
aria-hidden="false"
|
||||
class="ant-tabs-tabpane ant-tabs-tabpane-active"
|
||||
role="tabpanel"
|
||||
/>
|
||||
<div
|
||||
@ -870,9 +870,6 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="false"
|
||||
@ -897,6 +894,9 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
||||
>
|
||||
project
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -65,6 +65,7 @@ class TabsCard extends React.Component {
|
||||
title="Card title"
|
||||
extra={<a href="#">More</a>}
|
||||
tabList={tabList}
|
||||
activeTabKey={this.state.key}
|
||||
onTabChange={(key) => { this.onTabChange(key, 'key'); }}
|
||||
>
|
||||
{contentList[this.state.key]}
|
||||
@ -83,7 +84,5 @@ class TabsCard extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<TabsCard />,
|
||||
mountNode);
|
||||
ReactDOM.render(<TabsCard />, mountNode);
|
||||
````
|
||||
|
||||
@ -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 = {
|
||||
@ -352,6 +358,8 @@ class RangePicker extends React.Component<any, RangePickerState> {
|
||||
tabIndex={props.disabled ? -1 : 0}
|
||||
onFocus={props.onFocus}
|
||||
onBlur={props.onBlur}
|
||||
onMouseEnter={props.onMouseEnter}
|
||||
onMouseLeave={props.onMouseLeave}
|
||||
>
|
||||
<RcDatePicker
|
||||
{...props}
|
||||
|
||||
@ -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;
|
||||
@ -183,6 +189,8 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
|
||||
style={props.style}
|
||||
onFocus={props.onFocus}
|
||||
onBlur={props.onBlur}
|
||||
onMouseEnter={props.onMouseEnter}
|
||||
onMouseLeave={props.onMouseLeave}
|
||||
>
|
||||
<RcDatePicker
|
||||
{...props}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -67,6 +67,20 @@ export default function wrapPicker(Picker: React.ComponentClass<any>, defaultFor
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseEnter = (e: React.MouseEventHandler<HTMLInputElement>) => {
|
||||
const { onMouseEnter } = this.props;
|
||||
if (onMouseEnter) {
|
||||
onMouseEnter(e);
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseLeave = (e: React.MouseEventHandler<HTMLInputElement>) => {
|
||||
const { onMouseLeave } = this.props;
|
||||
if (onMouseLeave) {
|
||||
onMouseLeave(e);
|
||||
}
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.picker.focus();
|
||||
}
|
||||
@ -134,6 +148,8 @@ export default function wrapPicker(Picker: React.ComponentClass<any>, defaultFor
|
||||
onOpenChange={this.handleOpenChange}
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -540,6 +540,7 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
id="gender"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
@ -547,6 +548,8 @@ exports[`renders ./components/form/demo/coordinated.md correctly 1`] = `
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
data-__field="[object Object]"
|
||||
data-__meta="[object Object]"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -1725,6 +1728,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
id="prefix"
|
||||
style="width:70px"
|
||||
>
|
||||
<div
|
||||
@ -1733,6 +1737,8 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
data-__field="[object Object]"
|
||||
data-__meta="[object Object]"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -1796,6 +1802,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
id="website"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
@ -1803,6 +1810,8 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
data-__field="[object Object]"
|
||||
data-__meta="[object Object]"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
@ -2445,6 +2454,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
id="select"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
@ -2452,6 +2462,8 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
data-__field="[object Object]"
|
||||
data-__meta="[object Object]"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -2504,6 +2516,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
id="select-multiple"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
@ -2511,6 +2524,8 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--multiple"
|
||||
data-__field="[object Object]"
|
||||
data-__meta="[object Object]"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -325,7 +325,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>
|
||||
`;
|
||||
@ -669,7 +669,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>
|
||||
@ -823,7 +823,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>
|
||||
@ -1105,7 +1105,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>
|
||||
@ -1201,7 +1201,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>
|
||||
`;
|
||||
@ -1472,7 +1472,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(
|
||||
|
||||
@ -43,6 +43,17 @@ exports[`renders ./components/popover/demo/control.md correctly 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popover/demo/hover-with-click.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Hover and click / 悬停并单击
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
|
||||
86
components/popover/demo/hover-with-click.md
Normal file
86
components/popover/demo/hover-with-click.md
Normal file
@ -0,0 +1,86 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 悬停点击弹出窗口
|
||||
en-US: Hover with click popover
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
以下示例显示如何创建可悬停和单击的弹出窗口。
|
||||
|
||||
## en-US
|
||||
|
||||
The following example shows how to create a popover which can be hovered and clicked.
|
||||
|
||||
````jsx
|
||||
import { Popover, Button } from 'antd';
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
clicked: false,
|
||||
hovered: false,
|
||||
};
|
||||
|
||||
hide = () => {
|
||||
this.setState({
|
||||
clicked: false,
|
||||
hovered: false,
|
||||
});
|
||||
}
|
||||
|
||||
handleHoverChange = (visible) => {
|
||||
this.setState({
|
||||
hovered: visible,
|
||||
clicked: false,
|
||||
});
|
||||
}
|
||||
|
||||
handleClickChange = (visible) => {
|
||||
this.setState({
|
||||
clicked: visible,
|
||||
hovered: false,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const hoverContent = (
|
||||
<div>
|
||||
This is hover content.
|
||||
</div>
|
||||
);
|
||||
const clickContent = (
|
||||
<div>
|
||||
This is click content.
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Popover
|
||||
style={{ width: 500 }}
|
||||
content={hoverContent}
|
||||
title="Hover title"
|
||||
trigger="hover"
|
||||
visible={this.state.hovered}
|
||||
onVisibleChange={this.handleHoverChange}
|
||||
>
|
||||
<Popover
|
||||
content={(
|
||||
<div>
|
||||
{clickContent}
|
||||
<a onClick={this.hide}>Close</a>
|
||||
</div>
|
||||
)}
|
||||
title="Click title"
|
||||
trigger="click"
|
||||
visible={this.state.clicked}
|
||||
onVisibleChange={this.handleClickChange}
|
||||
>
|
||||
<Button>Hover and click / 悬停并单击</Button>
|
||||
</Popover>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
````
|
||||
@ -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;
|
||||
|
||||
@ -708,10 +708,11 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
className: selectionColumnClass,
|
||||
fixed: rowSelection.fixed,
|
||||
width: rowSelection.columnWidth,
|
||||
title: rowSelection.columnTitle,
|
||||
};
|
||||
if (rowSelection.type !== 'radio') {
|
||||
const checkboxAllDisabled = data.every((item, index) => this.getCheckboxPropsByItem(item, index).disabled);
|
||||
selectionColumn.title = (
|
||||
selectionColumn.title = selectionColumn.title || (
|
||||
<SelectionCheckboxAll
|
||||
store={this.store}
|
||||
locale={locale}
|
||||
|
||||
@ -421,4 +421,25 @@ describe('Table.rowSelection', () => {
|
||||
expect(checkbox.props().indeterminate).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/11042
|
||||
it('add columnTitle for rowSelection', () => {
|
||||
const wrapper = mount(
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowSelection={{
|
||||
columnTitle: '多选',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
expect(wrapper.find('thead tr span').at(0).text()).toBe('多选');
|
||||
wrapper.setProps({
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
columnTitle: '单选',
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('thead tr span').at(0).text()).toBe('单选');
|
||||
});
|
||||
});
|
||||
|
||||
@ -9529,6 +9529,259 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-default ant-table-bordered ant-table-scroll-position-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<div
|
||||
class="ant-table-body"
|
||||
>
|
||||
<table
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:200px;min-width:200px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="react-resizable"
|
||||
>
|
||||
<span>
|
||||
Date
|
||||
</span>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
style="touch-action:none"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="react-resizable"
|
||||
>
|
||||
<span>
|
||||
Amount
|
||||
</span>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
style="touch-action:none"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="react-resizable"
|
||||
>
|
||||
<span>
|
||||
Type
|
||||
</span>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
style="touch-action:none"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="react-resizable"
|
||||
>
|
||||
<span>
|
||||
Note
|
||||
</span>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
style="touch-action:none"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<span>
|
||||
Action
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
2018-02-11
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
120
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
2018-03-11
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
243
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
2018-04-11
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
98
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-disabled ant-pagination-prev"
|
||||
title="Previous Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-disabled ant-pagination-next"
|
||||
title="Next Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
|
||||
@ -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.**
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 26
|
||||
order: 27
|
||||
title:
|
||||
en-US: Dynamic Settings
|
||||
zh-CN: 动态控制表格属性
|
||||
|
||||
135
components/table/demo/resizable-column.md
Normal file
135
components/table/demo/resizable-column.md
Normal file
@ -0,0 +1,135 @@
|
||||
---
|
||||
order: 26
|
||||
title:
|
||||
en-US: Resizable column
|
||||
zh-CN: 可伸缩列
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
集成 react-resizable 来实现可伸缩列。
|
||||
|
||||
## en-US
|
||||
|
||||
Implement resizable column by integrate with react-resizable.
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
import { Resizable } from 'react-resizable';
|
||||
|
||||
const ResizeableTitle = (props) => {
|
||||
const { onResize, width, ...restProps } = props;
|
||||
|
||||
if (!width) {
|
||||
return <th {...restProps} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Resizable width={width} height={0} onResize={onResize}>
|
||||
<th {...restProps} />
|
||||
</Resizable>
|
||||
);
|
||||
};
|
||||
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
columns: [{
|
||||
title: 'Date',
|
||||
dataIndex: 'date',
|
||||
width: 200,
|
||||
}, {
|
||||
title: 'Amount',
|
||||
dataIndex: 'amount',
|
||||
width: 100,
|
||||
}, {
|
||||
title: 'Type',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
}, {
|
||||
title: 'Note',
|
||||
dataIndex: 'note',
|
||||
width: 100,
|
||||
}, {
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
render: () => (
|
||||
<a href="javascript:;">Delete</a>
|
||||
),
|
||||
}],
|
||||
};
|
||||
|
||||
components = {
|
||||
header: {
|
||||
cell: ResizeableTitle,
|
||||
},
|
||||
};
|
||||
|
||||
data = [{
|
||||
key: 0,
|
||||
date: '2018-02-11',
|
||||
amount: 120,
|
||||
type: 'income',
|
||||
note: 'transfer',
|
||||
}, {
|
||||
key: 1,
|
||||
date: '2018-03-11',
|
||||
amount: 243,
|
||||
type: 'income',
|
||||
note: 'transfer',
|
||||
}, {
|
||||
key: 2,
|
||||
date: '2018-04-11',
|
||||
amount: 98,
|
||||
type: 'income',
|
||||
note: 'transfer',
|
||||
}];
|
||||
|
||||
handleResize = index => (e, { size }) => {
|
||||
this.setState(({ columns }) => {
|
||||
const nextColumns = [...columns];
|
||||
nextColumns[index] = {
|
||||
...nextColumns[index],
|
||||
width: size.width,
|
||||
};
|
||||
return { columns: nextColumns };
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const columns = this.state.columns.map((col, index) => ({
|
||||
...col,
|
||||
onHeaderCell: column => ({
|
||||
width: column.width,
|
||||
onResize: this.handleResize(index),
|
||||
}),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Table
|
||||
bordered
|
||||
components={this.components}
|
||||
columns={columns}
|
||||
dataSource={this.data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
#components-table-demo-resizable-column .react-resizable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#components-table-demo-resizable-column .react-resizable-handle {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
right: -5px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
````
|
||||
@ -154,6 +154,7 @@ Properties for row selection.
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| columnWidth | Set the width of the selection column | string\|number | - |
|
||||
| columnTitle | Set the title of the selection column | string\|React.ReactNode | - |
|
||||
| fixed | Fixed selection column on the left | boolean | - |
|
||||
| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
|
||||
| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` |
|
||||
|
||||
@ -154,6 +154,7 @@ const columns = [{
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| columnWidth | 自定义列表选择框宽度 | string\|number | - |
|
||||
| columnTitle | 自定义列表选择框标题 | string\|React.ReactNode | - |
|
||||
| fixed | 把选择框列固定在左边 | boolean | - |
|
||||
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
|
||||
| hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
|
||||
|
||||
@ -78,6 +78,7 @@ export interface TableRowSelection<T> {
|
||||
fixed?: boolean;
|
||||
columnWidth?: string | number;
|
||||
selectWay?: TableSelectWay;
|
||||
columnTitle?: string | React.ReactNode;
|
||||
}
|
||||
export type SortOrder = 'descend' | 'ascend';
|
||||
export interface SorterResult<T> {
|
||||
|
||||
@ -37,9 +37,6 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -64,6 +61,9 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
|
||||
>
|
||||
Tab 3
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -131,9 +131,6 @@ exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -158,6 +155,9 @@ exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
|
||||
>
|
||||
Tab 3
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -227,9 +227,6 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -254,6 +251,9 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
|
||||
>
|
||||
Tab Title 3
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -342,9 +342,6 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -397,6 +394,9 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -459,9 +459,6 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -486,6 +483,9 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
|
||||
>
|
||||
Tab 3
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -576,9 +576,6 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -643,6 +640,9 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
|
||||
Tab 3
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -722,9 +722,6 @@ exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -749,6 +746,9 @@ exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
|
||||
>
|
||||
Tab 3
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -816,9 +816,6 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="false"
|
||||
@ -888,6 +885,9 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
|
||||
Tab 2
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -988,9 +988,6 @@ exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -1015,6 +1012,9 @@ exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
|
||||
>
|
||||
Tab 3
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1147,9 +1147,6 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -1174,6 +1171,9 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
|
||||
>
|
||||
Tab 3
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1288,9 +1288,6 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -1379,6 +1376,9 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
|
||||
>
|
||||
Tab 11
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -37,9 +37,6 @@ exports[`Tabs tabPosition remove card 1`] = `
|
||||
<div
|
||||
class="ant-tabs-nav ant-tabs-nav-animated"
|
||||
>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-selected="true"
|
||||
@ -48,6 +45,9 @@ exports[`Tabs tabPosition remove card 1`] = `
|
||||
>
|
||||
foo
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -2,6 +2,9 @@ import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Tooltip from '..';
|
||||
import Button from '../../button';
|
||||
import DatePicker from '../../date-picker';
|
||||
|
||||
const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
|
||||
|
||||
describe('Tooltip', () => {
|
||||
it('check `onVisibleChange` arguments', () => {
|
||||
@ -174,4 +177,29 @@ describe('Tooltip', () => {
|
||||
|
||||
jest.dontMock('rc-trigger', suit);
|
||||
});
|
||||
|
||||
it('should works for date picker', async () => {
|
||||
const onVisibleChange = jest.fn();
|
||||
|
||||
const wrapper = mount(
|
||||
<Tooltip
|
||||
title="date picker"
|
||||
onVisibleChange={onVisibleChange}
|
||||
>
|
||||
<DatePicker />
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
expect(wrapper.find('span.ant-calendar-picker')).toHaveLength(1);
|
||||
const picker = wrapper.find('span.ant-calendar-picker').at(0);
|
||||
picker.simulate('mouseenter');
|
||||
await delay(100);
|
||||
expect(onVisibleChange).toBeCalledWith(true);
|
||||
expect(wrapper.instance().tooltip.props.visible).toBe(true);
|
||||
|
||||
picker.simulate('mouseleave');
|
||||
await delay(100);
|
||||
expect(onVisibleChange).toBeCalledWith(false);
|
||||
expect(wrapper.instance().tooltip.props.visible).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
@ -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[];
|
||||
}
|
||||
|
||||
|
||||
@ -2,13 +2,13 @@ import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { getFullKeyList, calcExpandedKeys } from 'rc-tree/lib/util';
|
||||
import { conductExpandParent, convertTreeToEntities } from 'rc-tree/lib/util';
|
||||
|
||||
import Tree, {
|
||||
TreeProps, AntdTreeNodeAttribute,
|
||||
AntTreeNodeExpandedEvent, AntTreeNodeSelectedEvent, AntTreeNode,
|
||||
} from './Tree';
|
||||
import { calcRangeKeys } from './util';
|
||||
import { calcRangeKeys, getFullKeyList } from './util';
|
||||
import Icon from '../icon';
|
||||
|
||||
export type ExpandAction = false | 'click' | 'doubleClick';
|
||||
@ -47,7 +47,8 @@ export default class DirectoryTree extends React.Component<DirectoryTreeProps, D
|
||||
constructor(props: DirectoryTreeProps) {
|
||||
super(props);
|
||||
|
||||
const { defaultExpandAll, defaultExpandParent, expandedKeys, defaultExpandedKeys } = props;
|
||||
const { defaultExpandAll, defaultExpandParent, expandedKeys, defaultExpandedKeys, children } = props;
|
||||
const { keyEntities } = convertTreeToEntities(children);
|
||||
|
||||
// Selected keys
|
||||
this.state = {
|
||||
@ -58,7 +59,7 @@ export default class DirectoryTree extends React.Component<DirectoryTreeProps, D
|
||||
if (defaultExpandAll) {
|
||||
this.state.expandedKeys = getFullKeyList(props.children);
|
||||
} else if (defaultExpandParent) {
|
||||
this.state.expandedKeys = calcExpandedKeys(expandedKeys || defaultExpandedKeys, props);
|
||||
this.state.expandedKeys = conductExpandParent(expandedKeys || defaultExpandedKeys, keyEntities);
|
||||
} else {
|
||||
this.state.expandedKeys = defaultExpandedKeys;
|
||||
}
|
||||
|
||||
@ -142,7 +142,10 @@ export default class Tree extends React.Component<TreeProps, any> {
|
||||
prefixCls: 'ant-tree',
|
||||
checkable: false,
|
||||
showIcon: false,
|
||||
openAnimation: animation,
|
||||
openAnimation: {
|
||||
...animation,
|
||||
appear: null,
|
||||
},
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-icon-hide"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -32,12 +33,14 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
|
||||
class="ant-tree-treenode-disabled ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"
|
||||
@ -47,7 +50,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
|
||||
title="parent 1-0"
|
||||
>
|
||||
<span
|
||||
@ -56,62 +59,10 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
|
||||
parent 1-0
|
||||
</span>
|
||||
</span>
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-checkbox ant-tree-checkbox-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||
title="leaf"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
leaf
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||
title="leaf"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
leaf
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -136,9 +87,11 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -175,11 +128,12 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
|
||||
exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-icon-hide"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-indeterminate"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -204,9 +158,11 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -231,9 +187,11 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -258,6 +216,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -282,6 +241,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -308,6 +268,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -332,9 +293,11 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -359,6 +322,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -383,6 +347,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -409,6 +374,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -435,6 +401,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -459,6 +426,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -487,11 +455,12 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
|
||||
exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -516,9 +485,11 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -543,6 +514,7 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -573,11 +545,12 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
|
||||
exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -623,9 +596,11 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class=""
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -671,6 +646,7 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -718,6 +694,7 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -763,9 +740,11 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class=""
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -811,6 +790,7 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -862,11 +842,12 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
|
||||
exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-icon-hide draggable-tree"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -886,9 +867,11 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -908,9 +891,11 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -930,6 +915,7 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -949,6 +935,7 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -970,6 +957,7 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -989,6 +977,7 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1010,6 +999,7 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -1029,6 +1019,7 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1052,11 +1043,12 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
|
||||
exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-icon-hide"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -1074,6 +1066,7 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -1091,6 +1084,7 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class=""
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1112,11 +1106,12 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
|
||||
exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-icon-hide ant-tree-show-line"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -1134,9 +1129,11 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -1154,9 +1151,11 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1174,6 +1173,7 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1191,6 +1191,7 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1210,6 +1211,7 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -1227,6 +1229,7 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -1285,11 +1288,12 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
|
||||
</span>
|
||||
<ul
|
||||
class="ant-tree ant-tree-icon-hide"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -1312,6 +1316,7 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -1334,6 +1339,7 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -53,9 +54,11 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -101,6 +104,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -148,6 +152,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -193,9 +198,11 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -241,6 +248,7 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -292,11 +300,12 @@ exports[`Directory Tree defaultExpandAll 1`] = `
|
||||
exports[`Directory Tree defaultExpandParent 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -338,6 +347,7 @@ exports[`Directory Tree defaultExpandParent 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -383,11 +393,12 @@ exports[`Directory Tree defaultExpandParent 1`] = `
|
||||
exports[`Directory Tree expand click 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -433,10 +444,12 @@ exports[`Directory Tree expand click 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
style="height: 0px; opacity: 0;"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -478,6 +491,7 @@ exports[`Directory Tree expand click 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -521,6 +535,7 @@ exports[`Directory Tree expand click 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -566,11 +581,12 @@ exports[`Directory Tree expand click 1`] = `
|
||||
exports[`Directory Tree expand click 2`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -612,10 +628,12 @@ exports[`Directory Tree expand click 2`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
style="height: 0px; opacity: 1;"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -657,6 +675,7 @@ exports[`Directory Tree expand click 2`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -700,6 +719,7 @@ exports[`Directory Tree expand click 2`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -745,11 +765,12 @@ exports[`Directory Tree expand click 2`] = `
|
||||
exports[`Directory Tree expand double click 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -795,10 +816,12 @@ exports[`Directory Tree expand double click 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
style="height: 0px; opacity: 0;"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -840,6 +863,7 @@ exports[`Directory Tree expand double click 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -883,6 +907,7 @@ exports[`Directory Tree expand double click 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -928,11 +953,12 @@ exports[`Directory Tree expand double click 1`] = `
|
||||
exports[`Directory Tree expand double click 2`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -974,10 +1000,12 @@ exports[`Directory Tree expand double click 2`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
style="height: 0px; opacity: 1;"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1019,6 +1047,7 @@ exports[`Directory Tree expand double click 2`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1062,6 +1091,7 @@ exports[`Directory Tree expand double click 2`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -1107,11 +1137,12 @@ exports[`Directory Tree expand double click 2`] = `
|
||||
exports[`Directory Tree expand with state control click 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -1157,10 +1188,12 @@ exports[`Directory Tree expand with state control click 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
style=""
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1208,11 +1241,12 @@ exports[`Directory Tree expand with state control click 1`] = `
|
||||
exports[`Directory Tree expand with state control doubleClick 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -1258,10 +1292,12 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
style=""
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1309,11 +1345,12 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
|
||||
exports[`Directory Tree expandedKeys update 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_close"
|
||||
@ -1355,6 +1392,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -1400,10 +1438,12 @@ exports[`Directory Tree expandedKeys update 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open ant-motion-collapse"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
style="height: 0px; opacity: 0;"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1445,6 +1485,7 @@ exports[`Directory Tree expandedKeys update 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-close"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1492,11 +1533,12 @@ exports[`Directory Tree expandedKeys update 1`] = `
|
||||
exports[`Directory Tree group select 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -1542,9 +1584,11 @@ exports[`Directory Tree group select 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1590,6 +1634,7 @@ exports[`Directory Tree group select 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1637,6 +1682,7 @@ exports[`Directory Tree group select 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -1682,9 +1728,11 @@ exports[`Directory Tree group select 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1730,6 +1778,7 @@ exports[`Directory Tree group select 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1781,11 +1830,12 @@ exports[`Directory Tree group select 1`] = `
|
||||
exports[`Directory Tree group select 2`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -1831,9 +1881,11 @@ exports[`Directory Tree group select 2`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1879,6 +1931,7 @@ exports[`Directory Tree group select 2`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -1926,6 +1979,7 @@ exports[`Directory Tree group select 2`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -1971,9 +2025,11 @@ exports[`Directory Tree group select 2`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -2019,6 +2075,7 @@ exports[`Directory Tree group select 2`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -2070,11 +2127,12 @@ exports[`Directory Tree group select 2`] = `
|
||||
exports[`Directory Tree selectedKeys update 1`] = `
|
||||
<ul
|
||||
class="ant-tree ant-tree-directory"
|
||||
role="tree-node"
|
||||
role="tree"
|
||||
unselectable="on"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -2120,9 +2178,11 @@ exports[`Directory Tree selectedKeys update 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -2168,6 +2228,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -2215,6 +2276,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
@ -2260,9 +2322,11 @@ exports[`Directory Tree selectedKeys update 1`] = `
|
||||
<ul
|
||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||
data-expanded="true"
|
||||
role="group"
|
||||
>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open ant-tree-treenode-selected"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
@ -2308,6 +2372,7 @@ exports[`Directory Tree selectedKeys update 1`] = `
|
||||
</li>
|
||||
<li
|
||||
class="ant-tree-treenode-switcher-open"
|
||||
role="treeitem"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -31,10 +31,11 @@
|
||||
user-select: none;
|
||||
border-top: 2px transparent solid;
|
||||
border-bottom: 2px transparent solid;
|
||||
margin-top: -2px;
|
||||
/* Required to make elements draggable in old WebKit */
|
||||
-khtml-user-drag: element;
|
||||
-webkit-user-drag: element;
|
||||
|
||||
line-height: @tree-title-height - 4px;
|
||||
}
|
||||
&.drag-over {
|
||||
> span[draggable] {
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { traverseTreeNodes } from 'rc-tree/lib/util';
|
||||
|
||||
export interface TraverseData {
|
||||
key: string,
|
||||
}
|
||||
import { getNodeChildren, convertTreeToEntities } from 'rc-tree/lib/util';
|
||||
import { AntTreeNodeProps } from './Tree';
|
||||
|
||||
enum Record {
|
||||
None,
|
||||
@ -11,8 +8,27 @@ enum Record {
|
||||
End,
|
||||
}
|
||||
|
||||
// TODO: Move this logic into `rc-tree`
|
||||
function traverseNodesKey(rootChildren: React.ReactNode | React.ReactNode[], callback: (key: string | number | null) => boolean) {
|
||||
const nodeList:React.ReactNode[] = getNodeChildren(rootChildren) || [];
|
||||
|
||||
function processNode(node: React.ReactElement<AntTreeNodeProps>) {
|
||||
const { key, props: { children } } = node;
|
||||
if (callback(key) !== false) {
|
||||
traverseNodesKey(children, callback);
|
||||
}
|
||||
}
|
||||
|
||||
nodeList.forEach(processNode);
|
||||
}
|
||||
|
||||
export function getFullKeyList(children: React.ReactNode | React.ReactNode[]) {
|
||||
const { keyEntities } = convertTreeToEntities(children);
|
||||
return Object.keys(keyEntities);
|
||||
}
|
||||
|
||||
/** 计算选中范围，只考虑expanded情况以优化性能 */
|
||||
export function calcRangeKeys(nodeList: React.ReactNode | React.ReactNode[], expandedKeys: string[], startKey?: string, endKey?: string): string[] {
|
||||
export function calcRangeKeys(rootChildren: React.ReactNode | React.ReactNode[], expandedKeys: string[], startKey?: string, endKey?: string): string[] {
|
||||
const keys: string[] = [];
|
||||
let record: Record = Record.None;
|
||||
|
||||
@ -27,7 +43,7 @@ export function calcRangeKeys(nodeList: React.ReactNode | React.ReactNode[], exp
|
||||
return key === startKey || key === endKey;
|
||||
}
|
||||
|
||||
traverseTreeNodes(nodeList, ({ key }: TraverseData) => {
|
||||
traverseNodesKey(rootChildren, (key: string) => {
|
||||
if (record === Record.End) {
|
||||
return false;
|
||||
}
|
||||
@ -50,6 +66,8 @@ export function calcRangeKeys(nodeList: React.ReactNode | React.ReactNode[], exp
|
||||
if (expandedKeys.indexOf(key) === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
return keys;
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -30,6 +30,8 @@ ReactDOM.render(<ColorPalettes />, mountNode);
|
||||
|
||||
Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。
|
||||
|
||||
> Ant Design 三代色板的历史可以参看社区文章：[Ant Design 色板生成算法演进之路](https://zhuanlan.zhihu.com/p/32422584)。
|
||||
|
||||
### 中性色板
|
||||
|
||||
中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。
|
||||
|
||||
17
package.json
17
package.json
@ -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/",
|
||||
@ -71,15 +71,15 @@
|
||||
"rc-pagination": "~1.16.1",
|
||||
"rc-progress": "~2.2.2",
|
||||
"rc-rate": "~2.4.0",
|
||||
"rc-select": "~8.0.7",
|
||||
"rc-select": "~8.1.1",
|
||||
"rc-slider": "~8.6.0",
|
||||
"rc-steps": "~3.1.0",
|
||||
"rc-switch": "~1.6.0",
|
||||
"rc-table": "~6.2.2",
|
||||
"rc-tabs": "~9.2.0",
|
||||
"rc-tabs": "~9.3.2",
|
||||
"rc-time-picker": "~3.3.0",
|
||||
"rc-tooltip": "~3.7.0",
|
||||
"rc-tree": "~1.12.0",
|
||||
"rc-tree": "~1.13.0",
|
||||
"rc-tree-select": "~2.0.5",
|
||||
"rc-trigger": "^2.5.4",
|
||||
"rc-upload": "~2.5.0",
|
||||
@ -127,7 +127,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",
|
||||
@ -136,7 +136,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",
|
||||
@ -160,6 +160,7 @@
|
||||
"react-github-button": "^0.1.1",
|
||||
"react-infinite-scroller": "^1.0.15",
|
||||
"react-intl": "^2.0.1",
|
||||
"react-resizable": "^1.7.5",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-sublime-video": "^0.2.0",
|
||||
"react-virtualized": "~9.20.0",
|
||||
@ -170,7 +171,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",
|
||||
@ -198,7 +199,7 @@
|
||||
"start": "rimraf _site && mkdir _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js",
|
||||
"start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js",
|
||||
"site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js",
|
||||
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site",
|
||||
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site && cp -r .circleci _site",
|
||||
"deploy": "bisheng gh-pages --push-only",
|
||||
"pub": "antd-tools run pub",
|
||||
"prepublish": "antd-tools run guard",
|
||||
|
||||
@ -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