mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: sync master into next branch

Browse Source
This commit is contained in:
afc163 2022-05-11 15:36:22 +08:00
commit 84a969e5e0
87 changed files with 777 additions and 675 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/preview-build.yml vendored
View File

@ -30,7 +30,7 @@ jobs:
key: lock-${{ github.sha }}
- name: create package-lock.json
run: npm i --package-lock-only --ignore-scripts
run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
- name: hack for single file
run: |

2
.github/workflows/site-deploy.yml vendored
View File

@ -22,7 +22,7 @@ jobs:
key: lock-${{ github.sha }}
- name: create package-lock.json
run: npm i --package-lock-only --ignore-scripts
run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
- name: hack for single file
run: |

2
.github/workflows/test.yml vendored
View File

@ -26,7 +26,7 @@ jobs:
key: lock-${{ github.sha }}
- name: create package-lock.json
run: npm i --package-lock-only --ignore-scripts
run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
- name: hack for single file
run: |

2
.github/workflows/ui.yml vendored
View File

@ -28,7 +28,7 @@ jobs:
node-version: '16'
- name: create package-lock.json
run: npm i --package-lock-only --ignore-scripts
run: npm i --package-lock-only --ignore-scripts --legacy-peer-deps
- name: hack for single file
run: |

18
.jest.js
View File

@ -20,13 +20,13 @@ module.exports = {
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
modulePathIgnorePatterns: ['/_site/'],
moduleNameMapper: {
'^dnd-core$': 'dnd-core/dist/cjs',
'^react-dnd$': 'react-dnd/dist/cjs',
'^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
'^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
'^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
'^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
'\\.(css|less)$': 'identity-obj-proxy',
'/^dnd-core$/': 'dnd-core/dist/cjs',
'/^react-dnd$/': 'react-dnd/dist/cjs',
'/^react-dnd-html5-backend$/': 'react-dnd-html5-backend/dist/cjs',
'/^react-dnd-touch-backend$/': 'react-dnd-touch-backend/dist/cjs',
'/^react-dnd-test-backend$/': 'react-dnd-test-backend/dist/cjs',
'/^react-dnd-test-utils$/': 'react-dnd-test-utils/dist/cjs',
'/\\.(css|less)$/': 'identity-obj-proxy',
},
testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
transform: {
@ -52,5 +52,7 @@ module.exports = {
tsConfig: './tsconfig.test.json',
},
},
testURL: 'http://localhost',
testEnvironmentOptions: {
url: 'http://localhost',
},
};

65
components/_util/__tests__/warning.test.js Normal file
View File

@ -0,0 +1,65 @@
describe('Test warning', () => {
let spy: jest.SpyInstance;
beforeAll(() => {
spy = jest.spyOn(console, 'error');
});
afterAll(() => {
spy.mockRestore();
});
beforeEach(() => {
jest.resetModules();
});
afterEach(() => {
spy.mockReset();
});
it('Test noop', async () => {
const { noop } = await import('../warning');
const value = noop();
expect(value).toBe(undefined);
expect(spy).not.toHaveBeenCalled();
expect(() => {
noop();
}).not.toThrow();
});
describe('process.env.NODE_ENV !== "production"', () => {
it('If `false`, exec `console.error`', async () => {
const warning = (await import('../warning')).default;
warning(false, 'error');
expect(spy).toHaveBeenCalled();
});
it('If `true`, do not exec `console.error`', async () => {
const warning = (await import('../warning')).default;
warning(true, 'error message');
expect(spy).not.toHaveBeenCalled();
});
});
describe('process.env.NODE_ENV === "production"', () => {
it('Whether `true` or `false`, do not exec `console.error`', async () => {
const prevEnv = process.env.NODE_ENV;
process.env.NODE_ENV = 'production';
const { default: warning, noop } = await import('../warning');
expect(warning).toEqual(noop);
warning(false, 'error message');
expect(spy).not.toHaveBeenCalled();
warning(true, 'error message');
expect(spy).not.toHaveBeenCalled();
process.env.NODE_ENV = prevEnv;
});
});
});

12
components/_util/devWarning.ts
View File

@ -1,12 +0,0 @@
import devWarning, { resetWarned } from 'rc-util/lib/warning';
export { resetWarned };
export default (valid: boolean, component: string, message: string): void => {
devWarning(valid, `[antd: ${component}] ${message}`);
// StrictMode will inject console which will not throw warning in React 17.
if (process.env.NODE_ENV === 'test') {
resetWarned();
}
};

21
components/_util/warning.ts Normal file
View File

@ -0,0 +1,21 @@
import rcWarning, { resetWarned } from 'rc-util/lib/warning';
export { resetWarned };
export function noop() {}
type Warning = (valid: boolean, component: string, message: string) => void;
// eslint-disable-next-line import/no-mutable-exports
let warning: Warning = noop;
if (process.env.NODE_ENV !== 'production') {
warning = (valid, component, message) => {
rcWarning(valid, `[antd: ${component}] ${message}`);
// StrictMode will inject console which will not throw warning in React 17.
if (process.env.NODE_ENV === 'test') {
resetWarned();
}
};
}
export default warning;

19
components/auto-complete/__tests__/index.test.js
View File

