mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
merge master
This commit is contained in:
zombiej
commit
bde335c761
@ -16,6 +16,7 @@ site/theme/template/Content/Article.jsx
|
||||
site/theme/template/Content/EditButton.jsx
|
||||
site/theme/template/Resources/*.jsx
|
||||
site/theme/template/Resources/**/*.jsx
|
||||
site/theme/template/NotFound.jsx
|
||||
typings
|
||||
es/**/*
|
||||
lib/**/*
|
||||
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -53,4 +53,5 @@ site/theme/template/Layout/SiteContext.jsx
|
||||
site/theme/template/Content/Article.jsx
|
||||
site/theme/template/Content/EditButton.jsx
|
||||
site/theme/template/Resources/*.jsx
|
||||
site/theme/template/Resources/**/*.jsx
|
||||
site/theme/template/Resources/**/*.jsx
|
||||
site/theme/template/NotFound.jsx
|
||||
@ -15,6 +15,38 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.0.1
|
||||
|
||||
`2020-03-04`
|
||||
|
||||
- Form
|
||||
- 🐞 Fix Form help control will get `react@16.13` warning. [#21800](https://github.com/ant-design/ant-design/pull/21800) [#21702](https://github.com/ant-design/ant-design/pull/21702)
|
||||
- 🐞 Fix Form.Item exceed Form width when content is too long. [#21682](https://github.com/ant-design/ant-design/pull/21682)
|
||||
- Input
|
||||
- 🐞 Fix TextArea style get warning in `react@16.13`. [#21703](https://github.com/ant-design/ant-design/pull/21703)
|
||||
- 🐞 Fix Input.Search extra border when has `prefix`. [#21753](https://github.com/ant-design/ant-design/pull/21753)
|
||||
- Table
|
||||
- 🐞 Fix Table column with `filtered` not working. [#21825](https://github.com/ant-design/ant-design/pull/21825)
|
||||
- 🐞 Fix Table locale not work. [#21772](https://github.com/ant-design/ant-design/pull/21772)
|
||||
- 🐞 Fix Table.Column `sortOrder` is not working in JSX mode. [#21719](https://github.com/ant-design/ant-design/pull/21719)
|
||||
- 🐞 Fix Table fixed column with sorted status style issue. [#21679](https://github.com/ant-design/ant-design/pull/21679)
|
||||
- 🐞 Fix Dropdown menu arrow position. [#21768](https://github.com/ant-design/ant-design/pull/21768) [@xrkffgg](https://github.com/xrkffgg)
|
||||
- 🐞 Fix List `bordered` and `split` props conflict. [#21784](https://github.com/ant-design/ant-design/pull/21784) [@MXWXZ](https://github.com/MXWXZ)
|
||||
- 🐞 Fix Menu.Item `a` tag hidden bug. [#21699](https://github.com/ant-design/ant-design/pull/21699) [@shaodahong](https://github.com/shaodahong)
|
||||
- 🐞 Fix `message.open` crash when `icon` is not passed. [#21747](https://github.com/ant-design/ant-design/pull/21747) [@AshoneA](https://github.com/AshoneA)
|
||||
- 🐞 Fix Result `status` cannot assigned to string or number type. [#21691](https://github.com/ant-design/ant-design/pull/21691)
|
||||
- 🐞 Fix Descriptions warning for duplicate key. [#21688](https://github.com/ant-design/ant-design/pull/21688)
|
||||
- 💄 Optimize Calendar header style in small screen. [#21813](https://github.com/ant-design/ant-design/pull/21813)
|
||||
- 💄 Radio.Group not wrapping now. [#21813](https://github.com/ant-design/ant-design/pull/21813)
|
||||
- 🛠 Refactor icons import code to reduce webpack disabled tree shaking bundle size. [#21752](https://github.com/ant-design/ant-design/pull/21752)
|
||||
- Typescript
|
||||
- 🐞 Fix Radio.Button type error. [#21807](https://github.com/ant-design/ant-design/pull/21807) [@jhoneybee](https://github.com/jhoneybee)
|
||||
- 🐞 fix `TreeSelect.SHOW_*` type. [#21791](https://github.com/ant-design/ant-design/pull/21791) [@TennyZhuang](https://github.com/TennyZhuang)
|
||||
- 🐞 Fix TreeSelect missing `suffix` define. [#21714](https://github.com/ant-design/ant-design/pull/21714)
|
||||
- 🐞 Fix Drawer `forceRender` TypeScript definite. [#21774](https://github.com/ant-design/ant-design/pull/21774)
|
||||
- 🐞 Fix Tree `treeData` define. [#21756](https://github.com/ant-design/ant-design/pull/21756)
|
||||
- 🐞 Fix Form.Item `renderProps` return type define. [#21716](https://github.com/ant-design/ant-design/pull/21716)
|
||||
|
||||
## 4.0.0
|
||||
|
||||
`2020-02-28`
|
||||
@ -129,14 +161,14 @@ timeline: true
|
||||
`2020-01-27`
|
||||
|
||||
- 🛠 Use native Date instead of moment to get timestamp in Countdown component. [#21108](https://github.com/ant-design/ant-design/pull/21108) [@morenyang](https://github.com/morenyang)
|
||||
- 🐞 Fix Input `suffix / prefix` style issue with `addonBefore / addonAfter`. [#21105](https://github.com/ant-design/ant-design/pull/21105) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Fix Input `suffix / prefix` style issue with `addonBefore / addonAfter`. [#21105](https://github.com/ant-design/ant-design/pull/21105)
|
||||
- 💄 Improved Timeline component style in RTL mode. [#21068](https://github.com/ant-design/ant-design/pull/21068) [@xrkffgg](https://github.com/xrkffgg)
|
||||
- 💄 Update `clearfix` mixin to remove legacy `zoom` descriptor. [#21109](https://github.com/ant-design/ant-design/pull/21109) [@morenyang](https://github.com/morenyang)
|
||||
- 💄Card component use `@font-size-base` instead of inline `14px`. [#21107](https://github.com/ant-design/ant-design/pull/21107) [@morenyang](https://github.com/morenyang)
|
||||
- 💄 Adjust Layout component to let `className` get higher priority. [#21074](https://github.com/ant-design/ant-design/pull/21074) [@yoyo837](https://github.com/yoyo837)
|
||||
- Typescript
|
||||
- 🐞 Fix Tree wrong event type of AntTreeNodeMouseEvent. [#21102](https://github.com/ant-design/ant-design/pull/21102) [@Jirka-Lhotka](https://github.com/Jirka-Lhotka)
|
||||
- 🐞 Fix Form.Item return type define. [#21067](https://github.com/ant-design/ant-design/pull/21067) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Fix Form.Item return type define. [#21067](https://github.com/ant-design/ant-design/pull/21067)
|
||||
|
||||
## 4.0.0-rc.2
|
||||
|
||||
|
||||
@ -15,6 +15,38 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.0.1
|
||||
|
||||
`2020-03-04`
|
||||
|
||||
- Form
|
||||
- 🐞 修复 Form help 受控时会导致 `react@16.13` 报警告的问题。[#21800](https://github.com/ant-design/ant-design/pull/21800) [#21702](https://github.com/ant-design/ant-design/pull/21702)
|
||||
- 🐞 修复 Form.Item 宽度在内容过长时会超出 Form 的样式问题。[#21682](https://github.com/ant-design/ant-design/pull/21682)
|
||||
- Input
|
||||
- 🐞 修复 TextArea 样式在 `react@16.13` 下会报警告的问题。[#21703](https://github.com/ant-design/ant-design/pull/21703)
|
||||
- 🐞 修复 Input.Search 有 `prefix` 时的右边框样式问题。[#21753](https://github.com/ant-design/ant-design/pull/21753)
|
||||
- Table
|
||||
- 🐞 修复 Table column 的 `filtered` 属性无效的问题。[#21825](https://github.com/ant-design/ant-design/pull/21825)
|
||||
- 🐞 修复 Table `locale` 无效的问题。[#21772](https://github.com/ant-design/ant-design/pull/21772)
|
||||
- 🐞 修复 Table.Column `sortOrder` 在 JSX 模式下无效的问题。[#21719](https://github.com/ant-design/ant-design/pull/21719)
|
||||
- 🐞 修复 Table 固定列在排序状态时的样式问题。[#21679](https://github.com/ant-design/ant-design/pull/21679)
|
||||
- 🐞 修复 Dropdown 菜单里箭头图标的位置。[#21768](https://github.com/ant-design/ant-design/pull/21768) [@xrkffgg](https://github.com/xrkffgg)
|
||||
- 🐞 修复 List 组件 `bordered` 和 `split` 属性冲突的问题。[#21784](https://github.com/ant-design/ant-design/pull/21784) [@MXWXZ](https://github.com/MXWXZ)
|
||||
- 🐞 修复 Menu.Item 中 `a` 标签换行无法显示的问题。[#21699](https://github.com/ant-design/ant-design/pull/21699) [@shaodahong](https://github.com/shaodahong)
|
||||
- 🐞 修复 `message.open` 中 `icon` 为空时报错的问题。[#21747](https://github.com/ant-design/ant-design/pull/21747) [@AshoneA](https://github.com/AshoneA)
|
||||
- 🐞 修复 Result `status` 属性不能赋值 string 或者 number 类型的问题。[#21691](https://github.com/ant-design/ant-design/pull/21691)
|
||||
- 🐞 修复 Descriptions 报 `key` 重复的警告信息。[#21688](https://github.com/ant-design/ant-design/pull/21688)
|
||||
- 💄 优化 Calendar 在窄屏幕下的标题样式。[#21813](https://github.com/ant-design/ant-design/pull/21813)
|
||||
- 💄 Radio.Group 不再折行。[#21813](https://github.com/ant-design/ant-design/pull/21813)
|
||||
- 🛠 重构 icons 导入代码以降低没有开启 tree shaking 的打包尺寸。[#21752](https://github.com/ant-design/ant-design/pull/21752)
|
||||
- Typescript
|
||||
- 🐞 修复 Radio.Button 的类型定义。[#21807](https://github.com/ant-design/ant-design/pull/21807) [@jhoneybee](https://github.com/jhoneybee)
|
||||
- 🐞 修复了 `TreeSelect.SHOW_*` 的类型问题。[#21791](https://github.com/ant-design/ant-design/pull/21791) [@TennyZhuang](https://github.com/TennyZhuang)
|
||||
- 🐞 修复 TreeSelect 缺失 `suffix` 定义。[#21714](https://github.com/ant-design/ant-design/pull/21714)
|
||||
- 🐞 修复 Drawer `forceRender` 的 TypeScript 定义。[#21774](https://github.com/ant-design/ant-design/pull/21774)
|
||||
- 🐞 修复 Tree `treeData` 定义。[#21756](https://github.com/ant-design/ant-design/pull/21756)
|
||||
- 🐞 修复 Form.Item `renderProps` 的类型定义。[#21716](https://github.com/ant-design/ant-design/pull/21716)
|
||||
|
||||
## 4.0.0
|
||||
|
||||
`2020-02-28`
|
||||
@ -129,15 +161,14 @@ timeline: true
|
||||
`2020-01-27`
|
||||
|
||||
- 🛠 移除 Countdown 组件的 `moment` 依赖。[#21108](https://github.com/ant-design/ant-design/pull/21108) [@morenyang](https://github.com/morenyang)
|
||||
- 🐞 修复 Input `suffix / prefix` 样式与 `addonBefore / addonAfter` 冲突的问题。[#21105](https://github.com/ant-design/ant-design/pull/21105) [@zombieJ](https://github.com/zombieJ)
|
||||
- 💄 完善 Timeline 组件 RTL 模式下样式。[#21068](https://github.com/ant-design/ant-design/pull/21068) [@xrkffgg](https://github.com/xrkffgg)
|
||||
- 🐞 修复 Input `suffix / prefix` 样式与 `addonBefore / addonAfter` 冲突的问题。[#21105](https://github.com/ant-design/ant-design/pull/21105)
|
||||
- 💄 完善 Timeline 组件 RTL 模式下的样式。[#21068](https://github.com/ant-design/ant-design/pull/21068) [@xrkffgg](https://github.com/xrkffgg)
|
||||
- 💄 更新基本样式 `clearfix` 移除过时的 `zoom` 属性。[#21109](https://github.com/ant-design/ant-design/pull/21109) [@morenyang](https://github.com/morenyang)
|
||||
- 💄Card 组件使用 `@font-size-base` 变量以代替固定的 `14px`。[#21107](https://github.com/ant-design/ant-design/pull/21107) [@morenyang](https://github.com/morenyang)
|
||||
- 💄 Card 组件使用 `@font-size-base` 变量以代替固定的 `14px`。[#21107](https://github.com/ant-design/ant-design/pull/21107) [@morenyang](https://github.com/morenyang)
|
||||
- 💄 调整 Layout 组件传入的 `className` 到最后以提高其优先级。[#21074](https://github.com/ant-design/ant-design/pull/21074) [@yoyo837](https://github.com/yoyo837)
|
||||
|
||||
- Typescript
|
||||
- 🐞 修复 Tree 中 AntTreeNodeMouseEvent 的定义问题。[#21102](https://github.com/ant-design/ant-design/pull/21102) [@Jirka-Lhotka](https://github.com/Jirka-Lhotka)
|
||||
- 🐞 修复 Form.Item 返回的类型定义。[#21067](https://github.com/ant-design/ant-design/pull/21067) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 修复 Form.Item 返回的类型定义。[#21067](https://github.com/ant-design/ant-design/pull/21067)
|
||||
|
||||
## 4.0.0-rc.2
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
An enterprise-class UI design language and React UI library.
|
||||
|
||||
[](https://circleci.com/gh/ant-design/ant-design)  [](https://codecov.io/gh/ant-design/ant-design/branch/master) [](https://www.npmjs.com/package/antd) [](http://npmjs.com/antd)
|
||||
[](https://circleci.com/gh/ant-design/ant-design) [](https://github.com/ant-design/ant-design/actions?query=workflow%3Atest) [](https://codecov.io/gh/ant-design/ant-design/branch/master) [](https://www.npmjs.com/package/antd) [](http://npmjs.com/antd)
|
||||
|
||||
[](https://david-dm.org/ant-design/ant-design) [](https://david-dm.org/ant-design/ant-design?type=dev) [](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) [](https://issuehunt.io/r/ant-design/ant-design)
|
||||
|
||||
|
||||
@ -70,6 +70,8 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
|
||||
|
||||
lastCount?: string | number | null;
|
||||
|
||||
private timeout?: number;
|
||||
|
||||
constructor(props: ScrollNumberProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@ -82,17 +84,26 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
|
||||
this.lastCount = prevState.count;
|
||||
const { animateStarted } = this.state;
|
||||
if (animateStarted) {
|
||||
// eslint-disable-next-line react/no-did-update-set-state
|
||||
this.setState(
|
||||
(__, props) => ({
|
||||
animateStarted: false,
|
||||
count: props.count,
|
||||
}),
|
||||
this.onAnimated,
|
||||
);
|
||||
this.clearTimeout();
|
||||
// Let browser has time to reset the scroller before actually
|
||||
// performing the transition.
|
||||
this.timeout = setTimeout(() => {
|
||||
// eslint-disable-next-line react/no-did-update-set-state
|
||||
this.setState(
|
||||
(__, props) => ({
|
||||
animateStarted: false,
|
||||
count: props.count,
|
||||
}),
|
||||
this.onAnimated,
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.clearTimeout();
|
||||
}
|
||||
|
||||
getPositionByNum(num: number, i: number) {
|
||||
const { count } = this.state;
|
||||
const currentCount = Math.abs(Number(count));
|
||||
@ -209,6 +220,13 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
|
||||
render() {
|
||||
return <ConfigConsumer>{this.renderScrollNumber}</ConfigConsumer>;
|
||||
}
|
||||
|
||||
private clearTimeout(): void {
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ScrollNumber;
|
||||
|
||||
@ -27,6 +27,7 @@ describe('Badge', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper = mount(<Badge count="3.5" />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(() => wrapper.unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it('badge dot not showing count == 0', () => {
|
||||
|
||||
@ -5847,6 +5847,7 @@ exports[`ConfigProvider components DatePicker DatePicker configProvider 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -5890,6 +5891,7 @@ exports[`ConfigProvider components DatePicker DatePicker normal 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -5933,6 +5935,7 @@ exports[`ConfigProvider components DatePicker DatePicker prefixCls 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -5976,6 +5979,7 @@ exports[`ConfigProvider components DatePicker MonthPicker configProvider 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -6019,6 +6023,7 @@ exports[`ConfigProvider components DatePicker MonthPicker normal 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -6062,6 +6067,7 @@ exports[`ConfigProvider components DatePicker MonthPicker prefixCls 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -6303,6 +6309,7 @@ exports[`ConfigProvider components DatePicker WeekPicker configProvider 1`] = `
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -6346,6 +6353,7 @@ exports[`ConfigProvider components DatePicker WeekPicker normal 1`] = `
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -6389,6 +6397,7 @@ exports[`ConfigProvider components DatePicker WeekPicker prefixCls 1`] = `
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -7775,7 +7784,7 @@ exports[`ConfigProvider components Menu configProvider 1`] = `
|
||||
class="config-menu-item-group-list"
|
||||
>
|
||||
<li
|
||||
class="config-menu-item"
|
||||
class="config-menu-item config-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
@ -7829,7 +7838,7 @@ exports[`ConfigProvider components Menu normal 1`] = `
|
||||
class="ant-menu-item-group-list"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
@ -7883,7 +7892,7 @@ exports[`ConfigProvider components Menu prefixCls 1`] = `
|
||||
class="prefix-Menu-item-group-list"
|
||||
>
|
||||
<li
|
||||
class="prefix-Menu-item"
|
||||
class="prefix-Menu-item prefix-Menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
@ -12978,6 +12987,7 @@ Array [
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -14388,6 +14398,7 @@ Array [
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -15798,6 +15809,7 @@ Array [
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -53,7 +53,7 @@ return (
|
||||
|
||||
#### 为什么我使用了 ConfigProvider `locale`，时间类组件的国际化还有问题？
|
||||
|
||||
请检查是否设置了 `moment.locale('zh-cn')`，或者是否有两个版本的 moment 共存。
|
||||
请检查是否正确设置了 `moment.locale('zh-cn')`。或者是否有两个版本的 moment 共存。
|
||||
|
||||
#### 配置 `getPopupContainer` 导致 Modal 报错？
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@ Array [
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -621,6 +622,7 @@ Array [
|
||||
placeholder="Избери дата"
|
||||
readonly=""
|
||||
size="12"
|
||||
title="2000-01-01"
|
||||
value="2000-01-01"
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -12,6 +12,7 @@ exports[`WeekPicker should support style prop 1`] = `
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -12,6 +12,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -51,6 +52,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -90,6 +92,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -129,6 +132,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
|
||||
placeholder="Select year"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -172,6 +176,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -211,6 +216,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -250,6 +256,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -289,6 +296,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
|
||||
placeholder="Select year"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -580,6 +588,7 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -685,6 +694,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -725,6 +735,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -919,6 +930,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="21"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -958,6 +970,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -1063,6 +1076,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -1102,6 +1116,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="21"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -1265,6 +1280,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -1308,6 +1324,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -1371,6 +1388,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -1434,6 +1452,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -1587,6 +1606,7 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="21"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2198,6 +2218,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2237,6 +2258,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2338,6 +2360,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2381,6 +2404,7 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
|
||||
placeholder="Start"
|
||||
readonly=""
|
||||
size="21"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2419,6 +2443,7 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
|
||||
placeholder="End"
|
||||
readonly=""
|
||||
size="21"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2462,6 +2487,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2501,6 +2527,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2602,6 +2629,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2641,6 +2669,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2661,6 +2690,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2724,6 +2754,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2748,6 +2779,7 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="21"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -11,6 +11,7 @@ exports[`mount rtl render component should be rendered correctly in RTL directio
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -52,6 +53,7 @@ exports[`mount rtl render component should be rendered correctly in RTL directio
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -93,6 +95,7 @@ exports[`mount rtl render component should be rendered correctly in RTL directio
|
||||
placeholder="Select week"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -791,6 +791,7 @@ exports[`Picker format by locale date 1`] = `
|
||||
placeholder="请选择日期"
|
||||
readonly=""
|
||||
size="12"
|
||||
title="2000-01-01"
|
||||
value="2000-01-01"
|
||||
/>
|
||||
<span
|
||||
@ -856,6 +857,7 @@ exports[`Picker format by locale dateTime 1`] = `
|
||||
placeholder="请选择日期"
|
||||
readonly=""
|
||||
size="21"
|
||||
title="2000-01-01 00:00:00"
|
||||
value="2000-01-01 00:00:00"
|
||||
/>
|
||||
<span
|
||||
@ -921,6 +923,7 @@ exports[`Picker format by locale month 1`] = `
|
||||
placeholder="请选择月份"
|
||||
readonly=""
|
||||
size="12"
|
||||
title="2000-01"
|
||||
value="2000-01"
|
||||
/>
|
||||
<span
|
||||
@ -986,6 +989,7 @@ exports[`Picker format by locale week 1`] = `
|
||||
placeholder="请选择周"
|
||||
readonly=""
|
||||
size="12"
|
||||
title="1999-52周"
|
||||
value="1999-52周"
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -148,6 +148,7 @@
|
||||
font-size: @font-size-lg;
|
||||
line-height: @font-size-lg;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
|
||||
.@{picker-prefix-cls}-rtl & {
|
||||
transform: rotate(180deg);
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
function notEmpty(val: any) {
|
||||
return val !== undefined && val !== null;
|
||||
}
|
||||
|
||||
export interface CellProps {
|
||||
itemPrefixCls: string;
|
||||
span: number;
|
||||
@ -31,15 +35,15 @@ const Cell: React.FC<CellProps> = ({
|
||||
<Component
|
||||
className={classNames(
|
||||
{
|
||||
[`${itemPrefixCls}-item-label`]: label,
|
||||
[`${itemPrefixCls}-item-content`]: content,
|
||||
[`${itemPrefixCls}-item-label`]: notEmpty(label),
|
||||
[`${itemPrefixCls}-item-content`]: notEmpty(content),
|
||||
},
|
||||
className,
|
||||
)}
|
||||
style={style}
|
||||
colSpan={span}
|
||||
>
|
||||
{label || content}
|
||||
{notEmpty(label) ? label : content}
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
|
||||
@ -216,4 +216,15 @@ describe('Descriptions', () => {
|
||||
matchSpan(2, [2, 2]);
|
||||
matchSpan(4, [3, 1]);
|
||||
});
|
||||
|
||||
it('number value should render correct', () => {
|
||||
const wrapper = mount(
|
||||
<Descriptions bordered>
|
||||
<Descriptions.Item label={0}>{0}</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('th').hasClass('ant-descriptions-item-label')).toBeTruthy();
|
||||
expect(wrapper.find('td').hasClass('ant-descriptions-item-content')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -17,10 +17,9 @@ import { toArray, getFieldId } from './util';
|
||||
const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
|
||||
export type ValidateStatus = typeof ValidateStatuses[number];
|
||||
|
||||
type RenderChildren = (form: FormInstance) => React.ReactElement | null;
|
||||
type RenderChildren = (form: FormInstance) => React.ReactNode;
|
||||
type RcFieldProps = Omit<FieldProps, 'children'>;
|
||||
type ChildrenType = React.ReactElement | RenderChildren | React.ReactElement[] | null;
|
||||
type ChildrenNodeType = Exclude<ChildrenType, RenderChildren>;
|
||||
|
||||
export interface FormItemProps
|
||||
extends FormItemLabelProps,
|
||||
@ -68,11 +67,23 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
validateTrigger = 'onChange',
|
||||
...restProps
|
||||
} = props;
|
||||
const destroyRef = React.useRef(false);
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const formContext = React.useContext(FormContext);
|
||||
const { updateItemErrors } = React.useContext(FormItemContext);
|
||||
const [domErrorVisible, setDomErrorVisible] = React.useState(!!help);
|
||||
const [inlineErrors, setInlineErrors] = React.useState<Record<string, string[]>>({});
|
||||
const [domErrorVisible, innerSetDomErrorVisible] = React.useState(!!help);
|
||||
const [inlineErrors, innerSetInlineErrors] = React.useState<Record<string, string[]>>({});
|
||||
|
||||
function setDomErrorVisible(visible: boolean) {
|
||||
if (!destroyRef.current) {
|
||||
innerSetDomErrorVisible(visible);
|
||||
}
|
||||
}
|
||||
function setInlineErrors(errors: Record<string, string[]>) {
|
||||
if (!destroyRef.current) {
|
||||
innerSetInlineErrors(errors);
|
||||
}
|
||||
}
|
||||
|
||||
const { name: formName } = formContext;
|
||||
const hasName = hasValidName(name);
|
||||
@ -83,6 +94,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
// Should clean up if Field removed
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
destroyRef.current = true;
|
||||
updateItemErrors(nameRef.current.join('__SPLIT__'), []);
|
||||
};
|
||||
}, []);
|
||||
@ -105,7 +117,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
};
|
||||
|
||||
function renderLayout(
|
||||
baseChildren: ChildrenNodeType,
|
||||
baseChildren: React.ReactNode,
|
||||
fieldId?: string,
|
||||
meta?: Meta,
|
||||
isRequired?: boolean,
|
||||
@ -202,7 +214,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
const isRenderProps = typeof children === 'function';
|
||||
|
||||
if (!hasName && !isRenderProps && !dependencies) {
|
||||
return renderLayout(children as ChildrenNodeType);
|
||||
return renderLayout(children);
|
||||
}
|
||||
|
||||
const variables: Record<string, string> = {};
|
||||
@ -257,7 +269,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
id: fieldId,
|
||||
};
|
||||
|
||||
let childNode: ChildrenNodeType = null;
|
||||
let childNode: React.ReactNode = null;
|
||||
if (Array.isArray(children) && hasName) {
|
||||
warning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
|
||||
childNode = children;
|
||||
|
||||
@ -3099,6 +3099,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -3346,6 +3347,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -3411,6 +3413,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="21"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -3476,6 +3479,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -3717,6 +3721,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -5500,6 +5505,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -5589,6 +5595,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -5893,6 +5900,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -5960,6 +5968,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -413,6 +413,8 @@ describe('Form', () => {
|
||||
).toEqual("'name' is required");
|
||||
|
||||
await change(wrapper, 0, 'p');
|
||||
await delay(100);
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-form-item-explain')
|
||||
@ -615,4 +617,30 @@ describe('Form', () => {
|
||||
.text(),
|
||||
).toEqual('Bamboo is good!');
|
||||
});
|
||||
|
||||
it('return same form instance', () => {
|
||||
const instances = new Set();
|
||||
|
||||
const App = () => {
|
||||
const [form] = Form.useForm();
|
||||
instances.add(form);
|
||||
const [, forceUpdate] = React.useState({});
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
forceUpdate({});
|
||||
}}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const wrapper = mount(<App />);
|
||||
for (let i = 0; i < 5; i += 1) {
|
||||
wrapper.find('button').simulate('click');
|
||||
}
|
||||
expect(instances.size).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
@form-prefix-cls: ~'@{ant-prefix}-form';
|
||||
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
|
||||
@form-font-height: ceil(@font-size-base * @line-height-base);
|
||||
@form-item-label-height: @input-height-base;
|
||||
|
||||
.@{form-prefix-cls} {
|
||||
.reset-component;
|
||||
@ -87,8 +88,7 @@
|
||||
// display: inline;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
height: @input-height-base;
|
||||
height: @form-item-label-height;
|
||||
color: @label-color;
|
||||
font-size: @form-item-label-font-size;
|
||||
|
||||
|
||||
@ -73,23 +73,29 @@ export interface FormInstance extends RcFormInstance {
|
||||
}
|
||||
|
||||
export function useForm(form?: FormInstance): [FormInstance] {
|
||||
const wrapForm: FormInstance = form || {
|
||||
...useRcForm()[0],
|
||||
__INTERNAL__: {},
|
||||
scrollToField: (name: string, options: ScrollOptions = {}) => {
|
||||
const namePath = toArray(name);
|
||||
const fieldId = getFieldId(namePath, wrapForm.__INTERNAL__.name);
|
||||
const node: HTMLElement | null = fieldId ? document.getElementById(fieldId) : null;
|
||||
const [rcForm] = useRcForm();
|
||||
|
||||
if (node) {
|
||||
scrollIntoView(node, {
|
||||
scrollMode: 'if-needed',
|
||||
block: 'nearest',
|
||||
...options,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
const wrapForm: FormInstance = React.useMemo(
|
||||
() =>
|
||||
form || {
|
||||
...rcForm,
|
||||
__INTERNAL__: {},
|
||||
scrollToField: (name: string, options: ScrollOptions = {}) => {
|
||||
const namePath = toArray(name);
|
||||
const fieldId = getFieldId(namePath, wrapForm.__INTERNAL__.name);
|
||||
const node: HTMLElement | null = fieldId ? document.getElementById(fieldId) : null;
|
||||
|
||||
if (node) {
|
||||
scrollIntoView(node, {
|
||||
scrollMode: 'if-needed',
|
||||
block: 'nearest',
|
||||
...options,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
[form, rcForm],
|
||||
);
|
||||
|
||||
return [wrapForm];
|
||||
}
|
||||
|
||||
@ -440,6 +440,7 @@ exports[`renders ./components/input/demo/align.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -479,6 +480,7 @@ exports[`renders ./components/input/demo/align.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -812,6 +814,7 @@ exports[`renders ./components/input/demo/align.md correctly 1`] = `
|
||||
placeholder="Select month"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -1292,6 +1295,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
border-right-width: @border-width-base !important;
|
||||
outline: 0;
|
||||
box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
|
||||
box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, @outline-fade);
|
||||
|
||||
.@{input-rtl-cls} & {
|
||||
border-right-width: 0;
|
||||
|
||||
@ -27,6 +27,11 @@
|
||||
border: @border-width-base @border-style-base @input-border-color;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @input-hover-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{ant-prefix}-input-affix-wrapper {
|
||||
|
||||
@ -306,7 +306,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 1
|
||||
@ -331,7 +331,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item ant-menu-item-selected"
|
||||
class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 2
|
||||
@ -356,7 +356,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 3
|
||||
@ -1170,7 +1170,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
<div />
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
@ -1315,7 +1315,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 1
|
||||
@ -1340,7 +1340,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item ant-menu-item-selected"
|
||||
class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 2
|
||||
@ -1365,7 +1365,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 3
|
||||
@ -1486,7 +1486,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 1
|
||||
@ -1511,7 +1511,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item ant-menu-item-selected"
|
||||
class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 2
|
||||
@ -1536,7 +1536,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 3
|
||||
@ -1668,28 +1668,28 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item ant-menu-item-selected"
|
||||
class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
option1
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
option2
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
option3
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
@ -1832,7 +1832,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 1
|
||||
@ -1857,7 +1857,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item ant-menu-item-selected"
|
||||
class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 2
|
||||
@ -1882,7 +1882,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
nav 3
|
||||
@ -1968,28 +1968,28 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item ant-menu-item-selected"
|
||||
class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
option1
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
option2
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
option3
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
|
||||
@ -19,7 +19,7 @@ A list can be used to display content related to a single subject. The content c
|
||||
| --- | --- | --- | --- | --- |
|
||||
| bordered | Toggles rendering of the border around the list | boolean | false | |
|
||||
| footer | List footer renderer | string\|ReactNode | - | |
|
||||
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | |
|
||||
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | [object](#List-grid-props) | - | |
|
||||
| header | List header renderer | string\|ReactNode | - | |
|
||||
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | |
|
||||
| rowKey | Item's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` | |
|
||||
|
||||
@ -20,7 +20,7 @@ cols: 1
|
||||
| --- | --- | --- | --- | --- |
|
||||
| bordered | 是否展示边框 | boolean | false | |
|
||||
| footer | 列表底部 | string\|ReactNode | - | |
|
||||
| grid | 列表栅格配置 | object | - | |
|
||||
| grid | 列表栅格配置 | [object](#List-grid-props) | - | |
|
||||
| header | 列表头部 | string\|ReactNode | - | |
|
||||
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
|
||||
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
|
||||
|
||||
@ -12,6 +12,7 @@ exports[`Locale Provider set moment locale when locale changes 1`] = `
|
||||
placeholder="请选择日期"
|
||||
readonly=""
|
||||
size="12"
|
||||
title="2017-09-18"
|
||||
value="2017-09-18"
|
||||
/>
|
||||
<span
|
||||
@ -645,6 +646,7 @@ exports[`Locale Provider set moment locale when locale changes 2`] = `
|
||||
placeholder="Sélectionner une date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title="2017-09-18"
|
||||
value="2017-09-18"
|
||||
/>
|
||||
<span
|
||||
@ -1278,6 +1280,7 @@ exports[`Locale Provider set moment locale when locale changes 3`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title="2017-09-18"
|
||||
value="2017-09-18"
|
||||
/>
|
||||
<span
|
||||
@ -2142,6 +2145,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
|
||||
placeholder="اختيار التاريخ"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -2746,6 +2750,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
|
||||
placeholder="اختيار الوقت"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -7228,6 +7233,7 @@ exports[`Locale Provider should display the text as az 1`] = `
|
||||
placeholder="Tarix seçin"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -7832,6 +7838,7 @@ exports[`Locale Provider should display the text as az 1`] = `
|
||||
placeholder="Vaxtı seç"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -12314,6 +12321,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
|
||||
placeholder="Избор на дата"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -12918,6 +12926,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
|
||||
placeholder="Избор на час"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -17400,6 +17409,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
|
||||
placeholder="Seleccionar data"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -18004,6 +18014,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
|
||||
placeholder="Seleccionar hora"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -22486,6 +22497,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
|
||||
placeholder="Vybrat datum"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -23090,6 +23102,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
|
||||
placeholder="Vybrat čas"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -27572,6 +27585,7 @@ exports[`Locale Provider should display the text as da 1`] = `
|
||||
placeholder="Vælg dato"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -28176,6 +28190,7 @@ exports[`Locale Provider should display the text as da 1`] = `
|
||||
placeholder="Vælg tid"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -32658,6 +32673,7 @@ exports[`Locale Provider should display the text as de 1`] = `
|
||||
placeholder="Datum auswählen"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -33262,6 +33278,7 @@ exports[`Locale Provider should display the text as de 1`] = `
|
||||
placeholder="Zeit auswählen"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -37744,6 +37761,7 @@ exports[`Locale Provider should display the text as el 1`] = `
|
||||
placeholder="Επιλέξτε ημερομηνία"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -38348,6 +38366,7 @@ exports[`Locale Provider should display the text as el 1`] = `
|
||||
placeholder="Επιλέξτε ώρα"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -42830,6 +42849,7 @@ exports[`Locale Provider should display the text as en 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -43434,6 +43454,7 @@ exports[`Locale Provider should display the text as en 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -47916,6 +47937,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -48520,6 +48542,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -53002,6 +53025,7 @@ exports[`Locale Provider should display the text as es 1`] = `
|
||||
placeholder="Seleccionar fecha"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -53606,6 +53630,7 @@ exports[`Locale Provider should display the text as es 1`] = `
|
||||
placeholder="Seleccionar hora"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -58088,6 +58113,7 @@ exports[`Locale Provider should display the text as et 1`] = `
|
||||
placeholder="Vali kuupäev"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -58692,6 +58718,7 @@ exports[`Locale Provider should display the text as et 1`] = `
|
||||
placeholder="Vali aeg"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -63174,6 +63201,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
|
||||
placeholder="انتخاب تاریخ"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -63778,6 +63806,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
|
||||
placeholder="انتخاب زمان"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -68260,6 +68289,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
|
||||
placeholder="Valitse päivä"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -68864,6 +68894,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
|
||||
placeholder="Valitse aika"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -73346,6 +73377,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
|
||||
placeholder="Sélectionner une date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -73950,6 +73982,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
|
||||
placeholder="Sélectionner l'heure"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -78432,6 +78465,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
|
||||
placeholder="Sélectionner une date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -79036,6 +79070,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
|
||||
placeholder="Sélectionner l'heure"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -83518,6 +83553,7 @@ exports[`Locale Provider should display the text as he 1`] = `
|
||||
placeholder="בחר תאריך"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -84122,6 +84158,7 @@ exports[`Locale Provider should display the text as he 1`] = `
|
||||
placeholder="בחר שעה"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -88604,6 +88641,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
|
||||
placeholder="तारीख़ चुनें"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -89208,6 +89246,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
|
||||
placeholder="समय का चयन करें"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -93690,6 +93729,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
|
||||
placeholder="Odaberite datum"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -94294,6 +94334,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
|
||||
placeholder="Odaberite vrijeme"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -98776,6 +98817,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
|
||||
placeholder="Válasszon dátumot"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -99380,6 +99422,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
|
||||
placeholder="Válasszon időt"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -103862,6 +103905,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
|
||||
placeholder="Ընտրեք ամսաթիվը"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -104466,6 +104510,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
|
||||
placeholder="Ընտրեք ժամը"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -108948,6 +108993,7 @@ exports[`Locale Provider should display the text as id 1`] = `
|
||||
placeholder="Pilih tanggal"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -109552,6 +109598,7 @@ exports[`Locale Provider should display the text as id 1`] = `
|
||||
placeholder="Pilih waktu"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -114034,6 +114081,7 @@ exports[`Locale Provider should display the text as is 1`] = `
|
||||
placeholder="Veldu dag"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -114638,6 +114686,7 @@ exports[`Locale Provider should display the text as is 1`] = `
|
||||
placeholder="Velja tíma"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -119120,6 +119169,7 @@ exports[`Locale Provider should display the text as it 1`] = `
|
||||
placeholder="Selezionare la data"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -119724,6 +119774,7 @@ exports[`Locale Provider should display the text as it 1`] = `
|
||||
placeholder="Selezionare l'orario"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -124206,6 +124257,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
|
||||
placeholder="日付を選択"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -124810,6 +124862,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
|
||||
placeholder="時刻を選択"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -129292,6 +129345,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
|
||||
placeholder="ದಿನಾಂಕ ಆಯ್ಕೆಮಾಡಿ"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -129896,6 +129950,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
|
||||
placeholder="ಸಮಯ ಆಯ್ಕೆಮಾಡಿ"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -134378,6 +134433,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
|
||||
placeholder="날짜 선택"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -134982,6 +135038,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
|
||||
placeholder="날짜 선택"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -139464,6 +139521,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
|
||||
placeholder="Dîrok hilbijêre"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -140068,6 +140126,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
|
||||
placeholder="Demê hilbijêre"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -144550,6 +144609,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
|
||||
placeholder="Izvēlieties datumu"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -145154,6 +145214,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
|
||||
placeholder="Izvēlieties laiku"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -149636,6 +149697,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
|
||||
placeholder="Избери датум"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -150240,6 +150302,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
|
||||
placeholder="Избери време"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -154722,6 +154785,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
|
||||
placeholder="Огноо сонгох"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -155326,6 +155390,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
|
||||
placeholder="Цаг сонгох"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -159808,6 +159873,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
|
||||
placeholder="Pilih tarikh"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -160412,6 +160478,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
|
||||
placeholder="Sila pilih masa"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -164894,6 +164961,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
|
||||
placeholder="Velg dato"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -165498,6 +165566,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
|
||||
placeholder="Velg tid"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -169980,6 +170049,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
|
||||
placeholder="Select date"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -170584,6 +170654,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -175066,6 +175137,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
|
||||
placeholder="Selecteer datum"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -175670,6 +175742,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
|
||||
placeholder="Selecteer tijd"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -180152,6 +180225,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
|
||||
placeholder="Selecteer datum"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -180756,6 +180830,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
|
||||
placeholder="Selecteer tijd"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -185238,6 +185313,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
|
||||
placeholder="Wybierz datę"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -185842,6 +185918,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
|
||||
placeholder="Wybierz godzinę"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -190324,6 +190401,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
|
||||
placeholder="Data"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -190928,6 +191006,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
|
||||
placeholder="Hora"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -195410,6 +195489,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
|
||||
placeholder="Selecionar data"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -196014,6 +196094,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
|
||||
placeholder="Hora"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -200496,6 +200577,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
|
||||
placeholder="Selectează data"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -201100,6 +201182,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
|
||||
placeholder="Selectează ora"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -205582,6 +205665,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
placeholder="Выберите дату"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -206186,6 +206270,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
||||
placeholder="Выберите время"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -210668,6 +210753,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
|
||||
placeholder="Vybrať dátum"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -211272,6 +211358,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
|
||||
placeholder="Vybrať čas"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -215754,6 +215841,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
|
||||
placeholder="Izberite datum"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -216358,6 +216446,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
|
||||
placeholder="Izberite čas"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -220840,6 +220929,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
|
||||
placeholder="Izaberite datum"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -221444,6 +221534,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
|
||||
placeholder="Izaberite vreme"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -225926,6 +226017,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
|
||||
placeholder="Välj datum"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -226530,6 +226622,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
|
||||
placeholder="Välj tid"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -231012,6 +231105,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
|
||||
placeholder="தேதியைத் தேர்ந்தெடுக்கவும்"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -231616,6 +231710,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
|
||||
placeholder="நேரத்தைத் தேர்ந்தெடுக்கவும்"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -236098,6 +236193,7 @@ exports[`Locale Provider should display the text as th 1`] = `
|
||||
placeholder="เลือกวันที่"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -236702,6 +236798,7 @@ exports[`Locale Provider should display the text as th 1`] = `
|
||||
placeholder="เลือกเวลา"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -241184,6 +241281,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
|
||||
placeholder="Tarih Seç"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -241788,6 +241886,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
|
||||
placeholder="Zaman Seç"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -246270,6 +246369,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
|
||||
placeholder="Оберіть дату"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -246874,6 +246974,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
|
||||
placeholder="Оберіть час"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -251356,6 +251457,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
|
||||
placeholder="Chọn thời điểm"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -251960,6 +252062,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
|
||||
placeholder="Chọn thời gian"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -256442,6 +256545,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
|
||||
placeholder="请选择日期"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -257046,6 +257150,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
|
||||
placeholder="请选择时间"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -261528,6 +261633,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
|
||||
placeholder="請選擇日期"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -262132,6 +262238,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
|
||||
placeholder="請選擇時間"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import { Item } from 'rc-menu';
|
||||
import toArray from 'rc-util/lib/Children/toArray';
|
||||
import classNames from 'classnames';
|
||||
import { ClickParam } from '.';
|
||||
import MenuContext, { MenuContextProps } from './MenuContext';
|
||||
import Tooltip, { TooltipProps } from '../tooltip';
|
||||
@ -36,7 +38,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
|
||||
};
|
||||
|
||||
renderItem = ({ siderCollapsed }: SiderContextProps) => {
|
||||
const { level, children, rootPrefixCls } = this.props;
|
||||
const { level, className, children, rootPrefixCls } = this.props;
|
||||
const { title, ...rest } = this.props;
|
||||
|
||||
return (
|
||||
@ -58,7 +60,14 @@ export default class MenuItem extends React.Component<MenuItemProps> {
|
||||
placement={direction === 'rtl' ? 'left' : 'right'}
|
||||
overlayClassName={`${rootPrefixCls}-inline-collapsed-tooltip`}
|
||||
>
|
||||
<Item {...rest} title={title} ref={this.saveMenuItem} />
|
||||
<Item
|
||||
{...rest}
|
||||
className={classNames(className, {
|
||||
[`${rootPrefixCls}-item-only-child`]: toArray(children).length === 1,
|
||||
})}
|
||||
title={title}
|
||||
ref={this.saveMenuItem}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -175,7 +175,7 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
<a
|
||||
@ -273,14 +273,14 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
|
||||
class="ant-menu-item-group-list"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item ant-menu-item-selected"
|
||||
class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 1
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
@ -301,14 +301,14 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
|
||||
class="ant-menu-item-group-list"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 3
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
@ -573,28 +573,28 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 5
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 6
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 7
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
@ -701,28 +701,28 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 1
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 2
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 3
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
@ -953,14 +953,14 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 3
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
@ -1102,28 +1102,28 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item ant-menu-item-selected"
|
||||
class="ant-menu-item ant-menu-item-only-child ant-menu-item-selected"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 1
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 2
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
Option 3
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
class="ant-menu-item ant-menu-item-only-child"
|
||||
role="menuitem"
|
||||
style="padding-left:48px"
|
||||
>
|
||||
|
||||
@ -148,7 +148,9 @@
|
||||
&-vertical-left&-sub,
|
||||
&-vertical-right&-sub {
|
||||
min-width: 160px;
|
||||
max-height: 100vh;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
border-right: 0;
|
||||
transform-origin: 0 0;
|
||||
|
||||
@ -203,6 +205,16 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{menu-prefix-cls}-item-only-child {
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: 0;
|
||||
|
||||
.@{menu-prefix-cls}-rtl & {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > &-item-divider {
|
||||
|
||||
@ -7,7 +7,7 @@ import RadioGroupContext from './context';
|
||||
|
||||
export type RadioButtonProps = AbstractCheckboxProps<RadioChangeEvent>;
|
||||
|
||||
const RadioButton = (props: RadioButtonProps) => {
|
||||
const RadioButton = (props: RadioButtonProps, ref: React.Ref<any>) => {
|
||||
const radioGroupContext = React.useContext(RadioGroupContext);
|
||||
|
||||
return (
|
||||
@ -19,10 +19,10 @@ const RadioButton = (props: RadioButtonProps) => {
|
||||
radioProps.checked = props.value === radioGroupContext.value;
|
||||
radioProps.disabled = props.disabled || radioGroupContext.disabled;
|
||||
}
|
||||
return <Radio prefixCls={prefixCls} {...radioProps} type="radio" />;
|
||||
return <Radio prefixCls={prefixCls} {...radioProps} type="radio" ref={ref} />;
|
||||
}}
|
||||
</ConfigConsumer>
|
||||
);
|
||||
};
|
||||
|
||||
export default RadioButton;
|
||||
export default React.forwardRef(RadioButton);
|
||||
|
||||
@ -84,7 +84,6 @@ Select component to select value from options.
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | Disable this option | boolean | false | |
|
||||
| key | Same usage as `value`. If React request you to set this property, you can set it to value of option, and then omit value property. | string | | |
|
||||
| title | `title` of Select after select this Option | string | - | |
|
||||
| value | default to filter with this property | string\|number | - | |
|
||||
| className | additional class to option | string | - | |
|
||||
|
||||
@ -87,7 +87,6 @@ title: Select
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| key | 和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | string | | |
|
||||
| title | 选中该 Option 后，Select 的 title | string | - | |
|
||||
| value | 默认根据此属性值进行筛选 | string\|number | - | |
|
||||
| className | Option 器类名 | string | - | |
|
||||
|
||||
@ -74,7 +74,6 @@
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transform: translateY(-1px);
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
|
||||
@ -37,8 +37,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// For common baseline align
|
||||
&::after,
|
||||
// For '' value baseline align
|
||||
.@{select-prefix-cls}-selection-item::after,
|
||||
// For undefined value baseline align
|
||||
.@{select-prefix-cls}-selection-placeholder::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
content: '\a0';
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
// https://github.com/ant-design/ant-design/issues/21864
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
@ -126,6 +126,7 @@
|
||||
@outline-blur-size: 0;
|
||||
@outline-width: 2px;
|
||||
@outline-color: @primary-color;
|
||||
@outline-fade: 20%;
|
||||
|
||||
@background-color-light: hsv(0, 0, 98%); // background of header and selected item
|
||||
@background-color-base: hsv(0, 0, 96%); // Default grey background color
|
||||
@ -512,7 +513,7 @@
|
||||
@table-border-radius-base: @border-radius-base;
|
||||
@table-footer-bg: @background-color-light;
|
||||
@table-footer-color: @heading-color;
|
||||
@table-header-bg-sm: @table-bg;
|
||||
@table-header-bg-sm: @table-header-bg;
|
||||
// Sorter
|
||||
// Legacy: `table-header-sort-active-bg` is used for hover not real active
|
||||
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
|
||||
|
||||
@ -54,13 +54,7 @@ interface ChangeEventInfo<RecordType> {
|
||||
export interface TableProps<RecordType>
|
||||
extends Omit<
|
||||
RcTableProps<RecordType>,
|
||||
| 'transformColumns'
|
||||
| 'internalHooks'
|
||||
| 'internalRefs'
|
||||
| 'data'
|
||||
| 'columns'
|
||||
| 'expandIconColumnIndex'
|
||||
| 'scroll'
|
||||
'transformColumns' | 'internalHooks' | 'internalRefs' | 'data' | 'columns' | 'scroll'
|
||||
> {
|
||||
dropdownPrefixCls?: string;
|
||||
dataSource?: RcTableProps<RecordType>['data'];
|
||||
@ -107,6 +101,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
expandIcon,
|
||||
expandable,
|
||||
expandedRowRender,
|
||||
expandIconColumnIndex,
|
||||
indentSize,
|
||||
childrenColumnName = 'children',
|
||||
scroll,
|
||||
@ -125,6 +120,11 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('table', customizePrefixCls);
|
||||
|
||||
const mergedExpandable: ExpandableConfig<RecordType> = {
|
||||
expandIconColumnIndex,
|
||||
...expandable,
|
||||
};
|
||||
|
||||
const expandType: ExpandType = React.useMemo<ExpandType>(() => {
|
||||
if (rawData.some(item => (item as any)[childrenColumnName])) {
|
||||
return 'nest';
|
||||
@ -313,6 +313,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
expandType,
|
||||
childrenColumnName,
|
||||
locale: tableLocale,
|
||||
expandIconColumnIndex: mergedExpandable.expandIconColumnIndex,
|
||||
});
|
||||
|
||||
const internalRowClassName = (record: RecordType, index: number, indent: number) => {
|
||||
@ -332,9 +333,6 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
};
|
||||
|
||||
// ========================== Expandable ==========================
|
||||
const mergedExpandable: ExpandableConfig<RecordType> = {
|
||||
...expandable,
|
||||
};
|
||||
|
||||
// Pass origin render status into `rc-table`, this can be removed when refactor with `rc-table`
|
||||
(mergedExpandable as any).__PARENT_RENDER_ICON__ = mergedExpandable.expandIcon;
|
||||
@ -344,8 +342,10 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
|
||||
mergedExpandable.expandIcon || expandIcon || renderExpandIcon(tableLocale!);
|
||||
|
||||
// Adjust expand icon index, no overwrite expandIconColumnIndex if set.
|
||||
if (expandType === 'nest' && !('expandIconColumnIndex' in mergedExpandable)) {
|
||||
if (expandType === 'nest' && mergedExpandable.expandIconColumnIndex === undefined) {
|
||||
mergedExpandable.expandIconColumnIndex = rowSelection ? 1 : 0;
|
||||
} else if (mergedExpandable.expandIconColumnIndex! > 0 && rowSelection) {
|
||||
mergedExpandable.expandIconColumnIndex! -= 1;
|
||||
}
|
||||
|
||||
// Indent size
|
||||
|
||||
@ -47,11 +47,6 @@ describe('Table.expand', () => {
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should support expandIconColumnIndex', () => {
|
||||
const wrapper = mount(<Table columns={[]} dataSource={data} expandIconColumnIndex={1} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('expandRowByClick should not block click icon', () => {
|
||||
const wrapper = mount(
|
||||
<Table
|
||||
@ -100,4 +95,65 @@ describe('Table.expand', () => {
|
||||
|
||||
expect(wrapper.find('.expand-icon')).toHaveLength(1);
|
||||
});
|
||||
|
||||
describe('expandIconColumnIndex', () => {
|
||||
it('basic', () => {
|
||||
const wrapper = mount(
|
||||
<Table
|
||||
columns={[{ dataIndex: 'key' }]}
|
||||
dataSource={[{ key: 'bamboo' }]}
|
||||
expandable={{
|
||||
expandIconColumnIndex: 1,
|
||||
expandedRowRender: () => '',
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('td')
|
||||
.at(0)
|
||||
.text(),
|
||||
).toEqual('bamboo');
|
||||
expect(
|
||||
wrapper
|
||||
.find('td')
|
||||
.at(1)
|
||||
.find('.ant-table-row-expand-icon').length,
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
it('work with selection', () => {
|
||||
const wrapper = mount(
|
||||
<Table
|
||||
columns={[{ dataIndex: 'key' }]}
|
||||
dataSource={[{ key: 'bamboo' }]}
|
||||
expandable={{
|
||||
expandIconColumnIndex: 2,
|
||||
expandedRowRender: () => '',
|
||||
}}
|
||||
rowSelection={{}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('td')
|
||||
.at(0)
|
||||
.find('.ant-checkbox-input').length,
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
wrapper
|
||||
.find('td')
|
||||
.at(1)
|
||||
.text(),
|
||||
).toEqual('bamboo');
|
||||
expect(
|
||||
wrapper
|
||||
.find('td')
|
||||
.at(2)
|
||||
.find('.ant-table-row-expand-icon').length,
|
||||
).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -158,142 +158,3 @@ exports[`Table.expand click to expand 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Table.expand should support expandIconColumnIndex 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout: auto;"
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-with-append"
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left: 0px;"
|
||||
/>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
|
||||
type="button"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</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-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -556,13 +556,13 @@ exports[`Table.rowSelection render with default selection correctly 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
Select all data
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||
role="menuitem"
|
||||
>
|
||||
Invert current page
|
||||
|
||||
@ -4939,7 +4939,7 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
style="overflow-x:scroll"
|
||||
style="overflow-x:scroll;overflow-y:hidden"
|
||||
>
|
||||
<table
|
||||
style="width:1300px;min-width:100%;table-layout:fixed"
|
||||
|
||||
@ -33,10 +33,10 @@ for (let i = 0; i < 100; i++) {
|
||||
address: `London Park no. ${i}`,
|
||||
});
|
||||
}
|
||||
interface EditableCellProps {
|
||||
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
|
||||
editing: boolean;
|
||||
dataIndex: string;
|
||||
title: React.ReactNode;
|
||||
title: any;
|
||||
inputType: 'number' | 'text';
|
||||
record: Item;
|
||||
index: number;
|
||||
@ -82,9 +82,9 @@ const EditableTable = () => {
|
||||
const [data, setData] = useState(originData);
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
|
||||
const isEditing = record => record.key === editingKey;
|
||||
const isEditing = (record: Item) => record.key === editingKey;
|
||||
|
||||
const edit = record => {
|
||||
const edit = (record: Item) => {
|
||||
form.setFieldsValue({ ...record });
|
||||
setEditingKey(record.key);
|
||||
};
|
||||
@ -93,9 +93,9 @@ const EditableTable = () => {
|
||||
setEditingKey('');
|
||||
};
|
||||
|
||||
const save = async key => {
|
||||
const save = async (key: React.Key) => {
|
||||
try {
|
||||
const row = await form.validateFields();
|
||||
const row = (await form.validateFields()) as Item;
|
||||
|
||||
const newData = [...data];
|
||||
const index = newData.findIndex(item => key === item.key);
|
||||
@ -114,7 +114,6 @@ const EditableTable = () => {
|
||||
}
|
||||
} catch (errInfo) {
|
||||
console.log('Validate Failed:', errInfo);
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
@ -140,14 +139,14 @@ const EditableTable = () => {
|
||||
{
|
||||
title: 'operation',
|
||||
dataIndex: 'operation',
|
||||
render: (text, record) => {
|
||||
render: (_: any, record: Item) => {
|
||||
const editable = isEditing(record);
|
||||
return editable ? (
|
||||
<span>
|
||||
<a href="javascript:;" onClick={() => save(record.key)} style={{ marginRight: 8 }}>
|
||||
Save
|
||||
</a>
|
||||
<Popconfirm title="Sure to cancel?" onConfirm={() => cancel(record.key)}>
|
||||
<Popconfirm title="Sure to cancel?" onConfirm={cancel}>
|
||||
<a>Cancel</a>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
@ -160,19 +159,13 @@ const EditableTable = () => {
|
||||
},
|
||||
];
|
||||
|
||||
const components = {
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
};
|
||||
|
||||
const mergedColumns = columns.map(col => {
|
||||
if (!col.editable) {
|
||||
return col;
|
||||
}
|
||||
return {
|
||||
...col,
|
||||
onCell: record => ({
|
||||
onCell: (record: Item) => ({
|
||||
record,
|
||||
inputType: col.dataIndex === 'age' ? 'number' : 'text',
|
||||
dataIndex: col.dataIndex,
|
||||
@ -185,7 +178,11 @@ const EditableTable = () => {
|
||||
return (
|
||||
<Form form={form} component={false}>
|
||||
<Table
|
||||
components={components}
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
bordered
|
||||
dataSource={data}
|
||||
columns={mergedColumns}
|
||||
|
||||
@ -35,6 +35,7 @@ interface UseSelectionConfig<RecordType> {
|
||||
getRecordByKey: (key: Key) => RecordType;
|
||||
expandType: ExpandType;
|
||||
childrenColumnName: string;
|
||||
expandIconColumnIndex?: number;
|
||||
locale: TableLocale;
|
||||
}
|
||||
|
||||
@ -87,6 +88,7 @@ export default function useSelection<RecordType>(
|
||||
expandType,
|
||||
childrenColumnName,
|
||||
locale: tableLocale,
|
||||
expandIconColumnIndex,
|
||||
} = config;
|
||||
|
||||
const [innerSelectedKeys, setInnerSelectedKeys] = React.useState<Key[]>();
|
||||
@ -432,7 +434,7 @@ export default function useSelection<RecordType>(
|
||||
render: renderSelectionCell,
|
||||
};
|
||||
|
||||
if (expandType === 'row' && columns.length) {
|
||||
if (expandType === 'row' && columns.length && !expandIconColumnIndex) {
|
||||
const [expandColumn, ...restColumns] = columns;
|
||||
return [
|
||||
expandColumn,
|
||||
|
||||
@ -592,11 +592,6 @@
|
||||
box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
// Fix for chrome overflow show the scrollbar
|
||||
&:not(&-fixed-header) &-content {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast: none) {
|
||||
|
||||
@ -12,6 +12,7 @@ exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="12"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -54,6 +55,7 @@ exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="11"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -95,6 +97,7 @@ exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -140,6 +143,7 @@ exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -184,6 +188,7 @@ exports[`renders ./components/time-picker/demo/basic.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -229,6 +234,7 @@ exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -273,6 +279,7 @@ exports[`renders ./components/time-picker/demo/hide-column.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -341,6 +348,7 @@ exports[`renders ./components/time-picker/demo/interval-options.md correctly 1`]
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -455,6 +463,7 @@ exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -520,6 +529,7 @@ exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -585,6 +595,7 @@ exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -654,6 +665,7 @@ exports[`renders ./components/time-picker/demo/suffix.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
@ -695,6 +707,7 @@ exports[`renders ./components/time-picker/demo/value.md correctly 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -11,6 +11,7 @@ exports[`TimePicker not render clean icon when allowClear is false 1`] = `
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title="00:00:00"
|
||||
value="00:00:00"
|
||||
/>
|
||||
<span
|
||||
@ -56,6 +57,7 @@ Array [
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title="00:00:00"
|
||||
value="00:00:00"
|
||||
/>
|
||||
<span
|
||||
@ -1489,6 +1491,7 @@ exports[`TimePicker rtl render component should be rendered correctly in RTL dir
|
||||
placeholder="Select time"
|
||||
readonly=""
|
||||
size="10"
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
|
||||
@ -245,7 +245,7 @@ describe('Tooltip', () => {
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/20891
|
||||
it('should display zero', async () => {
|
||||
it('should display zero', () => {
|
||||
const wrapper = mount(
|
||||
<Tooltip title={0} visible>
|
||||
<div />
|
||||
@ -253,4 +253,50 @@ describe('Tooltip', () => {
|
||||
);
|
||||
expect(wrapper.find('.ant-tooltip-inner').getDOMNode().innerHTML).toBe('0');
|
||||
});
|
||||
|
||||
it('autoAdjustOverflow should be object or undefined', () => {
|
||||
expect(() => {
|
||||
mount(
|
||||
<Tooltip title={0} visible autoAdjustOverflow={{ adjustX: 0, adjustY: 0 }}>
|
||||
<div />
|
||||
</Tooltip>,
|
||||
);
|
||||
}).not.toThrow();
|
||||
|
||||
expect(() => {
|
||||
mount(
|
||||
<Tooltip title={0} visible autoAdjustOverflow={undefined}>
|
||||
<div />
|
||||
</Tooltip>,
|
||||
);
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('support other placement', async () => {
|
||||
const wrapper = mount(
|
||||
<Tooltip
|
||||
title="xxxxx"
|
||||
placement="bottomLeft"
|
||||
mouseEnterDelay={0}
|
||||
mouseLeaveDelay={0}
|
||||
>
|
||||
<span>
|
||||
Hello world!
|
||||
</span>
|
||||
</Tooltip>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('span')).toHaveLength(1);
|
||||
const button = wrapper.find('span').at(0);
|
||||
button.simulate('mouseenter');
|
||||
await sleep(50);
|
||||
expect(wrapper.instance().getPopupDomNode().className).toContain('placement-bottomLeft');
|
||||
button.simulate('mouseleave');
|
||||
wrapper.setProps({
|
||||
placement: 'topRight',
|
||||
});
|
||||
button.simulate('mouseenter');
|
||||
await sleep(50);
|
||||
expect(wrapper.instance().getPopupDomNode().className).toContain('placement-topRight');
|
||||
});
|
||||
});
|
||||
|
||||
@ -181,7 +181,6 @@ class Tooltip extends React.Component<TooltipProps, any> {
|
||||
builtinPlacements ||
|
||||
getPlacements({
|
||||
arrowPointAtCenter,
|
||||
verticalArrowShift: 8,
|
||||
autoAdjustOverflow,
|
||||
})
|
||||
);
|
||||
@ -200,9 +199,6 @@ class Tooltip extends React.Component<TooltipProps, any> {
|
||||
placements[key].points[0] === align.points[0] &&
|
||||
placements[key].points[1] === align.points[1],
|
||||
)[0];
|
||||
if (!placement) {
|
||||
return;
|
||||
}
|
||||
// 根据当前坐标设置动画点
|
||||
const rect = domNode.getBoundingClientRect();
|
||||
const transformOrigin = {
|
||||
|
||||
@ -26,7 +26,7 @@ export interface PlacementsConfig {
|
||||
autoAdjustOverflow?: boolean | AdjustOverflow;
|
||||
}
|
||||
|
||||
export function getOverflowOptions(autoAdjustOverflow: boolean | AdjustOverflow) {
|
||||
export function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow) {
|
||||
if (typeof autoAdjustOverflow === 'boolean') {
|
||||
return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;
|
||||
}
|
||||
@ -36,12 +36,12 @@ export function getOverflowOptions(autoAdjustOverflow: boolean | AdjustOverflow)
|
||||
};
|
||||
}
|
||||
|
||||
export default function getPlacements(config: PlacementsConfig = {}) {
|
||||
export default function getPlacements(config: PlacementsConfig) {
|
||||
const {
|
||||
arrowWidth = 5,
|
||||
horizontalArrowShift = 16,
|
||||
verticalArrowShift = 12,
|
||||
autoAdjustOverflow = true,
|
||||
verticalArrowShift = 8,
|
||||
autoAdjustOverflow,
|
||||
} = config;
|
||||
const placementMap: BuildInPlacements = {
|
||||
left: {
|
||||
|
||||
@ -1,38 +1,44 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
|
||||
import { TransferItem } from '.';
|
||||
import Checkbox from '../checkbox';
|
||||
|
||||
export default class ListItem extends React.Component<any, any> {
|
||||
shouldComponentUpdate(...args: any[]) {
|
||||
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
|
||||
type ListItemProps = {
|
||||
renderedText?: string | number;
|
||||
renderedEl: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
checked?: boolean;
|
||||
prefixCls: string;
|
||||
onClick: (item: TransferItem) => void;
|
||||
item: TransferItem;
|
||||
};
|
||||
|
||||
const ListItem = (props: ListItemProps) => {
|
||||
const { renderedText, renderedEl, item, checked, disabled, prefixCls, onClick } = props;
|
||||
|
||||
const className = classNames({
|
||||
[`${prefixCls}-content-item`]: true,
|
||||
[`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
|
||||
[`${prefixCls}-content-item-checked`]: checked,
|
||||
});
|
||||
|
||||
let title: string | undefined;
|
||||
if (typeof renderedText === 'string' || typeof renderedText === 'number') {
|
||||
title = String(renderedText);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { renderedText, renderedEl, item, checked, disabled, prefixCls, onClick } = this.props;
|
||||
const listItem = (
|
||||
<li
|
||||
className={className}
|
||||
title={title}
|
||||
onClick={disabled || item.disabled ? undefined : () => onClick(item)}
|
||||
>
|
||||
<Checkbox checked={checked} disabled={disabled || item.disabled} />
|
||||
<span className={`${prefixCls}-content-item-text`}>{renderedEl}</span>
|
||||
</li>
|
||||
);
|
||||
|
||||
const className = classNames({
|
||||
[`${prefixCls}-content-item`]: true,
|
||||
[`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
|
||||
[`${prefixCls}-content-item-checked`]: checked,
|
||||
});
|
||||
return listItem;
|
||||
};
|
||||
|
||||
let title: string | undefined;
|
||||
if (typeof renderedText === 'string' || typeof renderedText === 'number') {
|
||||
title = String(renderedText);
|
||||
}
|
||||
|
||||
const listItem = (
|
||||
<li
|
||||
className={className}
|
||||
title={title}
|
||||
onClick={disabled || item.disabled ? undefined : () => onClick(item)}
|
||||
>
|
||||
<Checkbox checked={checked} disabled={disabled || item.disabled} />
|
||||
<span className={`${prefixCls}-content-item-text`}>{renderedEl}</span>
|
||||
</li>
|
||||
);
|
||||
|
||||
return listItem;
|
||||
}
|
||||
}
|
||||
export default React.memo(ListItem);
|
||||
|
||||
@ -854,7 +854,7 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
className="ant-transfer-list-content"
|
||||
onScroll={[Function]}
|
||||
>
|
||||
<ListItem
|
||||
<Memo(ListItem)
|
||||
checked={false}
|
||||
item={
|
||||
Object {
|
||||
@ -916,7 +916,7 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
label
|
||||
</span>
|
||||
</li>
|
||||
</ListItem>
|
||||
</Memo(ListItem)>
|
||||
</ul>
|
||||
</ListBody>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import omit from 'omit.js';
|
||||
import classNames from 'classnames';
|
||||
import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
|
||||
import Checkbox from '../checkbox';
|
||||
import {
|
||||
TransferItem,
|
||||
@ -74,7 +73,10 @@ function renderListNode(renderList: RenderListFunction | undefined, props: Trans
|
||||
};
|
||||
}
|
||||
|
||||
export default class TransferList extends React.Component<TransferListProps, TransferListState> {
|
||||
export default class TransferList extends React.PureComponent<
|
||||
TransferListProps,
|
||||
TransferListState
|
||||
> {
|
||||
static defaultProps = {
|
||||
dataSource: [],
|
||||
titleText: '',
|
||||
@ -92,10 +94,6 @@ export default class TransferList extends React.Component<TransferListProps, Tra
|
||||
};
|
||||
}
|
||||
|
||||
shouldComponentUpdate(...args: any[]) {
|
||||
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.triggerScrollTimer);
|
||||
}
|
||||
|
||||
@ -11,63 +11,29 @@ And [umi](http://umijs.org/) is a routing-based framework that supports [next.js
|
||||
|
||||
> You may also be interested in [Ant Design Pro](https://pro.ant.design/), an Out-of-box UI solution for enterprise applications based on umi, dva and ant design.
|
||||
|
||||
This article will guide you to create a simple application from zero using Umi UI, dva and antd.
|
||||
This article will guide you to create a simple application from zero using Umi, dva and antd.
|
||||
|
||||
## Install Umi UI
|
||||
## Install Umi
|
||||
|
||||
It is recommended to use yarn to create an application and execute the following command.
|
||||
|
||||
```bash
|
||||
$ mkdir myapp && cd myapp
|
||||
$ yarn create @umijs/umi-app
|
||||
$ yarn
|
||||
```
|
||||
|
||||
> If you are using npm, execute `npm install umi -g` and the effect will be the same.
|
||||
|
||||
```bash
|
||||
$ yarn global add umi
|
||||
$ umi -v
|
||||
2.10.4
|
||||
```
|
||||
## Install presets
|
||||
|
||||
Make sure the umi version is above 2.10.0.
|
||||
|
||||
## Create New App
|
||||
|
||||
Start the app,
|
||||
Execute the following command, install presets(including the antd, dva, locale plugins):
|
||||
|
||||
```bash
|
||||
$ umi ui
|
||||
|
||||
🚀 Starting Umi UI using umi@2.10.4...
|
||||
🧨 Ready on http://localhost:3000/
|
||||
# 或 npm i @umijs/preset-react -D
|
||||
$ yarn add @umijs/preset-react -D
|
||||
```
|
||||
|
||||
After starting, Umi UI will automatically open the browser, then click `Create Project`, select the path and enter `App name`, as shown below.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/kQSR2zWDQ6/26543f59-07de-44b7-8b1d-b34e1266de8b.png" width="718" />
|
||||
|
||||
Click `Next`, select `Basic Template`, select `antd` and `dva` on the technology stack, then click `Finish`.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/Pz9ayQpkWw/3c8a0190-ac32-444f-812e-3d1eff422507.png" width="718" />
|
||||
|
||||
In the project creation process, wait a few minutes.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/UtFy3fYg9n/bb7ef7c0-2fdb-403e-9b5a-d4ba02390483.png" width="718" />
|
||||
|
||||
After creating, go to `Overview` and click on the shortcut entry `Run Dev`.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/sZj2WeXiqc/44ddbc70-386c-4c8a-8deb-6a4a93a3afb2.png" width="718" />
|
||||
|
||||
In the task page, click `Start`,
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/%24ot6F6Bj2L/a4c49cda-4ff8-409f-8054-9281199b6270.png" width="718" />
|
||||
|
||||
When prompted, open [http://localhost:8000](http://localhost:8000) in your browser, you will see the welcome page of umi.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/2Bm%24zoeBpz/ba708131-c7ac-41f0-92a0-c86007291b6a.png" width="718" />
|
||||
|
||||
## Integrate antd
|
||||
|
||||
After selecting `antd` earlier, antd's dependencies are automatically handled and loaded on demand. You can check the `Configuration` to make sure antd is turned on.
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/0EFiWipONe/7aea9287-09ff-4396-bb20-d8da28483c2c.png" width="718" />
|
||||
|
||||
> And if you want to use a fixed version of antd, you can install additional antd dependency in your project, and the antd dependencies declared in package.json will be used first.
|
||||
|
||||
## Create Routes
|
||||
@ -83,14 +49,27 @@ $ yarn global add npx
|
||||
Then create a `/products` route,
|
||||
|
||||
```bash
|
||||
$ npx umi g page products
|
||||
$ npx umi g page products --typescript
|
||||
|
||||
create src/pages/products.js
|
||||
create src/pages/products.css
|
||||
✔ success
|
||||
Write: src/pages/products.tsx
|
||||
Write: src/pages/products.css
|
||||
```
|
||||
|
||||
Then open [http://localhost:8000/products](http://localhost:8000/products) in your browser and you should see the corresponding page.
|
||||
In `.umirc.ts` configured in routing, if there is need to internationalization, can configure `locale` enable antd internationalization:
|
||||
|
||||
```diff
|
||||
import { defineConfig } from 'umi';
|
||||
|
||||
export default defineConfig({
|
||||
+ locale: { antd: true },
|
||||
routes: [
|
||||
{ path: '/', component: '@/pages/index' },
|
||||
+ { path: '/products', component: '@/pages/products' },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
run `yarn start` then open [http://localhost:8000/products](http://localhost:8000/products) in your browser and you should see the corresponding page.
|
||||
|
||||
## Write UI Components
|
||||
|
||||
@ -98,11 +77,7 @@ As your application grows and you notice you are sharing UI elements between mul
|
||||
|
||||
Let's create a `ProductList` component that we can use in multiple places to show a list of products.
|
||||
|
||||
Click `Open in editor`,
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/yXRYDK88RS/2252c0f6-747f-422c-aeb6-dc518d74c8ea.png" width="718" />
|
||||
|
||||
Create `src/components/ProductList.js` by typing:
|
||||
Create `src/components/ProductList.tsx` by typing:
|
||||
|
||||
```js
|
||||
import { Table, Popconfirm, Button } from 'antd';
|
||||
@ -136,12 +111,15 @@ After completing the UI, we will begin processing the data and logic.
|
||||
|
||||
dva manages the domain model with `model`, with reducers for synchronous state updates, effects for async logic, and subscriptions for data source subscribe.
|
||||
|
||||
Let's create a model `src/models/products.js` by typing,
|
||||
Let's create a model `src/models/products.ts` by typing,
|
||||
|
||||
```js
|
||||
export default {
|
||||
namespace: 'products',
|
||||
state: [],
|
||||
state: [
|
||||
{ name: 'dva', id: 'dva' },
|
||||
{ name: 'antd', id: 'antd' },
|
||||
],
|
||||
reducers: {
|
||||
delete(state, { payload: id }) {
|
||||
return state.filter(item => item.id !== id);
|
||||
@ -167,8 +145,8 @@ dva provides a `connect` method. If you are familiar with redux, this connect is
|
||||
Edit `src/pages/products.js` and replace it with the following,
|
||||
|
||||
```js
|
||||
import { connect } from 'dva';
|
||||
import ProductList from '../components/ProductList';
|
||||
import { connect } from 'umi';
|
||||
import ProductList from '@/components/ProductList';
|
||||
|
||||
const Products = ({ dispatch, products }) => {
|
||||
function handleDelete(id) {
|
||||
@ -190,34 +168,19 @@ export default connect(({ products }) => ({
|
||||
}))(Products);
|
||||
```
|
||||
|
||||
Finally, we need some initial data to make the application run together. Edit `src/app.js`,
|
||||
|
||||
```js
|
||||
export const dva = {
|
||||
config: {
|
||||
onError(err) {
|
||||
err.preventDefault();
|
||||
console.error(err.message);
|
||||
},
|
||||
initialState: {
|
||||
products: [
|
||||
{ name: 'dva', id: 1 },
|
||||
{ name: 'antd', id: 2 },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Refresh your browser, you should see the following result:
|
||||
|
||||
<img src="https://zos.alipayobjects.com/rmsportal/GQJeDDeUCSTRMMg.gif" />
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/dPsy4tFHN3/umi.gif" />
|
||||
|
||||
## Build
|
||||
|
||||
Now that we've written our application and verified that it works in development, it's time to get it ready for deployment to our users. To do so, click `build` in Task page.
|
||||
Now that we've written our application and verified that it works in development, it's time to get it ready for deployment to our users. To do so, execute the following command:
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/P31ZGMwzGe/d5365860-f7c6-4abe-98c0-36d6b1b3a65a.png" width="718" />
|
||||
```bash
|
||||
$ yarn build
|
||||
```
|
||||
|
||||
|
||||
|
||||
The `build` command packages up all of the assets that make up your application —— JavaScript, templates, CSS, web fonts, images, and more. Then you can find these files in the `dist/` directory.
|
||||
|
||||
|
||||
@ -11,64 +11,30 @@ title: 项目实战
|
||||
|
||||
> 你可能也会对 [Ant Design Pro](https://pro.ant.design/) 感兴趣，这是一个基于 umi、dva 和 ant design 的开箱即用的中台前端/设计解决方案。
|
||||
|
||||
本文会引导你使用 Umi UI、dva 和 antd 从 0 开始创建一个简单应用。
|
||||
本文会引导你使用 Umi、dva 和 antd 从 0 开始创建一个简单应用。
|
||||
|
||||
## 安装 Umi UI
|
||||
## 安装 Umi
|
||||
|
||||
推荐使用 yarn 安装 Umi UI，执行以下命令。
|
||||
|
||||
> 如果你使用 npm，可执行 `npm install umi -g`，效果一致。
|
||||
推荐使用 yarn 创建 Umi 脚手架，执行以下命令。
|
||||
|
||||
```bash
|
||||
$ yarn global add umi
|
||||
$ umi -v
|
||||
2.10.4
|
||||
$ mkdir myapp && cd myapp
|
||||
$ yarn create @umijs/umi-app
|
||||
$ yarn
|
||||
```
|
||||
|
||||
确保 umi 版本在 2.10.0 以上。
|
||||
> 如果你使用 npm，可执行 `npx @umijs/create-umi-app`，效果一致。
|
||||
|
||||
## 创建新应用
|
||||
## 安装插件集
|
||||
|
||||
启动 Umi UI，
|
||||
执行以下命令，安装插件集（包括 antd、dva、国际化等常用插件）：
|
||||
|
||||
```bash
|
||||
$ umi ui
|
||||
|
||||
🚀 Starting Umi UI using umi@2.10.4...
|
||||
🧨 Ready on http://localhost:3000/
|
||||
# 或 npm i @umijs/preset-react -D
|
||||
$ yarn add @umijs/preset-react -D
|
||||
```
|
||||
|
||||
启动后， Umi UI 会自动打开浏览器，点击 `创建项目`，选择路径并输入 `应用名`，如下图：
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/1%24I%24KuXNop/60f0bae2-d803-4339-bc09-8df618ebd916.png" width="718" />
|
||||
|
||||
点击 `下一步`，选择 `基础模板`，技术栈选上 `antd` 和 `dva`，然后点击 `完成`。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/9gmy78Evsp/7978f0b2-8b8c-44fa-84df-bfe9dc6065f4.png" width="718" />
|
||||
|
||||
进入到项目创建流程，等待几分钟，
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/cT35jkUl4j/8381545c-7f89-48ef-9e93-8adcdd6a3bb4.png" width="718" />
|
||||
|
||||
创建完成后，进入到 `总览`，点击快捷入口 `本地启动`，
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/vGsor%24iku8/531acbd7-f48e-4246-bc77-152117ef56db.png" width="718" />
|
||||
|
||||
在任务页中，点击 `启动`，
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/RRYNqxBs9g/72ec5739-ac1f-40a6-8f7a-204c7faba0a7.png" width="718" />
|
||||
|
||||
按提示，点击 [http://localhost:8000](http://localhost:8000)，你会看到 umi 的欢迎界面。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/2Bm%24zoeBpz/ba708131-c7ac-41f0-92a0-c86007291b6a.png" width="718" />
|
||||
|
||||
## 使用 antd
|
||||
|
||||
前面选择 antd 之后，会自动处理 antd 的依赖以及按需加载。你可以检查 `配置`，确保 antd 已开启。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/0EFiWipONe/7aea9287-09ff-4396-bb20-d8da28483c2c.png" width="718" />
|
||||
|
||||
> 而如果要使用固定版本的 antd，你可以在项目里安装额外的 antd 依赖，package.json 里声明的 antd 依赖会被优先使用。
|
||||
> 插件默认使用 `"antd": "^4.0.0"`，如果要使用固定版本的 antd，你可以在项目里安装额外的 antd 依赖，`package.json` 里声明的 antd 依赖会被优先使用。
|
||||
|
||||
## 新建路由
|
||||
|
||||
@ -77,14 +43,27 @@ $ umi ui
|
||||
然后通过命令创建 `/products` 路由，
|
||||
|
||||
```bash
|
||||
$ umi g page products
|
||||
$ npx umi g page products --typescript
|
||||
|
||||
create src/pages/products.js
|
||||
create src/pages/products.css
|
||||
✔ success
|
||||
Write: src/pages/products.tsx
|
||||
Write: src/pages/products.css
|
||||
```
|
||||
|
||||
然后在浏览器里打开 [http://localhost:8000/products](http://localhost:8000/products)，你应该能看到对应的页面。
|
||||
在 `.umirc.ts` 中配置路由，如果有国际化需要，可以配置 `locale` 开启 antd 国际化：
|
||||
|
||||
```diff
|
||||
import { defineConfig } from 'umi';
|
||||
|
||||
export default defineConfig({
|
||||
+ locale: { antd: true },
|
||||
routes: [
|
||||
{ path: '/', component: '@/pages/index' },
|
||||
+ { path: '/products', component: '@/pages/products' },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
运行 `yarn start` 然后在浏览器里打开 [http://localhost:8000/products](http://localhost:8000/products)，你应该能看到对应的页面。
|
||||
|
||||
## 编写 UI Component
|
||||
|
||||
@ -92,11 +71,7 @@ $ umi g page products
|
||||
|
||||
我们来编写一个 `ProductList` component，这样就能在不同的地方显示产品列表了。
|
||||
|
||||
点击 `在编辑器中打开`，
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/ffPr49NZ%26p/64fa0ad5-9a7a-43c0-b308-ffe28e680a8b.png" width="718" />
|
||||
|
||||
然后新建 `src/components/ProductList.js` 文件：
|
||||
然后新建 `src/components/ProductList.tsx` 文件：
|
||||
|
||||
```js
|
||||
import { Table, Popconfirm, Button } from 'antd';
|
||||
@ -130,12 +105,15 @@ export default ProductList;
|
||||
|
||||
dva 通过 `model` 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。
|
||||
|
||||
新建 model `src/models/products.js`，
|
||||
新建 model `src/models/products.ts`，
|
||||
|
||||
```js
|
||||
export default {
|
||||
namespace: 'products',
|
||||
state: [],
|
||||
state: [
|
||||
{ name: 'dva', id: 'dva' },
|
||||
{ name: 'antd', id: 'antd' },
|
||||
],
|
||||
reducers: {
|
||||
delete(state, { payload: id }) {
|
||||
return state.filter(item => item.id !== id);
|
||||
@ -158,11 +136,11 @@ umi 里约定 `src/models` 下的 model 会被自动注入，你无需手动注
|
||||
|
||||
dva 提供了 `connect` 方法。如果你熟悉 redux，这个 connect 来自 react-redux。
|
||||
|
||||
编辑 `src/pages/products.js`，替换为以下内容：
|
||||
编辑 `src/pages/products.tsx`，替换为以下内容：
|
||||
|
||||
```js
|
||||
import { connect } from 'dva';
|
||||
import ProductList from '../components/ProductList';
|
||||
import { connect } from 'umi';
|
||||
import ProductList from '@/components/ProductList';
|
||||
|
||||
const Products = ({ dispatch, products }) => {
|
||||
function handleDelete(id) {
|
||||
@ -184,34 +162,25 @@ export default connect(({ products }) => ({
|
||||
}))(Products);
|
||||
```
|
||||
|
||||
最后，我们还需要一些初始数据让这个应用 run 起来。编辑 `src/app.js`：
|
||||
执行启动命令：
|
||||
|
||||
```js
|
||||
export const dva = {
|
||||
config: {
|
||||
onError(err) {
|
||||
err.preventDefault();
|
||||
console.error(err.message);
|
||||
},
|
||||
initialState: {
|
||||
products: [
|
||||
{ name: 'dva', id: 1 },
|
||||
{ name: 'antd', id: 2 },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```bash
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
刷新浏览器，应该能看到以下效果：
|
||||
访问 [http://localhost:8000](http://localhost:8000/)，应该能看到以下效果：
|
||||
|
||||
<img src="https://zos.alipayobjects.com/rmsportal/GQJeDDeUCSTRMMg.gif" />
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/dPsy4tFHN3/umi.gif" />
|
||||
|
||||
## 构建应用
|
||||
|
||||
完成开发并且在开发环境验证之后，就需要部署给我们的用户了。点击 `构建`，
|
||||
完成开发并且在开发环境验证之后，就需要部署给我们的用户了，执行以下命令：
|
||||
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/D%2671c0zDk%26/a6c69c76-28e1-4001-9228-3affe8468e2f.png" width="718" />
|
||||
```bash
|
||||
$ yarn build
|
||||
```
|
||||
|
||||
|
||||
|
||||
构建会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。你可以在 `dist/` 目录下找到这些文件。
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ We provide comprehensive design guidelines, best practices, resources, and tools
|
||||
- [Design patterns](/docs/spec/overview)
|
||||
- [Visualization](/docs/spec/visual)
|
||||
- [Illustrations](/docs/spec/illustration)
|
||||
- [Design resources](/docs/spec/download)
|
||||
- [Design resources](/docs/resources)
|
||||
- [Sketch toolbox](http://kitchen.alipay.com/)
|
||||
- [Articles](/docs/spec/article)
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ title: 介绍
|
||||
- [设计模式](/docs/spec/overview)
|
||||
- [可视化](/docs/spec/visual)
|
||||
- [插画](/docs/spec/illustration)
|
||||
- [设计资源](/docs/spec/download)
|
||||
- [设计资源](/docs/resources)
|
||||
- [Sketch 工具集](http://kitchen.alipay.com/)
|
||||
- [文章](/docs/spec/article)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "4.0.0",
|
||||
"version": "4.0.1",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"keywords": [
|
||||
"ant",
|
||||
@ -123,7 +123,7 @@
|
||||
"rc-slider": "~9.2.1",
|
||||
"rc-steps": "~3.5.0",
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~7.1.0",
|
||||
"rc-table": "~7.2.0",
|
||||
"rc-tabs": "~10.0.0",
|
||||
"rc-tooltip": "~4.0.0",
|
||||
"rc-tree": "~3.0.0",
|
||||
|
||||
@ -16,7 +16,7 @@ const $ = jQuery(window);
|
||||
const QUERY_TITLE = '.gh-header-title .js-issue-title';
|
||||
const QUERY_DESCRIPTION_LINES = '.comment-body table tbody tr';
|
||||
const QUERY_AUTHOR = '.timeline-comment-header-text .author:first';
|
||||
const MAINTAINERS = ['zombiej', 'afc163', 'chenshuai2144'];
|
||||
const MAINTAINERS = ['zombiej', 'zombieJ', 'afc163', 'chenshuai2144'];
|
||||
|
||||
const fromVersion = process.argv[process.argv.length - 2];
|
||||
const toVersion = process.argv[process.argv.length - 1];
|
||||
|
||||
@ -83,16 +83,31 @@ a {
|
||||
> .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
|
||||
&.ant-menu-inline > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
|
||||
padding-left: 40px !important;
|
||||
|
||||
.ant-row-rtl & {
|
||||
padding-right: 40px !important;
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Nest Category > Type > Article
|
||||
&.ant-menu-inline {
|
||||
.ant-menu-item-group-title {
|
||||
padding-left: 56px;
|
||||
|
||||
.ant-row-rtl & {
|
||||
padding-right: 56px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-item-group-list > .ant-menu-item {
|
||||
padding-left: 80px !important;
|
||||
|
||||
.ant-row-rtl & {
|
||||
padding-right: 80px !important;
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -132,7 +132,6 @@
|
||||
}
|
||||
|
||||
&:hover .footer-nav-icon-before {
|
||||
left: -3px;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
@ -143,7 +142,6 @@
|
||||
}
|
||||
|
||||
&:hover .footer-nav-icon-after {
|
||||
right: -3px;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,15 @@
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
text-decoration: none;
|
||||
|
||||
.ant-row-rtl & {
|
||||
float: right;
|
||||
|
||||
.footer-nav-icon-before,
|
||||
.footer-nav-icon-after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> a.prev-page {
|
||||
@ -22,6 +31,13 @@
|
||||
color: @site-text-color-secondary;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.ant-row-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
margin-right: 0;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-nav-icon-after {
|
||||
@ -31,6 +47,11 @@
|
||||
&:hover .footer-nav-icon-before {
|
||||
left: -3px;
|
||||
color: @primary-color;
|
||||
|
||||
.ant-row-rtl & {
|
||||
right: -3px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,6 +59,11 @@
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
.ant-row-rtl & {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer-nav-icon-after {
|
||||
position: relative;
|
||||
right: 0;
|
||||
@ -45,6 +71,13 @@
|
||||
color: @site-text-color-secondary;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.ant-row-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-right: 1em;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-nav-icon-before {
|
||||
@ -54,6 +87,11 @@
|
||||
&:hover .footer-nav-icon-after {
|
||||
right: -3px;
|
||||
color: @primary-color;
|
||||
|
||||
.ant-row-rtl & {
|
||||
right: auto;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -87,6 +87,11 @@
|
||||
.prev-next-nav {
|
||||
width: ~'calc(100% - 32px)';
|
||||
margin-left: 16px;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 16px;
|
||||
margin-left: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import { Row, Col, Typography } from 'antd';
|
||||
import './RecommendPage.less';
|
||||
|
||||
@ -14,7 +14,7 @@ interface Recommend {
|
||||
description: string;
|
||||
}
|
||||
|
||||
const LIST: Recommend[] = [
|
||||
const LIST_CN: Recommend[] = [
|
||||
{
|
||||
title: 'Ant Design 4.0 正式版来了！',
|
||||
description:
|
||||
@ -38,6 +38,28 @@ const LIST: Recommend[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const LIST_EN: Recommend[] = [
|
||||
{
|
||||
title: 'Ant Design 4.0 is out!',
|
||||
description: '⚡️ Smaller, faster, prettier and more powerfull, finally Ant Design 4.0 right here.',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*G0nDS5-aESoAAAAAAAAAAABkARQnAQ',
|
||||
href: 'https://github.com/ant-design/ant-design/issues/21656',
|
||||
popularize: true,
|
||||
},
|
||||
{
|
||||
title: 'Introduce AntV',
|
||||
description: '✨ New player of front-end data visualization',
|
||||
img: 'https://gw.alipayobjects.com/zos/antfincdn/Vb5TpaLRSn/089e332b-a54c-421e-a4f0-f2a3480e2f42.png',
|
||||
href: 'https://medium.com/ant-design/introduce-antv-a-new-player-in-data-visualization-90ca999cfb08',
|
||||
},
|
||||
{
|
||||
title: 'G2Plot: a charting library',
|
||||
description: '📊 A charting library based on the grammar of graphics',
|
||||
img: 'https://gw.alipayobjects.com/zos/antfincdn/NBwf%24mYoDf/d100a715-d763-4bc5-b801-23b7f56b665d.png',
|
||||
href: 'https://github.com/antvis/G2Plot',
|
||||
},
|
||||
];
|
||||
|
||||
interface RecommendBlockProps extends Recommend {
|
||||
main?: boolean;
|
||||
img: string;
|
||||
@ -73,7 +95,10 @@ const RecommendBlock = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default function RecommendPage() {
|
||||
export default function RecommendPageo() {
|
||||
const { locale } = useIntl();
|
||||
const isZhCN = locale === 'zh-CN';
|
||||
const LIST = isZhCN ? LIST_CN : LIST_EN;
|
||||
return (
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: -36 }}>
|
||||
<Col xs={24} sm={14}>
|
||||
|
||||
@ -123,7 +123,10 @@ class Footer extends React.Component<WrappedComponentProps> {
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="app.footer.design-resources" />,
|
||||
url: getLocalizedPathname('/docs/resources', isZhCN),
|
||||
url: getLocalizedPathname('/docs/resources', isZhCN, {
|
||||
zhCN: '设计资源',
|
||||
enUS: 'Design-Resources',
|
||||
}),
|
||||
LinkComponent: Link,
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'bisheng/router';
|
||||
import * as utils from './utils';
|
||||
|
||||
export default function NotFound({ location }) {
|
||||
return (
|
||||
<div id="page-404">
|
||||
<section>
|
||||
<h1>404</h1>
|
||||
<p>
|
||||
你要找的页面不存在
|
||||
<Link to={utils.getLocalizedPathname('/', utils.isZhCN(location.pathname))}>
|
||||
返回首页
|
||||
</Link>
|
||||
</p>
|
||||
</section>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: '#react-content { height: 100%; background-color: #fff }',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
61
site/theme/template/NotFound.tsx
Normal file
61
site/theme/template/NotFound.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'bisheng/router';
|
||||
import * as utils from './utils';
|
||||
|
||||
export interface NotFoundProps {
|
||||
location: {
|
||||
pathname: string;
|
||||
search: string;
|
||||
hash: string;
|
||||
state: any;
|
||||
action: string;
|
||||
key: any;
|
||||
basename: string;
|
||||
query: Record<string, string>;
|
||||
};
|
||||
router: {
|
||||
push: (pathname: string) => void;
|
||||
replace: (pathname: string) => void;
|
||||
};
|
||||
}
|
||||
|
||||
const DIRECT_MAP: Record<string, string> = {
|
||||
'docs/spec/download': 'docs/resources',
|
||||
'docs/spec/work-with-us': 'docs/resources',
|
||||
};
|
||||
|
||||
export default function NotFound(props: NotFoundProps) {
|
||||
const {
|
||||
location: { pathname },
|
||||
router,
|
||||
} = props;
|
||||
|
||||
React.useEffect(() => {
|
||||
const directLinks = Object.keys(DIRECT_MAP);
|
||||
for (let i = 0; i < directLinks.length; i += 1) {
|
||||
const matchPath = directLinks[i];
|
||||
if (pathname.includes(matchPath)) {
|
||||
router.replace(
|
||||
utils.getLocalizedPathname(`/${DIRECT_MAP[matchPath]}`, utils.isZhCN(pathname)),
|
||||
);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="page-404">
|
||||
<section>
|
||||
<h1>404!</h1>
|
||||
<p>
|
||||
你要找的页面不存在
|
||||
<Link to={utils.getLocalizedPathname('/', utils.isZhCN(pathname))}>返回首页</Link>
|
||||
</p>
|
||||
</section>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: '#react-content { height: 100%; background-color: #fff }',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user