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

feat: Popconfirm support z-index manager (#45421)

Browse Source 
* feat: Popconfirm support z-index manager

* Update components/popconfirm/__tests__/index.test.tsx

Signed-off-by: kiner-tang(文辉) <1127031143@qq.com>

---------

Signed-off-by: kiner-tang(文辉) <1127031143@qq.com>
This commit is contained in:
kiner-tang(文辉) 2023-10-20 01:53:15 -05:00 committed by GitHub
parent bff04cdbfc
commit 0fd730a107
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/popconfirm/__tests__/index.test.tsx
View File

@ -5,6 +5,7 @@ import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import Button from '../../button';
import { Select } from 'antd';
describe('Popconfirm', () => {
mountTest(Popconfirm);
@ -322,4 +323,32 @@ describe('Popconfirm', () => {
expect(onOpenChange).toHaveBeenCalledTimes(1);
expect(onVisibleChange).toHaveBeenCalledTimes(1);
});
it('z-index should be accumulated in nested Popconfirm', () => {
const options = [
{
label: 'Option 1',
value: '1',
},
{
label: 'Option 2',
value: '2',
},
];
render(
<>
<Select open options={options} popupClassName="select0" />
<Popconfirm open title="test1" rootClassName="test1">
<Select open options={options} popupClassName="select1" />
<Popconfirm open title="test2" rootClassName="test2">
<Select open options={options} popupClassName="select2" />
</Popconfirm>
</Popconfirm>
</>,
);
expect((document.querySelector('.test1') as HTMLDivElement)!.style.zIndex).toBeFalsy();
expect((document.querySelector('.test2') as HTMLDivElement)!.style.zIndex).toBe('2120');
expect((document.querySelector('.select0') as HTMLDivElement)!.style.zIndex).toBeFalsy();
expect((document.querySelector('.select1') as HTMLDivElement)!.style.zIndex).toBe('1110');
expect((document.querySelector('.select2') as HTMLDivElement)!.style.zIndex).toBe('2170');
});
});

73
components/popconfirm/index.tsx
View File

@ -1,11 +1,14 @@
import * as React from 'react';
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import classNames from 'classnames';
import KeyCode from 'rc-util/lib/KeyCode';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import KeyCode from 'rc-util/lib/KeyCode';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import type { RenderFunction } from '../_util/getRenderPropValue';
import { useZIndex } from '../_util/hooks/useZIndex';
import { cloneElement } from '../_util/reactNode';
import zIndexContext from '../_util/zindexContext';
import type { ButtonProps, LegacyButtonType } from '../button/button';
import { ConfigContext } from '../config-provider';
import Popover from '../popover';
@ -96,37 +99,43 @@ const Popconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props, ref) =>
const [wrapSSR] = usePopconfirmStyle(prefixCls);
// ============================ zIndex ============================
const [zIndex, contextZIndex] = useZIndex('Popconfirm', props.zIndex);
return wrapSSR(
<Popover
{...omit(restProps, ['title'])}
trigger={trigger}
placement={placement}
onOpenChange={onInternalOpenChange}
open={open}
ref={ref}
overlayClassName={overlayClassNames}
content={
<Overlay
okType={okType}
icon={icon}
{...props}
prefixCls={prefixCls}
close={close}
onConfirm={onConfirm}
onCancel={onCancel}
/>
}
data-popover-inject
>
{cloneElement(children, {
onKeyDown: (e: React.KeyboardEvent<any>) => {
if (React.isValidElement(children)) {
children?.props.onKeyDown?.(e);
}
onKeyDown(e);
},
})}
</Popover>,
<zIndexContext.Provider value={contextZIndex}>
<Popover
{...omit(restProps, ['title'])}
zIndex={zIndex}
trigger={trigger}
placement={placement}
onOpenChange={onInternalOpenChange}
open={open}
ref={ref}
overlayClassName={overlayClassNames}
content={
<Overlay
okType={okType}
icon={icon}
{...props}
prefixCls={prefixCls}
close={close}
onConfirm={onConfirm}
onCancel={onCancel}
/>
}
data-popover-inject
>
{cloneElement(children, {
onKeyDown: (e: React.KeyboardEvent<any>) => {
if (React.isValidElement(children)) {
children?.props.onKeyDown?.(e);
}
onKeyDown(e);
},
})}
</Popover>
</zIndexContext.Provider>,
);
}) as React.ForwardRefExoticComponent<
React.PropsWithoutRef<PopconfirmProps> & React.RefAttributes<unknown>