mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 12:39:49 +08:00
chore: improve code style (#27266)
This commit is contained in:
parent
d44f404eae
commit
b5dc079228
@ -10,7 +10,6 @@
|
||||
|
||||
一套企业级 UI 设计语言和 React 组件库。
|
||||
|
||||
|
||||
[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
||||
|
||||
[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
||||
|
@ -24,10 +24,7 @@ describe('AutoComplete children could be focus', () => {
|
||||
it('focus() and onFocus', () => {
|
||||
const handleFocus = jest.fn();
|
||||
const wrapper = mount(<AutoComplete onFocus={handleFocus} />, { attachTo: container });
|
||||
wrapper
|
||||
.find('input')
|
||||
.instance()
|
||||
.focus();
|
||||
wrapper.find('input').instance().focus();
|
||||
jest.runAllTimers();
|
||||
expect(handleFocus).toHaveBeenCalled();
|
||||
});
|
||||
@ -35,15 +32,9 @@ describe('AutoComplete children could be focus', () => {
|
||||
it('blur() and onBlur', () => {
|
||||
const handleBlur = jest.fn();
|
||||
const wrapper = mount(<AutoComplete onBlur={handleBlur} />, { attachTo: container });
|
||||
wrapper
|
||||
.find('input')
|
||||
.instance()
|
||||
.focus();
|
||||
wrapper.find('input').instance().focus();
|
||||
jest.runAllTimers();
|
||||
wrapper
|
||||
.find('input')
|
||||
.instance()
|
||||
.blur();
|
||||
wrapper.find('input').instance().blur();
|
||||
jest.runAllTimers();
|
||||
expect(handleBlur).toHaveBeenCalled();
|
||||
});
|
||||
|
@ -72,23 +72,12 @@ describe('react router', () => {
|
||||
</MemoryRouter>,
|
||||
);
|
||||
expect(wrapper.find('BreadcrumbItem').length).toBe(1);
|
||||
expect(
|
||||
wrapper
|
||||
.find('BreadcrumbItem .ant-breadcrumb-link')
|
||||
.at(0)
|
||||
.text(),
|
||||
).toBe('Home');
|
||||
wrapper
|
||||
.find('.demo-nav a')
|
||||
.at(1)
|
||||
.simulate('click');
|
||||
expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(0).text()).toBe('Home');
|
||||
wrapper.find('.demo-nav a').at(1).simulate('click');
|
||||
expect(wrapper.find('BreadcrumbItem').length).toBe(2);
|
||||
expect(
|
||||
wrapper
|
||||
.find('BreadcrumbItem .ant-breadcrumb-link')
|
||||
.at(1)
|
||||
.text(),
|
||||
).toBe('Application List');
|
||||
expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(1).text()).toBe(
|
||||
'Application List',
|
||||
);
|
||||
});
|
||||
|
||||
it('react router 3', () => {
|
||||
|
@ -52,10 +52,7 @@ describe('Card', () => {
|
||||
xxx
|
||||
</Card>,
|
||||
);
|
||||
wrapper
|
||||
.find('.ant-tabs-tab')
|
||||
.at(1)
|
||||
.simulate('click');
|
||||
wrapper.find('.ant-tabs-tab').at(1).simulate('click');
|
||||
expect(onTabChange).toHaveBeenCalledWith('tab2');
|
||||
});
|
||||
|
||||
|
@ -38,7 +38,6 @@ describe('Cascader.typescript', () => {
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const result = <Cascader options={options} defaultValue={[1, 'hangzhou']} />;
|
||||
|
||||
expect(result).toBeTruthy();
|
||||
|
@ -43,27 +43,13 @@ describe('MonthPicker and WeekPicker', () => {
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
|
||||
const wrapper = mount(<MonthPicker open />);
|
||||
wrapper.setProps({ value: birthday });
|
||||
expect(
|
||||
render(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render WeekPicker', () => {
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
|
||||
const wrapper = mount(<WeekPicker open />);
|
||||
wrapper.setProps({ value: birthday });
|
||||
expect(
|
||||
render(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
@ -18,10 +18,7 @@ export function openPanel(wrapper) {
|
||||
}
|
||||
|
||||
export function clearInput(wrapper) {
|
||||
wrapper
|
||||
.find('.ant-calendar-picker-clear')
|
||||
.hostNodes()
|
||||
.simulate('click');
|
||||
wrapper.find('.ant-calendar-picker-clear').hostNodes().simulate('click');
|
||||
}
|
||||
|
||||
export function nextYear(wrapper) {
|
||||
@ -33,17 +30,10 @@ export function nextMonth(wrapper) {
|
||||
}
|
||||
|
||||
export function openPicker(wrapper, index = 0) {
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(index)
|
||||
.simulate('mousedown')
|
||||
.simulate('focus');
|
||||
wrapper.find('input').at(index).simulate('mousedown').simulate('focus');
|
||||
}
|
||||
export function closePicker(wrapper, index = 0) {
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(index)
|
||||
.simulate('blur');
|
||||
wrapper.find('input').at(index).simulate('blur');
|
||||
}
|
||||
|
||||
export function selectCell(wrapper, text, index = 0) {
|
||||
|
@ -87,7 +87,7 @@
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
&-item {
|
||||
|
@ -17,11 +17,6 @@ describe('List', () => {
|
||||
const dataSource = [];
|
||||
|
||||
const wrapper = mount(<List renderItem={renderItem} dataSource={dataSource} locale={locale} />);
|
||||
expect(
|
||||
wrapper
|
||||
.find('div')
|
||||
.first()
|
||||
.props().locale,
|
||||
).toBe(undefined);
|
||||
expect(wrapper.find('div').first().props().locale).toBe(undefined);
|
||||
});
|
||||
});
|
||||
|
@ -1,3 +1,3 @@
|
||||
import locale from '../locale/by_BY';
|
||||
|
||||
export default locale;
|
||||
export default locale;
|
||||
|
@ -68,9 +68,9 @@ const localeValues: Locale = {
|
||||
},
|
||||
Form: {
|
||||
defaultValidateMessages: {
|
||||
"default": 'خطأ في حقل الإدخال ${label}',
|
||||
default: 'خطأ في حقل الإدخال ${label}',
|
||||
required: 'يرجى إدخال ${label}',
|
||||
"enum": '${label} يجب أن يكون واحدا من [${enum}]',
|
||||
enum: '${label} يجب أن يكون واحدا من [${enum}]',
|
||||
whitespace: '${label} لا يمكن أن يكون حرفًا فارغًا',
|
||||
date: {
|
||||
format: '${label} تنسيق التاريخ غير صحيح',
|
||||
|
@ -5,16 +5,8 @@ describe('Result.typescript', () => {
|
||||
it('status', () => {
|
||||
const result = (
|
||||
<>
|
||||
<Result
|
||||
status="404"
|
||||
title="404"
|
||||
subTitle="Sorry, the page you visited does not exist."
|
||||
/>
|
||||
<Result
|
||||
status={404}
|
||||
title="404"
|
||||
subTitle="Sorry, the page you visited does not exist."
|
||||
/>
|
||||
<Result status="404" title="404" subTitle="Sorry, the page you visited does not exist." />
|
||||
<Result status={404} title="404" subTitle="Sorry, the page you visited does not exist." />
|
||||
</>
|
||||
);
|
||||
|
||||
|
@ -40,24 +40,14 @@ describe('Select', () => {
|
||||
it('should support set notFoundContent to null', () => {
|
||||
const wrapper = mount(<Select mode="multiple" notFoundContent={null} />);
|
||||
toggleOpen(wrapper);
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
|
||||
expect(dropdownWrapper.find('MenuItem').length).toBe(0);
|
||||
});
|
||||
|
||||
it('should not have default notFoundContent when mode is combobox', () => {
|
||||
const wrapper = mount(<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} />);
|
||||
toggleOpen(wrapper);
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
|
||||
expect(dropdownWrapper.find('MenuItem').length).toBe(0);
|
||||
});
|
||||
|
||||
@ -66,19 +56,9 @@ describe('Select', () => {
|
||||
<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} notFoundContent="not at all" />,
|
||||
);
|
||||
toggleOpen(wrapper);
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
|
||||
expect(dropdownWrapper.find('.ant-select-item-option').length).toBeFalsy();
|
||||
expect(
|
||||
dropdownWrapper
|
||||
.find('.ant-select-item-empty')
|
||||
.at(0)
|
||||
.text(),
|
||||
).toBe('not at all');
|
||||
expect(dropdownWrapper.find('.ant-select-item-empty').at(0).text()).toBe('not at all');
|
||||
});
|
||||
|
||||
it('should be controlled by open prop', () => {
|
||||
@ -88,24 +68,14 @@ describe('Select', () => {
|
||||
<Option value="1">1</Option>
|
||||
</Select>,
|
||||
);
|
||||
let dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
let dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
|
||||
expect(dropdownWrapper.props().visible).toBe(true);
|
||||
toggleOpen(wrapper);
|
||||
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);
|
||||
expect(dropdownWrapper.props().visible).toBe(true);
|
||||
|
||||
wrapper.setProps({ open: false });
|
||||
dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
|
||||
expect(dropdownWrapper.props().visible).toBe(false);
|
||||
toggleOpen(wrapper);
|
||||
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
|
||||
|
@ -26,7 +26,7 @@ const Paragraph = (props: SkeletonParagraphProps) => {
|
||||
const { prefixCls, className, style, rows } = props;
|
||||
const rowList = [...Array(rows)].map((_, index) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<li key={index} style={{ width: getWidth(index) }}/>
|
||||
<li key={index} style={{ width: getWidth(index) }} />
|
||||
));
|
||||
return (
|
||||
<ul className={classNames(prefixCls, className)} style={style}>
|
||||
|
@ -5,35 +5,20 @@ import Spin from '..';
|
||||
describe('delay spinning', () => {
|
||||
it("should render with delay when it's mounted with spinning=true and delay", () => {
|
||||
const wrapper = mount(<Spin spinning delay={500} />);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-spin')
|
||||
.at(0)
|
||||
.hasClass('ant-spin-spinning'),
|
||||
).toEqual(false);
|
||||
expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
|
||||
});
|
||||
|
||||
it('should render when delay is init set', async () => {
|
||||
const wrapper = mount(<Spin spinning delay={100} />);
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-spin')
|
||||
.at(0)
|
||||
.hasClass('ant-spin-spinning'),
|
||||
).toEqual(false);
|
||||
expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
|
||||
|
||||
// use await not jest.runAllTimers()
|
||||
// because of https://github.com/facebook/jest/issues/3465
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-spin')
|
||||
.at(0)
|
||||
.hasClass('ant-spin-spinning'),
|
||||
).toEqual(true);
|
||||
expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(true);
|
||||
});
|
||||
|
||||
it('should cancel debounce function when unmount', async () => {
|
||||
|
@ -14,18 +14,8 @@ describe('Spin', () => {
|
||||
<div>content</div>
|
||||
</Spin>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-spin-nested-loading')
|
||||
.at(0)
|
||||
.prop('style'),
|
||||
).toBeFalsy();
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-spin')
|
||||
.at(0)
|
||||
.prop('style').background,
|
||||
).toBe('red');
|
||||
expect(wrapper.find('.ant-spin-nested-loading').at(0).prop('style')).toBeFalsy();
|
||||
expect(wrapper.find('.ant-spin').at(0).prop('style').background).toBe('red');
|
||||
});
|
||||
|
||||
it("should render custom indicator when it's set", () => {
|
||||
|
@ -95,7 +95,9 @@ describe('Statistic', () => {
|
||||
it('responses hover events for Countdown', () => {
|
||||
const onMouseEnter = jest.fn();
|
||||
const onMouseLeave = jest.fn();
|
||||
const wrapper = mount(<Statistic.Countdown onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />);
|
||||
const wrapper = mount(
|
||||
<Statistic.Countdown onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />,
|
||||
);
|
||||
wrapper.simulate('mouseenter');
|
||||
expect(onMouseEnter).toHaveBeenCalled();
|
||||
wrapper.simulate('mouseleave');
|
||||
|
@ -1,6 +1,8 @@
|
||||
// customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
|
||||
// for dark theme
|
||||
.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix) when (@theme = dark) {
|
||||
.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix)
|
||||
when
|
||||
(@theme = dark) {
|
||||
@picker-prefix-cls: ~'@{prefix}-picker';
|
||||
@slider-prefix-cls: ~'@{prefix}-slider';
|
||||
@anchor-prefix-cls: ~'@{prefix}-anchor';
|
||||
@ -18,7 +20,12 @@
|
||||
@popover-border: @border-width-base @border-style-base @popover-customize-border-color;
|
||||
|
||||
.@{containerClass} {
|
||||
.@{picker-prefix-cls}-clear, .@{slider-prefix-cls}-handle, .@{anchor-prefix-cls}-wrapper, .@{collapse-prefix-cls}-content, .@{timeline-prefix-cls}-item-head, .@{card-prefix-cls} {
|
||||
.@{picker-prefix-cls}-clear,
|
||||
.@{slider-prefix-cls}-handle,
|
||||
.@{anchor-prefix-cls}-wrapper,
|
||||
.@{collapse-prefix-cls}-content,
|
||||
.@{timeline-prefix-cls}-item-head,
|
||||
.@{card-prefix-cls} {
|
||||
background-color: @background;
|
||||
}
|
||||
|
||||
@ -77,7 +84,8 @@
|
||||
> tr {
|
||||
> td {
|
||||
border-bottom: @popover-border;
|
||||
&.@{table-prefix-cls}-cell-fix-left, &.@{table-prefix-cls}-cell-fix-right {
|
||||
&.@{table-prefix-cls}-cell-fix-left,
|
||||
&.@{table-prefix-cls}-cell-fix-right {
|
||||
background-color: @background;
|
||||
}
|
||||
}
|
||||
|
@ -34,12 +34,9 @@ describe('TimeLine', () => {
|
||||
});
|
||||
|
||||
it('its last item is marked as the last item', () => {
|
||||
expect(
|
||||
wrapper
|
||||
.find('li.ant-timeline-item')
|
||||
.last()
|
||||
.hasClass('ant-timeline-item-last'),
|
||||
).toBe(true);
|
||||
expect(wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-last')).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -65,10 +62,7 @@ describe('TimeLine', () => {
|
||||
it('its last item is marked as the pending item', () => {
|
||||
const wrapper = wrapperFactory({ pending });
|
||||
expect(
|
||||
wrapper
|
||||
.find('li.ant-timeline-item')
|
||||
.last()
|
||||
.hasClass('ant-timeline-item-pending'),
|
||||
wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-pending'),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
@ -119,21 +113,15 @@ describe('TimeLine', () => {
|
||||
|
||||
it('its last item is marked as the last item', () => {
|
||||
const wrapper = wrapperFactory({ pending, reverse: true });
|
||||
expect(
|
||||
wrapper
|
||||
.find('li.ant-timeline-item')
|
||||
.last()
|
||||
.hasClass('ant-timeline-item-last'),
|
||||
).toBe(true);
|
||||
expect(wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-last')).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it('its first item is marked as the pending item', () => {
|
||||
const wrapper = wrapperFactory({ pending, reverse: true });
|
||||
expect(
|
||||
wrapper
|
||||
.find('li.ant-timeline-item')
|
||||
.first()
|
||||
.hasClass('ant-timeline-item-pending'),
|
||||
wrapper.find('li.ant-timeline-item').first().hasClass('ant-timeline-item-pending'),
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
|
@ -33,12 +33,7 @@ describe('Transfer.List', () => {
|
||||
|
||||
it('should check top Checkbox while all available items are checked', () => {
|
||||
const wrapper = mount(<List {...listCommonProps} checkedKeys={['a', 'b']} />);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-transfer-list-header')
|
||||
.find(Checkbox)
|
||||
.prop('checked'),
|
||||
).toBeTruthy();
|
||||
expect(wrapper.find('.ant-transfer-list-header').find(Checkbox).prop('checked')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('when component has been unmounted, componentWillUnmount should be called', () => {
|
||||
|
@ -17,7 +17,7 @@
|
||||
/>
|
||||
<link rel="stylesheet" href="https://gw.alipayobjects.com/os/antfincdn/ciEbDYlN1f/umi.css" />
|
||||
<script>
|
||||
window.routerBase = "/";
|
||||
window.routerBase = '/';
|
||||
</script>
|
||||
<script>
|
||||
//! umi version: 3.2.14
|
||||
|
@ -79,9 +79,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="react-content">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
<div id="react-content">{{ content | safe }}</div>
|
||||
{% for jsFile in manifest["js"] %}
|
||||
<script src="{{ root }}{{ jsFile }}"></script>
|
||||
{% endfor %}
|
||||
|
@ -9,9 +9,7 @@ const LANGS = {
|
||||
};
|
||||
|
||||
const CodePreview = ({ toReactComponent, codes }) => {
|
||||
const langList = Object.keys(codes)
|
||||
.sort()
|
||||
.reverse();
|
||||
const langList = Object.keys(codes).sort().reverse();
|
||||
|
||||
let content;
|
||||
|
||||
|
@ -17,16 +17,14 @@ interface Recommend {
|
||||
const LIST_CN: Recommend[] = [
|
||||
{
|
||||
title: '树形控件在生产力工具中的设计',
|
||||
description:
|
||||
'惊!半年实践血泪史,3000 字深度好文,一个爱树的设计师手把手教你如何设计「树 」!',
|
||||
description: '惊!半年实践血泪史,3000 字深度好文,一个爱树的设计师手把手教你如何设计「树 」!',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z4eXS55fMigAAAAAAAAAAAAAARQnAQ',
|
||||
href: 'https://zhuanlan.zhihu.com/p/260068653',
|
||||
popularize: true,
|
||||
},
|
||||
{
|
||||
title: '或许这就是下一代组件库',
|
||||
description:
|
||||
'随着 React hooks、Vue composition API 的推出,或许组件库有了新的突破点。',
|
||||
description: '随着 React hooks、Vue composition API 的推出,或许组件库有了新的突破点。',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SU6hQ5jHVEsAAAAAAAAAAAAAARQnAQ',
|
||||
href: 'https://zhuanlan.zhihu.com/p/252824872',
|
||||
},
|
||||
@ -41,7 +39,7 @@ const LIST_CN: Recommend[] = [
|
||||
|
||||
const LIST_EN: Recommend[] = [
|
||||
{
|
||||
title: "How to Design Tree Component",
|
||||
title: 'How to Design Tree Component',
|
||||
description:
|
||||
'🌲 Surprise! With half-a-year practice of blood and tears, here comes a designer who deeply loves trees to teach you how to design 「tree」component!',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z4eXS55fMigAAAAAAAAAAAAAARQnAQ',
|
||||
|
Loading…
Reference in New Issue
Block a user