test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

chore: feature merge master

Browse Source
This commit is contained in:
zombiej 2022-05-27 16:13:19 +08:00
commit bd2b726199
11 changed files with 254 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/alert/__tests__/index.test.tsx
View File

@ -1,13 +1,12 @@
import React from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import Button from '../../button';
import Tooltip from '../../tooltip';
import Popconfirm from '../../popconfirm';
import rtlTest from '../../../tests/shared/rtlTest';
import accessibilityTest from '../../../tests/shared/accessibilityTest';
import { sleep } from '../../../tests/utils';
import Alert from '..';
import accessibilityTest from '../../../tests/shared/accessibilityTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render, sleep } from '../../../tests/utils';
import Button from '../../button';
import Popconfirm from '../../popconfirm';
import Tooltip from '../../tooltip';
const { ErrorBoundary } = Alert;
@ -25,7 +24,7 @@ describe('Alert', () => {
it('could be closed', () => {
const onClose = jest.fn();
const wrapper = mount(
const { container } = render(
<Alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
type="warning"
@ -33,9 +32,10 @@ describe('Alert', () => {
onClose={onClose}
/>,
);
act(() => {
jest.useFakeTimers();
wrapper.find('.ant-alert-close-icon').simulate('click');
fireEvent.click(container.querySelector('.ant-alert-close-icon')!);
jest.runAllTimers();
jest.useRealTimers();
});
@ -44,7 +44,7 @@ describe('Alert', () => {
describe('action of Alert', () => {
it('custom action', () => {
const wrapper = mount(
const { container } = render(
<Alert
message="Success Tips"
type="success"
@ -57,12 +57,12 @@ describe('Alert', () => {
closable
/>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});
it('support closeIcon', () => {
const wrapper = mount(
const { container } = render(
<Alert
closable
closeIcon={<span>close</span>}
@ -70,26 +70,26 @@ describe('Alert', () => {
type="warning"
/>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
describe('data and aria props', () => {
it('sets data attributes on input', () => {
const wrapper = mount(<Alert data-test="test-id" data-id="12345" message={null} />);
const input = wrapper.find('.ant-alert').getDOMNode();
const { container } = render(<Alert data-test="test-id" data-id="12345" message={null} />);
const input = container.querySelector('.ant-alert')!;
expect(input.getAttribute('data-test')).toBe('test-id');
expect(input.getAttribute('data-id')).toBe('12345');
});
it('sets aria attributes on input', () => {
const wrapper = mount(<Alert aria-describedby="some-label" message={null} />);
const input = wrapper.find('.ant-alert').getDOMNode();
const { container } = render(<Alert aria-describedby="some-label" message={null} />);
const input = container.querySelector('.ant-alert')!;
expect(input.getAttribute('aria-describedby')).toBe('some-label');
});
it('sets role attribute on input', () => {
const wrapper = mount(<Alert role="status" message={null} />);
const input = wrapper.find('.ant-alert').getDOMNode();
const { container } = render(<Alert role="status" message={null} />);
const input = container.querySelector('.ant-alert')!;
expect(input.getAttribute('role')).toBe('status');
});
});
@ -101,13 +101,13 @@ describe('Alert', () => {
// @ts-expect-error
// eslint-disable-next-line react/jsx-no-undef
const ThrowError = () => <NotExisted />;
const wrapper = mount(
const { container } = render(
<ErrorBoundary>
<ThrowError />
</ErrorBoundary>,
);
// eslint-disable-next-line jest/no-standalone-expect
expect(wrapper.text()).toContain('ReferenceError: NotExisted is not defined');
expect(container.textContent).toContain('ReferenceError: NotExisted is not defined');
// eslint-disable-next-line no-console
(console.error as any).mockRestore();
});
@ -115,7 +115,7 @@ describe('Alert', () => {
it('could be used with Tooltip', async () => {
const ref = React.createRef<any>();
jest.useRealTimers();
const wrapper = mount(
const { container } = render(
<Tooltip title="xxx" mouseEnterDelay={0} ref={ref}>
<Alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@ -123,7 +123,8 @@ describe('Alert', () => {
/>
</Tooltip>,
);
wrapper.find('.ant-alert').simulate('mouseenter');
// wrapper.find('.ant-alert').simulate('mouseenter');
fireEvent.mouseEnter(container.querySelector('.ant-alert')!);
await sleep(0);
expect(ref.current.getPopupDomNode()).toBeTruthy();
jest.useFakeTimers();
@ -132,7 +133,7 @@ describe('Alert', () => {
it('could be used with Popconfirm', async () => {
const ref = React.createRef<any>();
jest.useRealTimers();
const wrapper = mount(
const { container } = render(
<Popconfirm ref={ref} title="xxx">
<Alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@ -140,19 +141,21 @@ describe('Alert', () => {
/>
</Popconfirm>,
);
wrapper.find('.ant-alert').simulate('click');
fireEvent.click(container.querySelector('.ant-alert')!);
await sleep(0);
expect(ref.current.getPopupDomNode()).toBeTruthy();
jest.useFakeTimers();
});
it('could accept none react element icon', () => {
const wrapper = mount(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
expect(wrapper.render()).toMatchSnapshot();
const { container } = render(
<Alert message="Success Tips" type="success" showIcon icon="icon" />,
);
expect(container.firstChild).toMatchSnapshot();
});
it('should not render message div when no message', () => {
const wrapper = mount(<Alert description="description" />);
expect(wrapper.exists('.ant-alert-message')).toBe(false);
const { container } = render(<Alert description="description" />);
expect(!!container.querySelector('.ant-alert-message')).toBe(false);
});
});

175
components/card/Card.tsx Normal file
View File

@ -0,0 +1,175 @@
import * as React from 'react';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import Tabs from '../tabs';
import Grid from './Grid';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import type { TabsProps } from '../tabs';
import Skeleton from '../skeleton';
export type CardType = 'inner';
export type CardSize = 'default' | 'small';
export interface CardTabListType {
key: string;
tab: React.ReactNode;
disabled?: boolean;
}
export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
prefixCls?: string;
title?: React.ReactNode;
extra?: React.ReactNode;
bordered?: boolean;
headStyle?: React.CSSProperties;
bodyStyle?: React.CSSProperties;
style?: React.CSSProperties;
loading?: boolean;
hoverable?: boolean;
children?: React.ReactNode;
id?: string;
className?: string;
size?: CardSize;
type?: CardType;
cover?: React.ReactNode;
actions?: React.ReactNode[];
tabList?: CardTabListType[];
tabBarExtraContent?: React.ReactNode;
onTabChange?: (key: string) => void;
activeTabKey?: string;
defaultActiveTabKey?: string;
tabProps?: TabsProps;
}
function getAction(actions: React.ReactNode[]) {
const actionList = actions.map((action, index) => (
// eslint-disable-next-line react/no-array-index-key
<li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
<span>{action}</span>
</li>
));
return actionList;
}
const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const onTabChange = (key: string) => {
props.onTabChange?.(key);
};
const isContainGrid = () => {
let containGrid;
React.Children.forEach(props.children, (element: JSX.Element) => {
if (element && element.type && element.type === Grid) {
containGrid = true;
}
});
return containGrid;
};
const {
prefixCls: customizePrefixCls,
className,
extra,
headStyle = {},
bodyStyle = {},
title,
loading,
bordered = true,
size: customizeSize,
type,
cover,
actions,
tabList,
children,
activeTabKey,
defaultActiveTabKey,
tabBarExtraContent,
hoverable,
tabProps = {},
...others
} = props;
const prefixCls = getPrefixCls('card', customizePrefixCls);
const loadingBlock = (
<Skeleton loading active paragraph={{ rows: 4 }} title={false}>
{children}
</Skeleton>
);
const hasActiveTabKey = activeTabKey !== undefined;
const extraProps = {
...tabProps,
[hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
? activeTabKey
: defaultActiveTabKey,
tabBarExtraContent,
};
let head: React.ReactNode;
const tabs =
tabList && tabList.length ? (
<Tabs
size="large"
{...extraProps}
className={`${prefixCls}-head-tabs`}
onChange={onTabChange}
>
{tabList.map(item => (
<Tabs.TabPane tab={item.tab} disabled={item.disabled} key={item.key} />
))}
</Tabs>
) : null;
if (title || extra || tabs) {
head = (
<div className={`${prefixCls}-head`} style={headStyle}>
<div className={`${prefixCls}-head-wrapper`}>
{title && <div className={`${prefixCls}-head-title`}>{title}</div>}
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
</div>
{tabs}
</div>
);
}
const coverDom = cover ? <div className={`${prefixCls}-cover`}>{cover}</div> : null;
const body = (
<div className={`${prefixCls}-body`} style={bodyStyle}>
{loading ? loadingBlock : children}
</div>
);
const actionDom =
actions && actions.length ? (
<ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
) : null;
const divProps = omit(others, ['onTabChange']);
const mergedSize = customizeSize || size;
const classString = classNames(
prefixCls,
{
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-hoverable`]: hoverable,
[`${prefixCls}-contain-grid`]: isContainGrid(),
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-type-${type}`]: !!type,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);
return (
<div ref={ref} {...divProps} className={classString}>
{head}
{coverDom}
{body}
{actionDom}
</div>
);
});
export default Card;

14
components/card/__tests__/type.test.tsx Normal file
View File

@ -0,0 +1,14 @@
import * as React from 'react';
import Card from '../index';
describe('Card.typescript', () => {
it('ref', () => {
function Demo() {
const cardRef = React.useRef<HTMLDivElement>(null);
return <Card ref={cardRef} />;
}
expect(Demo).toBeTruthy();
});
});

176
components/card/index.tsx
View File

@ -1,185 +1,19 @@
import * as React from 'react';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import Grid from './Grid';
import Meta from './Meta';
import type { TabsProps } from '../tabs';
import Tabs from '../tabs';
import { ConfigContext } from '../config-provider';
import SizeContext from '../config-provider/SizeContext';
import Skeleton from '../skeleton';
function getAction(actions: React.ReactNode[]) {
const actionList = actions.map((action, index) => (
// eslint-disable-next-line react/no-array-index-key
<li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
<span>{action}</span>
</li>
));
return actionList;
}
import InternalCard from './Card';
export { CardGridProps } from './Grid';
export { CardMetaProps } from './Meta';
export { CardProps, CardTabListType } from './Card';
export type CardType = 'inner';
export type CardSize = 'default' | 'small';
type InternalCardType = typeof InternalCard;
export interface CardTabListType {
key: string;
tab: React.ReactNode;
disabled?: boolean;
}
export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
prefixCls?: string;
title?: React.ReactNode;
extra?: React.ReactNode;
bordered?: boolean;
headStyle?: React.CSSProperties;
bodyStyle?: React.CSSProperties;
style?: React.CSSProperties;
loading?: boolean;
hoverable?: boolean;
children?: React.ReactNode;
id?: string;
className?: string;
size?: CardSize;
type?: CardType;
cover?: React.ReactNode;
actions?: React.ReactNode[];
tabList?: CardTabListType[];
tabBarExtraContent?: React.ReactNode;
onTabChange?: (key: string) => void;
activeTabKey?: string;
defaultActiveTabKey?: string;
tabProps?: TabsProps;
}
export interface CardInterface extends React.ForwardRefExoticComponent<CardProps> {
export interface CardInterface extends InternalCardType {
Grid: typeof Grid;
Meta: typeof Meta;
}
const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const onTabChange = (key: string) => {
props.onTabChange?.(key);
};
const isContainGrid = () => {
let containGrid;
React.Children.forEach(props.children, (element: JSX.Element) => {
if (element && element.type && element.type === Grid) {
containGrid = true;
}
});
return containGrid;
};
const {
prefixCls: customizePrefixCls,
className,
extra,
headStyle = {},
bodyStyle = {},
title,
loading,
bordered = true,
size: customizeSize,
type,
cover,
actions,
tabList,
children,
activeTabKey,
defaultActiveTabKey,
tabBarExtraContent,
hoverable,
tabProps = {},
...others
} = props;
const prefixCls = getPrefixCls('card', customizePrefixCls);
const loadingBlock = (
<Skeleton loading active paragraph={{ rows: 4 }} title={false}>
{children}
</Skeleton>
);
const hasActiveTabKey = activeTabKey !== undefined;
const extraProps = {
...tabProps,
[hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
? activeTabKey
: defaultActiveTabKey,
tabBarExtraContent,
};
let head: React.ReactNode;
const tabs =
tabList && tabList.length ? (
<Tabs
size="large"
{...extraProps}
className={`${prefixCls}-head-tabs`}
onChange={onTabChange}
>
{tabList.map(item => (
<Tabs.TabPane tab={item.tab} disabled={item.disabled} key={item.key} />
))}
</Tabs>
) : null;
if (title || extra || tabs) {
head = (
<div className={`${prefixCls}-head`} style={headStyle}>
<div className={`${prefixCls}-head-wrapper`}>
{title && <div className={`${prefixCls}-head-title`}>{title}</div>}
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
</div>
{tabs}
</div>
);
}
const coverDom = cover ? <div className={`${prefixCls}-cover`}>{cover}</div> : null;
const body = (
<div className={`${prefixCls}-body`} style={bodyStyle}>
{loading ? loadingBlock : children}
</div>
);
const actionDom =
actions && actions.length ? (
<ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
) : null;
const divProps = omit(others, ['onTabChange']);
const mergedSize = customizeSize || size;
const classString = classNames(
prefixCls,
{
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-hoverable`]: hoverable,
[`${prefixCls}-contain-grid`]: isContainGrid(),
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-type-${type}`]: !!type,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);
return (
<div ref={ref} {...divProps} className={classString}>
{head}
{coverDom}
{body}
{actionDom}
</div>
);
}) as CardInterface;
const Card = InternalCard as CardInterface;
Card.Grid = Grid;
Card.Meta = Meta;

2
components/collapse/index.zh-CN.md
View File

@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | |
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
| expandIconPosition | 设置图标位置 | `start` \| `end` | - | |
| expandIconPosition | 设置图标位置 | `start` \| `end` | - | 4.21.0 |
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
| onChange | 切换面板的回调 | function | - | |

26
components/popover/style/index.less
View File

@ -3,7 +3,7 @@
@popover-prefix-cls: ~'@{ant-prefix}-popover';
@popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
@popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) + 6px;
@popover-arrow-offset-vertical: 12px;
@popover-arrow-offset-horizontal: 16px;
@ -21,6 +21,10 @@
cursor: auto;
user-select: text;
&-content {
position: relative;
}
&::after {
position: absolute;
background: fade(@white, 1%);
@ -144,7 +148,8 @@
&-placement-top &-arrow,
&-placement-topLeft &-arrow,
&-placement-topRight &-arrow {
bottom: @popover-distance - @popover-arrow-rotate-width;
bottom: 0;
transform: translateY(100%);
&-content {
box-shadow: 3px 3px 7px fade(@black, 7%);
@ -154,7 +159,7 @@
&-placement-top &-arrow {
left: 50%;
transform: translateX(-50%);
transform: translateY(100%) translateX(-50%);
}
&-placement-topLeft &-arrow {
@ -168,7 +173,8 @@
&-placement-right &-arrow,
&-placement-rightTop &-arrow,
&-placement-rightBottom &-arrow {
left: @popover-distance - @popover-arrow-rotate-width;
left: 0;
transform: translateX(-100%);
&-content {
box-shadow: 3px 3px 7px fade(@black, 7%);
@ -178,7 +184,7 @@
&-placement-right &-arrow {
top: 50%;
transform: translateY(-50%);
transform: translateX(-100%) translateY(-50%);
}
&-placement-rightTop &-arrow {
@ -192,7 +198,8 @@
&-placement-bottom &-arrow,
&-placement-bottomLeft &-arrow,
&-placement-bottomRight &-arrow {
top: @popover-distance - @popover-arrow-rotate-width;
top: 0;
transform: translateY(-100%);
&-content {
box-shadow: 2px 2px 5px fade(@black, 6%);
@ -202,7 +209,7 @@
&-placement-bottom &-arrow {
left: 50%;
transform: translateX(-50%);
transform: translateY(-100%) translateX(-50%);
}
&-placement-bottomLeft &-arrow {
@ -216,7 +223,8 @@
&-placement-left &-arrow,
&-placement-leftTop &-arrow,
&-placement-leftBottom &-arrow {
right: @popover-distance - @popover-arrow-rotate-width;
right: 0;
transform: translateX(100%);
&-content {
box-shadow: 3px 3px 7px fade(@black, 7%);
@ -226,7 +234,7 @@
&-placement-left &-arrow {
top: 50%;
transform: translateY(-50%);
transform: translateX(100%) translateY(-50%);
}
&-placement-leftTop &-arrow {

8
components/select/demo/select-users.md
View File

@ -20,14 +20,14 @@ import debounce from 'lodash/debounce';
import React, { useMemo, useRef, useState } from 'react';
export interface DebounceSelectProps<ValueType = any>
extends Omit<SelectProps<ValueType>, 'options' | 'children'> {
extends Omit<SelectProps<ValueType | ValueType[]>, 'options' | 'children'> {
fetchOptions: (search: string) => Promise<ValueType[]>;
debounceTimeout?: number;
}
function DebounceSelect<
ValueType extends { key?: string; label: React.ReactNode; value: string | number } = any,
>({ fetchOptions, debounceTimeout = 800, ...props }: DebounceSelectProps) {
>({ fetchOptions, debounceTimeout = 800, ...props }: DebounceSelectProps<ValueType>) {
const [fetching, setFetching] = useState(false);
const [options, setOptions] = useState<ValueType[]>([]);
const fetchRef = useRef(0);
@ -54,7 +54,7 @@ function DebounceSelect<
}, [fetchOptions, debounceTimeout]);
return (
<Select<ValueType>
<Select
labelInValue
filterOption={false}
onSearch={debounceFetcher}
@ -96,7 +96,7 @@ const App: React.FC = () => {
placeholder="Select users"
fetchOptions={fetchUserList}
onChange={newValue => {
setValue(newValue);
setValue(newValue as UserValue[]);
}}
style={{ width: '100%' }}
/>

2
components/skeleton/demo/list.md
View File

@ -45,7 +45,7 @@ const App: React.FC = () => {
const [loading, setLoading] = useState(true);
const onChange = (checked: boolean) => {
setLoading(checked);
setLoading(!checked);
};
return (
<>

3
docs/react/recommendation.en-US.md
View File

@ -40,7 +40,8 @@ title: Third-Party Libraries
| Page Footer | [rc-footer](https://github.com/react-component/footer) |
| Water Mark | [WaterMark](https://procomponents.ant.design/components/water-mark) |
| Currency | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) |
| Application Frameworks | [refine](https://github.com/pankod/refine) |
| Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) |
## Products we are using ✨
There are some products to recommend for developer/designer/product manager.

2
docs/react/recommendation.zh-CN.md
View File

@ -40,7 +40,7 @@ title: 社区精选组件
| 页脚 | [rc-footer](https://github.com/react-component/footer) |
| 水印 | [WaterMark](https://procomponents.ant.design/components/water-mark) |
| 金额格式化 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) |
| 应用程序框架 | [refine](https://github.com/pankod/refine) |
| 应用程序框架 | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) |
## 推荐产品 ✨

4
package.json
View File

@ -118,7 +118,6 @@
"@ant-design/react-slick": "~0.28.1",
"@babel/runtime": "^7.12.5",
"@ctrl/tinycolor": "^3.4.0",
"@types/qs": "^6.9.7",
"classnames": "^2.2.6",
"copy-to-clipboard": "^3.2.0",
"lodash": "^4.17.21",
@ -176,6 +175,7 @@
"@types/jest-image-snapshot": "^4.1.0",
"@types/lodash": "^4.14.139",
"@types/puppeteer": "^5.4.0",
"@types/qs": "^6.9.7",
"@types/react": "^18.0.0",
"@types/react-color": "^3.0.1",
"@types/react-copy-to-clipboard": "^5.0.0",
@ -290,7 +290,7 @@
"stylelint-declaration-block-no-ignored-properties": "^2.1.0",
"stylelint-order": "^5.0.0",
"theme-switcher": "^1.0.2",
"typescript": "~4.6.2",
"typescript": "~4.7.2",
"webpack-bundle-analyzer": "^4.1.0",
"xhr-mock": "^2.4.1",
"yaml-front-matter": "^4.0.0"