-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Merge master branch and fix conflicts
- Loading branch information
Showing
10 changed files
with
435 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React from 'react'; | ||
| import { render, fireEvent } from '@testing-library/react'; | ||
| import { Tooltip } from '@oceanbase/design'; | ||
| 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 } = render( | ||
| <Tooltip title="This is prompt text" closeIcon={true}> | ||
| <div id="hello">Hello world!</div> | ||
| </Tooltip> | ||
| ); | ||
|
|
||
| const divElement = container.querySelector('#hello'); | ||
| fireEvent.mouseEnter(divElement!); | ||
| 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(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( | ||
| <Tooltip title="This is prompt text" closeIcon={<CloseCircleOutlined />}> | ||
| <div id="hello">Hello world!</div> | ||
| </Tooltip> | ||
| ); | ||
|
|
||
| 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( | ||
| <Tooltip title="This is prompt text" closeIcon={true} onClose={onClose}> | ||
| <div id="hello">Hello world!</div> | ||
| </Tooltip> | ||
| ); | ||
|
|
||
| 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(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { Space, Tooltip, Button } from '@oceanbase/design'; | ||
| import { CloseCircleOutlined } from '@oceanbase/icons'; | ||
| import React, { useState } from 'react'; | ||
|
|
||
| const App: React.FC = () => { | ||
| const [open, setOpen] = useState(true) | ||
| const log = (e: React.MouseEvent<HTMLElement>) => { | ||
| console.log(e); | ||
| }; | ||
|
|
||
| return ( | ||
| <Space> | ||
| <Tooltip title="This is prompt text" | ||
| closeIcon={true} | ||
| > | ||
| <Button>Default Close Tooltip</Button> | ||
| </Tooltip> | ||
|
|
||
| <Tooltip title="This is prompt text" | ||
| open={open} | ||
| closeIcon={true} | ||
| onClose={() => { | ||
| setOpen(false) | ||
| }} | ||
| onOpenChange={(v) => { | ||
| setOpen(v) | ||
| }} | ||
| > | ||
| <Button>Set open</Button> | ||
| </Tooltip> | ||
| <Tooltip title="This is prompt text This is prompt text This is prompt text This is prompt text" closeIcon={<CloseCircleOutlined />} onClose={log}> | ||
| <Button>Customize closeIcon</Button> | ||
| </Tooltip> | ||
| </Space> | ||
| ); | ||
| } | ||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import type { CSSObject } from '@ant-design/cssinjs'; | ||
| import type { FullToken, AliasToken, GenerateStyle } from 'antd/es/theme/internal'; | ||
| import { genComponentStyleHook } from '../../_util/genComponentStyleHook'; | ||
|
|
||
| export type TooltipToken = FullToken<'Tooltip'>; | ||
|
|
||
| export const genTooltipStyle: GenerateStyle<TooltipToken> = (token: TooltipToken): CSSObject => { | ||
| const { componentCls } = token; | ||
|
|
||
| return { | ||
| [componentCls]: { | ||
| [`${componentCls}-close-icon-wrap`]: { | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'flex-start', | ||
| wordBreak: 'break-all', | ||
| [`${componentCls}-close-icon`]: { | ||
| cursor: 'pointer', | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| export default (prefixCls: string) => { | ||
| const useStyle = genComponentStyleHook('Tooltip', token => { | ||
| return [genTooltipStyle(token as TooltipToken)]; | ||
| }, ({ zIndexPopupBase, colorBgSpotlight }) => ({ | ||
| zIndexPopup: zIndexPopupBase + 70, | ||
| colorBgDefault: colorBgSpotlight, | ||
| }),); | ||
| return useStyle(prefixCls); | ||
| }; |
Oops, something went wrong.