mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-18 11:18:14 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

Merge branch 'master' into next-merge-master

Browse Source
This commit is contained in:
MadCcc 2022-07-03 09:42:26 +08:00
commit 9d7c11f391
35 changed files with 392 additions and 1068 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/button/button.tsx
View File

@ -197,8 +197,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
};
// =============== Update Loading ===============
const loadingOrDelay: Loading =
typeof loading === 'object' && loading.delay ? loading.delay || true : !!loading;
const loadingOrDelay: Loading = typeof loading === 'boolean' ? loading : loading?.delay || true;
React.useEffect(() => {
let delayTimer: number | null = null;

44
components/carousel/__tests__/index.test.js
View File

@ -1,9 +1,8 @@
import { mount } from 'enzyme';
import React from 'react';
import Carousel from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render, sleep } from '../../../tests/utils';
import { sleep, render, act } from '../../../tests/utils';
describe('Carousel', () => {
mountTest(Carousel);
@ -17,9 +16,17 @@ describe('Carousel', () => {
jest.useRealTimers();
});
function runAllTimersWithAct(times = 1) {
for (let i = 0; i < times; i++) {
act(() => {
jest.runAllTimers();
});
}
}
it('should has innerSlider', () => {
const ref = React.createRef();
mount(
render(
<Carousel ref={ref}>
<div />
</Carousel>,
@ -28,9 +35,9 @@ describe('Carousel', () => {
expect(typeof innerSlider.slickNext).toBe('function');
});
it('should has prev, next and go function', () => {
it('should has prev, next and go function', async () => {
const ref = React.createRef();
mount(
render(
<Carousel ref={ref}>
<div>1</div>
<div>2</div>
@ -43,20 +50,23 @@ describe('Carousel', () => {
expect(typeof goTo).toBe('function');
expect(ref.current.innerSlider.state.currentSlide).toBe(0);
ref.current.goTo(2);
jest.runAllTimers();
runAllTimersWithAct(1);
expect(ref.current.innerSlider.state.currentSlide).toBe(2);
// wait for animation to be finished
runAllTimersWithAct(2);
ref.current.prev();
jest.runAllTimers();
runAllTimersWithAct(1);
expect(ref.current.innerSlider.state.currentSlide).toBe(1);
runAllTimersWithAct(2);
ref.current.next();
jest.runAllTimers();
runAllTimersWithAct(1);
expect(ref.current.innerSlider.state.currentSlide).toBe(2);
});
it('should trigger autoPlay after window resize', async () => {
jest.useRealTimers();
const ref = React.createRef();
mount(
render(
<Carousel autoplay ref={ref}>
<div>1</div>
<div>2</div>
@ -64,14 +74,14 @@ describe('Carousel', () => {
</Carousel>,
);
const spy = jest.spyOn(ref.current.innerSlider, 'autoPlay');
window.resizeTo(1000);
window.resizeTo(1000, window.outerHeight);
expect(spy).not.toHaveBeenCalled();
await sleep(500);
expect(spy).toHaveBeenCalled();
});
it('cancel resize listener when unmount', async () => {
const wrapper = mount(
const { unmount } = render(
<Carousel autoplay>
<div>1</div>
<div>2</div>
@ -79,7 +89,7 @@ describe('Carousel', () => {
</Carousel>,
);
const spy = jest.spyOn(window, 'removeEventListener');
wrapper.unmount();
unmount();
expect(spy).toHaveBeenCalled();
});
@ -87,12 +97,13 @@ describe('Carousel', () => {
['left', 'right', 'top', 'bottom'].forEach(dotPosition => {
// eslint-disable-next-line jest/valid-title
it(dotPosition, () => {
const wrapper = mount(
const { container } = render(
<Carousel dotPosition={dotPosition}>
<div />
</Carousel>,
);
expect(wrapper.render()).toMatchSnapshot();
container.normalize();
expect(container.firstChild).toMatchSnapshot();
});
});
});
@ -126,15 +137,14 @@ describe('Carousel', () => {
describe('dots precise control by plain object', () => {
it('use dots to provide dotsClasse', () => {
const wrapper = mount(
const { container } = render(
<Carousel dots={{ className: 'customDots' }}>
<div>1</div>
<div>2</div>
<div>3</div>
</Carousel>,
);
wrapper.update();
expect(wrapper.find('.slick-dots').hasClass('customDots')).toBeTruthy();
expect(container.querySelector('.slick-dots')).toHaveClass('customDots');
});
});
});

8
components/checkbox/Checkbox.tsx
View File

@ -6,6 +6,7 @@ import { ConfigContext } from '../config-provider';
import { FormItemInputContext } from '../form/context';
import warning from '../_util/warning';
import { GroupContext } from './Group';
import DisabledContext from '../config-provider/DisabledContext';
import useStyle from './style';
@ -57,6 +58,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
onMouseEnter,
onMouseLeave,
skipGroup = false,
disabled,
...restProps
},
ref,
@ -64,6 +66,8 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const checkboxGroup = React.useContext(GroupContext);
const { isFormItemInput } = useContext(FormItemInputContext);
const contextDisabled = useContext(DisabledContext);
const mergedDisabled = disabled || checkboxGroup?.disabled || contextDisabled;
const prevValue = React.useRef(restProps.value);
@ -103,14 +107,13 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
};
checkboxProps.name = checkboxGroup.name;
checkboxProps.checked = checkboxGroup.value.indexOf(restProps.value) !== -1;
checkboxProps.disabled = restProps.disabled || checkboxGroup.disabled;
}
const classString = classNames(
{
[`${prefixCls}-wrapper`]: true,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
[`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
[`${prefixCls}-wrapper-disabled`]: mergedDisabled,
[`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
},
className,
@ -136,6 +139,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
{...checkboxProps}
prefixCls={prefixCls}
className={checkboxClass}
disabled={mergedDisabled}
ref={ref}
/>
{children !== undefined && <span>{children}</span>}

25
components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -9,6 +9,7 @@ exports[`renders ./components/collapse/demo/accordion.md extend context correctl
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="tab"
@ -48,6 +49,7 @@ exports[`renders ./components/collapse/demo/accordion.md extend context correctl
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="tab"
@ -87,6 +89,7 @@ exports[`renders ./components/collapse/demo/accordion.md extend context correctl
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="tab"
@ -133,6 +136,7 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -188,6 +192,7 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -227,6 +232,7 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -273,6 +279,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -326,6 +333,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -365,6 +373,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -418,6 +427,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-header-collapsible-only"
>
@ -479,6 +489,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
class="ant-collapse-item ant-collapse-item-disabled"
>
<div
aria-disabled="true"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -527,6 +538,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -582,6 +594,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
class="ant-collapse-item site-collapse-custom-panel"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -621,6 +634,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
class="ant-collapse-item site-collapse-custom-panel"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -668,6 +682,7 @@ Array [
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -747,6 +762,7 @@ Array [
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -810,6 +826,7 @@ Array [
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1027,6 +1044,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -1082,6 +1100,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1121,6 +1140,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1167,6 +1187,7 @@ exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`]
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1206,6 +1227,7 @@ exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`]
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1245,6 +1267,7 @@ exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`]
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1291,6 +1314,7 @@ exports[`renders ./components/collapse/demo/noarrow.md extend context correctly
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -1346,6 +1370,7 @@ exports[`renders ./components/collapse/demo/noarrow.md extend context correctly
class="ant-collapse-item ant-collapse-no-arrow"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"

25
components/collapse/__tests__/__snapshots__/demo.test.js.snap
View File

@ -9,6 +9,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="tab"
@ -48,6 +49,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="tab"
@ -87,6 +89,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="tab"
@ -133,6 +136,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -188,6 +192,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -227,6 +232,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -273,6 +279,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -326,6 +333,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -365,6 +373,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -418,6 +427,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-header-collapsible-only"
>
@ -479,6 +489,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
class="ant-collapse-item ant-collapse-item-disabled"
>
<div
aria-disabled="true"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -527,6 +538,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -582,6 +594,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
class="ant-collapse-item site-collapse-custom-panel"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -621,6 +634,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
class="ant-collapse-item site-collapse-custom-panel"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -668,6 +682,7 @@ Array [
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -747,6 +762,7 @@ Array [
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -810,6 +826,7 @@ Array [
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -945,6 +962,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -1000,6 +1018,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1039,6 +1058,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1085,6 +1105,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1124,6 +1145,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1163,6 +1185,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -1209,6 +1232,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -1264,6 +1288,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
class="ant-collapse-item ant-collapse-no-arrow"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"

4
components/collapse/__tests__/__snapshots__/index.test.js.snap
View File

@ -8,6 +8,7 @@ exports[`Collapse could override default openMotion 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header"
role="button"
@ -64,6 +65,7 @@ exports[`Collapse should render extra node of panel 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -112,6 +114,7 @@ exports[`Collapse should render extra node of panel 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -167,6 +170,7 @@ exports[`Collapse should support remove expandIcon 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"

27
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -12073,13 +12073,14 @@ exports[`ConfigProvider components Checkbox configProvider componentDisabled 1`]
class="config-checkbox-group"
>
<label
class="config-checkbox-wrapper"
class="config-checkbox-wrapper config-checkbox-wrapper-disabled"
>
<span
class="config-checkbox"
class="config-checkbox config-checkbox-disabled"
>
<input
class="config-checkbox-input"
disabled=""
type="checkbox"
/>
<span
@ -12226,6 +12227,7 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `
class="config-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="config-collapse-header"
role="button"
@ -12272,6 +12274,7 @@ exports[`ConfigProvider components Collapse configProvider componentDisabled 1`]
class="config-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="config-collapse-header"
role="button"
@ -12318,6 +12321,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize large 1
class="config-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="config-collapse-header"
role="button"
@ -12364,6 +12368,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize middle
class="config-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="config-collapse-header"
role="button"
@ -12410,6 +12415,7 @@ exports[`ConfigProvider components Collapse configProvider virtual and dropdownM
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -12456,6 +12462,7 @@ exports[`ConfigProvider components Collapse normal 1`] = `
class="ant-collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="ant-collapse-header"
role="button"
@ -12502,6 +12509,7 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = `
class="prefix-Collapse-item"
>
<div
aria-disabled="false"
aria-expanded="false"
class="prefix-Collapse-header"
role="button"
@ -27100,13 +27108,14 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
class="config-dropdown-menu-title-content"
>
<label
class="config-checkbox-wrapper"
class="config-checkbox-wrapper config-checkbox-wrapper-disabled"
>
<span
class="config-checkbox"
class="config-checkbox config-checkbox-disabled"
>
<input
class="config-checkbox-input"
disabled=""
type="checkbox"
/>
<span
@ -38642,13 +38651,14 @@ exports[`ConfigProvider components Transfer configProvider componentDisabled 1`]
class="config-transfer-list-header"
>
<label
class="config-checkbox-wrapper config-transfer-list-checkbox"
class="config-checkbox-wrapper config-checkbox-wrapper-disabled config-transfer-list-checkbox"
>
<span
class="config-checkbox"
class="config-checkbox config-checkbox-disabled"
>
<input
class="config-checkbox-input"
disabled=""
type="checkbox"
/>
<span
@ -38799,13 +38809,14 @@ exports[`ConfigProvider components Transfer configProvider componentDisabled 1`]
class="config-transfer-list-header"
>
<label
class="config-checkbox-wrapper config-transfer-list-checkbox"
class="config-checkbox-wrapper config-checkbox-wrapper-disabled config-transfer-list-checkbox"
>
<span
class="config-checkbox"
class="config-checkbox config-checkbox-disabled"
>
<input
class="config-checkbox-input"
disabled=""
type="checkbox"
/>
<span

1
components/date-picker/style/index.less
View File

@ -366,3 +366,4 @@
//
//@import './panel';
//@import './rtl';
//>>>>>>> master

1
components/date-picker/style/index.tsx
View File

@ -1131,7 +1131,6 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
width: token.sizePopupArrow,
height: token.sizePopupArrow,
marginInlineStart: token.inputPaddingHorizontal * 1.5,
background: `linear-gradient(135deg, transparent 40%, ${token.colorBgContainer} 40%)`, // Use linear-gradient to prevent arrow from covering text
boxShadow: token.boxShadowPopoverArrowBottom,
transition: `left ${token.motionDurationSlow} ease-out`,
...roundedArrow(token.sizePopupArrow, 5, token.colorBgElevated),

2
components/dropdown/style/index.tsx
View File

@ -125,8 +125,6 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
display: 'block',
width: sizePopupArrow,
height: sizePopupArrow,
// Use linear-gradient to prevent arrow from covering text
background: `linear-gradient(135deg, transparent 40%, ${colorBgElevated} 40%)`,
...roundedArrow(sizePopupArrow, 5, colorBgElevated),
},

5
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1846,14 +1846,15 @@ exports[`renders ./components/form/demo/disabled.md extend context correctly 1`]
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox ant-checkbox-checked"
class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
>
<input
checked=""
class="ant-checkbox-input"
disabled=""
id="disabled"
type="checkbox"
/>

5
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1402,14 +1402,15 @@ exports[`renders ./components/form/demo/disabled.md correctly 1`] = `
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox ant-checkbox-checked"
class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
>
<input
checked=""
class="ant-checkbox-input"
disabled=""
id="disabled"
type="checkbox"
/>

821
components/form/__tests__/__snapshots__/index.test.js.snap
View File

@ -113,13 +113,14 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox"
class="ant-checkbox ant-checkbox-disabled"
>
<input
class="ant-checkbox-input"
disabled=""
id="disabled"
type="checkbox"
value=""
@ -162,13 +163,14 @@ exports[`Form form should support disabled 1`] = `
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
class="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
class="ant-radio ant-radio-disabled"
>
<input
class="ant-radio-input"
disabled=""
type="radio"
value="apple"
/>
@ -181,13 +183,14 @@ exports[`Form form should support disabled 1`] = `
</span>
</label>
<label
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
class="ant-radio-wrapper ant-radio-wrapper-disabled ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
class="ant-radio ant-radio-disabled"
>
<input
class="ant-radio-input"
disabled=""
type="radio"
value="pear"
/>
@ -227,7 +230,8 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
class="ant-input ant-input-disabled"
disabled=""
type="text"
value=""
/>
@ -258,7 +262,7 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -270,10 +274,12 @@ exports[`Form form should support disabled 1`] = `
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
@ -341,7 +347,7 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -352,10 +358,12 @@ exports[`Form form should support disabled 1`] = `
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
@ -423,7 +431,7 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-disabled"
>
<div
class="ant-select-selector"
@ -434,10 +442,12 @@ exports[`Form form should support disabled 1`] = `
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
@ -505,13 +515,14 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-picker"
class="ant-picker ant-picker-disabled"
>
<div
class="ant-picker-input"
>
<input
autocomplete="off"
disabled=""
placeholder="Select date"
readonly=""
size="12"
@ -570,13 +581,14 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-picker ant-picker-range"
class="ant-picker ant-picker-range ant-picker-disabled"
>
<div
class="ant-picker-input ant-picker-input-active"
>
<input
autocomplete="off"
disabled=""
placeholder="Start date"
readonly=""
size="12"
@ -616,6 +628,7 @@ exports[`Form form should support disabled 1`] = `
>
<input
autocomplete="off"
disabled=""
placeholder="End date"
readonly=""
size="12"
@ -677,7 +690,7 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number ant-input-number-in-form-item"
class="ant-input-number ant-input-number-in-form-item ant-input-number-disabled"
>
<div
class="ant-input-number-handler-wrap"
@ -743,6 +756,7 @@ exports[`Form form should support disabled 1`] = `
<input
autocomplete="off"
class="ant-input-number-input"
disabled=""
role="spinbutton"
step="1"
value=""
@ -776,7 +790,8 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<textarea
class="ant-input"
class="ant-input ant-input-disabled"
disabled=""
rows="4"
/>
</div>
@ -807,781 +822,8 @@ exports[`Form form should support disabled 1`] = `
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
</button>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="Button"
>
Button
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Button
</span>
</button>
</div>
</div>
</div>
</div>
</form>
`;
exports[`Form form should support disabled 2`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-row ant-form-item ant-form-item-has-success"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
for="disabled"
title="Form disabled"
>
Form disabled
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
>
<span
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
id="disabled"
type="checkbox"
value=""
/>
<span
class="ant-checkbox-inner"
/>
</span>
<span>
disabled
</span>
</label>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="Radio"
>
Radio
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-radio-group ant-radio-group-outline"
>
<label
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="apple"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
Apple
</span>
</label>
<label
class="ant-radio-wrapper ant-radio-wrapper-in-form-item"
>
<span
class="ant-radio"
>
<input
class="ant-radio-input"
type="radio"
value="pear"
/>
<span
class="ant-radio-inner"
/>
</span>
<span>
Pear
</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="Input"
>
Input
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
class="ant-input"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="Select"
>
Select
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="TreeSelect"
>
TreeSelect
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-tree-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="Cascader"
>
Cascader
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="DatePicker"
>
DatePicker
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-picker"
>
<div
class="ant-picker-input"
>
<input
autocomplete="off"
placeholder="Select date"
readonly=""
size="12"
title=""
value=""
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="RangePicker"
>
RangePicker
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-picker ant-picker-range"
>
<div
class="ant-picker-input ant-picker-input-active"
>
<input
autocomplete="off"
placeholder="Start date"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
<span
aria-label="swap-right"
class="anticon anticon-swap-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="swap-right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-picker-input"
>
<input
autocomplete="off"
placeholder="End date"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-active-bar"
style="left: 0px; width: 0px; position: absolute;"
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="InputNumber"
>
InputNumber
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-input-number ant-input-number-in-form-item"
>
<div
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up"
role="button"
unselectable="on"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
autocomplete="off"
class="ant-input-number-input"
role="spinbutton"
step="1"
value=""
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="TextArea"
>
TextArea
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<textarea
class="ant-input"
rows="4"
/>
</div>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
>
<label
class=""
title="Switch"
>
Switch
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<button
aria-checked="false"
class="ant-switch"
class="ant-switch ant-switch-disabled"
disabled=""
role="switch"
type="button"
>
@ -1620,6 +862,7 @@ exports[`Form form should support disabled 2`] = `
>
<button
class="ant-btn ant-btn-default"
disabled=""
type="button"
>
<span>

149
components/form/__tests__/index.test.js
View File

@ -886,93 +886,76 @@ describe('Form', () => {
});
it('form should support disabled', () => {
const App = () => {
const [componentDisabled, setComponentDisabled] = React.useState(false);
const onFormLayoutChange = ({ disabled }) => {
setComponentDisabled(disabled);
};
return (
<Form
labelCol={{ span: 4 }}
wrapperCol={{ span: 14 }}
layout="horizontal"
initialValues={{ disabled: componentDisabled }}
onValuesChange={onFormLayoutChange}
disabled={componentDisabled}
>
<Form.Item label="Form disabled" name="disabled" valuePropName="checked">
<Checkbox>disabled</Checkbox>
</Form.Item>
<Form.Item label="Radio">
<Radio.Group>
<Radio value="apple"> Apple </Radio>
<Radio value="pear"> Pear </Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="Input">
<Input />
</Form.Item>
<Form.Item label="Select">
<Select>
<Select.Option value="demo">Demo</Select.Option>
</Select>
</Form.Item>
<Form.Item label="TreeSelect">
<TreeSelect
treeData={[
{
title: 'Light',
value: 'light',
children: [{ title: 'Bamboo', value: 'bamboo' }],
},
]}
/>
</Form.Item>
<Form.Item label="Cascader">
<Cascader
options={[
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
},
],
},
]}
/>
</Form.Item>
<Form.Item label="DatePicker">
<DatePicker />
</Form.Item>
<Form.Item label="RangePicker">
<RangePicker />
</Form.Item>
<Form.Item label="InputNumber">
<InputNumber />
</Form.Item>
<Form.Item label="TextArea">
<TextArea rows={4} />
</Form.Item>
<Form.Item label="Switch" valuePropName="checked">
<Switch />
</Form.Item>
<Form.Item label="Button">
<Button>Button</Button>
</Form.Item>
</Form>
);
};
const App = () => (
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" disabled>
<Form.Item label="Form disabled" name="disabled" valuePropName="checked">
<Checkbox>disabled</Checkbox>
</Form.Item>
<Form.Item label="Radio">
<Radio.Group>
<Radio value="apple"> Apple </Radio>
<Radio value="pear"> Pear </Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="Input">
<Input />
</Form.Item>
<Form.Item label="Select">
<Select>
<Select.Option value="demo">Demo</Select.Option>
</Select>
</Form.Item>
<Form.Item label="TreeSelect">
<TreeSelect
treeData={[
{
title: 'Light',
value: 'light',
children: [{ title: 'Bamboo', value: 'bamboo' }],
},
]}
/>
</Form.Item>
<Form.Item label="Cascader">
<Cascader
options={[
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
},
],
},
]}
/>
</Form.Item>
<Form.Item label="DatePicker">
<DatePicker />
</Form.Item>
<Form.Item label="RangePicker">
<RangePicker />
</Form.Item>
<Form.Item label="InputNumber">
<InputNumber />
</Form.Item>
<Form.Item label="TextArea">
<TextArea rows={4} />
</Form.Item>
<Form.Item label="Switch" valuePropName="checked">
<Switch />
</Form.Item>
<Form.Item label="Button">
<Button>Button</Button>
</Form.Item>
</Form>
);
const wrapper = mount(<App />);
expect(wrapper.render()).toMatchSnapshot();
act(() => {
wrapper.find('.ant-checkbox-input').at(0).simulate('change');
});
expect(wrapper.render()).toMatchSnapshot();
});
it('_internalItemRender api test', () => {

2
components/layout/__tests__/__snapshots__/index.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Layout renders string width correctly 1`] = `
<aside
class="ant-layout-sider ant-layout-sider-dark"
style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
>
<div
class="ant-layout-sider-children"

26
components/layout/__tests__/dynamic-breakpoint.test.tsx
View File

@ -1,6 +1,6 @@
import { mount } from 'enzyme';
import React, { useState } from 'react';
import Sider from '../Sider';
import { render, fireEvent } from '../../../tests/utils';
const Content = () => {
const [breakpoint, setBreakpoint] = useState('sm');
@ -23,25 +23,27 @@ const Content = () => {
it('Dynamic breakpoint in Sider component', () => {
const add = jest.fn();
const remove = jest.fn();
jest.spyOn(window, 'matchMedia').mockReturnValue({
const newMatch = jest.spyOn(window, 'matchMedia').mockReturnValue({
matches: true,
addEventListener: add,
removeEventListener: remove,
} as any);
const wrapper = mount(<Content />);
const newMatch = window.matchMedia as jest.Mock;
const { container } = render(<Content />);
// Record here since React 18 strict mode will render twice at first mount
const originCallTimes = newMatch.mock.calls.length;
expect(originCallTimes <= 2).toBeTruthy();
// subscribe at first
expect(newMatch.mock.calls.length).toBe(1);
expect(add.mock.calls.length).toBe(1);
expect(remove.mock.calls.length).toBe(0);
expect(add.mock.calls).toHaveLength(originCallTimes);
expect(remove.mock.calls).toHaveLength(originCallTimes - 1);
wrapper.find('#toggle').at(0).simulate('click');
// unsubscribe then subscribe again
expect(newMatch.mock.calls.length).toBe(2);
expect(add.mock.calls.length).toBe(2);
expect(remove.mock.calls.length).toBe(1);
fireEvent.click(container.querySelector('#toggle') as Element);
expect(newMatch.mock.calls).toHaveLength(originCallTimes + 1);
expect(add.mock.calls).toHaveLength(originCallTimes + 1);
expect(remove.mock.calls).toHaveLength(originCallTimes);
jest.restoreAllMocks();
});

156
components/layout/__tests__/index.test.js
View File

@ -1,10 +1,11 @@
import { mount, render } from 'enzyme';
import React, { useState } from 'react';
import { act } from 'react-dom/test-utils';
import Layout from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import Icon from '../../icon';
import Menu from '../../menu';
import { fireEvent, render } from '../../../tests/utils';
const { Sider, Content, Footer, Header } = Layout;
@ -24,14 +25,16 @@ describe('Layout', () => {
rtlTest(Sider);
it('detect the sider as children', () => {
const wrapper = mount(
const { container, unmount } = render(
<Layout>
<Sider>Sider</Sider>
<Content>Content</Content>
</Layout>,
);
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
wrapper.unmount();
expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
true,
);
unmount();
});
it('umount from multiple siders', async () => {
@ -53,16 +56,22 @@ describe('Layout', () => {
</Layout>
);
};
const wrapper = mount(<App />);
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
wrapper.find('button').at(0).simulate('click');
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
wrapper.find('button').at(1).simulate('click');
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(false);
const { container } = render(<App />);
expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
true,
);
fireEvent.click(container.querySelectorAll('button')[0]);
expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
true,
);
fireEvent.click(container.querySelectorAll('button')[1]);
expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
false,
);
});
it('detect the sider inside the children', async () => {
const wrapper = mount(
const { container } = render(
<Layout>
<div>
<Sider>Sider</Sider>
@ -70,11 +79,13 @@ describe('Layout', () => {
<Content>Content</Content>
</Layout>,
);
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(true);
expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
true,
);
});
it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', async () => {
const wrapper = mount(
const { container } = render(
<Layout>
<div>
<Sider collapsible>Sider</Sider>
@ -82,11 +93,15 @@ describe('Layout', () => {
<Content>Content</Content>
</Layout>,
);
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-has-trigger')).toBe(true);
expect(
container
.querySelector('.ant-layout-sider')
.className.includes('ant-layout-sider-has-trigger'),
).toBe(true);
});
it('should have 50% width of sidebar', async () => {
const wrapper = mount(
const { container } = render(
<Layout>
<div>
<Sider width="50%">Sider</Sider>
@ -94,13 +109,13 @@ describe('Layout', () => {
<Content>Content</Content>
</Layout>,
);
expect(wrapper.find('.ant-layout-sider').at(0).prop('style').width).toBe('50%');
expect(wrapper.find('.ant-layout-sider').at(0).prop('style').flex).toBe('0 0 50%');
expect(container.querySelector('.ant-layout-sider').style.width).toBe('50%');
expect(container.querySelector('.ant-layout-sider').style.flex).toBe('0 0 50%');
});
describe('zeroWidth', () => {
it('detect ant-layout-sider-zero-width class in sider when its width is 0%', async () => {
const wrapper = mount(
const { container } = render(
<Layout>
<div>
<Sider width="0%">Sider</Sider>
@ -108,14 +123,18 @@ describe('Layout', () => {
<Content>Content</Content>
</Layout>,
);
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-zero-width')).toBe(true);
expect(
container
.querySelector('.ant-layout-sider')
.className.includes('ant-layout-sider-zero-width'),
).toBe(true);
});
describe('should collapsible', () => {
it('uncontrolled', () => {
const onCollapse = jest.fn();
const wrapper = mount(
const { container } = render(
<Layout>
<Sider collapsible breakpoint="lg" collapsedWidth="0" onCollapse={onCollapse}>
Sider
@ -125,8 +144,7 @@ describe('Layout', () => {
);
onCollapse.mockReset();
wrapper.find('.ant-layout-sider-zero-width-trigger').simulate('click');
fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger'));
expect(onCollapse).toHaveBeenCalledTimes(1);
});
@ -150,50 +168,54 @@ describe('Layout', () => {
);
};
const wrapper = mount(<Demo />);
expect(wrapper.find(Sider).prop('collapsed')).toBeTruthy();
wrapper.find('.ant-layout-sider-zero-width-trigger').simulate('click');
expect(wrapper.find(Sider).prop('collapsed')).toBeFalsy();
const { container } = render(<Demo />);
expect(container.querySelector('.ant-layout-sider-collapsed')).toBeTruthy();
fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger'));
expect(container.querySelector('.ant-layout-sider-collapsed')).toBeFalsy();
});
});
});
it('detect ant-layout-sider-dark as default theme', async () => {
const wrapper = mount(<Sider>Sider</Sider>);
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-dark')).toBe(true);
const { container } = render(<Sider>Sider</Sider>);
expect(
container.querySelector('.ant-layout-sider').className.includes('ant-layout-sider-dark'),
).toBe(true);
});
it('detect ant-layout-sider-light when set light theme', async () => {
const wrapper = mount(<Sider theme="light">Sider</Sider>);
expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-light')).toBe(true);
const { container } = render(<Sider theme="light">Sider</Sider>);
expect(
container.querySelector('.ant-layout-sider').className.includes('ant-layout-sider-light'),
).toBe(true);
});
it('renders string width correctly', () => {
const wrapper = render(<Sider width="200">Sider</Sider>);
expect(wrapper).toMatchSnapshot();
const { asFragment } = render(<Sider width="200">Sider</Sider>);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should be controlled by collapsed', () => {
const wrapper = mount(<Sider>Sider</Sider>);
expect(wrapper.render()).toMatchSnapshot();
wrapper.setProps({ collapsed: true });
wrapper.update();
expect(wrapper.render()).toMatchSnapshot();
const { asFragment, rerender } = render(<Sider>Sider</Sider>);
expect(asFragment().firstChild).toMatchSnapshot();
rerender(<Sider collapsed>Sider</Sider>);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should not add ant-layout-has-sider when `hasSider` is `false`', () => {
const wrapper = mount(
const { container } = render(
<Layout hasSider={false}>
<Sider>Sider</Sider>
</Layout>,
);
expect(wrapper.find('.ant-layout').hasClass('ant-layout-has-sider')).toBe(false);
expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
false,
);
});
it('render correct with Tooltip', () => {
jest.useFakeTimers();
const wrapper = mount(
const { container, rerender } = render(
<Sider collapsible collapsed={false}>
<Menu mode="inline">
<Menu.Item key="1">
@ -204,19 +226,27 @@ describe('Layout', () => {
</Sider>,
);
wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
wrapper.find('.ant-menu-item').hostNodes().simulate('mouseout');
jest.runAllTimers();
wrapper.update();
fireEvent.mouseEnter(container.querySelector('.ant-menu-item'));
act(() => {
jest.runAllTimers();
});
expect(container.querySelectorAll('.ant-tooltip-inner').length).toBeFalsy();
wrapper.setProps({ collapsed: true });
wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-inner').length).toBeTruthy();
rerender(
<Sider collapsible collapsed>
<Menu mode="inline">
<Menu.Item key="1">
<Icon type="user" />
<span>Light</span>
</Menu.Item>
</Menu>
</Sider>,
);
fireEvent.mouseEnter(container.querySelector('.ant-menu-item'));
act(() => {
jest.runAllTimers();
});
expect(container.querySelectorAll('.ant-tooltip-inner').length).toBeTruthy();
jest.useRealTimers();
});
@ -236,7 +266,7 @@ describe('Sider', () => {
it('should trigger onBreakpoint', async () => {
const onBreakpoint = jest.fn();
mount(
render(
<Sider breakpoint="md" onBreakpoint={onBreakpoint}>
Sider
</Sider>,
@ -245,7 +275,7 @@ describe('Sider', () => {
});
it('should warning if use `inlineCollapsed` with menu', () => {
mount(
render(
<Sider collapsible>
<Menu mode="inline" inlineCollapsed />
</Sider>,
@ -256,7 +286,7 @@ describe('Sider', () => {
});
it('zeroWidthTriggerStyle should work', () => {
const wrapper = mount(
const { container } = render(
<Sider collapsedWidth={0} collapsible zeroWidthTriggerStyle={{ background: '#F96' }}>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1">
@ -266,13 +296,13 @@ describe('Sider', () => {
</Menu>
</Sider>,
);
expect(wrapper.find('.ant-layout-sider-zero-width-trigger').props().style).toEqual({
background: '#F96',
});
expect(
container.querySelector('.ant-layout-sider-zero-width-trigger').style.background,
).toEqual('rgb(255, 153, 102)');
});
it('should be able to customize zero width trigger by trigger prop', () => {
const wrapper = mount(
const { container } = render(
<Sider collapsedWidth={0} collapsible trigger={<span className="my-trigger" />}>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1">
@ -282,7 +312,9 @@ describe('Sider', () => {
</Menu>
</Sider>,
);
expect(wrapper.find('.ant-layout-sider-zero-width-trigger').find('.my-trigger').length).toBe(1);
expect(
container.querySelector('.ant-layout-sider-zero-width-trigger').querySelector('.my-trigger'),
).toBeTruthy();
});
['Layout', 'Header', 'Footer', 'Sider'].forEach(tag => {
@ -292,7 +324,7 @@ describe('Sider', () => {
const onSelect = jest.fn();
const Component = ComponentMap[tag];
mount(
render(
<Component onSelect={onSelect} ref={ref}>
{tag}
</Component>,

7
components/select/style/single.less
View File

@ -25,13 +25,6 @@
padding: 0;
line-height: @select-height-without-border;
transition: all 0.3s;
// Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
@supports (-moz-appearance: meterbar) {
& {
line-height: @select-height-without-border;
}
}
}
.@{select-prefix-cls}-selection-item {

0
components/spin/__tests__/__snapshots__/index.test.js.snap → components/spin/__tests__/__snapshots__/index.test.tsx.snap
View File

27
components/spin/__tests__/delay.test.js → components/spin/__tests__/delay.test.tsx
View File

@ -1,4 +1,3 @@
import { mount } from 'enzyme';
import React from 'react';
// eslint-disable-next-line import/no-named-as-default
import { render } from '@testing-library/react';
@ -7,33 +6,41 @@ import Spin from '..';
import { sleep } from '../../../tests/utils';
jest.mock('lodash/debounce');
debounce.mockImplementation(jest.requireActual('lodash/debounce'));
(debounce as jest.Mock).mockImplementation((...args: any[]) =>
jest.requireActual('lodash/debounce')(...args),
);
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);
const { container } = render(<Spin spinning delay={500} />);
expect(container.querySelector('.ant-spin')?.classList.contains('ant-spin-spinning')).toEqual(
false,
);
});
it('should render when delay is init set', async () => {
const wrapper = mount(<Spin spinning delay={100} />);
const { container } = render(<Spin spinning delay={100} />);
expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
expect(container.querySelector('.ant-spin')?.classList.contains('ant-spin-spinning')).toEqual(
false,
);
// use await not jest.runAllTimers()
// because of https://github.com/facebook/jest/issues/3465
await sleep(500);
wrapper.update();
expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(true);
expect(container.querySelector('.ant-spin')?.classList.contains('ant-spin-spinning')).toEqual(
true,
);
});
it('should cancel debounce function when unmount', async () => {
const debouncedFn = jest.fn();
const cancel = jest.fn();
debouncedFn.cancel = cancel;
debounce.mockReturnValueOnce(debouncedFn);
(debouncedFn as any).cancel = cancel;
(debounce as jest.Mock).mockReturnValueOnce(debouncedFn);
const { unmount } = render(<Spin spinning delay={100} />);
expect(cancel).not.toHaveBeenCalled();
unmount();
expect(cancel).toHaveBeenCalled();

25
components/spin/__tests__/index.test.js → components/spin/__tests__/index.test.tsx
View File

@ -1,4 +1,3 @@
import { mount } from 'enzyme';
import React from 'react';
// eslint-disable-next-line import/no-named-as-default
import { render } from '@testing-library/react';
@ -11,19 +10,21 @@ describe('Spin', () => {
rtlTest(Spin);
it('should only affect the spin element when set style to a nested <Spin>xx</Spin>', () => {
const wrapper = mount(
const { container } = render(
<Spin style={{ background: 'red' }}>
<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((container.querySelector('.ant-spin-nested-loading')! as HTMLElement).style.length).toBe(
0,
);
expect((container.querySelector('.ant-spin')! as HTMLElement).style.background).toBe('red');
});
it("should render custom indicator when it's set", () => {
const customIndicator = <div className="custom-indicator" />;
const wrapper = mount(<Spin indicator={customIndicator} />);
expect(wrapper.render()).toMatchSnapshot();
const { asFragment } = render(<Spin indicator={customIndicator} />);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should be controlled by spinning', () => {
@ -34,19 +35,19 @@ describe('Spin', () => {
});
it('if indicator set null should not be render default indicator', () => {
const wrapper = mount(<Spin indicator={null} />);
expect(wrapper.render()).toMatchSnapshot();
const { asFragment } = render(<Spin indicator={null as any} />);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('should support static method Spin.setDefaultIndicator', () => {
Spin.setDefaultIndicator(<em className="custom-spinner" />);
const wrapper = mount(<Spin />);
expect(wrapper.render()).toMatchSnapshot();
const { asFragment } = render(<Spin />);
expect(asFragment().firstChild).toMatchSnapshot();
Spin.setDefaultIndicator(null);
});
it('should render 0', () => {
const wrapper = mount(<Spin>{0}</Spin>);
expect(wrapper.find('.ant-spin-container').at(0).text()).toBe('0');
const { container } = render(<Spin>{0}</Spin>);
expect(container.querySelector('.ant-spin-container')?.textContent).toBe('0');
});
});

5
components/style/core/iconfont.less
View File

@ -15,11 +15,8 @@
}
}
.@{iconfont-css-prefix}-spin,
.@{iconfont-css-prefix}-spin::before {
display: inline-block;
animation: loadingCircle 1s infinite linear;
}
.@{iconfont-css-prefix}-spin {
display: inline-block;
animation: loadingCircle 1s infinite linear;
}

6
components/style/mixins/compatibility.less
View File

@ -2,12 +2,6 @@
// Placeholder text
.placeholder(@color: @input-placeholder-color) {
// Firefox
/* stylelint-disable-next-line selector-no-vendor-prefix */
&::-moz-placeholder {
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
}
&::placeholder {
color: @color;
user-select: none; // https://github.com/ant-design/ant-design/pull/32639

1
components/style/mixins/modal-mask.less
View File

@ -26,6 +26,5 @@
.box(fixed);
overflow: auto;
outline: 0;
-webkit-overflow-scrolling: touch;
}
}

1
components/style/mixins/rounded-arrow.less
View File

@ -36,6 +36,7 @@
background-repeat: no-repeat;
background-position: ceil(-@width + 1px) ceil(-@width + 1px);
content: '';
clip-path: inset(33% 33%); // For browsers that do not support path()
clip-path: path(
'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} L @{g-x} @{g-y} L @{h-x} @{h-y} Z'
);

0
components/switch/__tests__/__snapshots__/demo.test.js.snap → components/switch/__tests__/__snapshots__/demo.test.ts.snap
View File

0
components/switch/__tests__/__snapshots__/index.test.js.snap → components/switch/__tests__/__snapshots__/index.test.tsx.snap
View File

0
components/switch/__tests__/demo.test.js → components/switch/__tests__/demo.test.ts
View File

12
components/switch/__tests__/index.test.js → components/switch/__tests__/index.test.tsx
View File

@ -1,10 +1,9 @@
import { mount } from 'enzyme';
import React from 'react';
import Switch from '..';
import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { sleep } from '../../../tests/utils';
import { sleep, fireEvent, render } from '../../../tests/utils';
import { resetWarned } from '../../_util/warning';
describe('Switch', () => {
@ -13,17 +12,18 @@ describe('Switch', () => {
rtlTest(Switch);
it('should has click wave effect', async () => {
const wrapper = mount(<Switch />);
wrapper.find('.ant-switch').getDOMNode().click();
const { container } = render(<Switch />);
fireEvent.click(container.querySelector('.ant-switch')!);
await sleep(0);
expect(wrapper.find('button').getDOMNode().getAttribute('ant-click-animating')).toBe('true');
expect(container.querySelector('button')!.getAttribute('ant-click-animating')).toBe('true');
});
it('warning if set `value`', () => {
resetWarned();
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(<Switch value />);
const props = { value: true } as any;
render(<Switch {...props} />);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`?',
);

27
components/switch/__tests__/wave.test.js
View File

@ -1,27 +0,0 @@
import { mount } from 'enzyme';
import React from 'react';
import Switch from '..';
import { sleep } from '../../../tests/utils';
describe('click wave effect', () => {
async function click(wrapper) {
wrapper.find('.ant-switch').getDOMNode().click();
wrapper.find('.ant-switch').getDOMNode().dispatchEvent(new Event('transitionstart'));
await sleep(20);
wrapper.find('.ant-switch').getDOMNode().dispatchEvent(new Event('animationend'));
await sleep(20);
}
it('should have click wave effect', async () => {
const wrapper = mount(<Switch />);
await click(wrapper);
const waveInstance = wrapper.find('InternalWave').instance();
const resetEffect = jest.spyOn(waveInstance, 'resetEffect');
await click(wrapper);
expect(resetEffect).toHaveBeenCalledTimes(1);
const event = new Event('animationend');
Object.assign(event, { animationName: 'fadeEffect' });
wrapper.find('.ant-switch').getDOMNode().dispatchEvent(event);
resetEffect.mockRestore();
});
});

27
components/switch/__tests__/wave.test.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import Switch from '..';
import { sleep, render, fireEvent } from '../../../tests/utils';
describe('click wave effect', () => {
async function click(container: HTMLElement) {
fireEvent.click(container.querySelector('.ant-switch')!);
container.querySelector('.ant-switch')!.dispatchEvent(new Event('transitionstart'));
await sleep(20);
container.querySelector('.ant-switch')!.dispatchEvent(new Event('animationend'));
await sleep(20);
}
it('should have click wave effect', async () => {
const { container } = render(<Switch />);
await click(container);
await click(container);
expect(
container.querySelector('.ant-switch')!.getAttribute('ant-switch-click-animating'),
).toBeFalsy();
const event = new Event('animationend');
Object.assign(event, { animationName: 'fadeEffect' });
container.querySelector('.ant-switch')!.dispatchEvent(event);
});
});

7
components/switch/index.tsx
View File

@ -12,7 +12,10 @@ import Wave from '../_util/wave';
import useStyle from './style';
export type SwitchSize = 'small' | 'default';
export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
export type SwitchChangeEventHandler = (
checked: boolean,
event: React.MouseEvent<HTMLButtonElement>,
) => void;
export type SwitchClickEventHandler = SwitchChangeEventHandler;
export interface SwitchProps {
@ -39,7 +42,7 @@ interface CompoundedComponent
__ANT_SWITCH: boolean;
}
const Switch = React.forwardRef<unknown, SwitchProps>(
const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
(
{
prefixCls: customizePrefixCls,

7
components/theme/util/placementArrow.tsx
View File

@ -11,7 +11,6 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
token: Token,
colorBg: string,
showArrowCls?: string,
linearGradient: boolean = true,
): CSSInterpolation {
const { componentCls, sizePopupArrow, marginXXS } = token;
@ -22,12 +21,6 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
[componentCls]: {
// ============================ Basic ============================
[`${componentCls}-arrow`]: [
linearGradient
? {
// Use linear-gradient to prevent arrow from covering text
background: `linear-gradient(135deg, transparent 49%, ${colorBg} 50%)`,
}
: {},
{
position: 'absolute',
zIndex: 1, // lift it up so the menu wouldn't cask shadow on it

2
components/tooltip/style/index.tsx
View File

@ -106,7 +106,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
},
// Arrow Style
getArrowStyle(token, 'var(--antd-arrow-background-color)', '', false),
getArrowStyle(token, 'var(--antd-arrow-background-color)', ''),
];
};

2
typings/custom-typings.d.ts vendored
View File

@ -24,8 +24,6 @@ declare module 'rc-checkbox';
declare module 'rc-rate';
declare module 'rc-switch';
declare module '*.json' {
const value: any;
export const version: string;