Skip to content

fix(Message): fix zIndex property #4077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TidySongS wants to merge 1 commit into
base: develop
Choose a base branch
from
+17 −6
Open

fix(Message): fix zIndex property #4077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions packages/components/message/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,15 @@ export interface MessagePlugin {

interface MessageContainerProps {
placement?: MessagePlacementList;
zIndex?: number;
children?: React.ReactNode;
}

interface ContainerInstance {
container: HTMLDivElement;
messages: MessageItem[];
placement: MessagePlacementList;
zIndex?: number;
}

interface MessageItem extends MessageInstance {
Expand All @@ -66,7 +68,7 @@ let messageKey = 1;
const MessageContainerMaps: Map<HTMLElement, Map<MessagePlacementList, ContainerInstance>> = new Map();

const MessageContainer: React.FC<MessageContainerProps> = (props) => {
const { placement, children } = props;
const { placement, children, zIndex } = props;

const ref = useRef<HTMLDivElement>(null);

Expand All @@ -77,6 +79,10 @@ const MessageContainer: React.FC<MessageContainerProps> = (props) => {
if (placement.includes('top')) {
style.top = `${globalConfig.top}px`;
}
// 允许自定义消息列表的层级，默认使用全局配置值
if (typeof zIndex !== 'undefined') {
style.zIndex = zIndex;
}

const { tdMessagePlacementClassGenerator, tdMessageListClass } = useMessageClass();

Expand All @@ -98,13 +104,13 @@ function getAttachNodeMap(attachNode: HTMLElement) {
return MessageContainerMaps.get(attachNode);
}

function createContainer(placement: MessagePlacementList, attachNode: HTMLElement): HTMLDivElement {
function createContainer(placement: MessagePlacementList, attachNode: HTMLElement, zIndex?: number): HTMLDivElement {
const mGlobalConfig = ConfigProvider.getGlobalConfig();
const containerWrapper = document.createElement('div');
attachNode.appendChild(containerWrapper);
render(
<PluginContainer globalConfig={mGlobalConfig}>
<MessageContainer placement={placement} />
<MessageContainer placement={placement} zIndex={zIndex} />
</PluginContainer>,
containerWrapper,
);
Expand All @@ -115,7 +121,7 @@ function renderContainer(containerInstance: ContainerInstance) {
const mGlobalConfig = ConfigProvider.getGlobalConfig();
render(
<PluginContainer globalConfig={mGlobalConfig}>
<MessageContainer placement={containerInstance.placement}>
<MessageContainer placement={containerInstance.placement} zIndex={containerInstance.zIndex}>
{containerInstance.messages.map((item) => (
<MessageComponent key={item.key} ref={item.ref} {...item.config} theme={item.theme} />
))}
Expand Down Expand Up @@ -146,19 +152,23 @@ function destroyContainer(containerInstance: ContainerInstance, attachNode: HTML
}

function renderElement(theme: MessageThemeList, config: MessageOptions): MessageInstance {
const { attach, placement = 'top' } = config;
const { attach, placement = 'top', zIndex } = config;
const attachNode = getAttach(attach);
const attachNodeMap = getAttachNodeMap(attachNode);

let containerInstance = attachNodeMap.get(placement);
if (!containerInstance) {
const container = createContainer(placement, attachNode);
const container = createContainer(placement, attachNode, zIndex);
containerInstance = {
container,
messages: [],
placement,
zIndex,
};
attachNodeMap.set(placement, containerInstance);
} else if (typeof zIndex !== 'undefined') {
// 已有容器也需要更新层级，保持后续调用一致
containerInstance.zIndex = zIndex;
}

let style: React.CSSProperties = { ...config.style };
Expand Down
1 change: 1 addition & 0 deletions packages/components/message/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ let messageDefaultConfig: MessageOptions = {
...messageDefaultProps,
duration: 3000,
placement: 'top',
zIndex: 5000
};

/**
Expand Down
Loading