mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
Merge remote-tracking branch 'origin/master' into feature
This commit is contained in:
zombiej
commit
dfeeafa218
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Affix from '..';
|
||||
import { getObserverEntities } from '../utils';
|
||||
import Button from '../../button';
|
||||
|
||||
const events = {};
|
||||
@ -128,14 +129,37 @@ describe('Affix Render', () => {
|
||||
expect(wrapper.instance().affix.state.affixStyle.top).toBe(10);
|
||||
});
|
||||
|
||||
it('updatePosition when target changed', () => {
|
||||
const container = '<div id="mounter" />';
|
||||
const getTarget = () => container;
|
||||
wrapper = mount(<Affix target={getTarget} />);
|
||||
wrapper.setProps({ target: null });
|
||||
expect(wrapper.instance().state.status).toBe(0);
|
||||
expect(wrapper.instance().state.affixStyle).toBe(undefined);
|
||||
expect(wrapper.instance().state.placeholderStyle).toBe(undefined);
|
||||
describe('updatePosition when target changed', () => {
|
||||
it('function change', () => {
|
||||
document.body.innerHTML = '<div id="mounter" />';
|
||||
const container = document.querySelector('#id');
|
||||
const getTarget = () => container;
|
||||
wrapper = mount(<Affix target={getTarget} />);
|
||||
wrapper.setProps({ target: null });
|
||||
expect(wrapper.instance().state.status).toBe(0);
|
||||
expect(wrapper.instance().state.affixStyle).toBe(undefined);
|
||||
expect(wrapper.instance().state.placeholderStyle).toBe(undefined);
|
||||
});
|
||||
|
||||
it('instance change', () => {
|
||||
const getObserverLength = () => Object.keys(getObserverEntities()).length;
|
||||
|
||||
const container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
let target = container;
|
||||
|
||||
const originLength = getObserverLength();
|
||||
const getTarget = () => target;
|
||||
wrapper = mount(<Affix target={getTarget} />);
|
||||
jest.runAllTimers();
|
||||
|
||||
expect(getObserverLength()).toBe(originLength + 1);
|
||||
target = null;
|
||||
wrapper.setProps({});
|
||||
wrapper.update();
|
||||
jest.runAllTimers();
|
||||
expect(getObserverLength()).toBe(originLength);
|
||||
});
|
||||
});
|
||||
|
||||
it('updatePosition when size changed', () => {
|
||||
|
||||
@ -28,3 +28,11 @@ Please note that Affix should not cover other content on the page, especially wh
|
||||
...
|
||||
</Affix>
|
||||
```
|
||||
|
||||
## FAQ
|
||||
|
||||
### Affix bind container with `target`, sometime move out of container.
|
||||
|
||||
We don't listen window scroll for performance consideration. You can add listener if you still want: <https://codesandbox.io/s/2xyj5zr85p>
|
||||
|
||||
Related issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
|
||||
|
||||
@ -41,6 +41,8 @@ export interface AffixState {
|
||||
placeholderStyle?: React.CSSProperties;
|
||||
status: AffixStatus;
|
||||
lastAffix: boolean;
|
||||
|
||||
prevTarget: Window | HTMLElement | null;
|
||||
}
|
||||
|
||||
class Affix extends React.Component<AffixProps, AffixState> {
|
||||
@ -51,6 +53,7 @@ class Affix extends React.Component<AffixProps, AffixState> {
|
||||
state: AffixState = {
|
||||
status: AffixStatus.None,
|
||||
lastAffix: false,
|
||||
prevTarget: null,
|
||||
};
|
||||
|
||||
placeholderNode: HTMLDivElement;
|
||||
@ -72,14 +75,22 @@ class Affix extends React.Component<AffixProps, AffixState> {
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: AffixProps) {
|
||||
const { prevTarget } = this.state;
|
||||
const { target } = this.props;
|
||||
if (prevProps.target !== target) {
|
||||
let newTarget = null;
|
||||
if (target) {
|
||||
newTarget = target() || null;
|
||||
}
|
||||
|
||||
if (prevTarget !== newTarget) {
|
||||
removeObserveTarget(this);
|
||||
if (target) {
|
||||
addObserveTarget(target(), this);
|
||||
if (newTarget) {
|
||||
addObserveTarget(newTarget, this);
|
||||
// Mock Event object.
|
||||
this.updatePosition({} as Event);
|
||||
}
|
||||
|
||||
this.setState({ prevTarget: newTarget });
|
||||
}
|
||||
|
||||
if (
|
||||
|
||||
@ -29,3 +29,11 @@ title: Affix
|
||||
...
|
||||
</Affix>
|
||||
```
|
||||
|
||||
## FAQ
|
||||
|
||||
### Affix 使用 `target` 绑定容器时，元素会跑到容器外。
|
||||
|
||||
从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听：<https://codesandbox.io/s/2xyj5zr85p>
|
||||
|
||||
相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
|
||||
|
||||
@ -20,6 +20,11 @@ interface ObserverEntity {
|
||||
|
||||
let observerEntities: ObserverEntity[] = [];
|
||||
|
||||
export function getObserverEntities() {
|
||||
// Only used in test env. Can be removed if refactor.
|
||||
return observerEntities;
|
||||
}
|
||||
|
||||
export function addObserveTarget(target: HTMLElement | Window | null, affix: Affix): void {
|
||||
if (!target) return;
|
||||
|
||||
|
||||
@ -767,7 +767,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Detailed description and advices about successful copywriting.
|
||||
Detailed description and advice about successful copywriting.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -804,7 +804,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-alert-description"
|
||||
>
|
||||
Additional description and informations about copywriting.
|
||||
Additional description and information about copywriting.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -12,7 +12,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Decent icon make information more clear and more friendly.
|
||||
A relevant icon makes information clearer and more friendly.
|
||||
|
||||
````jsx
|
||||
import { Alert, Icon } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Decent icon make information more clear and more friendly.
|
||||
A relevant icon will make information clearer and more friendly.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
@ -24,13 +24,13 @@ ReactDOM.render(
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
description="Detailed description and advice about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
description="Additional description and information about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Smoothly and unaffectedly unmount Alert.
|
||||
Smoothly unmount Alert upon close.
|
||||
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
@ -41,16 +41,20 @@ function searchResult(query) {
|
||||
function renderOption(item) {
|
||||
return (
|
||||
<Option key={item.category} text={item.category}>
|
||||
{item.query} 在
|
||||
<a
|
||||
href={`https://s.taobao.com/search?q=${item.query}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{item.category}
|
||||
</a>
|
||||
区块中
|
||||
<span className="global-search-item-count">约 {item.count} 个结果</span>
|
||||
<div className="global-search-item">
|
||||
<span className="global-search-item-desc">
|
||||
{item.query} 在
|
||||
<a
|
||||
href={`https://s.taobao.com/search?q=${item.query}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{item.category}
|
||||
</a>
|
||||
区块中
|
||||
</span>
|
||||
<span className="global-search-item-count">约 {item.count} 个结果</span>
|
||||
</div>
|
||||
</Option>
|
||||
);
|
||||
}
|
||||
@ -122,8 +126,17 @@ ReactDOM.render(<Complete />, mountNode);
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.global-search-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.global-search-item-desc {
|
||||
flex: auto;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.global-search-item-count {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
flex: none;
|
||||
}
|
||||
````
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Usually used for messages remind.
|
||||
Usually used for reminders and notifications.
|
||||
|
||||
````jsx
|
||||
import { Avatar, Badge } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
|
||||
Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
|
||||
|
||||
````jsx
|
||||
import { Avatar } from 'antd';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -11,8 +11,8 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
New feature after 3.16.0. We preset a series of colorful Badge style for different situation usage.
|
||||
And you can always set it to a hex color string for custom color.
|
||||
New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations.
|
||||
You can also set it to a hex color string for custom color.
|
||||
|
||||
````jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
@ -75,101 +75,91 @@ exports[`react router react router 3 1`] = `
|
||||
}
|
||||
separator="/"
|
||||
>
|
||||
<Consumer>
|
||||
<div
|
||||
className="ant-breadcrumb"
|
||||
<div
|
||||
className="ant-breadcrumb"
|
||||
>
|
||||
<BreadcrumbItem
|
||||
key="Home"
|
||||
separator="/"
|
||||
>
|
||||
<BreadcrumbItem
|
||||
key="Home"
|
||||
separator="/"
|
||||
>
|
||||
<Consumer>
|
||||
<span>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</span>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem
|
||||
key="Application List"
|
||||
separator="/"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/apps"
|
||||
>
|
||||
Application List
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</span>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem
|
||||
key="Application:id"
|
||||
separator="/"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/apps/1"
|
||||
>
|
||||
Application1
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</span>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem
|
||||
key="Detail"
|
||||
separator="/"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
Detail
|
||||
</span>
|
||||
</Consumer>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem
|
||||
key="Application List"
|
||||
separator="/"
|
||||
>
|
||||
<Consumer>
|
||||
<span>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/apps"
|
||||
>
|
||||
Application List
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</span>
|
||||
</Consumer>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem
|
||||
key="Application:id"
|
||||
separator="/"
|
||||
>
|
||||
<Consumer>
|
||||
<span>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/apps/1"
|
||||
>
|
||||
Application1
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</span>
|
||||
</Consumer>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem
|
||||
key="Detail"
|
||||
separator="/"
|
||||
>
|
||||
<Consumer>
|
||||
<span>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<span>
|
||||
Detail
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</span>
|
||||
</Consumer>
|
||||
</BreadcrumbItem>
|
||||
</div>
|
||||
</Consumer>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</span>
|
||||
</BreadcrumbItem>
|
||||
</div>
|
||||
</Breadcrumb>
|
||||
`;
|
||||
|
||||
@ -1154,9 +1154,9 @@ exports[`Cascader should render not found content 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"disabled": true,
|
||||
"label": <Consumer>
|
||||
"label": <Context.Consumer>
|
||||
[Function]
|
||||
</Consumer>,
|
||||
</Context.Consumer>,
|
||||
"value": "ANT_CASCADER_NOT_FOUND",
|
||||
},
|
||||
]
|
||||
@ -1193,36 +1193,32 @@ exports[`Cascader should render not found content 1`] = `
|
||||
onDoubleClick={[Function]}
|
||||
title=""
|
||||
>
|
||||
<Consumer>
|
||||
<OriginEmpty
|
||||
className="ant-empty-small"
|
||||
image="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"
|
||||
<OriginEmpty
|
||||
className="ant-empty-small"
|
||||
image="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Empty"
|
||||
>
|
||||
<Consumer>
|
||||
<LocaleReceiver
|
||||
componentName="Empty"
|
||||
<div
|
||||
className="ant-empty ant-empty-normal ant-empty-small"
|
||||
>
|
||||
<div
|
||||
className="ant-empty-image"
|
||||
>
|
||||
<div
|
||||
className="ant-empty ant-empty-normal ant-empty-small"
|
||||
>
|
||||
<div
|
||||
className="ant-empty-image"
|
||||
>
|
||||
<img
|
||||
alt="No Data"
|
||||
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className="ant-empty-description"
|
||||
>
|
||||
No Data
|
||||
</p>
|
||||
</div>
|
||||
</LocaleReceiver>
|
||||
</Consumer>
|
||||
</OriginEmpty>
|
||||
</Consumer>
|
||||
<img
|
||||
alt="No Data"
|
||||
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className="ant-empty-description"
|
||||
>
|
||||
No Data
|
||||
</p>
|
||||
</div>
|
||||
</LocaleReceiver>
|
||||
</OriginEmpty>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
|
||||
In accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
|
||||
|
||||
````jsx
|
||||
import { Collapse } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
|
||||
By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
|
||||
|
||||
````jsx
|
||||
import { Collapse } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
You can disable showing arrow icon by passing `showArrow={false}` to `CollapsePanel` component.
|
||||
You can hide the arrow icon by passing `showArrow={false}` to `CollapsePanel` component.
|
||||
|
||||
````jsx
|
||||
import { Collapse } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Comment can be used as editor, user can customize the editor component.
|
||||
Comment can be used as an editor, so the user can customize the contents of the component.
|
||||
|
||||
````jsx
|
||||
import {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import createReactContext, { Context } from 'create-react-context';
|
||||
import createReactContext, { Context } from '@ant-design/create-react-context';
|
||||
|
||||
import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Divider default type is `horizontal`. Support inner text inside Divider.
|
||||
Divider is `horizontal` by default. You can add text within Divider.
|
||||
|
||||
````jsx
|
||||
import { Divider } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Set orientation of divider to left or right.
|
||||
Set `orientation="left/right"` to align the inner text.
|
||||
|
||||
````jsx
|
||||
import { Divider } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Use form in drawer with submit button.
|
||||
Use a form in Drawer with a submit button.
|
||||
|
||||
```jsx
|
||||
import {
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Open a new drawer on top of an existing drawer to handle multi branch tasks
|
||||
Open a new drawer on top of an existing drawer to handle multi branch tasks.
|
||||
|
||||
```jsx
|
||||
import { Drawer, Button } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Basic drawer.
|
||||
The Drawer can appear from any edge of the screen.
|
||||
|
||||
```jsx
|
||||
import { Drawer, Button, Radio } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Use when you need to quickly preview the outline of the object. Such as list item preview.
|
||||
Use Drawer to quickly preview details of an object, such as those in a list.
|
||||
|
||||
```jsx
|
||||
import {
|
||||
|
||||
@ -5,15 +5,15 @@ subtitle:
|
||||
title: Drawer
|
||||
---
|
||||
|
||||
Panel slides from screen edge.
|
||||
A panel which slides in from the edge of the screen.
|
||||
|
||||
## When To Use
|
||||
|
||||
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
|
||||
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
|
||||
|
||||
* Use a Form to create or edit a set of information.
|
||||
* Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
|
||||
* When a same Form is needed in multiple places.
|
||||
* Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
|
||||
* When the same Form is needed in multiple places.
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import RcDrawer from 'rc-drawer';
|
||||
import createReactContext, { Context } from 'create-react-context';
|
||||
import createReactContext, { Context } from '@ant-design/create-react-context';
|
||||
import warning from '../_util/warning';
|
||||
import classNames from 'classnames';
|
||||
import Icon from '../icon';
|
||||
|
||||
@ -6,11 +6,12 @@ import createFormField from 'rc-form/lib/createFormField';
|
||||
import omit from 'omit.js';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ColProps } from '../grid/col';
|
||||
import { Omit, tuple } from '../_util/type';
|
||||
import { tuple } from '../_util/type';
|
||||
import warning from '../_util/warning';
|
||||
import FormItem, { FormLabelAlign } from './FormItem';
|
||||
import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
|
||||
import { FormContext } from './context';
|
||||
import { FormWrappedProps } from './interface';
|
||||
|
||||
type FormCreateOptionMessagesCallback = (...args: any[]) => string;
|
||||
|
||||
@ -193,12 +194,6 @@ export interface RcBaseFormProps {
|
||||
wrappedComponentRef?: any;
|
||||
}
|
||||
|
||||
export interface ComponentDecorator {
|
||||
<P extends FormComponentProps>(
|
||||
component: React.ComponentClass<P> | React.SFC<P>,
|
||||
): React.ComponentClass<RcBaseFormProps & Omit<P, keyof FormComponentProps>>;
|
||||
}
|
||||
|
||||
export default class Form extends React.Component<FormProps, any> {
|
||||
static defaultProps = {
|
||||
colon: true,
|
||||
@ -222,9 +217,9 @@ export default class Form extends React.Component<FormProps, any> {
|
||||
|
||||
static createFormField = createFormField;
|
||||
|
||||
static create = function<TOwnProps>(
|
||||
static create = function<TOwnProps extends FormComponentProps>(
|
||||
options: FormCreateOption<TOwnProps> = {},
|
||||
): ComponentDecorator {
|
||||
): FormWrappedProps<TOwnProps> {
|
||||
return createDOMForm({
|
||||
fieldNameProp: 'id',
|
||||
...options,
|
||||
|
||||
@ -31,7 +31,7 @@ class WithOwnProps extends React.Component<WithOwnPropsProps, any> {
|
||||
}
|
||||
}
|
||||
|
||||
const WithOwnPropsForm = Form.create()(WithOwnProps);
|
||||
const WithOwnPropsForm = Form.create<WithOwnPropsProps>()(WithOwnProps);
|
||||
|
||||
<WithOwnPropsForm name="foo" />;
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import createReactContext, { Context } from 'create-react-context';
|
||||
import createReactContext, { Context } from '@ant-design/create-react-context';
|
||||
import { ColProps } from '../grid/col';
|
||||
import { FormLabelAlign } from './FormItem';
|
||||
|
||||
|
||||
18
components/form/interface.ts
Normal file
18
components/form/interface.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import * as React from 'react';
|
||||
import hoistNonReactStatics from 'hoist-non-react-statics';
|
||||
import { Omit } from '../_util/type';
|
||||
import { FormComponentProps } from './Form';
|
||||
|
||||
// Copy from @types/react-redux https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-redux/index.d.ts
|
||||
export type ConnectedComponentClass<
|
||||
C extends React.ComponentType<any>,
|
||||
P
|
||||
> = React.ComponentClass<JSX.LibraryManagedAttributes<C, P>> & hoistNonReactStatics.NonReactStatics<C> & {
|
||||
WrappedComponent: C;
|
||||
};
|
||||
|
||||
export type FormWrappedProps<TOwnProps extends FormComponentProps> =
|
||||
<
|
||||
C extends React.ComponentType
|
||||
>(component: C)
|
||||
=> ConnectedComponentClass<C, Omit<TOwnProps, keyof FormComponentProps>>;
|
||||
@ -1,4 +1,4 @@
|
||||
import createContext, { Context } from 'create-react-context';
|
||||
import createContext, { Context } from '@ant-design/create-react-context';
|
||||
|
||||
export interface RowContextState {
|
||||
gutter?: number;
|
||||
|
||||
@ -89,11 +89,11 @@ ReactDOM.render(<App />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
#components-grid-demo-playground [class^="ant-col-"] {
|
||||
#components-grid-demo-playground [class~="ant-col"] {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
#components-grid-demo-playground [class^="ant-col-"] > div {
|
||||
#components-grid-demo-playground [class~="ant-col"] > div {
|
||||
background: #00A0E9;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
|
||||
@ -33,7 +33,7 @@ export interface CustomIconComponentProps {
|
||||
style?: React.CSSProperties;
|
||||
spin?: boolean;
|
||||
rotate?: number;
|
||||
['aria-hidden']?: string;
|
||||
['aria-hidden']?: React.AriaAttributes['aria-hidden'];
|
||||
}
|
||||
|
||||
export type ThemeType = 'filled' | 'outlined' | 'twoTone';
|
||||
|
||||
@ -7,7 +7,7 @@ export const svgBaseProps = {
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
fill: 'currentColor',
|
||||
['aria-hidden']: 'true',
|
||||
['aria-hidden']: true,
|
||||
focusable: 'false',
|
||||
};
|
||||
|
||||
|
||||
@ -6,66 +6,64 @@ exports[`Input allowClear should change type when click 1`] = `
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
<Icon
|
||||
className="ant-input-clear-icon"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
theme="filled"
|
||||
type="close-circle"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-clear-icon"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
theme="filled"
|
||||
type="close-circle"
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
<i
|
||||
aria-label="icon: close-circle"
|
||||
className="anticon anticon-close-circle ant-input-clear-icon"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<i
|
||||
aria-label="icon: close-circle"
|
||||
className="anticon anticon-close-circle ant-input-clear-icon"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
<IconReact
|
||||
className=""
|
||||
type="close-circle-fill"
|
||||
>
|
||||
<IconReact
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
type="close-circle-fill"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-close-circle"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-close-circle"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
key="svg-close-circle-svg-0"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
key="svg-close-circle-svg-0"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</Consumer>
|
||||
</span>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
@ -75,24 +73,22 @@ exports[`Input allowClear should change type when click 2`] = `
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
@ -103,24 +99,22 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
@ -130,24 +124,22 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
@ -158,24 +150,22 @@ exports[`Input allowClear should not show icon if defaultValue is undefined, nul
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
@ -186,24 +176,22 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
|
||||
type="text"
|
||||
value={null}
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
@ -213,24 +201,22 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
|
||||
disabled={false}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
@ -241,24 +227,22 @@ exports[`Input allowClear should not show icon if value is undefined, null or em
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Consumer>
|
||||
className="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
@ -268,17 +252,15 @@ exports[`Input should support maxLength 1`] = `
|
||||
maxLength={3}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
maxLength={3}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</Consumer>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
maxLength={3}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</Input>
|
||||
`;
|
||||
|
||||
@ -304,71 +286,69 @@ exports[`Input.Password should change type when click 1`] = `
|
||||
}
|
||||
type="password"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="password"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="password"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
<i
|
||||
aria-label="icon: eye-invisible"
|
||||
className="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<i
|
||||
aria-label="icon: eye-invisible"
|
||||
className="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
<IconReact
|
||||
className=""
|
||||
type="eye-invisible-o"
|
||||
>
|
||||
<IconReact
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
type="eye-invisible-o"
|
||||
data-icon="eye-invisible"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye-invisible"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="eye-invisible"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye-invisible"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
|
||||
key="svg-eye-invisible-svg-0"
|
||||
/>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
|
||||
key="svg-eye-invisible-svg-1"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
|
||||
key="svg-eye-invisible-svg-0"
|
||||
/>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
|
||||
key="svg-eye-invisible-svg-1"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</Consumer>
|
||||
</span>
|
||||
</Input>
|
||||
</Password>
|
||||
`;
|
||||
@ -395,67 +375,65 @@ exports[`Input.Password should change type when click 2`] = `
|
||||
}
|
||||
type="text"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
<i
|
||||
aria-label="icon: eye"
|
||||
className="anticon anticon-eye ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<i
|
||||
aria-label="icon: eye"
|
||||
className="anticon anticon-eye ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
<IconReact
|
||||
className=""
|
||||
type="eye-o"
|
||||
>
|
||||
<IconReact
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
type="eye-o"
|
||||
data-icon="eye"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="eye"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
|
||||
key="svg-eye-svg-0"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
<path
|
||||
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
|
||||
key="svg-eye-svg-0"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</Consumer>
|
||||
</span>
|
||||
</Input>
|
||||
</Password>
|
||||
`;
|
||||
@ -482,71 +460,69 @@ exports[`Input.Password should change type when click 3`] = `
|
||||
}
|
||||
type="password"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="password"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="password"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
<i
|
||||
aria-label="icon: eye-invisible"
|
||||
className="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<i
|
||||
aria-label="icon: eye-invisible"
|
||||
className="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
<IconReact
|
||||
className=""
|
||||
type="eye-invisible-o"
|
||||
>
|
||||
<IconReact
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
type="eye-invisible-o"
|
||||
data-icon="eye-invisible"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye-invisible"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="eye-invisible"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye-invisible"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
|
||||
key="svg-eye-invisible-svg-0"
|
||||
/>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
|
||||
key="svg-eye-invisible-svg-1"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
|
||||
key="svg-eye-invisible-svg-0"
|
||||
/>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
|
||||
key="svg-eye-invisible-svg-1"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</Consumer>
|
||||
</span>
|
||||
</Input>
|
||||
</Password>
|
||||
`;
|
||||
@ -556,85 +532,81 @@ exports[`Input.Search should support suffix 1`] = `
|
||||
enterButton={false}
|
||||
suffix="suffix"
|
||||
>
|
||||
<Consumer>
|
||||
<Input
|
||||
className="ant-input-search"
|
||||
disabled={false}
|
||||
onPressEnter={[Function]}
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
Array [
|
||||
"suffix",
|
||||
<Icon
|
||||
className="ant-input-search-icon"
|
||||
onClick={[Function]}
|
||||
type="search"
|
||||
/>,
|
||||
]
|
||||
}
|
||||
type="text"
|
||||
<Input
|
||||
className="ant-input-search"
|
||||
disabled={false}
|
||||
onPressEnter={[Function]}
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
Array [
|
||||
"suffix",
|
||||
<Icon
|
||||
className="ant-input-search-icon"
|
||||
onClick={[Function]}
|
||||
type="search"
|
||||
/>,
|
||||
]
|
||||
}
|
||||
type="text"
|
||||
>
|
||||
<span
|
||||
className="ant-input-search ant-input-affix-wrapper"
|
||||
>
|
||||
<Consumer>
|
||||
<span
|
||||
className="ant-input-search ant-input-affix-wrapper"
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
suffix
|
||||
<Icon
|
||||
className="ant-input-search-icon"
|
||||
key="searchIcon"
|
||||
onClick={[Function]}
|
||||
type="search"
|
||||
>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
suffix
|
||||
<Icon
|
||||
className="ant-input-search-icon"
|
||||
key="searchIcon"
|
||||
<i
|
||||
aria-label="icon: search"
|
||||
className="anticon anticon-search ant-input-search-icon"
|
||||
onClick={[Function]}
|
||||
type="search"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
<IconReact
|
||||
className=""
|
||||
type="search-o"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: search"
|
||||
className="anticon anticon-search ant-input-search-icon"
|
||||
onClick={[Function]}
|
||||
tabIndex={-1}
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-search"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<IconReact
|
||||
className=""
|
||||
type="search-o"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-search"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
key="svg-search-svg-0"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</span>
|
||||
</Consumer>
|
||||
</Input>
|
||||
</Consumer>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
key="svg-search-svg-0"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</span>
|
||||
</Input>
|
||||
</Search>
|
||||
`;
|
||||
|
||||
@ -642,20 +614,18 @@ exports[`TextArea should support disabled 1`] = `
|
||||
<TextArea
|
||||
disabled={true}
|
||||
>
|
||||
<Consumer>
|
||||
<ReactResizeObserver
|
||||
<ReactResizeObserver
|
||||
disabled={true}
|
||||
onResize={[Function]}
|
||||
>
|
||||
<textarea
|
||||
className="ant-input ant-input-disabled"
|
||||
disabled={true}
|
||||
onResize={[Function]}
|
||||
>
|
||||
<textarea
|
||||
className="ant-input ant-input-disabled"
|
||||
disabled={true}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={Object {}}
|
||||
/>
|
||||
</ReactResizeObserver>
|
||||
</Consumer>
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={Object {}}
|
||||
/>
|
||||
</ReactResizeObserver>
|
||||
</TextArea>
|
||||
`;
|
||||
|
||||
@ -663,19 +633,17 @@ exports[`TextArea should support maxLength 1`] = `
|
||||
<TextArea
|
||||
maxLength={10}
|
||||
>
|
||||
<Consumer>
|
||||
<ReactResizeObserver
|
||||
disabled={true}
|
||||
onResize={[Function]}
|
||||
>
|
||||
<textarea
|
||||
className="ant-input"
|
||||
maxLength={10}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={Object {}}
|
||||
/>
|
||||
</ReactResizeObserver>
|
||||
</Consumer>
|
||||
<ReactResizeObserver
|
||||
disabled={true}
|
||||
onResize={[Function]}
|
||||
>
|
||||
<textarea
|
||||
className="ant-input"
|
||||
maxLength={10}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={Object {}}
|
||||
/>
|
||||
</ReactResizeObserver>
|
||||
</TextArea>
|
||||
`;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import createContext, { Context } from 'create-react-context';
|
||||
import createContext, { Context } from '@ant-design/create-react-context';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { LayoutContext, LayoutContextProps } from './layout';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import createContext, { Context } from 'create-react-context';
|
||||
import createContext, { Context } from '@ant-design/create-react-context';
|
||||
import { SiderProps } from './Sider';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Creating a grid list by setting the `grid` property of List
|
||||
Create a grid layout by setting the `grid` property of List.
|
||||
|
||||
````jsx
|
||||
import { List, Card } from 'antd';
|
||||
|
||||
@ -13,7 +13,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
An example of infinite list & virtualized loading using [react-virtualized](https://github.com/bvaughn/react-virtualized). [Learn more](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/)
|
||||
An example of infinite list & virtualized loading using [react-virtualized](https://github.com/bvaughn/react-virtualized). [Learn more](https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/).
|
||||
|
||||
`Virtualized` rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible.
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 响应式的栅格列表
|
||||
zh-CN: 响应式的栅格列表
|
||||
en-US: Responsive grid list
|
||||
---
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Responsive grid list. The size property is as same as [Layout Grid](https://ant.design/components/grid/#Col).
|
||||
Responsive grid list. The size property the is as same as [Layout Grid](https://ant.design/components/grid/#Col).
|
||||
|
||||
````jsx
|
||||
import { List, Card } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Setting `itemLayout` property with `vertical` to create a vertical list.
|
||||
Set the `itemLayout` property to `vertical` to create a vertical list.
|
||||
|
||||
````jsx
|
||||
import { List, Avatar, Icon } from 'antd';
|
||||
|
||||
@ -9,7 +9,7 @@ title: LocaleProvider
|
||||
|
||||
## Usage
|
||||
|
||||
`LocaleProvider` takes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
|
||||
`LocaleProvider` makes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
|
||||
|
||||
```jsx
|
||||
import { LocaleProvider } from 'antd';
|
||||
@ -23,7 +23,7 @@ moment.locale('fr');
|
||||
return <LocaleProvider locale={fr_FR}><App /></LocaleProvider>;
|
||||
```
|
||||
|
||||
We provide some locale like English, Chinese, Russian, German, French and etc, all locale packages can be found in [here](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/).
|
||||
We provide some locales like English, Chinese, Russian, German, French etc. All locale packages can be found in [here](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/).
|
||||
|
||||
Note: if you need to use antd's UMD dist file, please use `antd/dist/antd-with-locales.js` and corresponding moment locale:
|
||||
|
||||
@ -41,7 +41,7 @@ If you can't find your language, you are welcome to create a locale package base
|
||||
|
||||
### Other localization needs
|
||||
|
||||
This component aims for localization of the built-in text, if you want to support other documents, we recommend using [react-intl](https://github.com/yahoo/react-intl), refer to [Intl demo 1](http://github.com/ant-design/intl-example) and [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US).
|
||||
This component aims to provide localization of the built-in text. If you want to support other documents, we recommend using [react-intl](https://github.com/yahoo/react-intl), refer to [Intl demo 1](http://github.com/ant-design/intl-example) and [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US).
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import RcMenu, { Divider, ItemGroup } from 'rc-menu';
|
||||
import createContext, { Context } from 'create-react-context';
|
||||
import createContext, { Context } from '@ant-design/create-react-context';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import SubMenu from './SubMenu';
|
||||
|
||||
@ -68,7 +68,7 @@ exports[`renders ./components/message/demo/thenable.md correctly 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Display a sequence of message
|
||||
Display sequential messages
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Normal messages as feedbacks.
|
||||
Normal message for information.
|
||||
|
||||
````jsx
|
||||
import { message, Button } from 'antd';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 加载中
|
||||
en-US: Message of loading
|
||||
en-US: Message with loading indicator
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
@ -10,7 +10,7 @@ title:
|
||||
可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 message 将要结束时通过 then 显示新的 message 。
|
||||
|
||||
## en-US
|
||||
`message` provides promise interface for `onClose`. The above example will display a new message when old message is about to finish.
|
||||
`message` provides a promise interface for `onClose`. The above example will display a new message when the old message is about to close.
|
||||
|
||||
````jsx
|
||||
import { message, Button } from 'antd';
|
||||
@ -22,7 +22,7 @@ const success = () => {
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Button onClick={success}>Display a sequence of message</Button>,
|
||||
<Button onClick={success}>Display sequential messages</Button>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
@ -11,9 +11,25 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
let mousePosition: { x: number; y: number } | null;
|
||||
let mousePositionEventBinded: boolean;
|
||||
export const destroyFns: Array<() => void> = [];
|
||||
|
||||
// ref: https://github.com/ant-design/ant-design/issues/15795
|
||||
const getClickPosition = (e: MouseEvent) => {
|
||||
mousePosition = {
|
||||
x: e.pageX,
|
||||
y: e.pageY,
|
||||
};
|
||||
// 100ms 内发生过点击事件，则从点击位置动画展示
|
||||
// 否则直接 zoom 展示
|
||||
// 这样可以兼容非点击方式展开
|
||||
setTimeout(() => (mousePosition = null), 100);
|
||||
};
|
||||
|
||||
// 只有点击事件支持从鼠标位置动画展开
|
||||
if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
|
||||
addEventListener(document.documentElement, 'click', getClickPosition);
|
||||
}
|
||||
|
||||
export interface ModalProps {
|
||||
/** 对话框是否可见*/
|
||||
visible?: boolean;
|
||||
@ -158,24 +174,6 @@ export default class Modal extends React.Component<ModalProps, {}> {
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (mousePositionEventBinded) {
|
||||
return;
|
||||
}
|
||||
// 只有点击事件支持从鼠标位置动画展开
|
||||
addEventListener(document.documentElement, 'click', (e: MouseEvent) => {
|
||||
mousePosition = {
|
||||
x: e.pageX,
|
||||
y: e.pageY,
|
||||
};
|
||||
// 100ms 内发生过点击事件，则从点击位置动画展示
|
||||
// 否则直接 zoom 展示
|
||||
// 这样可以兼容非点击方式展开
|
||||
setTimeout(() => (mousePosition = null), 100);
|
||||
});
|
||||
mousePositionEventBinded = true;
|
||||
}
|
||||
|
||||
renderFooter = (locale: ModalLocale) => {
|
||||
const { okText, okType, cancelText, confirmLoading } = this.props;
|
||||
return (
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Asynchronously close a modal dialog when a user clicked OK button, for example,
|
||||
Asynchronously close a modal dialog when a the OK button is pressed. For example,
|
||||
you can use this pattern when you submit a form.
|
||||
|
||||
````jsx
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Passing `okButtonProps` and `cancelButtonProps` can customize the ok button and cancel button props.
|
||||
Passing `okButtonProps` and `cancelButtonProps` will customize the OK button and cancel button props.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to
|
||||
Use `confirm()` to show a confirmation modal dialog. Let onCancel/onOk function return a promise object to
|
||||
delay closing the dialog.
|
||||
|
||||
````jsx
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
`Modal.destroyAll()` could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically
|
||||
`Modal.destroyAll()` will destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically.
|
||||
|
||||
```jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
To use `confirm()` to popup a confirmation modal dialog.
|
||||
Use `confirm()` to show a confirmation modal dialog.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
@ -13,8 +13,8 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
A more complex example which define a customized footer button bar,
|
||||
the dialog will change to loading state after clicking submit button, when the loading is over,
|
||||
A more complex example which define a customized footer button bar.
|
||||
The dialog will change to loading state after clicking the submit button, and when the loading is done,
|
||||
the modal dialog will be closed.
|
||||
|
||||
You could set `footer` to `null` if you don't need default footer buttons.
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Manually updateing and destroying a modal from `Modal.method`.
|
||||
Manually updating and destroying a modal from `Modal.method`.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` or `topLeft`.
|
||||
A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
|
||||
|
||||
````jsx
|
||||
import { Button, Select, notification } from 'antd';
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
There are 12 `placement` options available. Use `arrowPointAtCenter` if you want arrow point at the center of target.
|
||||
There are 12 `placement` options available. Use `arrowPointAtCenter` if you want the arrow to point at the center of target.
|
||||
|
||||
````jsx
|
||||
import { Popconfirm, message, Button } from 'antd';
|
||||
|
||||
@ -264,56 +264,54 @@ exports[`Progress render strokeColor 2`] = `
|
||||
trailColor="#f3f3f3"
|
||||
type="line"
|
||||
>
|
||||
<Consumer>
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<Line
|
||||
gapDegree={0}
|
||||
percent={50}
|
||||
prefixCls="ant-progress"
|
||||
showInfo={true}
|
||||
size="default"
|
||||
strokeColor={
|
||||
Object {
|
||||
"from": "#108ee9",
|
||||
"to": "#87d068",
|
||||
}
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<Line
|
||||
gapDegree={0}
|
||||
percent={50}
|
||||
prefixCls="ant-progress"
|
||||
showInfo={true}
|
||||
size="default"
|
||||
strokeColor={
|
||||
Object {
|
||||
"from": "#108ee9",
|
||||
"to": "#87d068",
|
||||
}
|
||||
strokeLinecap="round"
|
||||
trailColor="#f3f3f3"
|
||||
type="line"
|
||||
>
|
||||
<div>
|
||||
}
|
||||
strokeLinecap="round"
|
||||
trailColor="#f3f3f3"
|
||||
type="line"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "linear-gradient(to right, #108ee9, #87d068)",
|
||||
"borderRadius": "100px",
|
||||
"height": 8,
|
||||
"width": "50%",
|
||||
}
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "linear-gradient(to right, #108ee9, #87d068)",
|
||||
"borderRadius": "100px",
|
||||
"height": 8,
|
||||
"width": "50%",
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="50%"
|
||||
>
|
||||
50%
|
||||
</span>
|
||||
</div>
|
||||
</Line>
|
||||
</div>
|
||||
</Consumer>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="50%"
|
||||
>
|
||||
50%
|
||||
</span>
|
||||
</div>
|
||||
</Line>
|
||||
</div>
|
||||
</Progress>
|
||||
`;
|
||||
|
||||
@ -333,55 +331,53 @@ exports[`Progress render strokeColor 3`] = `
|
||||
trailColor="#f3f3f3"
|
||||
type="line"
|
||||
>
|
||||
<Consumer>
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<Line
|
||||
gapDegree={0}
|
||||
percent={50}
|
||||
prefixCls="ant-progress"
|
||||
showInfo={true}
|
||||
size="default"
|
||||
strokeColor={
|
||||
Object {
|
||||
"0%": "#108ee9",
|
||||
"100%": "#87d068",
|
||||
}
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<Line
|
||||
gapDegree={0}
|
||||
percent={50}
|
||||
prefixCls="ant-progress"
|
||||
showInfo={true}
|
||||
size="default"
|
||||
strokeColor={
|
||||
Object {
|
||||
"0%": "#108ee9",
|
||||
"100%": "#87d068",
|
||||
}
|
||||
strokeLinecap="round"
|
||||
trailColor="#f3f3f3"
|
||||
type="line"
|
||||
>
|
||||
<div>
|
||||
}
|
||||
strokeLinecap="round"
|
||||
trailColor="#f3f3f3"
|
||||
type="line"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "linear-gradient(to right, #108ee9 0%, #87d068 100%)",
|
||||
"borderRadius": "100px",
|
||||
"height": 8,
|
||||
"width": "50%",
|
||||
}
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "linear-gradient(to right, #108ee9 0%, #87d068 100%)",
|
||||
"borderRadius": "100px",
|
||||
"height": 8,
|
||||
"width": "50%",
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="50%"
|
||||
>
|
||||
50%
|
||||
</span>
|
||||
</div>
|
||||
</Line>
|
||||
</div>
|
||||
</Consumer>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="50%"
|
||||
>
|
||||
50%
|
||||
</span>
|
||||
</div>
|
||||
</Line>
|
||||
</div>
|
||||
</Progress>
|
||||
`;
|
||||
|
||||
@ -5,13 +5,13 @@ title: Skeleton
|
||||
cols: 1
|
||||
---
|
||||
|
||||
Provide a placeholder at the place which need waiting for loading.
|
||||
Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
|
||||
## When To Use
|
||||
|
||||
- When resource needs long time to load, like low network speed.
|
||||
- The component contains much information. Such as List or Card.
|
||||
- Only works when loading data at first time.
|
||||
- Could be replaced by Spin in all situation, but provide better user experience than spin if it works.
|
||||
- When a resource needs long time to load.
|
||||
- When the component contains lots of information, such as List or Card.
|
||||
- Only works when loading data for the first time.
|
||||
- Could be replaced by Spin in any situation, but can provide a better user experience.
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Embedding content into `Spin` will alter it into loading state.
|
||||
Embedding content into `Spin` will set it into loading state.
|
||||
|
||||
````jsx
|
||||
import { Spin, Switch, Alert } from 'antd';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
title:
|
||||
zh-CN: 各种大小
|
||||
en-US: Size
|
||||
---
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**.
|
||||
A small `Spin` is used for loading text, default sized `Spin` for loading a card-level block, and large `Spin` used for loading a **page**.
|
||||
|
||||
````jsx
|
||||
import { Spin } from 'antd';
|
||||
|
||||
@ -501,7 +501,7 @@ mark {
|
||||
|
||||
::selection {
|
||||
color: @text-color-inverse;
|
||||
background: @primary-color;
|
||||
background: @text-selection-bg;
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
|
||||
@ -56,6 +56,7 @@
|
||||
@heading-color-dark: fade(@white, 100%);
|
||||
@text-color-dark: fade(@white, 85%);
|
||||
@text-color-secondary-dark: fade(@white, 65%);
|
||||
@text-selection-bg: @primary-color;
|
||||
@font-variant-base: tabular-nums;
|
||||
@font-feature-settings-base: 'tnum';
|
||||
@font-size-base: 14px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import RcTable from 'rc-table';
|
||||
import RcTable, { INTERNAL_COL_DEFINE } from 'rc-table';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import shallowEqual from 'shallowequal';
|
||||
@ -110,6 +110,8 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
constructor(props: TableProps<T>) {
|
||||
super(props);
|
||||
|
||||
const { expandedRowRender, columns = [] } = props;
|
||||
|
||||
warning(
|
||||
!('columnsPageRange' in props || 'columnsPageSize' in props),
|
||||
'Table',
|
||||
@ -117,11 +119,13 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
'fixed columns instead, see: https://u.ant.design/fixed-columns.',
|
||||
);
|
||||
|
||||
warning(
|
||||
!('expandedRowRender' in props) || !('scroll' in props),
|
||||
'Table',
|
||||
'`expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.',
|
||||
);
|
||||
if (expandedRowRender && columns.some(({ fixed }) => !!fixed)) {
|
||||
warning(
|
||||
false,
|
||||
'Table',
|
||||
'`expandedRowRender` and `Column.fixed` are not compatible. Please use one of them at one time.',
|
||||
);
|
||||
}
|
||||
|
||||
this.columns = props.columns || normalizeColumns(props.children as React.ReactChildren);
|
||||
|
||||
@ -775,6 +779,9 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
fixed: rowSelection.fixed,
|
||||
width: rowSelection.columnWidth,
|
||||
title: rowSelection.columnTitle,
|
||||
[INTERNAL_COL_DEFINE]: {
|
||||
className: `${prefixCls}-selection-col`,
|
||||
},
|
||||
};
|
||||
if (rowSelection.type !== 'radio') {
|
||||
const checkboxAllDisabled = data.every(
|
||||
|
||||
@ -87,10 +87,10 @@ describe('Table', () => {
|
||||
expect(wrapper.find('tbody').props().id).toBe('wrapper2');
|
||||
});
|
||||
|
||||
it('warning if both `expandedRowRender` & `scroll` are used', () => {
|
||||
mount(<Table expandedRowRender={() => null} scroll={{}} />);
|
||||
it('warning if both `expandedRowRender` & `Column.fixed` are used', () => {
|
||||
mount(<Table expandedRowRender={() => null} columns={[{ fixed: true }]} />);
|
||||
expect(warnSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Table] `expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.',
|
||||
'Warning: [antd: Table] `expandedRowRender` and `Column.fixed` are not compatible. Please use one of them at one time.',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -26,7 +26,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
@ -250,7 +252,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
class="ant-table-fixed"
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
|
||||
@ -2427,7 +2427,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
<col
|
||||
class="ant-table-expand-icon-col"
|
||||
/>
|
||||
<col />
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
<col
|
||||
style="width:150px;min-width:150px"
|
||||
/>
|
||||
@ -4860,7 +4862,9 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
<col />
|
||||
<col
|
||||
style="width:12%;min-width:12%"
|
||||
@ -12415,7 +12419,9 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
@ -12842,7 +12848,9 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
@ -13539,7 +13547,9 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col />
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Two compacted table size: `middle` and `small`, `small` size is used in Modal only.
|
||||
There are two compacted table sizes: `middle` and `small`. The `small` size is used in Modals only.
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
@ -311,22 +311,6 @@
|
||||
padding: @table-padding-vertical @table-padding-horizontal;
|
||||
}
|
||||
|
||||
&-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
|
||||
.@{table-prefix-cls}-selection {
|
||||
margin-right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-thead > tr > th.@{table-prefix-cls}-selection-column,
|
||||
&-tbody > tr > td.@{table-prefix-cls}-selection-column {
|
||||
width: @table-selection-column-width;
|
||||
text-align: center;
|
||||
|
||||
.@{ant-prefix}-radio-wrapper {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-expand-icon-th,
|
||||
&-row-expand-icon-cell {
|
||||
width: 50px;
|
||||
@ -562,10 +546,6 @@
|
||||
content: '.';
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='@{table-prefix-cls}-row-level-0'] .@{table-prefix-cls}-selection-column > span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
tr&-expanded-row {
|
||||
@ -686,6 +666,32 @@
|
||||
&&-scroll-position-right &-fixed-right {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// ========================== Row Selection ==========================
|
||||
colgroup {
|
||||
> col.@{table-prefix-cls}-selection-col {
|
||||
width: @table-selection-column-width;
|
||||
}
|
||||
}
|
||||
|
||||
&-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
|
||||
.@{table-prefix-cls}-selection {
|
||||
margin-right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-thead > tr > th.@{table-prefix-cls}-selection-column,
|
||||
&-tbody > tr > td.@{table-prefix-cls}-selection-column {
|
||||
text-align: center;
|
||||
|
||||
.@{ant-prefix}-radio-wrapper {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-row[class*='@{table-prefix-cls}-row-level-0'] .@{table-prefix-cls}-selection-column > span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@import './size';
|
||||
|
||||
@ -11,8 +11,8 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
We preset a series of colorful tag style for different situation usage.
|
||||
And you can always set it to a hex color string for custom color.
|
||||
We preset a series of colorful tag styles for use in different situations.
|
||||
You can also set it to a hex color string for custom color.
|
||||
|
||||
````jsx
|
||||
import { Tag } from 'antd';
|
||||
|
||||
@ -8,7 +8,7 @@ Vertical display timeline.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When a series of information needs to be ordered by time (ascend or descend).
|
||||
- When a series of information needs to be ordered by time (ascending or descending).
|
||||
- When you need a timeline to make a visual connection.
|
||||
|
||||
## API
|
||||
|
||||
@ -39,7 +39,7 @@ exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md correctly 1`]
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Ingore / 不处理
|
||||
Ignore / 不处理
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -47,7 +47,7 @@ exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md correctly 1`]
|
||||
|
||||
exports[`renders ./components/tooltip/demo/basic.md correctly 1`] = `
|
||||
<span>
|
||||
Tooltip will show when mouse enter.
|
||||
Tooltip will show on mouse enter.
|
||||
</span>
|
||||
`;
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ debug: true
|
||||
|
||||
## en-US
|
||||
|
||||
Adjust popup placement automatically when popup is invisible
|
||||
Adjust placement automatically when tooltip is invisible.
|
||||
|
||||
````jsx
|
||||
import { Tooltip, Button } from 'antd';
|
||||
@ -31,7 +31,7 @@ ReactDOM.render(
|
||||
</Tooltip>
|
||||
<br />
|
||||
<Tooltip placement="left" title="Prompt Text" getPopupContainer={trigger => trigger.parentElement} autoAdjustOverflow={false}>
|
||||
<Button>Ingore / 不处理</Button>
|
||||
<Button>Ignore / 不处理</Button>
|
||||
</Tooltip>
|
||||
</div>,
|
||||
mountNode
|
||||
|
||||
@ -18,7 +18,7 @@ import { Tooltip } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Tooltip title="prompt text">
|
||||
<span>Tooltip will show when mouse enter.</span>
|
||||
<span>Tooltip will show on mouse enter.</span>
|
||||
</Tooltip>,
|
||||
mountNode
|
||||
);
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
The ToolTip has 12 placements choice.
|
||||
There are 12 placement options available.
|
||||
|
||||
````jsx
|
||||
import { Tooltip, Button } from 'antd';
|
||||
|
||||
@ -13,17 +13,15 @@ exports[`Search should show cross icon when input value exists 1`] = `
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<Consumer>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</Consumer>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</Input>
|
||||
<span
|
||||
className="undefined-action"
|
||||
@ -80,17 +78,15 @@ exports[`Search should show cross icon when input value exists 2`] = `
|
||||
type="text"
|
||||
value="a"
|
||||
>
|
||||
<Consumer>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder=""
|
||||
type="text"
|
||||
value="a"
|
||||
/>
|
||||
</Consumer>
|
||||
<input
|
||||
className="ant-input"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder=""
|
||||
type="text"
|
||||
value="a"
|
||||
/>
|
||||
</Input>
|
||||
<a
|
||||
className="undefined-action"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 受控操作示例
|
||||
en-US: basic controlled example
|
||||
en-US: Controlled Tree
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
basic controlled example
|
||||
Controlled mode lets parent nodes reflect the status of child nodes more intelligently.
|
||||
|
||||
````jsx
|
||||
import { Tree } from 'antd';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: basic
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
@ -96,8 +96,6 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
}
|
||||
```
|
||||
|
||||
> Note: Don't set `libraryDirectory` if you are using webpack 1.
|
||||
|
||||
This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
|
||||
|
||||
```jsx
|
||||
|
||||
@ -102,8 +102,6 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
||||
}
|
||||
```
|
||||
|
||||
> 注意：webpack 1 无需设置 `libraryDirectory`。
|
||||
|
||||
然后只需从 antd 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。
|
||||
|
||||
```jsx
|
||||
|
||||
@ -34,7 +34,7 @@ Image Crop | [react-image-crop](https://github.com/DominicTobias/react-image-cro
|
||||
Trend Lines | [react-sparklines](https://github.com/borisyankov/react-sparklines)
|
||||
Formatted Input | [text-mask](https://github.com/text-mask/text-mask)
|
||||
Keywords highlight | [react-highlight-words](https://github.com/bvaughn/react-highlight-words)
|
||||
Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one)
|
||||
Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io)
|
||||
|
||||
<style>
|
||||
.markdown table td:first-child {
|
||||
|
||||
@ -34,7 +34,7 @@ Emoji | [emoji-mart](https://github.com/missive/emoji-mart)
|
||||
趋势线 | [react-sparklines](https://github.com/borisyankov/react-sparklines)
|
||||
格式化输入 | [text-mask](https://github.com/text-mask/text-mask)
|
||||
关键字高亮 | [react-highlight-words](https://github.com/bvaughn/react-highlight-words)
|
||||
动画 | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one)
|
||||
动画 | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io)
|
||||
|
||||
<style>
|
||||
.markdown table td:first-child {
|
||||
|
||||
@ -70,7 +70,7 @@ Functional color represents a clear message as well as status, such as success,
|
||||
|
||||
### Neutral Color
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/mkaVzBvUUEcTKeUxhgpN.png">
|
||||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/WAlfDnpYniUjaLzmnIqf.png">
|
||||
|
||||
Neutral color is mainly used in a large part of the text interface, in addition to the background, borders, dividing lines, and other scenes are also very common. Neutral color definition needs to consider the difference between dark background and light background, while incorporating the WCAG 2.0 standard. The neutral color of Ant Design is based on transparency, as shown on the right:
|
||||
|
||||
|
||||
14
package.json
14
package.json
@ -44,13 +44,14 @@
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "~1.2.0",
|
||||
"@ant-design/icons-react": "~1.1.5",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"@types/react-slick": "^0.23.3",
|
||||
"array-tree-filter": "^2.1.0",
|
||||
"babel-runtime": "6.x",
|
||||
"classnames": "~2.2.6",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"create-react-class": "^15.6.3",
|
||||
"create-react-context": "0.2.2",
|
||||
"@ant-design/create-react-context": "^0.2.4",
|
||||
"css-animation": "^1.5.0",
|
||||
"dom-closest": "^0.2.0",
|
||||
"enquire.js": "^2.1.6",
|
||||
@ -79,7 +80,7 @@
|
||||
"rc-slider": "~8.6.5",
|
||||
"rc-steps": "~3.3.0",
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~6.4.0",
|
||||
"rc-table": "~6.5.0",
|
||||
"rc-tabs": "~9.6.0",
|
||||
"rc-time-picker": "~3.6.1",
|
||||
"rc-tooltip": "~3.7.3",
|
||||
@ -115,7 +116,7 @@
|
||||
"bisheng-plugin-description": "^0.1.4",
|
||||
"bisheng-plugin-react": "^1.0.0",
|
||||
"bisheng-plugin-toc": "^0.4.4",
|
||||
"chalk": "^2.4.1",
|
||||
"chalk": "^2.4.2",
|
||||
"commander": "^2.18.0",
|
||||
"cross-env": "^5.2.0",
|
||||
"css-split-webpack-plugin": "^0.2.6",
|
||||
@ -148,6 +149,7 @@
|
||||
"lz-string": "^1.4.4",
|
||||
"majo": "^0.7.1",
|
||||
"mockdate": "^2.0.2",
|
||||
"node-fetch": "^2.3.0",
|
||||
"pre-commit": "^1.2.2",
|
||||
"preact": "^8.3.1",
|
||||
"preact-compat": "^3.18.4",
|
||||
@ -182,12 +184,13 @@
|
||||
"reqwest": "^2.0.5",
|
||||
"rimraf": "^2.6.2",
|
||||
"scrollama": "^2.0.0",
|
||||
"simple-git": "^1.110.0",
|
||||
"stylelint": "^10.0.0",
|
||||
"stylelint-config-prettier": "^5.0.0",
|
||||
"stylelint-config-rational-order": "^0.1.0",
|
||||
"stylelint-config-standard": "^18.2.0",
|
||||
"stylelint-declaration-block-no-ignored-properties": "^1.1.0",
|
||||
"stylelint-order": "^2.0.0",
|
||||
"stylelint-order": "^3.0.0",
|
||||
"typescript": "~3.4.1",
|
||||
"unified": "^7.0.0",
|
||||
"xhr-mock": "^2.4.1",
|
||||
@ -197,6 +200,7 @@
|
||||
"test": "jest --config .jest.js --no-cache",
|
||||
"test-node": "jest --config .jest.node.js --no-cache",
|
||||
"test-all": "./scripts/test-all.sh",
|
||||
"check-commit": "node ./scripts/check-commit.js",
|
||||
"lint": "npm run lint:ts && npm run lint:es && npm run lint:demo && npm run lint:style && npm run lint:deps",
|
||||
"lint:deps": "antd-tools run deps-lint",
|
||||
"lint:ts": "npm run tsc && antd-tools run ts-lint",
|
||||
@ -221,7 +225,7 @@
|
||||
"deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages",
|
||||
"pub": "antd-tools run pub",
|
||||
"prepublish": "antd-tools run guard",
|
||||
"pre-publish": "npm run test-all",
|
||||
"pre-publish": "npm run check-commit && npm run test-all",
|
||||
"authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'gitter.im' | grep -v '.local>' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt",
|
||||
"lint-staged": "lint-staged",
|
||||
"lint-staged:ts": "tsc && node node_modules/tslint/bin/tslint",
|
||||
|
||||
63
scripts/check-commit.js
Executable file
63
scripts/check-commit.js
Executable file
@ -0,0 +1,63 @@
|
||||
/* eslint-disable import/no-dynamic-require, no-console */
|
||||
const chalk = require('chalk');
|
||||
const path = require('path');
|
||||
const fetch = require('node-fetch');
|
||||
const simpleGit = require('simple-git/promise');
|
||||
|
||||
const cwd = process.cwd();
|
||||
const git = simpleGit(cwd);
|
||||
|
||||
const { version } = require(path.resolve(cwd, 'package.json'));
|
||||
|
||||
function exitProcess(code = 1) {
|
||||
console.log(''); // Keep an empty line here to make looks good~
|
||||
process.exit(code);
|
||||
}
|
||||
|
||||
async function checkVersion() {
|
||||
const { versions } = await fetch('http://registry.npmjs.org/antd').then(res => res.json());
|
||||
if (version in versions) {
|
||||
console.log(chalk.yellow('😈 Current version already exists. Forget update package.json?'));
|
||||
console.log(chalk.cyan(' => Current:'), version);
|
||||
exitProcess();
|
||||
}
|
||||
}
|
||||
|
||||
async function checkBranch({ current }) {
|
||||
if (current !== 'master') {
|
||||
console.log(chalk.yellow('🤔 You are not in the master branch!'));
|
||||
exitProcess();
|
||||
}
|
||||
}
|
||||
|
||||
async function checkCommit({ files }) {
|
||||
if (files.length) {
|
||||
console.log(chalk.yellow('🙄 You forgot something to commit.'));
|
||||
files.forEach(({ path: filePath, working_dir: mark }) => {
|
||||
console.log(' -', chalk.red(mark), filePath);
|
||||
});
|
||||
exitProcess();
|
||||
}
|
||||
}
|
||||
|
||||
async function checkRemote() {
|
||||
const { remote } = await git.fetch('origin', 'master');
|
||||
if (remote.indexOf('ant-design/ant-design') === -1 || true) {
|
||||
console.log(chalk.yellow('😓 Your remote origin is not ant-design. Do you fork it?'));
|
||||
exitProcess();
|
||||
}
|
||||
}
|
||||
|
||||
async function checkAll() {
|
||||
const status = await git.status();
|
||||
|
||||
await checkVersion();
|
||||
|
||||
await checkBranch(status);
|
||||
|
||||
await checkCommit(status);
|
||||
|
||||
await checkRemote();
|
||||
}
|
||||
|
||||
checkAll();
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { Icon as AntdIcon, Badge } from 'antd';
|
||||
import { ThemeType, IconProps } from 'antd/lib/icon';
|
||||
import classNames from 'classnames';
|
||||
import { ThemeType, IconProps } from '../../../../components/icon';
|
||||
|
||||
const Icon: React.SFC<IconProps> = AntdIcon;
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import debounce from 'lodash/debounce';
|
||||
import Category from './Category';
|
||||
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
|
||||
import { categories, Categories, CategoriesKeys } from './fields';
|
||||
import { ThemeType } from '../../../../components/icon';
|
||||
import { ThemeType } from 'antd/lib/icon';
|
||||
|
||||
interface IconDisplayProps extends InjectedIntlProps {}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { CustomIconComponentProps } from '../../../../components/icon';
|
||||
import { CustomIconComponentProps } from 'antd/lib/icon';
|
||||
|
||||
export const FilledIcon: React.SFC<CustomIconComponentProps> = props => {
|
||||
const path =
|
||||
@ -7,7 +7,7 @@ export const FilledIcon: React.SFC<CustomIconComponentProps> = props => {
|
||||
'704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
|
||||
'0c0-53-43-96-96-96z';
|
||||
return (
|
||||
<svg {...props} viewBox="0 0 1024 1024">
|
||||
<svg {...props as any} viewBox="0 0 1024 1024">
|
||||
<path d={path} />
|
||||
</svg>
|
||||
);
|
||||
@ -21,7 +21,7 @@ export const OutlinedIcon: React.SFC<CustomIconComponentProps> = props => {
|
||||
'12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +
|
||||
' 12 12v680c0 6.6-5.4 12-12 12z';
|
||||
return (
|
||||
<svg {...props} viewBox="0 0 1024 1024">
|
||||
<svg {...props as any} viewBox="0 0 1024 1024">
|
||||
<path d={path} />
|
||||
</svg>
|
||||
);
|
||||
@ -34,7 +34,7 @@ export const TwoToneIcon: React.SFC<CustomIconComponentProps> = props => {
|
||||
'066 16 512z m496 368V144c203.41 0 368 164.622 3' +
|
||||
'68 368 0 203.41-164.622 368-368 368z';
|
||||
return (
|
||||
<svg {...props} viewBox="0 0 1024 1024">
|
||||
<svg {...props as any} viewBox="0 0 1024 1024">
|
||||
<path d={path} />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import createReactContext from 'create-react-context/lib/implementation';
|
||||
import createReactContext from '@ant-design/create-react-context/lib/implementation';
|
||||
|
||||
export default createReactContext;
|
||||
|
||||
2
tests/__mocks__/react.js
vendored
2
tests/__mocks__/react.js
vendored
@ -1,4 +1,4 @@
|
||||
import createReactContext from 'create-react-context/lib/implementation';
|
||||
import createReactContext from '@ant-design/create-react-context/lib/implementation';
|
||||
|
||||
const React = require.requireActual('react');
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user