mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-21 16:33:27 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
xrkffgg
commit
0c5d5af627
@ -15,6 +15,20 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.4.3
|
||||
|
||||
`2020-07-20`
|
||||
|
||||
- 🐞 Fix Layout `trigger` cannot customize zero width to trigger. [#25653](https://github.com/ant-design/ant-design/pull/25653)
|
||||
- 🐞 Fix Form.Item `help` style when verification fails. [#25582](https://github.com/ant-design/ant-design/pull/25582) [@zhangchen915](https://github.com/zhangchen915)
|
||||
- 🐞 Fix Descriptions abnormal style inside Table `expandedRowRender`. [#25593](https://github.com/ant-design/ant-design/pull/25593)
|
||||
- 💄 Add `@zindex-popconfirm: 1060` less variable, and improve `@zindex-tooltip` into `1070`. [#25693](https://github.com/ant-design/ant-design/pull/25693)
|
||||
- 🛠 Upgrade `react-slick` to reduce bundle size. [#25599](https://github.com/ant-design/ant-design/pull/25599)
|
||||
- 🌐 Improve Catalan ca_ES localization. [#25583](https://github.com/ant-design/ant-design/pull/25583) [@albertms10](https://github.com/albertms10)
|
||||
- 🇸🇦 Improve ar_EG localization. [#25587](https://github.com/ant-design/ant-design/pull/25587) [@amir5000](https://github.com/amir5000)
|
||||
- TypeScript
|
||||
- 🐞 Fix Upload `customRequest` file interface. [#25598](https://github.com/ant-design/ant-design/pull/25598) [@AlbertAZ1992](https://github.com/AlbertAZ1992)
|
||||
|
||||
## 4.4.2
|
||||
|
||||
`2020-07-11`
|
||||
|
||||
@ -15,6 +15,20 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.4.3
|
||||
|
||||
`2020-07-20`
|
||||
|
||||
- 🐞 修复 Layout `trigger` 属性无法定制零宽触发器的问题。[#25653](https://github.com/ant-design/ant-design/pull/25653)
|
||||
- 🐞 修复 Form.Item `help` 在校验失败时的样式。[#25582](https://github.com/ant-design/ant-design/pull/25582) [@zhangchen915](https://github.com/zhangchen915)
|
||||
- 🐞 修复 Descriptions 在 Table `expandedRowRender` 样式异常的问题。[#25593](https://github.com/ant-design/ant-design/pull/25593)
|
||||
- 💄 新增 `@zindex-popconfirm: 1060` less 变量，并将 `@zindex-tooltip` 提升为 `1070`。[#25693](https://github.com/ant-design/ant-design/pull/25693)
|
||||
- 🛠 更新 `react-slick` 依赖优化包大小。[#25599](https://github.com/ant-design/ant-design/pull/25599)
|
||||
- 🌐 改进加泰罗尼亚语 ca_ES 国际化。[#25583](https://github.com/ant-design/ant-design/pull/25583) [@albertms10](https://github.com/albertms10)
|
||||
- 🇸🇦 改进阿拉伯语 ar_EG 国际化。[#25587](https://github.com/ant-design/ant-design/pull/25587) [@amir5000](https://github.com/amir5000)
|
||||
- TypeScript
|
||||
- 🐞 修复 Upload `customRequest` 的 File 定义。[#25598](https://github.com/ant-design/ant-design/pull/25598) [@AlbertAZ1992](https://github.com/AlbertAZ1992)
|
||||
|
||||
## 4.4.2
|
||||
|
||||
`2020-07-11`
|
||||
|
||||
@ -16964,7 +16964,9 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -17116,7 +17118,9 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -17273,7 +17277,9 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -17425,7 +17431,9 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -17582,7 +17590,9 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -17734,7 +17744,9 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -17891,7 +17903,9 @@ exports[`ConfigProvider components Pagination configProvider virtual and dropdow
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -18043,7 +18057,9 @@ exports[`ConfigProvider components Pagination configProvider virtual and dropdow
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -18200,7 +18216,9 @@ exports[`ConfigProvider components Pagination normal 1`] = `
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -18352,7 +18370,9 @@ exports[`ConfigProvider components Pagination normal 1`] = `
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -18509,7 +18529,9 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -18661,7 +18683,9 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -18783,7 +18807,7 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="config-popover"
|
||||
class="config-popover config-popconfirm"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
@ -18867,7 +18891,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="config-popover"
|
||||
class="config-popover config-popconfirm"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
@ -18951,7 +18975,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="config-popover"
|
||||
class="config-popover config-popconfirm"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
@ -19035,7 +19059,7 @@ exports[`ConfigProvider components Popconfirm configProvider virtual and dropdow
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover"
|
||||
class="ant-popover ant-popconfirm"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
@ -19119,7 +19143,7 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-popover"
|
||||
class="ant-popover ant-popconfirm"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
@ -19203,7 +19227,7 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="prefix-Popconfirm"
|
||||
class="prefix-Popconfirm prefix-Popconfirm"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -167,8 +167,10 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
|
||||
width,
|
||||
collapsedWidth,
|
||||
zeroWidthTriggerStyle,
|
||||
children,
|
||||
...others
|
||||
} = this.props;
|
||||
const { collapsed, below } = this.state;
|
||||
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
|
||||
const divProps = omit(others, [
|
||||
'collapsed',
|
||||
@ -179,7 +181,7 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
|
||||
'siderHook',
|
||||
'zeroWidthTriggerStyle',
|
||||
]);
|
||||
const rawWidth = this.state.collapsed ? collapsedWidth : width;
|
||||
const rawWidth = collapsed ? collapsedWidth : width;
|
||||
// use "px" as fallback unit for width
|
||||
const siderWidth = isNumeric(rawWidth) ? `${rawWidth}px` : String(rawWidth);
|
||||
// special trigger when collapsedWidth == 0
|
||||
@ -187,19 +189,20 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
|
||||
parseFloat(String(collapsedWidth || 0)) === 0 ? (
|
||||
<span
|
||||
onClick={this.toggle}
|
||||
className={`${prefixCls}-zero-width-trigger ${prefixCls}-zero-width-trigger-${
|
||||
reverseArrow ? 'right' : 'left'
|
||||
}`}
|
||||
className={classNames(
|
||||
`${prefixCls}-zero-width-trigger`,
|
||||
`${prefixCls}-zero-width-trigger-${reverseArrow ? 'right' : 'left'}`,
|
||||
)}
|
||||
style={zeroWidthTriggerStyle}
|
||||
>
|
||||
<BarsOutlined />
|
||||
{trigger || <BarsOutlined />}
|
||||
</span>
|
||||
) : null;
|
||||
const iconObj = {
|
||||
expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />,
|
||||
collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />,
|
||||
};
|
||||
const status = this.state.collapsed ? 'collapsed' : 'expanded';
|
||||
const status = collapsed ? 'collapsed' : 'expanded';
|
||||
const defaultTrigger = iconObj[status];
|
||||
const triggerDom =
|
||||
trigger !== null
|
||||
@ -221,15 +224,15 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
|
||||
width: siderWidth,
|
||||
};
|
||||
const siderCls = classNames(className, prefixCls, `${prefixCls}-${theme}`, {
|
||||
[`${prefixCls}-collapsed`]: !!this.state.collapsed,
|
||||
[`${prefixCls}-collapsed`]: !!collapsed,
|
||||
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
|
||||
[`${prefixCls}-below`]: !!this.state.below,
|
||||
[`${prefixCls}-below`]: !!below,
|
||||
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
|
||||
});
|
||||
return (
|
||||
<aside className={siderCls} {...divProps} style={divStyle}>
|
||||
<div className={`${prefixCls}-children`}>{this.props.children}</div>
|
||||
{collapsible || (this.state.below && zeroWidthTrigger) ? triggerDom : null}
|
||||
<div className={`${prefixCls}-children`}>{children}</div>
|
||||
{collapsible || (below && zeroWidthTrigger) ? triggerDom : null}
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
@ -192,4 +192,18 @@ describe('Sider', () => {
|
||||
background: '#F96',
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to customize zero width trigger by trigger prop', () => {
|
||||
const wrapper = mount(
|
||||
<Sider collapsedWidth={0} collapsible trigger={<span className="my-trigger" />}>
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
|
||||
<Menu.Item key="1">
|
||||
<Icon type="user" />
|
||||
<span>nav 1</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>,
|
||||
);
|
||||
expect(wrapper.find('.ant-layout-sider-zero-width-trigger').find('.my-trigger').length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
@ -2175,7 +2175,9 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -2184,7 +2186,9 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -2193,7 +2197,9 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -2202,7 +2208,9 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -2211,7 +2219,9 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -2259,7 +2269,9 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="8"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
8
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -71,7 +71,9 @@ exports[`List.pagination renders pagination correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -80,7 +82,9 @@ exports[`List.pagination renders pagination correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -165,7 +169,9 @@ exports[`List.pagination should change page size work 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -312,7 +318,9 @@ exports[`List.pagination should change page size work 2`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -582,7 +590,9 @@ exports[`List.pagination should default work 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -591,7 +601,9 @@ exports[`List.pagination should default work 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
297
components/modal/__tests__/__snapshots__/demo.test.js.snap
Normal file
297
components/modal/__tests__/__snapshots__/demo.test.js.snap
Normal file
@ -0,0 +1,297 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/modal/demo/async.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open Modal with async logic
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/basic.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open Modal
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/button-props.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open Modal with customized button props
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/confirm.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Confirm
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
With promise
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-dashed"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Delete
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-dashed"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
With extra props
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/confirm-router.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Confirm
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/dark.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open Modal
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/footer.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open Modal with customized footer
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/hooks.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Confirm
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Warning
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Info
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Error
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/info.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Info
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Success
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Error
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Warning
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/locale.md correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Modal
|
||||
</span>
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Confirm
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/manual.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Open modal to close in 5s
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/modal/demo/position.md correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Display a modal dialog at 20px to Top
|
||||
</span>
|
||||
</button>,
|
||||
<br />,
|
||||
<br />,
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Vertically centered modal dialog
|
||||
</span>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
3
components/modal/__tests__/demo.test.js
Normal file
3
components/modal/__tests__/demo.test.js
Normal file
@ -0,0 +1,3 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('modal');
|
||||
@ -52,7 +52,7 @@ class App extends React.Component {
|
||||
render() {
|
||||
const { visible, confirmLoading, ModalText } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Button type="primary" onClick={this.showModal}>
|
||||
Open Modal with async logic
|
||||
</Button>
|
||||
@ -65,7 +65,7 @@ class App extends React.Component {
|
||||
>
|
||||
<p>{ModalText}</p>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@ class App extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Button type="primary" onClick={this.showModal}>
|
||||
Open Modal
|
||||
</Button>
|
||||
@ -55,7 +55,7 @@ class App extends React.Component {
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@ class App extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Button type="primary" onClick={this.showModal}>
|
||||
Open Modal with customized button props
|
||||
</Button>
|
||||
@ -57,7 +57,7 @@ class App extends React.Component {
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,10 +40,5 @@ function showConfirm() {
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Button onClick={showConfirm}>Confirm</Button>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
ReactDOM.render(<Button onClick={showConfirm}>Confirm</Button>, mountNode);
|
||||
```
|
||||
|
||||
@ -15,7 +15,25 @@ debug: true
|
||||
Basic modal.
|
||||
|
||||
```jsx
|
||||
import { Modal, DatePicker, Slider, Tree, Badge, Collapse, Timeline, Tabs, Anchor, Table, Card, Button, Calendar, Transfer, Switch, Typography, Dropdown } from 'antd';
|
||||
import {
|
||||
Modal,
|
||||
DatePicker,
|
||||
Slider,
|
||||
Tree,
|
||||
Badge,
|
||||
Collapse,
|
||||
Timeline,
|
||||
Tabs,
|
||||
Anchor,
|
||||
Table,
|
||||
Card,
|
||||
Button,
|
||||
Calendar,
|
||||
Transfer,
|
||||
Switch,
|
||||
Typography,
|
||||
Dropdown,
|
||||
} from 'antd';
|
||||
import moment from 'moment';
|
||||
import difference from 'lodash/difference';
|
||||
import { DownOutlined, ClockCircleOutlined } from '@ant-design/icons';
|
||||
@ -287,15 +305,15 @@ class App extends React.Component {
|
||||
showSearch: false,
|
||||
};
|
||||
|
||||
handleDisable = (disabled) => {
|
||||
handleDisable = disabled => {
|
||||
this.setState({
|
||||
disabled,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleTableTransferChange = nextTargetKeys => {
|
||||
this.setState({ targetKeys: nextTargetKeys });
|
||||
}
|
||||
};
|
||||
|
||||
triggerDisable = disabled => {
|
||||
this.setState({ disabled });
|
||||
@ -305,7 +323,7 @@ class App extends React.Component {
|
||||
this.setState({ showSearch });
|
||||
};
|
||||
|
||||
handleTransferChange = (nextTargetKeys) => {
|
||||
handleTransferChange = nextTargetKeys => {
|
||||
this.setState({ targetKeys: nextTargetKeys });
|
||||
};
|
||||
|
||||
@ -374,7 +392,7 @@ class App extends React.Component {
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Button type="primary" onClick={this.showModal}>
|
||||
Open Modal
|
||||
</Button>
|
||||
@ -391,11 +409,9 @@ class App extends React.Component {
|
||||
onChange={this.handleDisable}
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
<Card title="Card Title">
|
||||
<Card title="Card Title">
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
<Card.Grid hoverable={false}>
|
||||
Content
|
||||
</Card.Grid>
|
||||
<Card.Grid hoverable={false}>Content</Card.Grid>
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
@ -470,7 +486,11 @@ class App extends React.Component {
|
||||
<Anchor>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo with Target" target="_blank" />
|
||||
<Link
|
||||
href="#components-anchor-demo-basic"
|
||||
title="Basic demo with Target"
|
||||
target="_blank"
|
||||
/>
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
@ -496,11 +516,7 @@ class App extends React.Component {
|
||||
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
|
||||
</Timeline>
|
||||
<Calendar />
|
||||
<Tree
|
||||
showLine
|
||||
switcherIcon={<DownOutlined />}
|
||||
defaultExpandedKeys={['0-0-0']}
|
||||
>
|
||||
<Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
|
||||
<TreeNode title="parent 1" key="0-0">
|
||||
<TreeNode title="parent 1-0" key="0-0-0">
|
||||
<TreeNode title="leaf" key="0-0-0-0" />
|
||||
@ -517,7 +533,7 @@ class App extends React.Component {
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
<Table columns={columns} dataSource={data} footer={() => 'Footer'} />
|
||||
<Table
|
||||
<Table
|
||||
columns={columnsTable}
|
||||
dataSource={dataTable}
|
||||
pagination={false}
|
||||
@ -554,16 +570,14 @@ class App extends React.Component {
|
||||
}}
|
||||
/>
|
||||
<br />
|
||||
<Table
|
||||
columns={columnsNest}
|
||||
expandable={{ expandedRowRender }}
|
||||
dataSource={dataNest}
|
||||
/>
|
||||
<Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
|
||||
<Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
|
||||
<Card
|
||||
hoverable
|
||||
style={{ width: 240 }}
|
||||
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
|
||||
cover={
|
||||
<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
|
||||
}
|
||||
>
|
||||
<Meta title="Europe Street beat" description="www.instagram.com" />
|
||||
</Card>
|
||||
@ -573,7 +587,7 @@ class App extends React.Component {
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@ class App extends React.Component {
|
||||
render() {
|
||||
const { visible, loading } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Button type="primary" onClick={this.showModal}>
|
||||
Open Modal with customized footer
|
||||
</Button>
|
||||
@ -70,7 +70,7 @@ class App extends React.Component {
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,11 +22,11 @@ const UnreachableContext = React.createContext();
|
||||
const config = {
|
||||
title: 'Use Hook!',
|
||||
content: (
|
||||
<div>
|
||||
<>
|
||||
<ReachableContext.Consumer>{name => `Reachable: ${name}!`}</ReachableContext.Consumer>
|
||||
<br />
|
||||
<UnreachableContext.Consumer>{name => `Unreachable: ${name}!`}</UnreachableContext.Consumer>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ class LocalizedModal extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Button type="primary" onClick={this.showModal}>
|
||||
Modal
|
||||
</Button>
|
||||
@ -50,7 +50,7 @@ class LocalizedModal extends React.Component {
|
||||
<p>Bla bla ...</p>
|
||||
<p>Bla bla ...</p>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ class App extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Button type="primary" onClick={() => this.setModal1Visible(true)}>
|
||||
Display a modal dialog at 20px to Top
|
||||
</Button>
|
||||
@ -63,7 +63,7 @@ class App extends React.Component {
|
||||
<p>some contents...</p>
|
||||
<p>some contents...</p>
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,9 +44,9 @@ When requiring users to interact with the application, but without jumping to a
|
||||
|
||||
#### Note
|
||||
|
||||
> - The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set `destroyOnClose` on it.
|
||||
>
|
||||
> - `Modal.method()` RTL mode only supports hooks.
|
||||
- The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set `destroyOnClose` on it.
|
||||
- There is a situation that using `<Modal />` with Form, which won't clear fields value when closing Modal even you have set `destroyOnClose`. You need `<Form preserve={false} />` in this case.
|
||||
- `Modal.method()` RTL mode only supports hooks.
|
||||
|
||||
### Modal.method()
|
||||
|
||||
|
||||
@ -48,9 +48,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
|
||||
|
||||
#### 注意
|
||||
|
||||
> - `<Modal />` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `destroyOnClose`。
|
||||
>
|
||||
> - `Modal.method()` RTL 模式仅支持 hooks 用法。
|
||||
- `<Modal />` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `destroyOnClose`。
|
||||
- `<Modal />` 和 Form 一起配合使用时，设置 `destroyOnClose` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 `<Form preserve={false} />`。
|
||||
- `Modal.method()` RTL 模式仅支持 hooks 用法。
|
||||
|
||||
### Modal.method()
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import classNames from 'classnames';
|
||||
import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined';
|
||||
import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined';
|
||||
import ResizeObserver from 'rc-resize-observer';
|
||||
@ -140,7 +140,7 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
|
||||
|
||||
const prefixCls = getPrefixCls('page-header', customizePrefixCls);
|
||||
const breadcrumbDom = breadcrumb && breadcrumb.routes ? renderBreadcrumb(breadcrumb) : null;
|
||||
const className = classnames(prefixCls, customizeClassName, {
|
||||
const className = classNames(prefixCls, customizeClassName, {
|
||||
'has-breadcrumb': breadcrumbDom,
|
||||
'has-footer': footer,
|
||||
[`${prefixCls}-ghost`]: ghost,
|
||||
|
||||
@ -48,7 +48,9 @@ exports[`renders ./components/pagination/demo/all.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -57,7 +59,9 @@ exports[`renders ./components/pagination/demo/all.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -66,7 +70,9 @@ exports[`renders ./components/pagination/demo/all.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -75,7 +81,9 @@ exports[`renders ./components/pagination/demo/all.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -84,7 +92,9 @@ exports[`renders ./components/pagination/demo/all.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -132,7 +142,9 @@ exports[`renders ./components/pagination/demo/all.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="9"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
9
|
||||
</a>
|
||||
</li>
|
||||
@ -287,7 +299,9 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -296,7 +310,9 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -305,7 +321,9 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -314,7 +332,9 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -323,7 +343,9 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -407,7 +429,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -416,7 +440,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -425,7 +451,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -434,7 +462,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -443,7 +473,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -491,7 +523,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="50"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
50
|
||||
</a>
|
||||
</li>
|
||||
@ -635,7 +669,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -644,7 +680,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -653,7 +691,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -662,7 +702,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -671,7 +713,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -719,7 +763,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="50"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
50
|
||||
</a>
|
||||
</li>
|
||||
@ -868,7 +914,9 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -877,7 +925,9 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -886,7 +936,9 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -895,7 +947,9 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -904,7 +958,9 @@ exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -965,7 +1021,9 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -974,7 +1032,9 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -983,7 +1043,9 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -992,7 +1054,9 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -1001,7 +1065,9 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -1049,7 +1115,9 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="50"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
50
|
||||
</a>
|
||||
</li>
|
||||
@ -1173,7 +1241,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1182,7 +1252,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -1191,7 +1263,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -1200,7 +1274,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -1209,7 +1285,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -1257,7 +1335,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="50"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
50
|
||||
</a>
|
||||
</li>
|
||||
@ -1410,7 +1490,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1419,7 +1501,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -1428,7 +1512,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -1437,7 +1523,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -1446,7 +1534,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -1494,7 +1584,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="50"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
50
|
||||
</a>
|
||||
</li>
|
||||
@ -1654,7 +1746,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1663,7 +1757,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -1672,7 +1768,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -1681,7 +1779,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -1690,7 +1790,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -1770,7 +1872,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1779,7 +1883,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -1788,7 +1894,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -1797,7 +1905,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -1806,7 +1916,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -1963,7 +2075,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1972,7 +2086,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -1981,7 +2097,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -1990,7 +2108,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -1999,7 +2119,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -2083,7 +2205,9 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -2131,7 +2255,9 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -2140,7 +2266,9 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -2149,7 +2277,9 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="6"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
6
|
||||
</a>
|
||||
</li>
|
||||
@ -2158,7 +2288,9 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="7"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
7
|
||||
</a>
|
||||
</li>
|
||||
@ -2167,7 +2299,9 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="8"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
8
|
||||
</a>
|
||||
</li>
|
||||
@ -2215,7 +2349,9 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="50"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
50
|
||||
</a>
|
||||
</li>
|
||||
@ -2456,7 +2592,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -2465,7 +2603,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -2474,7 +2614,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -2483,7 +2625,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -2492,7 +2636,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -2641,7 +2787,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -2650,7 +2798,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -2659,7 +2809,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -2668,7 +2820,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -2677,7 +2831,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -43,7 +43,9 @@ exports[`Pagination rtl render component should be rendered correctly in RTL dir
|
||||
tabindex="0"
|
||||
title="0"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
0
|
||||
</a>
|
||||
</li>
|
||||
@ -126,7 +128,9 @@ exports[`Pagination should be rendered correctly in RTL 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -135,7 +139,9 @@ exports[`Pagination should be rendered correctly in RTL 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -144,7 +150,9 @@ exports[`Pagination should be rendered correctly in RTL 1`] = `
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -153,7 +161,9 @@ exports[`Pagination should be rendered correctly in RTL 1`] = `
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -162,7 +172,9 @@ exports[`Pagination should be rendered correctly in RTL 1`] = `
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
import Tooltip, { AbstractTooltipProps } from '../tooltip';
|
||||
@ -121,8 +122,16 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
|
||||
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
|
||||
const { prefixCls: customizePrefixCls, placement, children, ...restProps } = props;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
placement,
|
||||
children,
|
||||
overlayClassName,
|
||||
...restProps
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('popover', customizePrefixCls);
|
||||
const prefixClsConfirm = getPrefixCls('popconfirm', customizePrefixCls);
|
||||
const overlayClassNames = classNames(prefixClsConfirm, overlayClassName);
|
||||
|
||||
const overlay = (
|
||||
<LocaleReceiver componentName="Popconfirm" defaultLocale={defaultLocale.Popconfirm}>
|
||||
@ -138,6 +147,7 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
|
||||
onVisibleChange={onVisibleChange}
|
||||
visible={visible}
|
||||
overlay={overlay}
|
||||
overlayClassName={overlayClassNames}
|
||||
ref={ref as any}
|
||||
>
|
||||
{cloneElement(children, {
|
||||
|
||||
8
components/popconfirm/style/index.less
Normal file
8
components/popconfirm/style/index.less
Normal file
@ -0,0 +1,8 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@popconfirm-prefix-cls: ~'@{ant-prefix}-popconfirm';
|
||||
|
||||
.@{popconfirm-prefix-cls} {
|
||||
z-index: @zindex-popoconfirm;
|
||||
}
|
||||
@ -4,3 +4,5 @@ import '../../style/index.less';
|
||||
// deps-lint-skip: tooltip, popover
|
||||
import '../../popover/style';
|
||||
import '../../button/style';
|
||||
|
||||
import './index.less';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import classNames from 'classnames';
|
||||
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
|
||||
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
||||
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
||||
@ -50,7 +50,7 @@ const ExceptionStatus = Object.keys(ExceptionMap);
|
||||
* @param {status, icon}
|
||||
*/
|
||||
const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
|
||||
const className = classnames(`${prefixCls}-icon`);
|
||||
const className = classNames(`${prefixCls}-icon`);
|
||||
|
||||
devWarning(
|
||||
!(typeof icon === 'string' && icon.length > 2),
|
||||
@ -96,7 +96,7 @@ const Result: ResultType = props => (
|
||||
status,
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('result', customizePrefixCls);
|
||||
const className = classnames(prefixCls, `${prefixCls}-${status}`, customizeClassName, {
|
||||
const className = classNames(prefixCls, `${prefixCls}-${status}`, customizeClassName, {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
return (
|
||||
|
||||
@ -336,7 +336,8 @@
|
||||
@zindex-popover: 1030;
|
||||
@zindex-dropdown: 1050;
|
||||
@zindex-picker: 1050;
|
||||
@zindex-tooltip: 1060;
|
||||
@zindex-popoconfirm: 1060;
|
||||
@zindex-tooltip: 1070;
|
||||
|
||||
// Animation
|
||||
@animation-duration-slow: 0.3s; // Modal
|
||||
|
||||
@ -120,7 +120,9 @@ exports[`Table.expand click to expand 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -124,7 +124,9 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -271,7 +273,9 @@ exports[`Table.pagination renders pagination correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -280,7 +284,9 @@ exports[`Table.pagination renders pagination correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -447,7 +453,9 @@ exports[`Table.pagination renders pagination topLeft and bottomRight 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -295,7 +295,9 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -583,7 +585,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -876,7 +880,9 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1234,7 +1240,9 @@ exports[`Table.rowSelection should support getPopupContainer 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1565,7 +1573,9 @@ exports[`Table.rowSelection should support getPopupContainer from ConfigProvider
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1835,7 +1845,9 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -224,7 +224,9 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -491,7 +491,9 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -708,7 +710,9 @@ exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -988,7 +992,9 @@ exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1326,7 +1332,9 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -1526,7 +1534,9 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -3751,7 +3761,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -3972,7 +3984,9 @@ exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -4395,7 +4409,9 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -4404,7 +4420,9 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -4413,7 +4431,9 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -4422,7 +4442,9 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -4431,7 +4453,9 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -4479,7 +4503,9 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="10"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
10
|
||||
</a>
|
||||
</li>
|
||||
@ -4828,7 +4854,9 @@ exports[`renders ./components/table/demo/ellipsis.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -5126,7 +5154,9 @@ exports[`renders ./components/table/demo/ellipsis-custom-tooltip.md correctly 1`
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -5419,7 +5449,9 @@ exports[`renders ./components/table/demo/expand.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -5715,7 +5747,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -6084,7 +6118,9 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -6996,7 +7032,9 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -7005,7 +7043,9 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -7014,7 +7054,9 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -7023,7 +7065,9 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -7032,7 +7076,9 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -7080,7 +7126,9 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="10"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
10
|
||||
</a>
|
||||
</li>
|
||||
@ -8313,7 +8361,9 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -8322,7 +8372,9 @@ exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -9215,7 +9267,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -9224,7 +9278,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -9233,7 +9289,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -9242,7 +9300,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -9251,7 +9311,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -9299,7 +9361,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="10"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
10
|
||||
</a>
|
||||
</li>
|
||||
@ -9809,7 +9873,9 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -10154,7 +10220,9 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -10570,7 +10638,9 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -10981,7 +11051,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -11299,7 +11371,9 @@ exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -11561,7 +11635,9 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -11844,7 +11920,9 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -12368,7 +12446,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -12699,7 +12779,9 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -12838,7 +12920,9 @@ exports[`renders ./components/table/demo/responsive.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -13219,7 +13303,9 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -13791,7 +13877,9 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -13800,7 +13888,9 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -13809,7 +13899,9 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -13818,7 +13910,9 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -13827,7 +13921,9 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -14410,7 +14506,9 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -14419,7 +14517,9 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -14428,7 +14528,9 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -14437,7 +14539,9 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -14446,7 +14550,9 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -14805,7 +14911,9 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -14814,7 +14922,9 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -14823,7 +14933,9 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
@ -14832,7 +14944,9 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
@ -14841,7 +14955,9 @@ exports[`renders ./components/table/demo/row-selection-custom-debug.md correctly
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
@ -15042,7 +15158,9 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -15239,7 +15357,9 @@ exports[`renders ./components/table/demo/size.md correctly 1`] = `
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -21,7 +21,7 @@ import classNames from 'classnames';
|
||||
import { Table } from 'antd';
|
||||
|
||||
function VirtualTable(props) {
|
||||
const { columns, scroll, className } = props;
|
||||
const { columns, scroll } = props;
|
||||
const [tableWidth, setTableWidth] = useState(0);
|
||||
|
||||
const widthColumnCount = columns.filter(({ width }) => !width).length;
|
||||
@ -103,7 +103,7 @@ function VirtualTable(props) {
|
||||
>
|
||||
<Table
|
||||
{...props}
|
||||
className={classNames(className, 'virtual-table')}
|
||||
className="virtual-table"
|
||||
columns={mergedColumns}
|
||||
pagination={false}
|
||||
components={{
|
||||
|
||||
@ -3763,7 +3763,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
@ -3772,7 +3774,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
@ -4198,7 +4202,9 @@ Array [
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -220,3 +220,4 @@ module.exports = {
|
||||
- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
|
||||
- [Using Sass/Scss with React App (create-react-app)](https://medium.com/@mzohaib.qc/using-sass-scss-with-react-app-create-react-app-d03072083ef8)
|
||||
- [Dynamic Theming in Browser using Ant Design](https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0)
|
||||
- [Zero config custom theme generator](https://www.npmjs.com/package/@emeks/antd-custom-theme-generator)
|
||||
|
||||
@ -197,3 +197,4 @@ module.exports = {
|
||||
- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
|
||||
- [Using Sass/Scss with React App (create-react-app)](https://medium.com/@mzohaib.qc/using-sass-scss-with-react-app-create-react-app-d03072083ef8)
|
||||
- [Dynamic Theming in Browser using Ant Design](https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0)
|
||||
- [Zero config custom theme generator](https://www.npmjs.com/package/@emeks/antd-custom-theme-generator)
|
||||
|
||||
@ -7,49 +7,51 @@ Here are the frequently asked questions about Ant Design and antd that you shoul
|
||||
|
||||
---
|
||||
|
||||
### Are you going to provide Sass/Stylus(etc.) style file?
|
||||
### Will you provide Sass/Stylus(etc.) style files in addition to the Less style files currently included?
|
||||
|
||||
No plan, but you can convert Less to Sass/Stylus(etc.) with tools that you can find on Google.
|
||||
There is currently no plan to add support for Sass/Stylus(etc.) style files, but using tools on Google you can easily convert the provided Less files to your desired style format.
|
||||
|
||||
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` disappears when I click another popup component inside it. How do I resolve this?
|
||||
|
||||
This has been fixed since `3.11.x`. If you're using an older version, you can use `<Select getPopupContainer={trigger => trigger.parentElement}>` to render a component inside Popover. (Or other `getXxxxContainer` props)
|
||||
This is an old bug that has been fixed since `v3.11.x`. If you're using an older version, you can use `<Select getPopupContainer={trigger => trigger.parentElement}>` to render a component inside Popover. (Or other `getXxxxContainer` props)
|
||||
|
||||
https://ant.design/components/select/#Select-props
|
||||
|
||||
related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
||||
Related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
||||
|
||||
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` scrolls with the page?
|
||||
### How do I prevent `Select Dropdown DatePicker TimePicker Popover Popconfirm` scrolling with the page?
|
||||
|
||||
Use `<Select getPopupContainer={trigger => trigger.parentElement}>` ([API reference](https://ant.design/components/select-cn/#Select-props)) to render a component inside the scroll area. If you need to config this globally in your application, try `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>` ([API reference](https://ant.design/components/config-provider-cn/#API))
|
||||
|
||||
related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
||||
Related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
||||
|
||||
### How do I modify the default theme of Ant Design?
|
||||
|
||||
See: https://ant.design/docs/react/customize-theme .
|
||||
|
||||
### Would you supply other themes?
|
||||
### Will you provide other themes?
|
||||
|
||||
No, we follow Ant Design specification. https://github.com/ant-design/ant-design/issues/1241
|
||||
No, we follow Ant Design's design specification.
|
||||
|
||||
### How to modify `Menu`/`Button`(etc.)'s style?
|
||||
Related issue: https://github.com/ant-design/ant-design/issues/1241
|
||||
|
||||
You can override its style but we don't recommend doing so. antd is not only a set of React components but also a design specification.
|
||||
### How do I modify `Menu`/`Button`(etc.)'s style?
|
||||
|
||||
### How to replace Moment.js to Day.js to reduce bundle size？
|
||||
While you can override a component's style, we don't recommend doing so. antd is not only a set of React components, but also a design specification as well.
|
||||
|
||||
### How do I replace Moment.js with Day.js to reduce bundle size？
|
||||
|
||||
Please refer to [Replace Moment.js](/docs/react/replace-moment).
|
||||
|
||||
### It doesn't work when I change `defaultValue` dynamically.
|
||||
|
||||
The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works on the first render. It is a specification of React. Please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
|
||||
The `defaultXxxx` (e.g. `defaultValue`) of `Input`/`Select`(etc...) only works on the first render. It is a specification of React. Please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
|
||||
|
||||
### Why modify props in mutable way not trigger component update?
|
||||
### Why does modifying props in mutable way not trigger a component update?
|
||||
|
||||
antd use shallow compare of props to optimize performance. You should always pass new object when state update. Please ref [React's document](https://reactjs.org/docs/thinking-in-react.html)
|
||||
antd use shallow compare of props to optimize performance. You should always pass the new object when updating the state. Please ref [React's document](https://reactjs.org/docs/thinking-in-react.html)
|
||||
|
||||
### I set the `value` of `Input`/`Select`(etc.), and then it cannot be changed by user's action.
|
||||
### After I set the `value` of an `Input`/`Select`(etc.) component, the value cannot be changed by user's action.
|
||||
|
||||
Try `defaultValue` or `onChange` to change `value`, and please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
|
||||
|
||||
@ -59,56 +61,56 @@ Try [Space](https://ant.design/components/space/) component to make them aligned
|
||||
|
||||
### antd overrides my global styles
|
||||
|
||||
Yes, antd is designed to develop a complete background application, we override some global styles for styling convenience, and it can't be removed now. More info at https://github.com/ant-design/ant-design/issues/4331 .
|
||||
Yes, antd is designed to help you develop a complete background application. To do so, we override some global styles for styling convenience, and currently these cannot be removed or changed. More info at https://github.com/ant-design/ant-design/issues/4331 .
|
||||
|
||||
Alternatively, follow the instructions in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)
|
||||
|
||||
### I cannot install `antd` and `antd`'s dependencies in mainland China.
|
||||
|
||||
Long live the Girl Friend Wall! And try [cnpm](http://npm.taobao.org/).
|
||||
To potentially solve this, try [cnpm](http://npm.taobao.org/).
|
||||
|
||||
### I set `dependencies.antd` as git repository in package.json, but it doesn't work.
|
||||
### I set `dependencies.antd` as the git repository in `package.json`, but it doesn't work.
|
||||
|
||||
Yes, please install `antd` with npm or yarn.
|
||||
Please install `antd` with either npm or yarn.
|
||||
|
||||
### `message` and `notification` is lower case, but other components are capitalized. Typo?
|
||||
### `message` and `notification` is lower case, but other components are capitalized. Is this a typo?
|
||||
|
||||
No, as `message` is just a function, not a React Component.
|
||||
No, `message` is just a function, not a React Component, thus it is not a typo that it is in lower case.
|
||||
|
||||
### `antd` doesn't work well in mobile.
|
||||
|
||||
Please check [And Design Mobile](http://mobile.ant.design) for details. `antd` has not been optimized to do so. You may try [react-component](https://github.com/react-component/), those repositories which start with 'm-' 'rn-' are designed for mobile.
|
||||
Please check [And Design Mobile](http://mobile.ant.design) as a possible solution, as `antd` has not been optimized to work well on mobile. You can also try the [react-component](https://github.com/react-component/) repositories which start with 'm-' 'rn-', which are also designed for mobile.
|
||||
|
||||
### Does `antd` supply standalone files like 'React'?
|
||||
|
||||
Yes, you can [import `antd` with script tag](https://ant.design/docs/react/introduce#Import-in-Browser). But we recommend using `npm` to import `antd`, it is simple and easy to maintain.
|
||||
Yes, you can [import `antd` with script tag](https://ant.design/docs/react/introduce#Import-in-Browser), but we recommend using `npm` to import `antd`, as it is simple and easy to maintain.
|
||||
|
||||
### I can't visit `icon` in my network environment.
|
||||
|
||||
You should deploy the iconfont files to your network by following this [example](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont). [#1070](https://github.com/ant-design/ant-design/issues/1070)
|
||||
|
||||
After 3.9.x [we are using svg icon](/components/icon#svg-icons), so you don't need to deploy iconfont locally anymore.
|
||||
After 3.9.x [we will also switch to using svg icons](/components/icon#svg-icons), so you won't need to deploy iconfont locally anymore as well.
|
||||
|
||||
### How do I extend antd's components?
|
||||
|
||||
If you need some features which should not be included in antd, try to extend antd's component with [HOC](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775). [more](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1)
|
||||
|
||||
### How do I fix dynamic style when open Content Security Policy (CSP)?
|
||||
### How do I fix dynamic styles while using a Content Security Policy (CSP)?
|
||||
|
||||
You can configure `nonce` by [ConfigProvider](/components/config-provider/#Content-Security-Policy).
|
||||
|
||||
### When I set `mode` to DatePicker/RangePicker, I cannot select year or month anymore?
|
||||
### When I set `mode` to `DatePicker`/`RangePicker`, why can I not select a year or month anymore?
|
||||
|
||||
In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add `mode` to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now.
|
||||
In a real world development, you may need a `YearPicker`, `MonthRangePicker` or `WeekRangePicker`. You are trying to add `mode` to `DatePicker`/`RangePicker` expected to implement those pickers. However, the `DatePicker`/`RangePicker` cannot be selected and the panels won't close now.
|
||||
|
||||
- Reproduction link: https://codesandbox.io/s/dank-brook-v1csy
|
||||
- Same issues：[#15572](https://github.com/ant-design/ant-design/issues/15572), [#16436](https://github.com/ant-design/ant-design/issues/16436), [#11938](https://github.com/ant-design/ant-design/issues/11938), [#11735](https://github.com/ant-design/ant-design/issues/11735), [#11586](https://github.com/ant-design/ant-design/issues/11586), [#10425](https://github.com/ant-design/ant-design/issues/10425), [#11053](https://github.com/ant-design/ant-design/issues/11053)
|
||||
|
||||
Like [the explaination](https://github.com/ant-design/ant-design/issues/11586#issuecomment-429189877) here, that is because `<DatePicker mode="year" />` do not equal to `YearPicker`, `<RangePicker mode="month" />` do not equal to `MonthRangePicker` either. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190) in antd 3.0, which simply control the displayed panel and won't change the original date picking behavior of `DatePicker/RangePicker` (for instance you still need to click date cell to finish selection in a DatePicker, whatever the `mode` is).
|
||||
Like [the explaination](https://github.com/ant-design/ant-design/issues/11586#issuecomment-429189877) explains, this is because `<DatePicker mode="year" />` does not equal the `YearPicker`, nor is `<RangePicker mode="month" />` equal to `MonthRangePicker`. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190) in antd 3.0, which simply controls the displayed panel, and won't change the original date picking behavior of `DatePicker`/`RangePicker` (for instance you will still need to click date cell to finish selection in a `DatePicker`, whatever the `mode` is).
|
||||
|
||||
##### Workaround
|
||||
|
||||
You can refer to [this article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs. Or you can wait for our [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we are planing (already) to [add more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) for those requirments.
|
||||
You can refer to [this article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs. Or you can wait for our [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we are already planning to [add more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) to meet those requirements.
|
||||
|
||||
### How to spell Ant Design correctly?
|
||||
|
||||
@ -126,7 +128,7 @@ Here are some typical wrong examples:
|
||||
- ❌ antdesign
|
||||
- ❌ Antdesign
|
||||
|
||||
### Do you guys have any channel for donation, like PayPal or Alipay?
|
||||
### Do you guys have any channel or website for submitting monetary donations, like through PayPal or Alipay?
|
||||
|
||||
[https://opencollective.com/ant-design](https://opencollective.com/ant-design)
|
||||
|
||||
@ -134,11 +136,11 @@ Here are some typical wrong examples:
|
||||
|
||||
## Errors and Warnings
|
||||
|
||||
Here are some errors & warnings that you may meet while using antd, but most of them are not bugs of antd.
|
||||
Here are some errors & warnings that you may encounter while using antd, although most of these are not actual bugs of antd itself.
|
||||
|
||||
### Adjacent JSX elements must be wrapped in an enclosing tag
|
||||
|
||||
An [answer from StackOverflow](http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer), and please read [React's documentation](http://facebook.github.io/react/docs/displaying-data.html#components-are-just-like-functions).
|
||||
Check out [this answer from StackOverflow](http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer), along with also reading [React's documentation](http://facebook.github.io/react/docs/displaying-data.html#components-are-just-like-functions) to solve this.
|
||||
|
||||
### React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
|
||||
|
||||
@ -146,16 +148,16 @@ Please make sure that you import `antd`'s components correctly. Read the corresp
|
||||
|
||||
### rm is not recognized as an internal or external command
|
||||
|
||||
Please read this [issue](https://github.com/ant-design/ant-design/issues/650#issuecomment-164966511), or try Linux/Unix.
|
||||
Please read [this issue](https://github.com/ant-design/ant-design/issues/650#issuecomment-164966511), or try Linux/Unix.
|
||||
|
||||
### Failed propType: Invalid prop `AAA` of type `BBB` supplied to `CCC`, expected `DDD`. Check the render method of `EEE`.
|
||||
|
||||
Please read the corresponding documentation of the `antd`'s version which you use, and make sure that you pass values with correct type to `antd`'s components,
|
||||
Please read the corresponding documentation of the `antd`'s version which you are currently using, and make sure that you pass values with correct type to `antd`'s components,
|
||||
|
||||
### Unknown option: xxx/package.json.presets
|
||||
|
||||
An [answer from Stack Overflow](http://stackoverflow.com/questions/33685365/unknown-option-babelrc-presets).
|
||||
Check out [this answer from Stack Overflow](http://stackoverflow.com/questions/33685365/unknown-option-babelrc-presets).
|
||||
|
||||
### Invariant Violation: findComponentRoot(...): Unable to find element.
|
||||
|
||||
You may import React twice. Set React & ReactDOM as external, if you are using webpack, See [#525](https://github.com/ant-design/ant-design/issues/525). If you are using others (browserify, etc...), please read its documentation and find options which can set React & ReactDOM as external.
|
||||
You may have imported `React` twice. Set `React` & `ReactDOM` as external, if you are using webpack, see [#525](https://github.com/ant-design/ant-design/issues/525). If you are using others (browserify, etc...), please read their documentation and find options which can set `React` & `ReactDOM` as external.
|
||||
|
||||
@ -77,6 +77,16 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更，
|
||||
|
||||
请浏览 [And Design Mobile](http://mobile.ant.design) 以了解详情，`antd` 并非针对移动端设计。你可以试试 [react-component](https://github.com/react-component/)，其中带有 'm-' 'rn-' 前缀的库是为移动端设计的。
|
||||
|
||||
### `antd` 是否有国内镜像？
|
||||
|
||||
有的，你可以点击 https://ant-design.gitee.io/index-cn 访问。
|
||||
|
||||
历史版本:
|
||||
|
||||
- 3.x: https://ant-design-3x.gitee.io/
|
||||
- 2.x: https://ant-design-2x.gitee.io/
|
||||
- 1.x: https://ant-design-1x.gitee.io/
|
||||
|
||||
### `antd` 会像 `React` 那样提供单文件引入吗？
|
||||
|
||||
是的，[你可以用 script 标签引入](https://ant.design/docs/react/introduce-cn#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%BC%95%E5%85%A5)。但是我们推荐使用 `npm` 来引入 `antd`，这样维护起来更简单方便。
|
||||
|
||||
@ -3,17 +3,17 @@ order: 2
|
||||
title: Getting Started
|
||||
---
|
||||
|
||||
Ant Design React is dedicated to providing a **good development experience** for programmers. Make sure that you have installed [Node.js](https://nodejs.org/)(> 8.0.0) correctly.
|
||||
Ant Design React is dedicated to providing a **good development experience** for programmers. Before starting, it is recommended to learn [React](https://reactjs.org) and [ES2015](http://babeljs.io/docs/learn-es2015/) first, and correctly install and configure [Node.js](https://nodejs.org/) v8 or above.
|
||||
|
||||
If you try in local environment, please refer to [Install and Initialization](/docs/react/use-with-create-react-app#Install-and-Initialization) section of "Use in create-react-app".
|
||||
The official guide also assumes that you have intermediate knowledge about HTML, CSS, and JavaScript, and React. If you are just starting to learn front-end or React, it may not be the best idea to use the UI framework as your first step.
|
||||
|
||||
> Before delving into Ant Design React, a good knowledge base of [React](https://reactjs.org) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
|
||||
Finally, if you are working in a local development environment, please refer to [Install and Initialization](/docs/react/use-with-create-react-app#Install-and-Initialization) section of "Use in create-react-app".
|
||||
|
||||
---
|
||||
|
||||
## First Example
|
||||
## Your First Example
|
||||
|
||||
Here is a simple codesandbox example to show the usage of Ant Design React.
|
||||
Here is a simple online codesandbox demo of an Ant Design component to show the usage of Ant Design React.
|
||||
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/antd-reproduction-template-6e93z?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"
|
||||
@ -23,15 +23,17 @@ Here is a simple codesandbox example to show the usage of Ant Design React.
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
/>
|
||||
|
||||
### 1. Create one codesandbox
|
||||
Follow the steps below to play around with Ant Design yourself:
|
||||
|
||||
Visit http://u.ant.design/codesandbox-repro to create a codesandbox. Don't forget to press the save button.
|
||||
### 1. Create a codesandbox
|
||||
|
||||
### 2. Using antd component
|
||||
Visit http://u.ant.design/codesandbox-repro to create a codesandbox -- don't forget to press the save button as well to create a new instance.
|
||||
|
||||
Replace the content of `index.js` with the following code. As you can see, there is no difference between antd's components and typical React components.
|
||||
### 2. Use and modify an antd component
|
||||
|
||||
If you already set up by [Install and Initialization](/docs/react/use-with-create-react-app#Install-and-Initialization) section of "Use in create-react-app", Please replace the content of /src/index.js
|
||||
Replace the contents of `index.js` with the following code. As you can see, there is no difference between antd's components and typical React components.
|
||||
|
||||
If you have already set things up by following the [Install and Initialization](/docs/react/use-with-create-react-app#Install-and-Initialization) section of "Use in create-react-app", replace the content of `/src/index.js` as follows:
|
||||
|
||||
```jsx
|
||||
import React, { useState } from 'react';
|
||||
@ -61,7 +63,7 @@ render(<App />, document.getElementById('root'));
|
||||
|
||||
### 3. Explore more components
|
||||
|
||||
You can look up components in the side menu of the Components page like the [Alert](/components/alert) component. Plenty of examples are provided in the component pages and API documentation.
|
||||
You can view the list of components in the side menu of the Components page, such as the [Alert](/components/alert) component. Plenty of examples are also provided in the component pages and API documentation as well.
|
||||
|
||||
Click the "Open in Editor" icon in the first example to open an editor with source code to use out-of-the-box. Now you can import the `Alert` component into the codesandbox:
|
||||
|
||||
@ -70,7 +72,7 @@ Click the "Open in Editor" icon in the first example to open an editor with sour
|
||||
+ import { DatePicker, message, Alert } from 'antd';
|
||||
```
|
||||
|
||||
Add the following jsx into the `render` function.
|
||||
Now add the following jsx inside the `render` function.
|
||||
|
||||
```diff
|
||||
<DatePicker onChange={value => this.handleChange(value)} />
|
||||
@ -80,20 +82,20 @@ Add the following jsx into the `render` function.
|
||||
</div>
|
||||
```
|
||||
|
||||
Now you can see the result in the preview section.
|
||||
Select a date, and you can see the effect in the preview area on the right:
|
||||
|
||||
<img width="420" src="https://gw.alipayobjects.com/zos/antfincdn/JrXptUm1Nz/6b50edc4-3a3c-4b2a-843e-f9f0af2c4667.png" alt="codesandbox screenshot" />
|
||||
|
||||
OK! Now you know how to use antd components in a clear way. You are welcome to explore more components in the codesandbox. We also strongly recommend using codesandbox to provide a reproducible demo when reporting a bug.
|
||||
OK! Now that you know the basics of using antd components, you are welcome to explore more components in the codesandbox. When reporting a bug with ant design, we also strongly recommend using codesandbox to provide a reproducible demo as well.
|
||||
|
||||
### 4. Next Step
|
||||
### 4. Next Steps
|
||||
|
||||
In the real world you will need a development workflow consisting of `compile/build/deploy/lint/debug`. You can find and read articles on the subject or try other scaffolds provided below:
|
||||
During actual real-world project development, you will most likely need a development workflow consisting of `compile/build/deploy/lint/debug/` deployment. You can read the following documents on the subject or use the following scaffolds and examples provided below:
|
||||
|
||||
- [Ant Design Pro](http://pro.ant.design/)
|
||||
- [antd-admin](https://github.com/zuiidea/antd-admin)
|
||||
- [d2-admin](https://github.com/d2-projects/d2-admin)
|
||||
- more scaffolds at [Scaffold Market](http://scaffold.ant.design/)
|
||||
- More scaffolds at [Scaffold Market](http://scaffold.ant.design/)
|
||||
|
||||
## Import on Demand
|
||||
|
||||
@ -121,8 +123,8 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
## Customized Workflow
|
||||
## Customize your Workflow
|
||||
|
||||
If you want to customize your workflow, we recommend using [webpack](http://webpack.github.io/) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem.
|
||||
|
||||
There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these and even contribute.
|
||||
There are also some [scaffolds](http://scaffold.ant.design/) which have already been integrated into antd, so you can try and start with one of these and even contribute.
|
||||
|
||||
@ -3,7 +3,7 @@ order: 10
|
||||
title: Internationalization
|
||||
---
|
||||
|
||||
The default language of `antd@2.x` is English as of yet. If you want to use other languages, you can follow the instructions below.
|
||||
The default language of `antd@2.x` is currently English. If you wish to use other languages, follow the instructions below.
|
||||
|
||||
## ConfigProvider
|
||||
|
||||
@ -20,11 +20,13 @@ return (
|
||||
);
|
||||
```
|
||||
|
||||
You can see complete config at: [ConfigProvider](/components/config-provider).
|
||||
You can see the complete configuration here: [ConfigProvider](/components/config-provider).
|
||||
|
||||
Note: `fr_FR` is the filename, follow below.
|
||||
Note: `fr_FR` is the filename, the following table also follows the same rules.
|
||||
|
||||
Supported languages:
|
||||
The following languages are currently supported:
|
||||
|
||||
### Supported languages:
|
||||
|
||||
| Language | Filename |
|
||||
| ------------------------ | -------- |
|
||||
@ -86,4 +88,4 @@ See more usage at [ConfigProvider](/components/config-provider).
|
||||
|
||||
## Adding new language
|
||||
|
||||
If your language is not in above list, feel free to create a locale package based on [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) and send us a pull request. This [Azerbaijani](https://github.com/ant-design/ant-design/pull/21387) language PR could be a sample.
|
||||
If your language is not in above list, feel free to create a locale package based on the [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) lanugage pack and send us a pull request. For reference, you can refer to the pull request of adding the [Azerbaijani](https://github.com/ant-design/ant-design/pull/21387) language as a sample.
|
||||
|
||||
@ -8,7 +8,7 @@ title: Third-Party Libraries
|
||||
| Category | Recommended Components |
|
||||
| --- | --- |
|
||||
| Visualization and charts | [AntV Data Visualization](https://antv.vision/en) [🔥 AntV Charting Library](https://g2plot.antv.vision/en) [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [viser](https://viserjs.github.io/) |
|
||||
| React Hooks Library | [umi-hooks](https://github.com/umijs/hooks) |
|
||||
| React Hooks Library | [ahooks](https://github.com/alibaba/hooks) |
|
||||
| Router | [react-router](https://github.com/ReactTraining/react-router) |
|
||||
| Layout | [@rebass/grid](https://github.com/rebassjs/grid) [react-blocks](http://whoisandy.github.io/react-blocks/) [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) |
|
||||
| Drag and drop | [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) |
|
||||
|
||||
@ -8,7 +8,7 @@ title: 社区精选组件
|
||||
| 类型 | 推荐组件 |
|
||||
| --- | --- |
|
||||
| 可视化图表 | [AntV 数据可视化解决方案](https://antv.vision/zh) [🔥 AntV 图表库](https://g2plot.antv.vision/zh) [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [viser](https://viserjs.github.io/) |
|
||||
| React Hooks 库 | [umi-hooks](https://github.com/umijs/hooks) |
|
||||
| React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) |
|
||||
| 路由 | [react-router](https://github.com/ReactTraining/react-router) |
|
||||
| 布局 | [@rebass/grid](https://github.com/rebassjs/grid) [react-blocks](https://github.com/whoisandy/react-blocks) [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) |
|
||||
| 拖拽 | [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) |
|
||||
|
||||
@ -79,7 +79,7 @@ We provide Less and JavaScript usage for developers.
|
||||
|
||||
```js
|
||||
import { blue } from '@ant-design/colors';
|
||||
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
|
||||
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
|
||||
console.log(blue.primary); // '#1890FF'
|
||||
```
|
||||
|
||||
|
||||
@ -87,7 +87,7 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
|
||||
|
||||
```js
|
||||
import { blue } from '@ant-design/colors';
|
||||
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
|
||||
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
|
||||
console.log(blue.primary); // '#1890FF'
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "4.4.2",
|
||||
"version": "4.4.3",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"keywords": [
|
||||
"ant",
|
||||
@ -123,7 +123,7 @@
|
||||
"rc-drawer": "~4.1.0",
|
||||
"rc-dropdown": "~3.1.2",
|
||||
"rc-field-form": "~1.5.0",
|
||||
"rc-input-number": "~5.1.0",
|
||||
"rc-input-number": "~5.1.1",
|
||||
"rc-mentions": "~1.4.0",
|
||||
"rc-menu": "~8.5.0",
|
||||
"rc-notification": "~4.4.0",
|
||||
|
||||
@ -34,19 +34,19 @@ module.exports = {
|
||||
'app.demo.riddle': 'Open in Riddle',
|
||||
'app.home.introduce':
|
||||
'A design system for enterprise-level products. Create an efficient and enjoyable work experience.',
|
||||
'app.home.recommend': 'Recommend',
|
||||
'app.home.popularize': 'Popularize',
|
||||
'app.home.recommend': 'Recommended',
|
||||
'app.home.popularize': 'Popular',
|
||||
'app.home.design-and-framework': 'Design language and framework',
|
||||
'app.home.design-values': 'Design values',
|
||||
'app.home.design-values-description':
|
||||
'This is an internal criterion for Ant Design to evaluate good design. Based on the postulate that "everyone pursues pleasure at work", we have added the two values of "Meaningful" and "Growing" on the basis of "Certain" and "Natural" to guide each designer to do better judgment and decision.',
|
||||
'app.home.certainty': 'Certain',
|
||||
'app.home.meaningful': 'Meaningful',
|
||||
'app.home.growth': 'Growing',
|
||||
'app.home.natural': 'Natural',
|
||||
'This is Ant Design\'s internal standard for evaluating design quality. Based on the assumption that "everyone is pursuing happiness at work", we have added the two values of "Meaningfulness" and "Growth" on the basis of "Certainty" and "Naturalness" to guide each designer towards better judgment and decision-making.',
|
||||
'app.home.certainty': 'Certainty',
|
||||
'app.home.meaningful': 'Meaningfulness',
|
||||
'app.home.growth': 'Growth',
|
||||
'app.home.natural': 'Naturalness',
|
||||
'app.home.design-guide': 'Guidelines',
|
||||
'app.home.components': 'Components',
|
||||
'app.home.detail': 'Detail',
|
||||
'app.home.detail': 'More details',
|
||||
'app.home.global-style': 'Global style',
|
||||
'app.home.design-patterns': 'Design patterns',
|
||||
'app.home.more': 'Learn More',
|
||||
@ -55,8 +55,8 @@ module.exports = {
|
||||
'app.home.qr.desc': '4.0 is out',
|
||||
'app.home.getting-started': 'Getting Started',
|
||||
'app.home.design-language': 'Design Language',
|
||||
'app.home.product-antv-slogan': 'A new generation of data visualization solution',
|
||||
'app.home.product-pro-slogan': 'Out-of-box UI solution for enterprise applications',
|
||||
'app.home.product-antv-slogan': 'A new way to do data visualization',
|
||||
'app.home.product-pro-slogan': 'Out-of-the-box UI solution for enterprise applications',
|
||||
'app.home.product-mobile-slogan': 'Mobile UI components with Ant Design',
|
||||
'app.home.product-hitu': 'HiTu',
|
||||
'app.home.product-hitu-slogan': 'A new generation of graphical solutions',
|
||||
@ -68,7 +68,7 @@ module.exports = {
|
||||
'app.footer.course': 'Ant Design Practical Tutorial',
|
||||
'app.footer.chinamirror': 'China Mirror 🇨🇳',
|
||||
'app.footer.primary-color-changing': 'Changing primary color...',
|
||||
'app.footer.primary-color-changed': 'Change primary color successfully!',
|
||||
'app.footer.primary-color-changed': 'Changed primary color successfully!',
|
||||
'app.footer.scaffold': 'Scaffold',
|
||||
'app.footer.kitchen': 'Sketch Toolkit',
|
||||
'app.footer.landing': 'Landing Templates',
|
||||
@ -115,12 +115,12 @@ module.exports = {
|
||||
'app.footer.xtech.slogan': 'Experience The Beauty',
|
||||
'app.publish.title': 'antd@3.0.0 has been released! 🎉 🎉 🎉',
|
||||
'app.publish.greeting': 'Hello, ',
|
||||
'app.publish.intro': ' has been released, and please upgrade. ',
|
||||
'app.publish.old-version-guide': 'If you need documentation of older version, please visit ',
|
||||
'app.publish.old-version-tips': ', or switch version with the select at header navigation.',
|
||||
'app.publish.intro': ' has been released, so please upgrade. ',
|
||||
'app.publish.old-version-guide': 'If you need documentation for an older version, please visit ',
|
||||
'app.publish.old-version-tips': ', or switch the version via the dropdown in the header nav bar.',
|
||||
'app.docs.color.pick-primary': 'Pick your primary color',
|
||||
'app.docs.color.pick-background': 'Pick your background color',
|
||||
'app.docs.components.icon.search.placeholder': 'Search icon here, click icon to copy code',
|
||||
'app.docs.components.icon.search.placeholder': 'Search icons here, click icon to copy code',
|
||||
'app.docs.components.icon.outlined': 'Outlined',
|
||||
'app.docs.components.icon.filled': 'Filled',
|
||||
'app.docs.components.icon.two-tone': 'Two Tone',
|
||||
@ -131,17 +131,17 @@ module.exports = {
|
||||
'app.docs.components.icon.category.other': 'Application Icons',
|
||||
'app.docs.components.icon.category.logo': 'Brand and Logos',
|
||||
'app.docs.components.icon.pic-searcher.intro':
|
||||
'AI Search by image is online, welcome to use! 🎉',
|
||||
'AI Search by image is online, you are welcome to use it! 🎉',
|
||||
'app.docs.components.icon.pic-searcher.title': 'Search by image',
|
||||
'app.docs.components.icon.pic-searcher.upload-text':
|
||||
'Click or drag or paste file to this area to upload',
|
||||
'Click, drag, or paste file to this area to upload',
|
||||
'app.docs.components.icon.pic-searcher.upload-hint':
|
||||
'We will find the most matching icon based on the image',
|
||||
'We will find the best matching icon based on the image provided',
|
||||
'app.docs.components.icon.pic-searcher.server-error':
|
||||
'Predict service is temporarily unavailable',
|
||||
'app.docs.components.icon.pic-searcher.matching': 'Matching...',
|
||||
'app.docs.components.icon.pic-searcher.modelloading': 'Model is loading...',
|
||||
'app.docs.components.icon.pic-searcher.result-tip': 'Match the following icons for you:',
|
||||
'app.docs.components.icon.pic-searcher.result-tip': 'Matched the following icons for you:',
|
||||
'app.docs.components.icon.pic-searcher.th-icon': 'Icon',
|
||||
'app.docs.components.icon.pic-searcher.th-score': 'Probability',
|
||||
'app.components.overview.search': 'Search in components',
|
||||
|
||||
@ -115,9 +115,9 @@ class Footer extends React.Component<WrappedComponentProps> {
|
||||
openExternal: true,
|
||||
},
|
||||
{
|
||||
title: 'Umi Hooks',
|
||||
title: 'ahooks',
|
||||
description: <FormattedMessage id="app.footer.hooks" />,
|
||||
url: 'https://github.com/umijs/hooks',
|
||||
url: 'https://github.com/alibaba/hooks',
|
||||
openExternal: true,
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user