mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
fix: Fixed an issue where the z-index setting of the pop-up component was abnormal in the pop-up container (#45864)
* fix: Fixed an issue where the z-index setting of the pop-up component was abnormal in the pop-up container * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * Update components/popconfirm/index.tsx Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com>
This commit is contained in:
kiner-tang(文辉)
GitHub
parent
a5649f1695
commit
2777d2c39f
@ -150,6 +150,7 @@ const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string
|
||||
options={options}
|
||||
open
|
||||
/>
|
||||
<ColorPicker {...props} open rootClassName={`${rootClassName} comp-item comp-ColorPicker`} />
|
||||
</>
|
||||
),
|
||||
Dropdown: (props) => (
|
||||
@ -166,7 +167,6 @@ const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string
|
||||
<button type="button">test</button>
|
||||
</Dropdown>
|
||||
),
|
||||
ColorPicker: (props) => <ColorPicker {...props} open />,
|
||||
DatePicker: ({ rootClassName, ...props }) => (
|
||||
<>
|
||||
<DatePicker {...props} rootClassName={`${rootClassName} comp-item comp-DatePicker`} open />
|
||||
@ -183,8 +183,12 @@ const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string
|
||||
function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): string {
|
||||
let selector = baseSelector;
|
||||
if (consumer === 'SelectLike') {
|
||||
selector = ['Select', 'Cascader', 'TreeSelect', 'AutoComplete']
|
||||
.map((item) => `${baseSelector}.comp-${item}.ant-slide-up`)
|
||||
selector = ['Select', 'Cascader', 'TreeSelect', 'AutoComplete', 'ColorPicker']
|
||||
.map((item) =>
|
||||
item === 'ColorPicker'
|
||||
? `${baseSelector}.ant-popover-placement-bottomLeft`
|
||||
: `${baseSelector}.comp-${item}.ant-slide-up`,
|
||||
)
|
||||
.join(',');
|
||||
} else if (consumer === 'DatePicker') {
|
||||
selector = ['DatePicker', 'TimePicker']
|
||||
@ -192,8 +196,6 @@ function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): st
|
||||
.join(',');
|
||||
} else if (['Menu'].includes(consumer)) {
|
||||
selector = `${baseSelector}.ant-menu-submenu-placement-rightTop`;
|
||||
} else if (consumer === 'ColorPicker') {
|
||||
selector = `${baseSelector}.ant-popover-placement-bottomLeft`;
|
||||
}
|
||||
return selector;
|
||||
}
|
||||
@ -268,21 +270,29 @@ describe('Test useZIndex hooks', () => {
|
||||
});
|
||||
comps = document.querySelectorAll(selector2);
|
||||
comps.forEach((comp) => {
|
||||
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
|
||||
const consumerOffset = isColorPicker
|
||||
? 1000 + containerBaseZIndexOffset.Popover
|
||||
: consumerBaseZIndexOffset[key as ZIndexConsumer];
|
||||
expect((comp as HTMLDivElement).style.zIndex).toBe(
|
||||
String(
|
||||
1000 +
|
||||
containerBaseZIndexOffset[containerKey as ZIndexContainer] +
|
||||
consumerBaseZIndexOffset[key as ZIndexConsumer],
|
||||
consumerOffset,
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
comps = document.querySelectorAll(selector3);
|
||||
comps.forEach((comp) => {
|
||||
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
|
||||
const consumerOffset = isColorPicker
|
||||
? 1000 + containerBaseZIndexOffset.Popover
|
||||
: consumerBaseZIndexOffset[key as ZIndexConsumer];
|
||||
expect((comp as HTMLDivElement).style.zIndex).toBe(
|
||||
String(
|
||||
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 +
|
||||
consumerBaseZIndexOffset[key as ZIndexConsumer],
|
||||
consumerOffset,
|
||||
),
|
||||
);
|
||||
});
|
||||
@ -296,6 +306,7 @@ describe('Test useZIndex hooks', () => {
|
||||
(document.querySelector(selector1) as HTMLDivElement).style.zIndex,
|
||||
).toBeFalsy();
|
||||
}
|
||||
|
||||
expect((document.querySelector(selector2) as HTMLDivElement).style.zIndex).toBe(
|
||||
String(
|
||||
1000 +
|
||||
|
||||
@ -5,7 +5,7 @@ import zIndexContext from '../zindexContext';
|
||||
|
||||
export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'Tooltip' | 'Tour';
|
||||
|
||||
export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'ColorPicker' | 'DatePicker' | 'Menu';
|
||||
export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu';
|
||||
|
||||
export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
|
||||
Modal: 0,
|
||||
@ -18,7 +18,6 @@ export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
|
||||
export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
|
||||
SelectLike: 50,
|
||||
Dropdown: 50,
|
||||
ColorPicker: 30,
|
||||
DatePicker: 50,
|
||||
Menu: 50,
|
||||
};
|
||||
|
||||
@ -32,7 +32,6 @@ import type {
|
||||
} from './interface';
|
||||
import useStyle from './style/index';
|
||||
import { customizePrefixCls, genAlphaColor, generateColor, getAlphaColor } from './util';
|
||||
import { useZIndex } from '../_util/hooks/useZIndex';
|
||||
|
||||
export type ColorPickerProps = Omit<
|
||||
RcColorPickerProps,
|
||||
@ -232,7 +231,6 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
const mergedStyle: React.CSSProperties = { ...colorPicker?.style, ...style };
|
||||
|
||||
// ============================ zIndex ============================
|
||||
const [zIndex] = useZIndex('ColorPicker');
|
||||
|
||||
return wrapSSR(
|
||||
<Popover
|
||||
@ -254,7 +252,6 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
</NoFormStyle>
|
||||
}
|
||||
overlayClassName={mergePopupCls}
|
||||
zIndex={zIndex}
|
||||
{...popoverProps}
|
||||
>
|
||||
{children || (
|
||||
|
||||
@ -813,7 +813,7 @@ Array [
|
||||
</button>,
|
||||
<div
|
||||
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
|
||||
>
|
||||
<div
|
||||
class="ant-popover-arrow"
|
||||
|
||||
@ -50,8 +50,6 @@ const Popover = React.forwardRef<TooltipRef, PopoverProps>((props, ref) => {
|
||||
|
||||
const overlayCls = classNames(overlayClassName, hashId);
|
||||
|
||||
// ============================ zIndex ============================
|
||||
|
||||
return wrapSSR(
|
||||
<Tooltip
|
||||
placement={placement}
|
||||
|
||||
@ -300,7 +300,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
|
||||
const content = (
|
||||
<RcTooltip
|
||||
{...otherProps}
|
||||
zIndex={injectFromPopover ? otherProps.zIndex : zIndex}
|
||||
zIndex={zIndex}
|
||||
showArrow={mergedShowArrow}
|
||||
placement={placement}
|
||||
mouseEnterDelay={mouseEnterDelay}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user