@ -42,16 +42,15 @@ describe('AutoComplete', () => {
});
it('AutoComplete throws error when contains invalid dataSource', () => {
jest.spyOn(console, 'error').mockImplementation(() => undefined);
expect(() => {
mount(
<AutoComplete dataSource={[() => {}]}>
<textarea />
</AutoComplete>,
);
}).toThrow();
// eslint-disable-next-line no-console
console.error.mockRestore();
const spy = jest.spyOn(console, 'error').mockImplementation(() => undefined);
mount(
<AutoComplete dataSource={[() => {}]}>
<textarea />
</AutoComplete>,
);
expect(spy).toHaveBeenCalled();
});
it('legacy dataSource should accept react element option', () => {

32
components/auto-complete/index.tsx
View File

@ -20,7 +20,7 @@ import type {
import Select from '../select';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigConsumer } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import { isValidElement } from '../_util/reactNode';
import type { InputStatus } from '../_util/statusUtils';
@ -95,26 +95,28 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
);
}
default:
throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
warning(
false,
'AutoComplete',
'`dataSource` is only supports type `string[] | Object[]`.',
);
return undefined;
}
})
: [];
}
// ============================ Warning ============================
React.useEffect(() => {
devWarning(
!('dataSource' in props),
'AutoComplete',
'`dataSource` is deprecated, please use `options` instead.',
);
warning(
!('dataSource' in props),
'AutoComplete',
'`dataSource` is deprecated, please use `options` instead.',
);
devWarning(
!customizeInput || !('size' in props),
'AutoComplete',
'You need to control style self instead of setting `size` when using customize input.',
);
}, []);
warning(
!customizeInput || !('size' in props),
'AutoComplete',
'You need to control style self instead of setting `size` when using customize input.',
);
return (
<ConfigConsumer>

4
components/avatar/avatar.tsx
View File

@ -3,7 +3,7 @@ import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import { composeRef } from 'rc-util/lib/ref';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import type { Breakpoint } from '../_util/responsiveObserve';
import { responsiveArray } from '../_util/responsiveObserve';
import useBreakpoint from '../grid/hooks/useBreakpoint';
@ -127,7 +127,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
: {};
}, [screens, size]);
devWarning(
warning(
!(typeof icon === 'string' && icon.length > 2),
'Avatar',
`\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,

88
components/badge/demo/change.md
View File

@ -14,65 +14,59 @@ title:
The count will be animated as it changes.
```jsx
import React, { useState } from 'react';
import { Badge, Button, Switch, Divider, Avatar } from 'antd';
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
const ButtonGroup = Button.Group;
class Demo extends React.Component {
state = {
count: 5,
show: true,
export default () => {
const [count, setCount] = useState(5);
const [show, setShow] = useState(true);
const increase = () => {
setCount(count + 1);
};
increase = () => {
const count = this.state.count + 1;
this.setState({ count });
};
decline = () => {
let count = this.state.count - 1;
if (count < 0) {
count = 0;
const decline = () => {
let countValue = count - 1;
if (countValue < 0) {
countValue = 0;
}
this.setState({ count });
setCount(countValue);
};
random = () => {
const count = Math.floor(Math.random() * 100);
this.setState({ count });
const random = () => {
const countValue = Math.floor(Math.random() * 100);
setCount(countValue);
};
onChange = show => {
this.setState({ show });
const onChange = isShow => {
setShow(isShow);
};
render() {
return (
<>
<Badge count={this.state.count}>
<Avatar shape="square" size="large" />
</Badge>
<ButtonGroup>
<Button onClick={this.decline}>
<MinusOutlined />
</Button>
<Button onClick={this.increase}>
<PlusOutlined />
</Button>
<Button onClick={this.random}>
<QuestionOutlined />
</Button>
</ButtonGroup>
<Divider />
<Badge dot={this.state.show}>
<Avatar shape="square" size="large" />
</Badge>
<Switch onChange={this.onChange} checked={this.state.show} />
</>
);
}
}
export default Demo;
return (
<>
<Badge count={count}>
<Avatar shape="square" size="large" />
</Badge>
<ButtonGroup>
<Button onClick={decline}>
<MinusOutlined />
</Button>
<Button onClick={increase}>
<PlusOutlined />
</Button>
<Button onClick={random}>
<QuestionOutlined />
</Button>
</ButtonGroup>
<Divider />
<Badge dot={show}>
<Avatar shape="square" size="large" />
</Badge>
<Switch onChange={onChange} checked={show} />
</>
);
};
```

4
components/breadcrumb/Breadcrumb.tsx
View File

@ -5,7 +5,7 @@ import BreadcrumbItem from './BreadcrumbItem';
import BreadcrumbSeparator from './BreadcrumbSeparator';
import Menu from '../menu';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import { cloneElement } from '../_util/reactNode';
export interface Route {
@ -119,7 +119,7 @@ const Breadcrumb: BreadcrumbInterface = ({
return element;
}
devWarning(
warning(
element.type &&
(element.type.__ANT_BREADCRUMB_ITEM === true ||
element.type.__ANT_BREADCRUMB_SEPARATOR === true),

4
components/button/button-group.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import classNames from 'classnames';
import type { SizeType } from '../config-provider/SizeContext';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import { useToken } from '../_util/theme';
export interface ButtonGroupProps {
@ -38,7 +38,7 @@ const ButtonGroup: React.FC<ButtonGroupProps> = props => {
case undefined:
break;
default:
devWarning(!size, 'Button.Group', 'Invalid prop `size`.');
warning(!size, 'Button.Group', 'Invalid prop `size`.');
}
const classes = classNames(

6
components/button/button.tsx
View File

@ -7,7 +7,7 @@ import Group, { GroupSizeContext } from './button-group';
import { ConfigContext } from '../config-provider';
import Wave from '../_util/wave';
import { tuple } from '../_util/type';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import DisabledContext from '../config-provider/DisabledContext';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
@ -234,13 +234,13 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)?.(e);
};
devWarning(
warning(
!(typeof icon === 'string' && icon.length > 2),
'Button',
`\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
);
devWarning(
warning(
!(ghost && isUnBorderedButtonType(type)),
'Button',
"`link` or `text` button can't be a `ghost` button.",

101
components/button/demo/loading.md
View File

@ -14,72 +14,61 @@ title:
A loading indicator can be added to a button by setting the `loading` property on the `Button`.
```jsx
import React, { useEffect, useState, useRef } from 'react';
import { Button, Space } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';
class App extends React.Component {
state = {
loadings: [],
};
export default () => {
const [loadings, setLoadings] = useState([]);
enterLoading = index => {
this.setState(({ loadings }) => {
const newLoadings = [...loadings];
const enterLoading = index => {
setLoadings(prevLoadings => {
const newLoadings = [...prevLoadings];
newLoadings[index] = true;
return {
loadings: newLoadings,
};
return newLoadings;
});
setTimeout(() => {
this.setState(({ loadings }) => {
const newLoadings = [...loadings];
newLoadings[index] = false;
return {
loadings: newLoadings,
};
setTimeout(() => {
setLoadings(prevLoadings => {
const newLoadings = [...prevLoadings];
newLoadings[index] = false;
return newLoadings;
});
}, 6000);
};
render() {
const { loadings } = this.state;
return (
<>
<Space style={{ width: '100%' }}>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
<Button type="primary" icon={<PoweroffOutlined />} loading />
</Space>
return (
<>
<Space style={{ width: '100%' }}>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
<Button type="primary" icon={<PoweroffOutlined />} loading />
</Space>
<Space style={{ width: '100%' }}>
<Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[1]}
onClick={() => this.enterLoading(1)}
>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[2]}
onClick={() => this.enterLoading(2)}
/>
</Space>
</>
);
}
}
export default App;
<Space style={{ width: '100%' }}>
<Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[1]}
onClick={() => enterLoading(1)}
>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[2]}
onClick={() => enterLoading(2)}
/>
</Space>
</>
);
};
```

83
components/button/demo/size.md
View File

@ -18,54 +18,47 @@ Ant Design supports a default button size as well as a large and small size.
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
```jsx
import React, { useState } from 'react';
import { Button, Radio } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
class ButtonSize extends React.Component {
state = {
size: 'large',
export default () => {
const [size, setSize] = useState('large');
const handleSizeChange = e => {
setSize(e.target.value);
};
handleSizeChange = e => {
this.setState({ size: e.target.value });
};
render() {
const { size } = this.state;
return (
<>
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary" size={size}>
Primary
</Button>
<Button size={size}>Default</Button>
<Button type="dashed" size={size}>
Dashed
</Button>
<br />
<Button type="link" size={size}>
Link
</Button>
<br />
<Button type="primary" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size}>
Download
</Button>
</>
);
}
}
export default () => <ButtonSize />;
return (
<>
<Radio.Group value={size} onChange={handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary" size={size}>
Primary
</Button>
<Button size={size}>Default</Button>
<Button type="dashed" size={size}>
Dashed
</Button>
<br />
<Button type="link" size={size}>
Link
</Button>
<br />
<Button type="primary" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size}>
Download
</Button>
</>
);
};
```

43
components/calendar/demo/select.md
View File

@ -14,38 +14,39 @@ title:
A basic calendar component with Year/Month switch.
```jsx
import React, { useState } from 'react';
import { Calendar, Alert } from 'antd';
import dayjs from 'dayjs';
class App extends React.Component {
state = {
export default () => {
const [calendar, setCalendar] = useState({
value: dayjs('2017-01-25'),
selectedValue: dayjs('2017-01-25'),
};
});
onSelect = value => {
this.setState({
const onSelect = value => {
setCalendar({
value,
selectedValue: value,
});
};
onPanelChange = value => {
this.setState({ value });
const onPanelChange = value => {
setCalendar({
...calendar,
value,
});
};
render() {
const { value, selectedValue } = this.state;
return (
<>
<Alert
message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
/>
<Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
</>
);
}
}
export default App;
return (
<>
<Alert
message={`You selected date: ${
calendar.selectedValue && calendar.selectedValue.format('YYYY-MM-DD')
}`}
/>
<Calendar value={calendar.value} onSelect={onSelect} onPanelChange={onPanelChange} />
</>
);
};
```

67
components/card/demo/loading.md
View File

@ -14,55 +14,48 @@ title:
Shows a loading indicator while the contents of the card is being fetched.
```jsx
import React, { useState } from 'react';
import { Skeleton, Switch, Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
const { Meta } = Card;
class App extends React.Component {
state = {
loading: true,
export default () => {
const [loading, setLoading] = useState(true);
const onChange = checked => {
setLoading(!checked);
};
onChange = checked => {
this.setState({ loading: !checked });
};
return (
<>
<Switch checked={!loading} onChange={onChange} />
render() {
const { loading } = this.state;
<Card style={{ width: 300, marginTop: 16 }} loading={loading}>
<Meta
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
title="Card title"
description="This is the description"
/>
</Card>
return (
<>
<Switch checked={!loading} onChange={this.onChange} />
<Card style={{ width: 300, marginTop: 16 }} loading={loading}>
<Card
style={{ width: 300, marginTop: 16 }}
actions={[
<SettingOutlined key="setting" />,
<EditOutlined key="edit" />,
<EllipsisOutlined key="ellipsis" />,
]}
>
<Skeleton loading={loading} avatar active>
<Meta
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
title="Card title"
description="This is the description"
/>
</Card>
<Card
style={{ width: 300, marginTop: 16 }}
actions={[
<SettingOutlined key="setting" />,
<EditOutlined key="edit" />,
<EllipsisOutlined key="ellipsis" />,
]}
>
<Skeleton loading={loading} avatar active>
<Meta
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
title="Card title"
description="This is the description"
/>
</Skeleton>
</Card>
</>
);
}
}
export default App;
</Skeleton>
</Card>
</>
);
};
```

11
components/cascader/__tests__/index.test.js
View File

@ -517,17 +517,6 @@ describe('Cascader', () => {
errorSpy.mockRestore();
});
it('displayRender & multiple', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(<Cascader multiple displayRender={() => null} />);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Cascader] `displayRender` not work on `multiple`. Please use `tagRender` instead.',
);
errorSpy.mockRestore();
});
it('should support showCheckedStrategy child', () => {
const multipleOptions = [
{

39
components/cascader/demo/custom-trigger.md
View File

@ -39,29 +39,22 @@ const options = [
},
];
class CitySwitcher extends React.Component {
state = {
text: 'Unselect',
export default () => {
const [text, setText] = React.useState('Unselect');
const onChange = (value, selectedOptions) => {
const labeText = selectedOptions.map(o => o.label).join(', ');
setText(labeText);
};
onChange = (value, selectedOptions) => {
this.setState({
text: selectedOptions.map(o => o.label).join(', '),
});
};
render() {
return (
<span>
{this.state.text}
&nbsp;
<Cascader options={options} onChange={this.onChange}>
<a href="#">Change city</a>
</Cascader>
</span>
);
}
}
export default () => <CitySwitcher />;
return (
<span>
{text}
&nbsp;
<Cascader options={options} onChange={onChange}>
<a href="#">Change city</a>
</Cascader>
</span>
);
};
```

1
components/cascader/index.en-US.md
View File

@ -49,7 +49,6 @@ Cascade selection box.
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
| style | The additional style | CSSProperties | - | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| tagRender | Customize tag render when `multiple` | (props) => ReactNode | - | 4.17.0 |
| value | The selected value | string\[] \| number\[] | - | |
| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | |
| onDropdownVisibleChange | Callback when popup shown or hidden | (value) => void | - | 4.17.0 |

24
components/cascader/index.tsx
View File

@ -14,7 +14,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import LeftOutlined from '@ant-design/icons/LeftOutlined';
import { useContext } from 'react';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
@ -164,19 +164,17 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
const mergedStatus = getMergedStatus(contextStatus, customStatus);
// =================== Warning =====================
if (process.env.NODE_ENV !== 'production') {
devWarning(
popupClassName === undefined,
'Cascader',
'`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
);
warning(
popupClassName === undefined,
'Cascader',
'`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
);
devWarning(
!multiple || !props.displayRender,
'Cascader',
'`displayRender` not work on `multiple`. Please use `tagRender` instead.',
);
}
warning(
!multiple || !props.displayRender,
'Cascader',
'`displayRender` not work on `multiple`. Please use `tagRender` instead.',
);
// =================== No Found ====================
const mergedNotFoundContent = notFoundContent || renderEmpty('Cascader');

1
components/cascader/index.zh-CN.md
View File

@ -50,7 +50,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
| style | 自定义样式 | CSSProperties | - | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| tagRender | 自定义 tag 内容，多选时生效 | (props) => ReactNode | - | 4.17.0 |
| value | 指定选中项 | string\[] \| number\[] | - | |
| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |
| onDropdownVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | 4.17.0 |

4
components/checkbox/Checkbox.tsx
View File

@ -5,7 +5,7 @@ import { useContext } from 'react';
import { FormItemInputContext } from '../form/context';
import { GroupContext } from './Group';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import useStyle from './style';
export interface AbstractCheckboxProps<T> {
@ -68,7 +68,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
React.useEffect(() => {
checkboxGroup?.registerValue(restProps.value);
devWarning(
warning(
'checked' in restProps || !!checkboxGroup || !('value' in restProps),
'Checkbox',
'`value` is not a valid prop, do you mean `checked`?',

2
components/checkbox/__tests__/checkbox.test.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { render, fireEvent } from '../../../tests/utils';
import Checkbox from '..';
import focusTest from '../../../tests/shared/focusTest';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';

77
components/checkbox/demo/controller.md
View File

@ -14,61 +14,44 @@ title:
Communicated with other components.
```jsx
import React, { useState } from 'react';
import { Checkbox, Button } from 'antd';
class App extends React.Component {
state = {
checked: true,
disabled: false,
export default () => {
const [checked, setChecked] = useState(true);
const [disabled, setDisabled] = useState(false);
const toggleChecked = () => {
setChecked(!checked);
};
toggleChecked = () => {
this.setState({ checked: !this.state.checked });
const toggleDisable = () => {
setDisabled(!disabled);
};
toggleDisable = () => {
this.setState({ disabled: !this.state.disabled });
};
onChange = e => {
const onChange = e => {
console.log('checked = ', e.target.checked);
this.setState({
checked: e.target.checked,
});
setChecked(e.target.checked);
};
render() {
const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${
this.state.disabled ? 'Disabled' : 'Enabled'
}`;
return (
<>
<p style={{ marginBottom: '20px' }}>
<Checkbox
checked={this.state.checked}
disabled={this.state.disabled}
onChange={this.onChange}
>
{label}
</Checkbox>
</p>
<p>
<Button type="primary" size="small" onClick={this.toggleChecked}>
{!this.state.checked ? 'Check' : 'Uncheck'}
</Button>
<Button
style={{ margin: '0 10px' }}
type="primary"
size="small"
onClick={this.toggleDisable}
>
{!this.state.disabled ? 'Disable' : 'Enable'}
</Button>
</p>
</>
);
}
}
const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;
export default App;
return (
<>
<p style={{ marginBottom: '20px' }}>
<Checkbox checked={checked} disabled={disabled} onChange={onChange}>
{label}
</Checkbox>
</p>
<p>
<Button type="primary" size="small" onClick={toggleChecked}>
{!checked ? 'Check' : 'Uncheck'}
</Button>
<Button style={{ margin: '0 10px' }} type="primary" size="small" onClick={toggleDisable}>
{!disabled ? 'Disable' : 'Enable'}
</Button>
</p>
</>
);
};
```

4
components/collapse/CollapsePanel.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import RcCollapse from 'rc-collapse';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
export type CollapsibleType = 'header' | 'disabled';
@ -23,7 +23,7 @@ export interface CollapsePanelProps {
}
const CollapsePanel: React.FC<CollapsePanelProps> = props => {
devWarning(
warning(
!('disabled' in props),
'Collapse.Panel',
'`disabled` is deprecated. Please use `collapsible="disabled"` instead.',

2
components/collapse/__tests__/index.test.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { sleep } from '../../../tests/utils';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
describe('Collapse', () => {
// eslint-disable-next-line global-require

74
components/collapse/demo/extra.md
View File

@ -39,48 +39,36 @@ const genExtra = () => (
/>
);
class Demo extends React.Component {
state = {
expandIconPosition: 'left',
export default () => {
const [expandIconPosition, setExpandIconPosition] = React.useState('left');
const onPositionChange = position => {
setExpandIconPosition(position);
};
onPositionChange = expandIconPosition => {
this.setState({ expandIconPosition });
};
render() {
const { expandIconPosition } = this.state;
return (
<>
<Collapse
defaultActiveKey={['1']}
onChange={callback}
expandIconPosition={expandIconPosition}
>
<Panel header="This is panel header 1" key="1" extra={genExtra()}>
<div>{text}</div>
</Panel>
<Panel header="This is panel header 2" key="2" extra={genExtra()}>
<div>{text}</div>
</Panel>
<Panel header="This is panel header 3" key="3" extra={genExtra()}>
<div>{text}</div>
</Panel>
</Collapse>
<br />
<span>Expand Icon Position: </span>
<Select
value={expandIconPosition}
style={{ margin: '0 8px' }}
onChange={this.onPositionChange}
>
<Option value="left">left</Option>
<Option value="right">right</Option>
</Select>
</>
);
}
}
export default Demo;
return (
<>
<Collapse
defaultActiveKey={['1']}
onChange={callback}
expandIconPosition={expandIconPosition}
>
<Panel header="This is panel header 1" key="1" extra={genExtra()}>
<div>{text}</div>
</Panel>
<Panel header="This is panel header 2" key="2" extra={genExtra()}>
<div>{text}</div>
</Panel>
<Panel header="This is panel header 3" key="3" extra={genExtra()}>
<div>{text}</div>
</Panel>
</Collapse>
<br />
<span>Expand Icon Position: </span>
<Select value={expandIconPosition} style={{ margin: '0 8px' }} onChange={onPositionChange}>
<Option value="left">left</Option>
<Option value="right">right</Option>
</Select>
</>
);
};
```

64
components/comment/demo/editor.md
View File

@ -41,32 +41,33 @@ const Editor = ({ onChange, onSubmit, submitting, value }) => (
</>
);
class App extends React.Component {
state = {
export default () => {
const [state, setState] = React.useState({
comments: [],
submitting: false,
value: '',
};
});
handleSubmit = () => {
if (!this.state.value) {
const handleSubmit = () => {
if (!state.value) {
return;
}
this.setState({
setState({
...state,
submitting: true,
});
setTimeout(() => {
this.setState({
setState({
submitting: false,
value: '',
comments: [
...this.state.comments,
...state.comments,
{
author: 'Han Solo',
avatar: 'https://joeschmoe.io/api/v1/random',
content: <p>{this.state.value}</p>,
content: <p>{state.value}</p>,
datetime: dayjs().fromNow(),
},
],
@ -74,33 +75,28 @@ class App extends React.Component {
}, 1000);
};
handleChange = e => {
this.setState({
const handleChange = e => {
setState({
...state,
value: e.target.value,
});
};
render() {
const { comments, submitting, value } = this.state;
return (
<>
{comments.length > 0 && <CommentList comments={comments} />}
<Comment
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
content={
<Editor
onChange={this.handleChange}
onSubmit={this.handleSubmit}
submitting={submitting}
value={value}
/>
}
/>
</>
);
}
}
export default App;
return (
<>
{state.comments.length > 0 && <CommentList comments={state.comments} />}
<Comment
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
content={
<Editor
onChange={handleChange}
onSubmit={handleSubmit}
submitting={state.submitting}
value={state.value}
/>
}
/>
</>
);
};
```

2
components/config-provider/__tests__/theme.test.ts
View File

@ -1,7 +1,7 @@
import { kebabCase } from 'lodash';
import canUseDom from 'rc-util/lib/Dom/canUseDom';
import ConfigProvider from '..';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
let mockCanUseDom = true;

4
components/config-provider/cssVariables.tsx
View File

@ -5,7 +5,7 @@ import canUseDom from 'rc-util/lib/Dom/canUseDom';
import { TinyColor } from '@ctrl/tinycolor';
import { generate } from '@ant-design/colors';
import type { Theme } from './context';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
@ -101,6 +101,6 @@ export function registerTheme(globalPrefixCls: string, theme: Theme) {
if (canUseDom()) {
updateCSS(style, `${dynamicStyleMark}-dynamic-theme`);
} else {
devWarning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.');
warning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.');
}
}

2
components/date-picker/__tests__/QuarterPicker.test.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { mount } from 'enzyme';
import DatePicker from '..';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
const { QuarterPicker } = DatePicker;

4
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -9,7 +9,7 @@ import type { GenerateConfig } from 'rc-picker/lib/generate/index';
import { forwardRef, useContext } from 'react';
import enUS from '../locale/en_US';
import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
import devWarning from '../../_util/devWarning';
import warning from '../../_util/warning';
import type { ConfigConsumerProps } from '../../config-provider';
import { ConfigContext } from '../../config-provider';
import LocaleReceiver from '../../locale-provider/LocaleReceiver';
@ -46,7 +46,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
constructor(props: InnerPickerProps) {
super(props);
devWarning(
warning(
picker !== 'quarter',
displayName!,
`DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,

2
components/descriptions/__tests__/index.test.js
View File

@ -3,7 +3,7 @@ import MockDate from 'mockdate';
import { mount } from 'enzyme';
import Descriptions from '..';
import mountTest from '../../../tests/shared/mountTest';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
describe('Descriptions', () => {
mountTest(Descriptions);

116
components/descriptions/demo/size.md
View File

@ -16,72 +16,60 @@ Custom sizes to fit in a variety of containers.
```jsx
import { Descriptions, Radio, Button } from 'antd';
class Demo extends React.Component {
state = {
size: 'default',
};
export default () => {
const [size, setSize] = React.useState('default');
onChange = e => {
const onChange = e => {
console.log('size checked', e.target.value);
this.setState({
size: e.target.value,
});
setSize(e.target.value);
};
render() {
return (
<div>
<Radio.Group onChange={this.onChange} value={this.state.size}>
<Radio value="default">default</Radio>
<Radio value="middle">middle</Radio>
<Radio value="small">small</Radio>
</Radio.Group>
<br />
<br />
<Descriptions
bordered
title="Custom Size"
size={this.state.size}
extra={<Button type="primary">Edit</Button>}
>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
<Descriptions.Item label="Config Info">
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1<br />
</Descriptions.Item>
</Descriptions>
<br />
<br />
<Descriptions
title="Custom Size"
size={this.state.size}
extra={<Button type="primary">Edit</Button>}
>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
</Descriptions>
</div>
);
}
}
export default Demo;
return (
<div>
<Radio.Group onChange={onChange} value={size}>
<Radio value="default">default</Radio>
<Radio value="middle">middle</Radio>
<Radio value="small">small</Radio>
</Radio.Group>
<br />
<br />
<Descriptions
bordered
title="Custom Size"
size={size}
extra={<Button type="primary">Edit</Button>}
>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
<Descriptions.Item label="Config Info">
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1<br />
</Descriptions.Item>
</Descriptions>
<br />
<br />
<Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>}>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
</Descriptions>
</div>
);
};
```

4
components/descriptions/index.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames';
import toArray from 'rc-util/lib/Children/toArray';
import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import Row from './Row';
import DescriptionsItem from './Item';
@ -55,7 +55,7 @@ function getFilledItem(
clone = cloneElement(node, {
span: rowRestCol,
});
devWarning(
warning(
span === undefined,
'Descriptions',
'Sum of column `span` in a line not match `column` of Descriptions.',

6
components/dropdown/dropdown.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames';
import RightOutlined from '@ant-design/icons/RightOutlined';
import DropdownButton from './dropdown-button';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import { tuple } from '../_util/type';
import { cloneElement } from '../_util/reactNode';
import getPlacements from '../_util/placements';
@ -106,7 +106,7 @@ const Dropdown: DropdownInterface = props => {
const overlayProps = overlayNode.props;
// Warning if use other mode
devWarning(
warning(
!overlayProps.mode || overlayProps.mode === 'vertical',
'Dropdown',
`mode="${overlayProps.mode}" is not supported for Dropdown's Menu.`,
@ -144,7 +144,7 @@ const Dropdown: DropdownInterface = props => {
if (placement.includes('Center')) {
const newPlacement = placement.slice(0, placement.indexOf('Center'));
devWarning(
warning(
!placement.includes('Center'),
'Dropdown',
`You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,

18
components/form/FormItem.tsx
View File

@ -17,7 +17,7 @@ import useStyle from './style';
import Row from '../grid/row';
import { ConfigContext } from '../config-provider';
import { tuple } from '../_util/type';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import type { FormItemLabelProps, LabelTooltipType } from './FormItemLabel';
import FormItemLabel from './FormItemLabel';
import type { FormItemInputProps } from './FormItemInput';
@ -78,7 +78,7 @@ export interface FormItemProps<Values = any>
function hasValidName(name?: NamePath): Boolean {
if (name === null) {
devWarning(false, 'Form.Item', '`null` is passed as `name` property');
warning(false, 'Form.Item', '`null` is passed as `name` property');
}
return !(name === undefined || name === null);
}
@ -391,33 +391,33 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
let childNode: React.ReactNode = null;
devWarning(
warning(
!(shouldUpdate && dependencies),
'Form.Item',
"`shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.",
);
if (Array.isArray(children) && hasName) {
devWarning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
warning(false, 'Form.Item', '`children` is array of render props cannot have `name`.');
childNode = children;
} else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
devWarning(
warning(
!!(shouldUpdate || dependencies),
'Form.Item',
'`children` of render props only work with `shouldUpdate` or `dependencies`.',
);
devWarning(
warning(
!hasName,
'Form.Item',
"Do not use `name` with `children` of render props since it's not a field.",
);
} else if (dependencies && !isRenderProps && !hasName) {
devWarning(
warning(
false,
'Form.Item',
'Must set `name` or use render props when `dependencies` is set.',
);
} else if (isValidElement(children)) {
devWarning(
warning(
children.props.defaultValue === undefined,
'Form.Item',
'`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.',
@ -453,7 +453,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
} else if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {
childNode = (children as RenderChildren)(context);
} else {
devWarning(
warning(
!mergedName.length,
'Form.Item',
'`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.',

4
components/form/FormList.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { List } from 'rc-field-form';
import type { ValidatorRule, StoreValue } from 'rc-field-form/lib/interface';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import { FormItemPrefixContext } from './context';
@ -33,7 +33,7 @@ const FormList: React.FC<FormListProps> = ({
children,
...props
}) => {
devWarning(!!props.name, 'Form.List', 'Miss `name` prop.');
warning(!!props.name, 'Form.List', 'Miss `name` prop.');
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('form', customizePrefixCls);

4
components/form/index.tsx
View File

@ -4,7 +4,7 @@ import Item, { FormItemProps } from './FormItem';
import ErrorList, { ErrorListProps } from './ErrorList';
import List, { FormListProps } from './FormList';
import { FormProvider } from './context';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import useFormInstance from './hooks/useFormInstance';
type InternalFormType = typeof InternalForm;
@ -32,7 +32,7 @@ Form.useFormInstance = useFormInstance;
Form.useWatch = useWatch;
Form.Provider = FormProvider;
Form.create = () => {
devWarning(
warning(
false,
'Form',
'antd v4 removed `Form.create`. Please remove or use `@ant-design/compatible` instead.',

4
components/icon/index.tsx
View File

@ -1,7 +1,7 @@
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
const Icon = () => {
devWarning(false, 'Icon', 'Empty Icon');
warning(false, 'Icon', 'Empty Icon');
return null;
};

4
components/input/Input.tsx
View File

@ -12,7 +12,7 @@ import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
import { ConfigContext } from '../config-provider';
import { FormItemInputContext, NoFormStatus } from '../form/context';
import { hasPrefixSuffix } from './utils';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
// CSSINJS
import useStyle from './style';
@ -164,7 +164,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
const prevHasPrefixSuffix = useRef<boolean>(inputHasPrefixSuffix);
useEffect(() => {
if (inputHasPrefixSuffix && !prevHasPrefixSuffix.current) {
devWarning(
warning(
document.activeElement === inputRef.current?.input,
'Input',
`When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ`,

2
components/list/Item.tsx
View File

@ -63,7 +63,7 @@ export const Meta: FC<ListItemMetaProps> = ({
};
export interface ListItemTypeProps
extends ForwardRefExoticComponent<ListItemMetaProps & React.RefAttributes<HTMLElement>> {
extends ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLElement>> {
Meta: typeof Meta;
}

2
components/list/__tests__/pagination.test.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import { render, mount } from 'enzyme';
import List from '..';
import { noop } from '../../_util/warning';
describe('List.pagination', () => {
const data = [
@ -65,7 +66,6 @@ describe('List.pagination', () => {
it('fires change event', () => {
const handlePaginationChange = jest.fn();
const noop = () => {};
const wrapper = mount(
createList({
pagination: {

4
components/locale-provider/index.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import memoizeOne from 'memoize-one';
import type { ValidateMessages } from 'rc-field-form/lib/interface';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import type { ModalLocale } from '../modal/locale';
import { changeConfirmLocale } from '../modal/locale';
@ -62,7 +62,7 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
super(props);
changeConfirmLocale(props.locale && props.locale.Modal);
devWarning(
warning(
props._ANT_MARK__ === ANT_MARK,
'LocaleProvider',
'`LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale',

3
components/menu/__tests__/index.test.js
View File

@ -15,13 +15,12 @@ import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render, fireEvent } from '../../../tests/utils';
import collapseMotion from '../../_util/motion';
import { noop } from '../../_util/warning';
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
const { SubMenu } = Menu;
const noop = () => {};
describe('Menu', () => {
function triggerAllTimer() {
for (let i = 0; i < 10; i += 1) {

7
components/menu/index.en-US.md
View File

@ -29,11 +29,12 @@ ReactDOM.render(<Alert message="After version 4.20.0, we provide a simpler usage
```jsx
// works when >=4.20.0, recommended ✅
const items = [
{ label: 'item 1' },
{ label: 'item 2' },
{ label: 'item 1', key: 'item-1' }, // remember to pass the key prop
{ label: 'item 2', key: 'item-2' }, // which is required
{
label: 'sub menu',
children: [{ label: 'item 3' }],
key: 'submenu'
children: [{ label: 'item 3', key: 'submenu-item-1' }],
},
];
return <Menu items={items} />;

8
components/menu/index.tsx
View File

@ -8,7 +8,7 @@ import { forwardRef } from 'react';
import SubMenu, { SubMenuProps } from './SubMenu';
import Item, { MenuItemProps } from './MenuItem';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import type { SiderContextProps } from '../layout/Sider';
import { SiderContext } from '../layout/Sider';
import collapseMotion from '../_util/motion';
@ -70,19 +70,19 @@ const InternalMenu = forwardRef<MenuRef, InternalMenuProps>((props, ref) => {
const mergedChildren = useItems(items) || children;
// ======================== Warning ==========================
devWarning(
warning(
!('inlineCollapsed' in props && props.mode !== 'inline'),
'Menu',
'`inlineCollapsed` should only be used when `mode` is inline.',
);
devWarning(
warning(
!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
'Menu',
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
);
devWarning(
warning(
!!items && !children,
'Menu',
'`children` will be removed in next major version. Please use `items` instead.',

7
components/menu/index.zh-CN.md
View File

@ -30,11 +30,12 @@ ReactDOM.render(<Alert message="在 4.20.0 版本后，我们提供了 <Menu ite
```jsx
// >=4.20.0 可用，推荐的写法 ✅
const items = [
{ label: '菜单项一' },
{ label: '菜单项二' },
{ label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
{ label: '菜单项二', key: 'item-2' },
{
label: '子菜单',
children: [{ label: '子菜单项' }],
key: 'submenu',
children: [{ label: '子菜单项', key: 'submenu-item-1' }],
},
];
return <Menu items={items} />;

4
components/modal/ConfirmDialog.tsx
View File

@ -3,7 +3,7 @@ import classNames from 'classnames';
import type { ModalFuncProps } from './Modal';
import Dialog from './Modal';
import ActionButton from '../_util/ActionButton';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import ConfigProvider from '../config-provider';
import { getTransitionName } from '../_util/motion';
@ -44,7 +44,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
focusTriggerAfterClose,
} = props;
devWarning(
warning(
!(typeof icon === 'string' && icon.length > 2),
'Modal',
`\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,

8
components/modal/confirm.tsx
View File

@ -8,7 +8,7 @@ import { getConfirmLocale } from './locale';
import type { ModalFuncProps } from './Modal';
import ConfirmDialog from './ConfirmDialog';
import { globalConfig } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import destroyFns from './destroyFns';
let defaultRootPrefixCls = '';
@ -159,10 +159,6 @@ export function withConfirm(props: ModalFuncProps): ModalFuncProps {
}
export function modalGlobalConfig({ rootPrefixCls }: { rootPrefixCls: string }) {
devWarning(
false,
'Modal',
'Modal.config is deprecated. Please use ConfigProvider.config instead.',
);
warning(false, 'Modal', 'Modal.config is deprecated. Please use ConfigProvider.config instead.');
defaultRootPrefixCls = rootPrefixCls;
}

4
components/progress/progress.tsx
View File

@ -7,7 +7,7 @@ import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import { ConfigContext } from '../config-provider';
import { tuple } from '../_util/type';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import Line from './Line';
import Circle from './Circle';
import Steps from './Steps';
@ -104,7 +104,7 @@ const Progress: React.FC<ProgressProps> = (props: ProgressProps) => {
const progressStatus = getProgressStatus();
const progressInfo = renderProcessInfo(prefixCls, progressStatus);
devWarning(
warning(
!('successPercent' in props),
'Progress',
'`successPercent` is deprecated. Please use `success.percent` instead.',

4
components/progress/utils.ts
View File

@ -1,4 +1,4 @@
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
export function validProgress(progress: number | undefined) {
if (!progress || progress < 0) {
@ -23,7 +23,7 @@ export function getSuccessPercent({
let percent = successPercent;
/** @deprecated Use `percent` instead */
if (success && 'progress' in success) {
devWarning(
warning(
false,
'Progress',
'`success.progress` is deprecated. Please use `success.percent` instead.',

6
components/radio/radio.tsx
View File

@ -8,7 +8,7 @@ import type { RadioProps, RadioChangeEvent } from './interface';
import { ConfigContext } from '../config-provider';
import RadioGroupContext, { RadioOptionTypeContext } from './context';
import DisabledContext from '../config-provider/DisabledContext';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import useStyle from './style';
@ -21,9 +21,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
const mergedRef = composeRef(ref, innerRef);
const { isFormItemInput } = useContext(FormItemInputContext);
React.useEffect(() => {
devWarning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
}, []);
warning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
const onChange = (e: RadioChangeEvent) => {
props.onChange?.(e);

4
components/result/index.tsx
View File

@ -6,7 +6,7 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import WarningFilled from '@ant-design/icons/WarningFilled';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import noFound from './noFound';
import serverError from './serverError';
@ -54,7 +54,7 @@ const ExceptionStatus = Object.keys(ExceptionMap);
const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
const className = classNames(`${prefixCls}-icon`);
devWarning(
warning(
!(typeof icon === 'string' && icon.length > 2),
'Result',
`\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,

2
components/switch/__tests__/index.test.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { mount } from 'enzyme';
import Switch from '..';
import focusTest from '../../../tests/shared/focusTest';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { sleep } from '../../../tests/utils';

4
components/switch/index.tsx
View File

@ -7,7 +7,7 @@ import Wave from '../_util/wave';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import DisabledContext from '../config-provider/DisabledContext';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import useStyle from './style';
export type SwitchSize = 'small' | 'default';
@ -50,7 +50,7 @@ const Switch = React.forwardRef<unknown, SwitchProps>(
},
ref,
) => {
devWarning(
warning(
'checked' in props || !('value' in props),
'Switch',
'`value` is not a valid prop, do you mean `checked`?',

8
components/table/Table.tsx
View File

@ -47,7 +47,7 @@ import type { SizeType } from '../config-provider/SizeContext';
import SizeContext from '../config-provider/SizeContext';
import Column from './Column';
import ColumnGroup from './ColumnGroup';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import useBreakpoint from '../grid/hooks/useBreakpoint';
export { ColumnsType, TablePaginationConfig };
@ -138,7 +138,7 @@ function InternalTable<RecordType extends object = any>(
showSorterTooltip = true,
} = props;
devWarning(
warning(
!(typeof rowKey === 'function' && rowKey.length > 1),
'Table',
'`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
@ -356,12 +356,12 @@ function InternalTable<RecordType extends object = any>(
}
const { current = 1, total, pageSize = DEFAULT_PAGE_SIZE } = mergedPagination;
devWarning(current > 0, 'Table', '`current` should be positive number.');
warning(current > 0, 'Table', '`current` should be positive number.');
// Dynamic table data
if (mergedData.length < total!) {
if (mergedData.length > pageSize) {
devWarning(
warning(
false,
'Table',
'`dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.',

2
components/table/__tests__/Table.order.test.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { mount } from 'enzyme';
import Table from '..';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
describe('Table.order', () => {
window.requestAnimationFrame = callback => window.setTimeout(callback, 16);

2
components/table/__tests__/Table.pagination.test.js
View File

@ -5,7 +5,7 @@ import React from 'react';
import { mount } from 'enzyme';
import Table from '..';
import scrollTo from '../../_util/scrollTo';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
describe('Table.pagination', () => {
const columns = [

2
components/table/__tests__/Table.rowSelection.test.js
View File

@ -3,7 +3,7 @@ import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import Table from '..';
import Checkbox from '../../checkbox';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
import ConfigProvider from '../../config-provider';
import { render } from '../../../tests/utils';

4
components/table/hooks/useFilter/index.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import devWarning from '../../../_util/devWarning';
import warning from '../../../_util/warning';
import type {
TransformColumns,
ColumnsType,
@ -226,7 +226,7 @@ function useFilter<RecordType>({
return filterStates;
}
devWarning(
warning(
filteredKeysIsAllControlled,
'Table',
'Columns should all contain `filteredValue` or not contain `filteredValue`.',

46
components/table/hooks/useSelection.tsx
View File

@ -13,7 +13,7 @@ import Checkbox from '../../checkbox';
import Dropdown from '../../dropdown';
import Menu from '../../menu';
import Radio from '../../radio';
import devWarning from '../../_util/devWarning';
import warning from '../../_util/warning';
import type {
TableRowSelection,
Key,
@ -171,16 +171,11 @@ export default function useSelection<RecordType>(
const checkboxProps = (getCheckboxProps ? getCheckboxProps(record) : null) || {};
map.set(key, checkboxProps);
if (
process.env.NODE_ENV !== 'production' &&
('checked' in checkboxProps || 'defaultChecked' in checkboxProps)
) {
devWarning(
false,
'Table',
'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',
);
}
warning(
!('checked' in checkboxProps || 'defaultChecked' in checkboxProps),
'Table',
'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',
);
});
return map;
}, [flattedData, getRowKey, getCheckboxProps]);
@ -313,7 +308,7 @@ export default function useSelection<RecordType>(
const keys = Array.from(keySet);
if (onSelectInvert) {
devWarning(
warning(
false,
'Table',
'`onSelectInvert` will be removed in future. Please use `onChange` instead.',
@ -349,13 +344,11 @@ export default function useSelection<RecordType>(
(columns: ColumnsType<RecordType>): ColumnsType<RecordType> => {
// >>>>>>>>>>> Skip if not exists `rowSelection`
if (!rowSelection) {
if (process.env.NODE_ENV !== 'production') {
devWarning(
!columns.includes(SELECTION_COLUMN),
'Table',
'`rowSelection` is not config but `SELECTION_COLUMN` exists in the `columns`.',
);
}
warning(
!columns.includes(SELECTION_COLUMN),
'Table',
'`rowSelection` is not config but `SELECTION_COLUMN` exists in the `columns`.',
);
return columns.filter(col => col !== SELECTION_COLUMN);
}
@ -504,7 +497,7 @@ export default function useSelection<RecordType>(
let mergedIndeterminate: boolean;
if (expandType === 'nest') {
mergedIndeterminate = indeterminate;
devWarning(
warning(
typeof checkboxProps?.indeterminate !== 'boolean',
'Table',
'set `indeterminate` using `rowSelection.getCheckboxProps` is not allowed with tree structured dataSource.',
@ -646,12 +639,13 @@ export default function useSelection<RecordType>(
// Deduplicate selection column
const selectionColumnIndex = cloneColumns.indexOf(SELECTION_COLUMN);
if (
process.env.NODE_ENV !== 'production' &&
cloneColumns.filter(col => col === SELECTION_COLUMN).length > 1
) {
devWarning(false, 'Table', 'Multiple `SELECTION_COLUMN` exist in `columns`.');
}
warning(
cloneColumns.filter(col => col === SELECTION_COLUMN).length <= 1,
'Table',
'Multiple `SELECTION_COLUMN` exist in `columns`.',
);
cloneColumns = cloneColumns.filter(
(column, index) => column !== SELECTION_COLUMN || index === selectionColumnIndex,
);

1
components/table/index.en-US.md
View File

@ -128,7 +128,6 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| defaultFilteredValue | Default filtered values | string\[] | - | |
| filterResetToDefaultFilteredValue | click the reset button, whether to restore the default filter | boolean | false | |
| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | |
| editable | Whether column can be edited | boolean | false | |
| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | |
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |

1
components/table/index.zh-CN.md
View File

@ -129,7 +129,6 @@ const columns = [
| defaultFilteredValue | 默认筛选值 | string\[] | - | |
| filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false | |
| defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | |
| editable | 是否可编辑 | boolean | false | |
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | |
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | |

4
components/tabs/index.tsx
View File

@ -7,7 +7,7 @@ import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
import PlusOutlined from '@ant-design/icons/PlusOutlined';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import useStyle from './style';
import type { SizeType } from '../config-provider/SizeContext';
@ -55,7 +55,7 @@ function Tabs({
}
const rootPrefixCls = getPrefixCls();
devWarning(
warning(
!('onPrevClick' in props) && !('onNextClick' in props),
'Tabs',
'`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',

2
components/time-picker/__tests__/index.test.js
View File

@ -5,7 +5,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
import TimePicker from '..';
import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
import rtlTest from '../../../tests/shared/rtlTest';
dayjs.extend(customParseFormat);

4
components/time-picker/index.tsx
View File

@ -2,7 +2,7 @@ import type { Dayjs } from 'dayjs';
import * as React from 'react';
import DatePicker from '../date-picker';
import type { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import type { InputStatus } from '../_util/statusUtils';
const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker;
@ -39,7 +39,7 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
return renderExtraFooter;
}
if (addon) {
devWarning(
warning(
false,
'TimePicker',
'`addon` is deprecated. Please use `renderExtraFooter` instead.',

4
components/transfer/index.tsx
View File

@ -10,7 +10,7 @@ import type { ConfigConsumerProps, RenderEmptyHandler } from '../config-provider
import { ConfigConsumer } from '../config-provider';
import type { TransferListBodyProps } from './ListBody';
import type { PaginationType } from './interface';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import { FormItemInputContext } from '../form/context';
import type { InputStatus } from '../_util/statusUtils';
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
@ -136,7 +136,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
};
}
devWarning(
warning(
!pagination || !children,
'Transfer',
'`pagination` not support customize render list.',

4
components/tree-select/index.tsx
View File

@ -7,7 +7,7 @@ import type { BaseOptionType, DefaultOptionType } from 'rc-tree-select/lib/TreeS
import type { BaseSelectRef } from 'rc-select';
import { useContext } from 'react';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import type { AntTreeNodeProps, TreeProps } from '../tree';
import type { SwitcherIcon } from '../tree/Tree';
import getIcons from '../select/utils/iconUtil';
@ -92,7 +92,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
} = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
devWarning(
warning(
multiple !== false || !treeCheckable,
'TreeSelect',
'`multiple` will always be `true` when `treeCheckable` is true',

4
components/typography/Link.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import type { BlockProps } from './Base';
import Base from './Base';
@ -13,7 +13,7 @@ const Link: React.ForwardRefRenderFunction<HTMLElement, LinkProps> = (
{ ellipsis, rel, ...restProps },
ref,
) => {
devWarning(
warning(
typeof ellipsis !== 'object',
'Typography.Link',
'`ellipsis` only supports boolean value.',

4
components/typography/Text.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import omit from 'rc-util/lib/omit';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import type { BlockProps, EllipsisConfig } from './Base';
import Base from './Base';
@ -21,7 +21,7 @@ const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
return ellipsis;
}, [ellipsis]);
devWarning(
warning(
typeof ellipsis !== 'object' ||
!ellipsis ||
(!('expandable' in ellipsis) && !('rows' in ellipsis)),

4
components/typography/Title.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import type { BlockProps } from './Base';
import Base from './Base';
import { tupleNum } from '../_util/type';
@ -21,7 +21,7 @@ const Title: React.ForwardRefRenderFunction<HTMLHeadingElement, TitleProps> = (p
if (TITLE_ELE_LIST.indexOf(level) !== -1) {
component = `h${level}`;
} else {
devWarning(
warning(
false,
'Typography.Title',
'Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',

4
components/typography/Typography.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import useStyle from './style';
export interface TypographyProps {
@ -36,7 +36,7 @@ const Typography: React.ForwardRefRenderFunction<{}, InternalTypographyProps> =
let mergedRef = ref;
if (setContentRef) {
devWarning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
mergedRef = composeRef(ref, setContentRef);
}

24
components/upload/Upload.tsx
View File

@ -18,7 +18,7 @@ import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale/default';
import { ConfigContext } from '../config-provider';
import devWarning from '../_util/devWarning';
import warning from '../_util/warning';
import useStyle from './style';
export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
@ -60,19 +60,17 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
const upload = React.useRef<any>();
React.useEffect(() => {
devWarning(
'fileList' in props || !('value' in props),
'Upload',
'`value` is not a valid prop, do you mean `fileList`?',
);
warning(
'fileList' in props || !('value' in props),
'Upload',
'`value` is not a valid prop, do you mean `fileList`?',
);
devWarning(
!('transformFile' in props),
'Upload',
'`transformFile` is deprecated. Please use `beforeUpload` directly.',
);
}, []);
warning(
!('transformFile' in props),
'Upload',
'`transformFile` is deprecated. Please use `beforeUpload` directly.',
);
// Control mode will auto fill file uid if not provided
React.useMemo(() => {

2
components/upload/__tests__/upload.test.js
View File

@ -8,7 +8,7 @@ import Upload from '..';
import Form from '../../form';
import { getFileItem, removeFileItem, isImageUrl } from '../utils';
import { setup, teardown } from './mock';
import { resetWarned } from '../../_util/devWarning';
import { resetWarned } from '../../_util/warning';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { sleep, render, fireEvent } from '../../../tests/utils';

13
package.json
View File

@ -162,9 +162,9 @@
"shallowequal": "^1.1.0"
},
"devDependencies": {
"@ant-design/bisheng-plugin": "^3.0.1",
"@ant-design/bisheng-plugin": "^3.2.0",
"@ant-design/hitu": "^0.0.0-alpha.13",
"@ant-design/tools": "^14.1.0",
"@ant-design/tools": "^15.0.1",
"@docsearch/css": "^3.0.0",
"@qixian.cs/github-contributors-list": "^1.0.3",
"@stackblitz/sdk": "^1.3.0",
@ -191,7 +191,7 @@
"antd-img-crop": "^4.0.0",
"array-move": "^4.0.0",
"babel-plugin-add-react-displayname": "^0.0.5",
"bisheng": "^3.4.0",
"bisheng": "^3.5.0",
"bisheng-plugin-description": "^0.1.4",
"bisheng-plugin-react": "^1.2.0",
"bisheng-plugin-toc": "^0.4.4",
@ -235,10 +235,11 @@
"inquirer": "^8.0.0",
"intersection-observer": "^0.12.0",
"isomorphic-fetch": "^3.0.0",
"jest": "^27.0.3",
"jest": "^28.0.3",
"jest-axe": "^6.0.0",
"jest-environment-node": "^27.4.4",
"jest-image-snapshot": "^4.5.1",
"jest-environment-jsdom": "^28.0.2",
"jest-environment-node": "^28.0.2",
"@ant-design/jest-image-snapshot": "^4.5.2",
"jest-puppeteer": "^6.0.0",
"jquery": "^3.4.1",
"jsdom": "^19.0.0",

2
site/theme/template/Icon/index.jsx
View File

@ -3,7 +3,7 @@ import React from 'react';
import AntdIcon, { createFromIconfontCN } from '@ant-design/icons';
import { withThemeSuffix, removeTypeTheme, getThemeFromTypeName } from './utils';
import warning from '../../../../components/_util/devWarning';
import warning from '../../../../components/_util/warning';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1329669_t1u72b9zk8s.js',

2
site/theme/template/Icon/utils.js
View File

@ -1,4 +1,4 @@
import warning from '../../../../components/_util/devWarning';
import warning from '../../../../components/_util/warning';
// These props make sure that the SVG behaviours like general text.
// Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4

4
site/theme/template/Layout/Header/Navigation.tsx
View File

@ -129,8 +129,8 @@ export default ({
: null,
isZhCN &&
typeof window !== 'undefined' &&
!window.location.host.includes('ant-design.antgroup.com') &&
!window.location.host.includes('ant-design.gitee.io')
window.location.host !== 'ant-design.antgroup.com' &&
window.location.host !== 'ant-design.gitee.io'
? {
label: '国内镜像',
key: 'mirror',

2
site/theme/template/Layout/Header/index.tsx
View File

@ -121,7 +121,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
});
if (
process.env.NODE_ENV === 'production' &&
!window.location.host.includes('ant-design.antgroup.com') &&
window.location.host !== 'ant-design.antgroup.com' &&
shouldOpenAntdMirrorModal()
) {
Modal.confirm({

13
tests/setup.js
View File

@ -1,4 +1,6 @@
const React = require('react');
const util = require('util');
const { _rs: onLibResize } = require('rc-resize-observer/lib/utils/observerUtil');
const { _rs: onEsResize } = require('rc-resize-observer/es/utils/observerUtil');
@ -34,6 +36,17 @@ if (typeof window !== 'undefined') {
// https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
window.AnimationEvent = window.AnimationEvent || window.Event;
window.TransitionEvent = window.TransitionEvent || window.Event;
// ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
// ref: https://github.com/jsdom/jsdom/issues/2524
Object.defineProperty(window, 'TextEncoder', {
writable: true,
value: util.TextEncoder,
});
Object.defineProperty(window, 'TextDecoder', {
writable: true,
value: util.TextDecoder,
});
}
const Enzyme = require('enzyme');

2
tests/shared/imageTest.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
// Reference: https://github.com/ant-design/ant-design/pull/24003#discussion_r427267386
// eslint-disable-next-line import/no-unresolved
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
import { configureToMatchImageSnapshot } from '@ant-design/jest-image-snapshot';
import ReactDOMServer from 'react-dom/server';
import glob from 'glob';
import MockDate from 'mockdate';

145
typings/jest-image-snapshot.d.ts vendored Normal file
View File

@ -0,0 +1,145 @@
// Type definitions for jest-image-snapshot 4.3
// Project: https://github.com/americanexpress/jest-image-snapshot#readme
// Definitions by: Janeene Beeforth <https://github.com/dawnmist>
// erbridge <https://github.com/erbridge>
// Piotr Błażejewicz <https://github.com/peterblazejewicz>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 3.8
/// <reference types="jest" />
declare module '@ant-design/jest-image-snapshot' {
import { PixelmatchOptions } from 'pixelmatch';
import { Options as SSIMOptions } from 'ssim.js';
export interface MatchImageSnapshotOptions {
/**
* If set to true, the build will not fail when the screenshots to compare have different sizes.
*
* @default false
*/
allowSizeMismatch?: boolean | undefined;
/** Custom config passed to 'pixelmatch' or 'ssim' */
customDiffConfig?: PixelmatchOptions | Partial<SSIMOptions> | undefined;
/**
* The method by which images are compared. `pixelmatch` does a pixel by pixel comparison,
* whereas `ssim` does a structural similarity comparison.
*
* @default 'pixelmatch'
*/
comparisonMethod?: 'pixelmatch' | 'ssim' | undefined;
/** Custom snapshots directory. Absolute path of a directory to keep the snapshot in. */
customSnapshotsDir?: string | undefined;
/** A custom absolute path of a directory to keep this diff in */
customDiffDir?: string | undefined;
/**
* A custom name to give this snapshot. If not provided, one is computed automatically. When a
* function is provided it is called with an object containing testPath, currentTestName,
* counter and defaultIdentifier as its first argument. The function must return an identifier
* to use for the snapshot.
*/
customSnapshotIdentifier?:
| ((parameters: {
testPath: string;
currentTestName: string;
counter: number;
defaultIdentifier: string;
}) => string)
| string
| undefined;
/**
* Changes diff image layout direction.
*
* @default 'horizontal'
*/
diffDirection?: 'horizontal' | 'vertical' | undefined;
/**
* Will output base64 string of a diff image to console in case of failed tests (in addition to
* creating a diff image). This string can be copy-pasted to a browser address string to preview
* the diff for a failed test.
*
* @default false
*/
dumpDiffToConsole?: boolean | undefined;
/**
* Will output the image to the terminal using iTerm's Inline Images Protocol. If the term is
* not compatible, it does the same thing as `dumpDiffToConsole`.
*
* @default false
*/
dumpInlineDiffToConsole?: boolean | undefined;
/**
* Removes coloring from the console output, useful if storing the results to a file.
*
* @default false
*/
noColors?: boolean | undefined;
/**
* Sets the threshold that would trigger a test failure based on the failureThresholdType
* selected. This is different to the customDiffConfig.threshold above - the
* customDiffConfig.threshold is the per pixel failure threshold, whereas this is the failure
* threshold for the entire comparison.
*
* @default 0
*/
failureThreshold?: number | undefined;
/**
* Sets the type of threshold that would trigger a failure.
*
* @default 'pixel'
*/
failureThresholdType?: 'pixel' | 'percent' | undefined;
/**
* Updates a snapshot even if it passed the threshold against the existing one.
*
* @default false
*/
updatePassedSnapshot?: boolean | undefined;
/**
* Applies Gaussian Blur on compared images, accepts radius in pixels as value. Useful when you
* have noise after scaling images per different resolutions on your target website, usually
* setting its value to 1-2 should be enough to solve that problem.
*
* @default 0
*/
blur?: number | undefined;
/**
* Runs the diff in process without spawning a child process.
*
* @default false
*/
runInProcess?: boolean | undefined;
}
/**
* Function to be passed to jest's expect.extend. Example: import { toMatchImageSnapshot } from
* 'jest-image-snapshot'; expect.extend({ toMatchImageSnapshot });
*/
export function toMatchImageSnapshot(options?: MatchImageSnapshotOptions): {
message(): string;
pass: boolean;
};
/**
* Configurable function that can be passed to jest's expect.extend. Example: import {
* configureToMatchImageSnapshot } from 'jest-image-snapshot'; const toMatchImageSnapshot =
* configureToMatchImageSnapshot({ noColors: true }); expect.extend({ toMatchImageSnapshot });
*/
export function configureToMatchImageSnapshot(
options: MatchImageSnapshotOptions,
): () => { message(): string; pass: boolean };
/** Mutates original state with new state */
export function updateSnapshotState<TObject, TPartial>(
originalSnapshotState: TObject,
partialSnapshotState: TPartial,
): TObject & TPartial;
declare global {
namespace jest {
interface Matchers<R, T> {
toMatchImageSnapshot(options?: MatchImageSnapshotOptions): R;
}
}
}
}

22
webpack.config.js
View File

@ -42,24 +42,6 @@ function addLocales(webpackConfig) {
webpackConfig.output.filename = '[name].js';
}
function injectWarningCondition(config) {
config.module.rules.forEach(rule => {
// Remove devWarning if needed
if (rule.test.test('test.tsx')) {
rule.use = [
...rule.use,
{
loader: 'string-replace-loader',
options: {
search: 'devWarning(',
replace: "if (process.env.NODE_ENV !== 'production') devWarning(",
},
},
];
}
});
}
function externalDayjs(config) {
config.externals.dayjs = {
root: 'dayjs',
@ -120,10 +102,6 @@ const webpackVariableConfig = injectLessVariables(getWebpackConfig(false), {
'root-entry-name': 'variable',
});
webpackConfig.forEach(config => {
injectWarningCondition(config);
});
if (process.env.RUN_ENV === 'PRODUCTION') {
webpackConfig.forEach(config => {
addLocales(config);