Skip to content
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

Jump to bottom

fix(popup): popup should not visible when content is empty #1222

Merged
merged 1 commit into from
Aug 4, 2022
Merged

fix(popup): popup should not visible when content is empty #1222

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
1 change: 1 addition & 0 deletions src/popup/Popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ const Popup = forwardRef((props: PopupProps, ref: React.Ref<HTMLDivElement>) =>
setVisible,
disabled,
triggerNodeTemp,
content,
);

// 代理 trigger 的 ref
Expand Down
6 changes: 2 additions & 4 deletions src/popup/__tests__/popup.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,11 +287,9 @@ describe('Popup 组件测试', () => {
jest.runAllTimers();
});

// 鼠标进入后，有元素，而且内容为空
// 鼠标进入后，没有元素，而且内容为空
const popupContainer = await waitFor(() => document.querySelector(`.${testClassName}`));
expect(popupContainer).not.toBeNull();
expect(popupContainer).toHaveTextContent('');
expect(popupContainer).toHaveStyle(testStyle);
expect(popupContainer).toBeNull();
});

test('测试浮层嵌套', async () => {
Expand Down
20 changes: 12 additions & 8 deletions src/popup/hooks/useTriggerProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { HTMLAttributes, MutableRefObject, useRef } from 'react';
import useClickOutside from '../../_util/useClickOutside';
import { TdPopupProps, PopupVisibleChangeContext, PopupTriggerEvent } from '../type';
import { ChangeHandler } from '../../hooks/useControlled';
import { TNode } from '../../common';

export type TriggerProps = HTMLAttributes<HTMLDivElement>;
export type PopupProps = HTMLAttributes<HTMLDivElement>;
Expand All @@ -16,6 +17,7 @@ export default function useTriggerProps(
setVisible: ChangeHandler<boolean, [PopupVisibleChangeContext]>,
disabled = false,
originTrigger: React.ReactElement<HTMLAttributes<HTMLElement>>,
content: TNode,
): [TriggerProps, PopupProps] {
const triggerProps: TriggerProps = {};
const popupProps: PopupProps = {};
Expand All @@ -25,6 +27,8 @@ export default function useTriggerProps(
const show: HandleTrigger = (e, trigger) => setVisible(true, { e, trigger });
const hide: HandleTrigger = (e, trigger) => setVisible(false, { e, trigger });

const shouldToggle = !!content;

// click outside 用于处理点击其他地方隐藏
useClickOutside([ref, triggerNode], (e: any) => {
if (visible && (triggers.includes('click') || triggers.includes('context-menu')) && !hasPopupMouseDown.current) {
Expand All @@ -41,44 +45,44 @@ export default function useTriggerProps(
// 点击触发
if (trigger === 'click') {
triggerProps.onClick = (e) => {
toggle(e, 'trigger-element-click');
shouldToggle && toggle(e, 'trigger-element-click');
onClick && onClick(e);
};
}

// hover 触发
if (trigger === 'hover') {
triggerProps.onMouseEnter = (e) => {
show(e, 'trigger-element-hover');
shouldToggle && show(e, 'trigger-element-hover');
onMouseEnter && onMouseEnter(e);
};
popupProps.onMouseEnter = (e) => {
// 如果当前弹出框本身没有展示 hover 时不应该展示
visible && show(e, 'trigger-element-hover');
visible && shouldToggle && show(e, 'trigger-element-hover');
}; // 兼容鼠标移入弹出框
triggerProps.onMouseLeave = (e) => {
hide(e, 'trigger-element-hover');
shouldToggle && hide(e, 'trigger-element-hover');
onMouseLeave && onMouseLeave(e);
};
popupProps.onMouseLeave = (e) => hide(e, 'trigger-element-hover');
popupProps.onMouseLeave = (e) => shouldToggle && hide(e, 'trigger-element-hover');
}

// focus 触发
if (trigger === 'focus') {
triggerProps.onFocus = (e) => {
show(e, 'trigger-element-focus');
shouldToggle && show(e, 'trigger-element-focus');
onFocus && onFocus(e);
};
triggerProps.onBlur = (e) => {
hide(e, 'trigger-element-blur');
shouldToggle && hide(e, 'trigger-element-blur');
onBlur && onBlur(e);
};
}

// contextMenu 触发
if (trigger === 'context-menu') {
triggerProps.onContextMenu = (e) => {
show(e, 'context-menu');
shouldToggle && show(e, 'context-menu');
onContextMenu && onContextMenu(e);
};
}
Expand Down