From fd0ff5f225e508049819be11c4a429aa3c1156b5 Mon Sep 17 00:00:00 2001
From: linhf <1959099976@qq.com>
Date: Tue, 1 Aug 2023 01:41:55 +0800
Subject: [PATCH 01/14] feat(Tooltip): Add close function
---
packages/design/src/tooltip/demo/basic.tsx | 34 +++++++++--
packages/design/src/tooltip/index.md | 5 +-
packages/design/src/tooltip/index.tsx | 69 ++++++++++++++++++++--
3 files changed, 96 insertions(+), 12 deletions(-)
diff --git a/packages/design/src/tooltip/demo/basic.tsx b/packages/design/src/tooltip/demo/basic.tsx
index 316d1c725..9b98568a9 100644
--- a/packages/design/src/tooltip/demo/basic.tsx
+++ b/packages/design/src/tooltip/demo/basic.tsx
@@ -1,10 +1,32 @@
-import { Tooltip } from '@oceanbase/design';
+import { Space, Tooltip, Button } from '@oceanbase/design';
+import { CloseCircleTwoTone } from '@oceanbase/icons';
import React from 'react';
-const App: React.FC = () => (
-
- Tooltip will show on mouse enter.
-
-);
+const App: React.FC = () => {
+ const log = (e: React.MouseEvent) => {
+ console.log(e);
+ };
+ const preventDefault = (e: React.MouseEvent) => {
+ e.preventDefault();
+ console.log('Clicked! But prevent default.');
+ };
+
+ return (
+
+
+
+
+
+
+
+ } onClose={log}>
+
+
+
+
+
+
+ );
+}
export default App;
diff --git a/packages/design/src/tooltip/index.md b/packages/design/src/tooltip/index.md
index faf95f866..c3b8f56f1 100644
--- a/packages/design/src/tooltip/index.md
+++ b/packages/design/src/tooltip/index.md
@@ -12,7 +12,7 @@ nav:
## 代码演示
-Hello world!
+ );
+
+ const divElement = container.querySelector('#hello');
+ fireEvent.mouseEnter(divElement!);
+ waitFakeTimer()
+ expect(container.querySelectorAll('.ant-tooltip-close-icon').length).toBe(1);
+ expect(container.querySelector('.ant-tooltip-hidden')).toBeNull()
+
+ // After clicking the close icon, the tooltip disappears.
+ fireEvent.click(container.querySelector('.ant-tooltip-close-icon'))
+ expect(container.querySelector('.ant-tooltip-hidden')).not.toBeNull()
+ });
+});
diff --git a/packages/design/src/tooltip/style/index.ts b/packages/design/src/tooltip/style/index.ts
index fde965505..0b36c271f 100644
--- a/packages/design/src/tooltip/style/index.ts
+++ b/packages/design/src/tooltip/style/index.ts
@@ -1,11 +1,11 @@
import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, AliasToken, GenerateStyle } from 'antd/es/theme/internal';
import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
export type TooltipToken = FullToken<'Tooltip'>;
+
export const genTooltipStyle: GenerateStyle = (token: TooltipToken): CSSObject => {
const { componentCls } = token;
- console.log(componentCls, 'componentCls')
return {
[componentCls]: {
@@ -24,7 +24,10 @@ export const genTooltipStyle: GenerateStyle = (token: TooltipToken
export default (prefixCls: string) => {
const useStyle = genComponentStyleHook('Tooltip', token => {
- return [genTooltipStyle(token)];
- });
+ return [genTooltipStyle(token as TooltipToken)];
+ }, ({ zIndexPopupBase, colorBgSpotlight }) => ({
+ zIndexPopup: zIndexPopupBase + 70,
+ colorBgDefault: colorBgSpotlight,
+ }),);
return useStyle(prefixCls);
};
diff --git a/tests/util.ts b/tests/util.ts
new file mode 100644
index 000000000..7d09ea60c
--- /dev/null
+++ b/tests/util.ts
@@ -0,0 +1,22 @@
+import { act } from '@testing-library/react';
+
+/**
+ * Wait for a time delay. Will wait `advanceTime * times` ms.
+ *
+ * @param advanceTime Default 1000
+ * @param times Default 20
+ */
+export async function waitFakeTimer(advanceTime = 1000, times = 20) {
+ for (let i = 0; i < times; i += 1) {
+ // eslint-disable-next-line no-await-in-loop
+ await act(async () => {
+ await Promise.resolve();
+
+ if (advanceTime > 0) {
+ jest.advanceTimersByTime(advanceTime);
+ } else {
+ jest.runAllTimers();
+ }
+ });
+ }
+}
\ No newline at end of file
From d81288eb39f959ec40f4db8f120c64ee1576355e Mon Sep 17 00:00:00 2001
From: linhf
Date: Wed, 30 Aug 2023 14:41:17 +0800
Subject: [PATCH 13/14] fix(ConfigProvider): Add SizeContext carry out
compatibility
---
packages/design/src/config-provider/index.tsx | 15 ++++++++-------
1 file changed, 8 insertions(+), 7 deletions(-)
diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
index c8758a20b..8fc58c955 100644
--- a/packages/design/src/config-provider/index.tsx
+++ b/packages/design/src/config-provider/index.tsx
@@ -58,14 +58,14 @@ const ConfigProvider = ({ children, theme, navigate, spin, ...restProps }: Confi
// Because defaultThemeToken is designed for light theme
token: theme?.isDark
? {
- ...defaultSeed,
- ...theme?.token,
- }
+ ...defaultSeed,
+ ...theme?.token,
+ }
: {
- ...defaultSeed,
- ...defaultThemeToken,
- ...theme?.token,
- },
+ ...defaultSeed,
+ ...defaultThemeToken,
+ ...theme?.token,
+ },
components: {
...components,
...theme?.components,
@@ -94,6 +94,7 @@ const ConfigProvider = ({ children, theme, navigate, spin, ...restProps }: Confi
ConfigProvider.ConfigContext =
AntConfigProvider.ConfigContext as React.Context;
ConfigProvider.ExtendedConfigContext = ExtendedConfigContext;
+ConfigProvider.SizeContext = AntConfigProvider.SizeContext;
ConfigProvider.config = AntConfigProvider.config;
ConfigProvider.useConfig = AntConfigProvider.useConfig;
From bf2f702dc07bed79e7296db70303e0b096526762 Mon Sep 17 00:00:00 2001
From: linhf
Date: Wed, 30 Aug 2023 15:39:32 +0800
Subject: [PATCH 14/14] feat(tooltip): add test
---
.../src/tooltip/__tests__/index.test.tsx | 69 ++++++++++++++++---
1 file changed, 58 insertions(+), 11 deletions(-)
diff --git a/packages/design/src/tooltip/__tests__/index.test.tsx b/packages/design/src/tooltip/__tests__/index.test.tsx
index e91239fe1..a974ea529 100644
--- a/packages/design/src/tooltip/__tests__/index.test.tsx
+++ b/packages/design/src/tooltip/__tests__/index.test.tsx
@@ -1,24 +1,71 @@
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { Tooltip } from '@oceanbase/design';
-import { waitFakeTimer } from '../../../../../tests/util'
+import { waitFakeTimer } from '../../../../../tests/util';
+import { CloseCircleOutlined } from '@oceanbase/icons';
describe('Tooltip', () => {
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+ afterEach(() => {
+ jest.useRealTimers();
+ jest.clearAllTimers();
+ });
+
it('default close icon should render correctly', async () => {
- const { container, asFragment } = render(
- Hello world!
- );
+ const { container } = render(
+
+ Hello world!
+
+ );
const divElement = container.querySelector('#hello');
fireEvent.mouseEnter(divElement!);
- waitFakeTimer()
- expect(container.querySelectorAll('.ant-tooltip-close-icon').length).toBe(1);
- expect(container.querySelector('.ant-tooltip-hidden')).toBeNull()
+ await waitFakeTimer();
+ expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
+ expect(document.querySelectorAll('.ant-tooltip-close-icon').length).toBe(1);
// After clicking the close icon, the tooltip disappears.
- fireEvent.click(container.querySelector('.ant-tooltip-close-icon'))
- expect(container.querySelector('.ant-tooltip-hidden')).not.toBeNull()
+ fireEvent.click(document.querySelector('.ant-tooltip-close-icon'));
+ await waitFakeTimer();
+ expect(container.querySelector('.ant-tooltip-open')).toBeNull();
+ });
+
+ it('custom close icon should render correctly', async () => {
+ const { container } = render(
+ }>
+ Hello world!
+
+ );
+
+ const divElement = container.querySelector('#hello');
+ fireEvent.mouseEnter(divElement!);
+ await waitFakeTimer();
+ expect(document.querySelectorAll('.anticon-close-circle').length).toBe(1);
+
+ // After clicking the close icon, the tooltip disappears.
+ fireEvent.click(document.querySelector('.ant-tooltip-close-icon'));
+ await waitFakeTimer();
+ expect(container.querySelector('.ant-tooltip-open')).toBeNull();
+ });
+
+ it('check `onOpenChange` arguments', async () => {
+ const onClose = jest.fn();
+ const { container } = render(
+
+ Hello world!
+
+ );
+
+ const divElement = container.querySelector('#hello');
+ fireEvent.mouseEnter(divElement!);
+ await waitFakeTimer();
+
+ fireEvent.click(document.querySelector('.ant-tooltip-close-icon'));
+ expect(onClose).toHaveBeenCalled();
+
+ await waitFakeTimer();
+ expect(container.querySelector('.ant-tooltip-open')).toBeNull();
});
});