From 7ce09f34199878a51bae88f06725b72f41378660 Mon Sep 17 00:00:00 2001 From: free-cutyapple <87959671+free-cutyapple@users.noreply.github.com> Date: Fri, 3 Sep 2021 14:21:08 +0900 Subject: [PATCH 01/41] Update Readme (#276) Update placement - descrition --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index af2d2a96..f1aa916c 100644 --- a/README.md +++ b/README.md @@ -142,7 +142,7 @@ Online examples: placement String - one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] + one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'rightTop', 'rightBottom', 'leftTop', 'leftBottom'] align From f30852c8d67aac6a73a5174f8e9aa19460480aab Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Thu, 4 Nov 2021 22:11:03 +0800 Subject: [PATCH 02/41] Upgrade to GitHub-native Dependabot (#255) Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> --- .github/dependabot.yml | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 .github/dependabot.yml diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 00000000..cb16808a --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,23 @@ +version: 2 +updates: +- package-ecosystem: npm + directory: "/" + schedule: + interval: daily + time: "21:00" + open-pull-requests-limit: 10 + ignore: + - dependency-name: "@types/react" + versions: + - 17.0.0 + - 17.0.1 + - 17.0.2 + - 17.0.3 + - dependency-name: "@types/react-dom" + versions: + - 17.0.0 + - 17.0.1 + - 17.0.2 + - dependency-name: less + versions: + - 4.1.0 From 69fb2205ecd589f735cb15fc75f89db98b09ea2d Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Thu, 4 Nov 2021 22:11:15 +0800 Subject: [PATCH 03/41] Bump @types/react from 16.14.11 to 17.0.15 (#272) Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 16.14.11 to 17.0.15. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) Signed-off-by: dependabot-preview[bot] Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a72f2635..fe8dead1 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ }, "devDependencies": { "@types/jest": "^26.0.0", - "@types/react": "^16.9.9", + "@types/react": "^17.0.15", "@types/react-dom": "^16.9.2", "@types/warning": "^3.0.0", "cross-env": "^7.0.0", From 393ce984c5c8ad7098c816adad0c689e88cb3894 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Fri, 5 Nov 2021 15:01:22 +0800 Subject: [PATCH 04/41] Add arrowVisible option into tooltip which can hide arrow (#232) * Add arrowVisible option into tooltip which can hide arrow * Fix testcase typo * rename arrowVisible to showArrow --- README.md | 6 +++ docs/demo/showArrow.md | 3 ++ docs/examples/showArrow.tsx | 91 +++++++++++++++++++++++++++++++++++++ src/Tooltip.tsx | 11 +++-- tests/index.test.js | 53 +++++++++++++++++++++ 5 files changed, 160 insertions(+), 4 deletions(-) create mode 100644 docs/demo/showArrow.md create mode 100644 docs/examples/showArrow.tsx diff --git a/README.md b/README.md index f1aa916c..6efe6b85 100644 --- a/README.md +++ b/README.md @@ -168,6 +168,12 @@ Online examples: set overlay inner style + + showArrow + boolean + true + arrow visible + arrowContent React.Node diff --git a/docs/demo/showArrow.md b/docs/demo/showArrow.md new file mode 100644 index 00000000..d4b4c420 --- /dev/null +++ b/docs/demo/showArrow.md @@ -0,0 +1,3 @@ +## showArrow + + diff --git a/docs/examples/showArrow.tsx b/docs/examples/showArrow.tsx new file mode 100644 index 00000000..882f6bfa --- /dev/null +++ b/docs/examples/showArrow.tsx @@ -0,0 +1,91 @@ +import React from 'react'; +import Tooltip from 'rc-tooltip'; +import '../../assets/bootstrap_white.less'; + +const text = Tooltip Text; +const styles = { + display: 'table-cell', + height: '60px', + width: '80px', + textAlign: 'center', + background: '#f6f6f6', + verticalAlign: 'middle', + border: '5px solid white', +}; + +const rowStyle = { + display: 'table-row', +}; + +const Test = () => ( + +); + +export default Test; diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 4948c32d..ac9cfb6f 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -32,6 +32,7 @@ export interface TooltipProps extends Pick { } const getPopupElement = () => { - const { arrowContent = null, overlay, id } = props; + const { showArrow = true, arrowContent = null, overlay, id } = props; return [ -
- {arrowContent} -
, + showArrow && ( +
+ {arrowContent} +
+ ), { jest.useRealTimers(); }); + + describe('showArrow', () => { + it('should show tooltip arrow default', () => { + const wrapper = mount( + Tooltip content} + > +
Click this
+ , + ); + wrapper.find('.target').simulate('click'); + expect(wrapper.find('.rc-tooltip-content').html()).toBe( + '
', + ); + }); + it('should show tooltip arrow when showArrow is true', () => { + const wrapper = mount( + Tooltip content} + showArrow + > +
Click this
+ , + ); + wrapper.find('.target').simulate('click'); + expect(wrapper.find('.rc-tooltip-content').html()).toBe( + '
', + ); + }); + it('should hide tooltip arrow when showArrow is false', () => { + const wrapper = mount( + Tooltip content} + showArrow={false} + > +
Click this
+ , + ); + wrapper.find('.target').simulate('click'); + expect(wrapper.find('.rc-tooltip-content').html()).toBe( + '
', + ); + }); + }); }); From eb22b7b547e8a9503cf5943f1be3def7fac48d8b Mon Sep 17 00:00:00 2001 From: Tony Narlock Date: Mon, 4 Jul 2022 10:03:39 -0500 Subject: [PATCH 05/41] docs(README) (#346) Missing space --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6efe6b85..4522ff5d 100644 --- a/README.md +++ b/README.md @@ -190,7 +190,7 @@ Online examples: destroyTooltipOnHide boolean | { keepParent: boolean } false - whether destroy tooltip when tooltip is hidden.In general, destroyTooltipOnHide will only remove itself instead of parent container of it.Parent container will be removed include tooltip when keepParent is true + whether destroy tooltip when tooltip is hidden.In general, destroyTooltipOnHide will only remove itself instead of parent container of it. Parent container will be removed include tooltip when keepParent is true id From 2270ac686fdb957e9aa8a56a4841048da195fef3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 13 Jul 2022 16:30:30 +0800 Subject: [PATCH 06/41] refactor: Popup component (#352) * refactor: Popup component * chore: fix render * test: coverage --- docs/examples/placement.tsx | 148 ++++++++++++++++++++---------------- src/Content.tsx | 20 ----- src/Popup.tsx | 39 ++++++++++ src/Tooltip.tsx | 35 +++++---- tests/index.test.js | 13 ++++ 5 files changed, 150 insertions(+), 105 deletions(-) delete mode 100644 src/Content.tsx create mode 100644 src/Popup.tsx diff --git a/docs/examples/placement.tsx b/docs/examples/placement.tsx index 40c6188e..987141a7 100644 --- a/docs/examples/placement.tsx +++ b/docs/examples/placement.tsx @@ -1,9 +1,10 @@ import React from 'react'; import Tooltip from 'rc-tooltip'; import '../../assets/bootstrap.less'; +import Popup from '../../src/Popup'; const text = Tooltip Text; -const styles = { +const styles: React.CSSProperties = { display: 'table-cell', height: '60px', width: '80px', @@ -18,74 +19,87 @@ const rowStyle = { }; const Test = () => ( -
-
- - - Left - - - - - Top - - - - - Bottom - - - - - Right - - + <> + - + ); export default Test; diff --git a/src/Content.tsx b/src/Content.tsx deleted file mode 100644 index b91f1731..00000000 --- a/src/Content.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; - -export interface ContentProps { - prefixCls?: string; - overlay: (() => React.ReactNode) | React.ReactNode; - id: string; - overlayInnerStyle?: React.CSSProperties; -} - -const Content = (props: ContentProps) => { - const { overlay, prefixCls, id, overlayInnerStyle } = props; - - return ( - - ); -}; - -export default Content; diff --git a/src/Popup.tsx b/src/Popup.tsx new file mode 100644 index 00000000..6357e7bd --- /dev/null +++ b/src/Popup.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import classNames from 'classnames'; + +export interface ContentProps { + prefixCls?: string; + children: (() => React.ReactNode) | React.ReactNode; + id?: string; + overlayInnerStyle?: React.CSSProperties; + arrowContent?: React.ReactNode; + className?: string; + style?: React.CSSProperties; + showArrow?: boolean; +} + +export default function Popup(props: ContentProps) { + const { + showArrow, + arrowContent, + children, + prefixCls, + id, + overlayInnerStyle, + className, + style, + } = props; + + return ( +
+ {showArrow !== false && ( +
+ {arrowContent} +
+ )} + +
+ ); +} diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index ac9cfb6f..db8e353f 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -4,7 +4,7 @@ import Trigger from 'rc-trigger'; import type { TriggerProps } from 'rc-trigger'; import type { AlignType, AnimationType, ActionType } from 'rc-trigger/lib/interface'; import { placements } from './placements'; -import Content from './Content'; +import Popup from './Popup'; export interface TooltipProps extends Pick { trigger?: ActionType | ActionType[]; @@ -61,6 +61,10 @@ const Tooltip = (props: TooltipProps, ref) => { defaultVisible, getTooltipContainer, overlayInnerStyle, + arrowContent, + overlay, + id, + showArrow, ...restProps } = props; @@ -72,23 +76,18 @@ const Tooltip = (props: TooltipProps, ref) => { extraProps.popupVisible = props.visible; } - const getPopupElement = () => { - const { showArrow = true, arrowContent = null, overlay, id } = props; - return [ - showArrow && ( -
- {arrowContent} -
- ), - , - ]; - }; + const getPopupElement = () => ( + + {overlay} + + ); let destroyTooltip = false; let autoDestroy = false; diff --git a/tests/index.test.js b/tests/index.test.js index fbc77ab7..6d4c2249 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -223,4 +223,17 @@ describe('rc-tooltip', () => { ); }); }); + + it('visible', () => { + const wrapper = mount( + Tooltip content} visible={false}> +
+ , + ); + + expect(wrapper.exists('.x-content')).toBeFalsy(); + + wrapper.setProps({ visible: true }); + expect(wrapper.exists('.x-content')).toBeTruthy(); + }); }); From de1574062f7831b6aafa8aaae92522ef76b8f767 Mon Sep 17 00:00:00 2001 From: zombiej Date: Wed, 13 Jul 2022 16:31:05 +0800 Subject: [PATCH 07/41] 5.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fe8dead1..f5be7d54 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.1.1", + "version": "5.2.0", "description": "React Tooltip", "keywords": [ "react", From cb116820508e4080ae673fbd6c74eeaae61035c6 Mon Sep 17 00:00:00 2001 From: zombiej Date: Wed, 13 Jul 2022 19:43:56 +0800 Subject: [PATCH 08/41] chore: export directly --- src/index.tsx | 3 +++ tests/popup.test.js | 8 ++++++++ 2 files changed, 11 insertions(+) create mode 100644 tests/popup.test.js diff --git a/src/index.tsx b/src/index.tsx index d8851cb0..ff0529f7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,6 @@ import Tooltip from './Tooltip'; +import Popup from './Popup'; + +export { Popup }; export default Tooltip; diff --git a/tests/popup.test.js b/tests/popup.test.js new file mode 100644 index 00000000..dce44ee4 --- /dev/null +++ b/tests/popup.test.js @@ -0,0 +1,8 @@ +import { Popup } from '../src'; + +describe('Popup', () => { + // Used in antd for C2D2C + it('should export', () => { + expect(Popup).toBeTruthy(); + }); +}); From df5ec2817ed6da352467bd8dcb576736f7374dd6 Mon Sep 17 00:00:00 2001 From: zombiej Date: Wed, 13 Jul 2022 19:48:10 +0800 Subject: [PATCH 09/41] 5.2.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f5be7d54..f04cedc9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.2.0", + "version": "5.2.1", "description": "React Tooltip", "keywords": [ "react", From 07b848a0abac66b9923d396b8c5c6a5c14e7fa52 Mon Sep 17 00:00:00 2001 From: zombiej Date: Tue, 19 Jul 2022 21:35:24 +0800 Subject: [PATCH 10/41] fix: missing deps close #356 --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index f04cedc9..92c80611 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ }, "dependencies": { "@babel/runtime": "^7.11.2", + "classnames": "^2.3.1", "rc-trigger": "^5.0.0" }, "devDependencies": { From 2bb394d19118ac17f03e7971e3db2d5a8b61642a Mon Sep 17 00:00:00 2001 From: zombiej Date: Tue, 19 Jul 2022 21:35:52 +0800 Subject: [PATCH 11/41] 5.2.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 92c80611..02a5376b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.2.1", + "version": "5.2.2", "description": "React Tooltip", "keywords": [ "react", From d7cab0abda9105ffbd02da8c659587ee5c18351e Mon Sep 17 00:00:00 2001 From: antollika <34944312+antollika@users.noreply.github.com> Date: Fri, 12 Aug 2022 13:22:31 +0300 Subject: [PATCH 12/41] fix: upgrade rc-trigger from 5.0.0 to 5.3.1 (#360) An old version does not work well with react 18 / the page freezing while triggering tooltip visibility --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 02a5376b..4ae08af6 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "dependencies": { "@babel/runtime": "^7.11.2", "classnames": "^2.3.1", - "rc-trigger": "^5.0.0" + "rc-trigger": "^5.3.1" }, "devDependencies": { "@types/jest": "^26.0.0", From 065ac988ea9f5fa53cc8033c9005b439f92b0ac8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 10 Jan 2023 10:20:47 +0800 Subject: [PATCH 13/41] feat: dumi 1.x -> 2.x (#429) --- .dumirc.ts | 15 +++++++++++++++ .gitignore | 6 +++++- .umirc.ts | 19 ------------------- docs/demo/arrowContent.md | 9 +++++++-- docs/demo/formError.md | 9 +++++++-- docs/demo/onVisibleChange.md | 9 +++++++-- docs/demo/placement.md | 9 +++++++-- docs/demo/showArrow.md | 9 +++++++-- docs/demo/simple.md | 9 +++++++-- docs/index.md | 5 ++++- package.json | 2 +- tsconfig.json | 5 +++-- 12 files changed, 70 insertions(+), 36 deletions(-) create mode 100644 .dumirc.ts delete mode 100644 .umirc.ts diff --git a/.dumirc.ts b/.dumirc.ts new file mode 100644 index 00000000..f7a1213b --- /dev/null +++ b/.dumirc.ts @@ -0,0 +1,15 @@ +import { defineConfig } from 'dumi'; +import path from 'path'; + +export default defineConfig({ + alias: { + 'rc-tooltip$': path.resolve('src'), + 'rc-tooltip/es': path.resolve('src'), + }, + mfsu: false, + favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'], + themeConfig: { + name: 'Tooltip', + logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', + }, +}); diff --git a/.gitignore b/.gitignore index 15f4631d..35fad322 100644 --- a/.gitignore +++ b/.gitignore @@ -35,4 +35,8 @@ package-lock.json .umi .umi-production .umi-test -.env.local \ No newline at end of file +.env.local + +# dumi +.dumi/tmp +.dumi/tmp-production \ No newline at end of file diff --git a/.umirc.ts b/.umirc.ts deleted file mode 100644 index f75dbd21..00000000 --- a/.umirc.ts +++ /dev/null @@ -1,19 +0,0 @@ -// more config: https://d.umijs.org/config -import { defineConfig } from 'dumi'; - -export default defineConfig({ - title: 'rc-tooltip', - favicon: - 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', - logo: - 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', - outputPath: '.doc', - exportStatic: {}, - styles: [ - ` - .markdown table { - width: auto !important; - } - `, - ] -}); \ No newline at end of file diff --git a/docs/demo/arrowContent.md b/docs/demo/arrowContent.md index b1b21f09..e8013bd3 100644 --- a/docs/demo/arrowContent.md +++ b/docs/demo/arrowContent.md @@ -1,3 +1,8 @@ -## arrowContent +--- +title: arrowContent +nav: + title: Demo + path: /demo +--- - \ No newline at end of file + \ No newline at end of file diff --git a/docs/demo/formError.md b/docs/demo/formError.md index 51a3480d..e3bf2e8d 100644 --- a/docs/demo/formError.md +++ b/docs/demo/formError.md @@ -1,3 +1,8 @@ -## formError +--- +title: formError +nav: + title: Demo + path: /demo +--- - \ No newline at end of file + \ No newline at end of file diff --git a/docs/demo/onVisibleChange.md b/docs/demo/onVisibleChange.md index 989b373e..4f30b05a 100644 --- a/docs/demo/onVisibleChange.md +++ b/docs/demo/onVisibleChange.md @@ -1,3 +1,8 @@ -## onVisibleChange +--- +title: onVisibleChange +nav: + title: Demo + path: /demo +--- - \ No newline at end of file + \ No newline at end of file diff --git a/docs/demo/placement.md b/docs/demo/placement.md index e2952931..192ec92e 100644 --- a/docs/demo/placement.md +++ b/docs/demo/placement.md @@ -1,3 +1,8 @@ -## placement +--- +title: placement +nav: + title: Demo + path: /demo +--- - \ No newline at end of file + \ No newline at end of file diff --git a/docs/demo/showArrow.md b/docs/demo/showArrow.md index d4b4c420..7925fe57 100644 --- a/docs/demo/showArrow.md +++ b/docs/demo/showArrow.md @@ -1,3 +1,8 @@ -## showArrow +--- +title: showArrow +nav: + title: Demo + path: /demo +--- - + diff --git a/docs/demo/simple.md b/docs/demo/simple.md index 51d9e8f6..23f3e343 100644 --- a/docs/demo/simple.md +++ b/docs/demo/simple.md @@ -1,3 +1,8 @@ -## simple +--- +title: simple +nav: + title: Demo + path: /demo +--- - \ No newline at end of file + \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 53a98a37..4c79a7b9 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,5 +1,8 @@ --- -title: rc-tooltip +hero: + title: rc-tooltip + description: React Tooltip --- + diff --git a/package.json b/package.json index 4ae08af6..de94828e 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "@types/react-dom": "^16.9.2", "@types/warning": "^3.0.0", "cross-env": "^7.0.0", - "dumi": "^1.1.0", + "dumi": "^2.1.1", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.15.1", "enzyme-to-json": "^3.4.3", diff --git a/tsconfig.json b/tsconfig.json index e23fb377..eee6c53d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,8 +9,9 @@ "esModuleInterop": true, "paths": { "@/*": ["src/*"], - "@@/*": ["src/.umi/*"], + "@@/*": [".dumi/tmp/*"], "rc-tooltip": ["src/index.tsx"] } - } + }, + "include": [".dumi/**/*", ".dumirc.ts", "./src/**/*.ts", "./src/**/*.tsx", "./docs/**/*.tsx"] } From 61a32867f547b190e254e13517a658626e9c749e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sun, 15 Jan 2023 12:12:55 +0800 Subject: [PATCH 14/41] feat: update react and react-dom version to 18+ (#431) * feat: update react and react-dom version to 18+ * tests: enzyme => @testing-library/react --- package.json | 12 +- tests/{index.test.js => index.test.tsx} | 141 ++++++++++++------------ tests/{popup.test.js => popup.test.tsx} | 0 tests/setup.js | 42 ++++++- tsconfig.json | 2 +- 5 files changed, 112 insertions(+), 85 deletions(-) rename tests/{index.test.js => index.test.tsx} (60%) rename tests/{popup.test.js => popup.test.tsx} (100%) diff --git a/package.json b/package.json index de94828e..b298c33c 100644 --- a/package.json +++ b/package.json @@ -43,23 +43,21 @@ "rc-trigger": "^5.3.1" }, "devDependencies": { + "@testing-library/react": "^13.4.0", "@types/jest": "^26.0.0", - "@types/react": "^17.0.15", - "@types/react-dom": "^16.9.2", + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.10", "@types/warning": "^3.0.0", "cross-env": "^7.0.0", "dumi": "^2.1.1", - "enzyme": "^3.10.0", - "enzyme-adapter-react-16": "^1.15.1", - "enzyme-to-json": "^3.4.3", "eslint": "^7.1.0", "father": "^2.23.1", "father-build": "^1.18.6", "gh-pages": "^3.1.0", "less": "^3.11.1", "np": "^7.1.0", - "react": "^16.10.2", - "react-dom": "^16.10.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "typescript": "^4.0.5" }, "maintainers": [ diff --git a/tests/index.test.js b/tests/index.test.tsx similarity index 60% rename from tests/index.test.js rename to tests/index.test.tsx index 6d4c2249..1bd0b5af 100644 --- a/tests/index.test.js +++ b/tests/index.test.tsx @@ -1,21 +1,27 @@ -import React from 'react'; -import { mount } from 'enzyme'; +import React, { useState } from 'react'; +import { render, fireEvent } from '@testing-library/react'; import Tooltip from '../src'; -const verifyContent = (wrapper, content) => { - expect(wrapper.find('.x-content').text()).toBe(content); - expect(wrapper.find('Trigger').instance().getPopupDomNode()).toBeTruthy(); - wrapper.find('.target').simulate('click'); - expect(wrapper.find('.rc-tooltip').hostNodes().hasClass('rc-tooltip-hidden')).toBe(true); +const verifyContent = (wrapper: HTMLElement, content: string) => { + expect(wrapper.querySelector('.x-content').textContent).toBe(content); + fireEvent.click(wrapper.querySelector('.target')); + expect(wrapper.querySelector('.rc-tooltip').classList.contains('rc-tooltip-hidden')).toBe(true); }; describe('rc-tooltip', () => { window.requestAnimationFrame = window.setTimeout; window.cancelAnimationFrame = window.clearTimeout; + beforeEach(() => { + jest.useFakeTimers(); + }); + + afterEach(() => { + jest.useRealTimers(); + }); describe('shows and hides itself on click', () => { it('using an element overlay', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - wrapper.find('.target').simulate('click'); - verifyContent(wrapper, 'Tooltip content'); + fireEvent.click(container.querySelector('.target')); + verifyContent(container, 'Tooltip content'); }); it('using a function overlay', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - wrapper.find('.target').simulate('click'); - verifyContent(wrapper, 'Tooltip content'); + fireEvent.click(container.querySelector('.target')); + verifyContent(container, 'Tooltip content'); }); // https://github.com/ant-design/ant-design/pull/23155 it('using style inner style', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - wrapper.find('.target').simulate('click'); - expect(wrapper.find('.rc-tooltip-inner').props().style).toEqual({ background: 'red' }); + fireEvent.click(container.querySelector('.target')); + expect( + (container.querySelector('.rc-tooltip-inner') as HTMLElement).style.background, + ).toEqual('red'); }); it('access of ref', () => { const domRef = React.createRef(); - mount( + render( { }); }); describe('destroyTooltipOnHide', () => { - const destroyVerifyContent = (wrapper, content) => { - wrapper.find('.target').simulate('click'); - expect(wrapper.find('.x-content').text()).toBe(content); - expect(wrapper.find('Trigger').instance().getPopupDomNode()).toBeTruthy(); - wrapper.find('.target').simulate('click'); + const destroyVerifyContent = (wrapper: HTMLElement, content: string) => { + fireEvent.click(wrapper.querySelector('.target')); + expect(wrapper.querySelector('.x-content').textContent).toBe(content); + fireEvent.click(wrapper.querySelector('.target')); }; it('default value', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - wrapper.find('.target').simulate('click'); - verifyContent(wrapper, 'Tooltip content'); + fireEvent.click(container.querySelector('.target')); + verifyContent(container, 'Tooltip content'); }); it('should only remove tooltip when value is true', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - destroyVerifyContent(wrapper, 'Tooltip content'); - expect(wrapper.html()).toBe('
Click this
'); + destroyVerifyContent(container, 'Tooltip content'); + expect(container.innerHTML).toBe('
Click this
'); }); it('should only remove tooltip when keepParent is true', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - destroyVerifyContent(wrapper, 'Tooltip content'); - expect(wrapper.html()).toBe('
Click this
'); + destroyVerifyContent(container, 'Tooltip content'); + expect(container.innerHTML).toBe('
Click this
'); }); it('should remove tooltip and container when keepParent is false', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - destroyVerifyContent(wrapper, 'Tooltip content'); - expect(wrapper.html()).toBe('
Click this
'); + destroyVerifyContent(container, 'Tooltip content'); + expect(container.innerHTML).toBe('
Click this
'); }); }); - // This is only test for motion pass to internal rc-trigger - // It's safe to remove since meaningless to rc-tooltip if refactor - it('should motion props work', () => { - const wrapper = mount( - - Bamboo - , - ); - - expect(wrapper.find('Trigger').props().popupMotion).toEqual({ motionName: 'bamboo-is-light' }); - }); - it('zIndex', () => { jest.useFakeTimers(); - const wrapper = mount( + const { container } = render(
Light
, ); - wrapper.find('.target').simulate('click'); + fireEvent.click(container.querySelector('.target')); jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('div.rc-tooltip').prop('style')).toEqual( - expect.objectContaining({ - zIndex: 903, - }), - ); + expect((container.querySelector('div.rc-tooltip') as HTMLElement).style.zIndex).toBe('903'); jest.useRealTimers(); }); describe('showArrow', () => { it('should show tooltip arrow default', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - wrapper.find('.target').simulate('click'); - expect(wrapper.find('.rc-tooltip-content').html()).toBe( + fireEvent.click(container.querySelector('.target')); + expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( '
', ); }); it('should show tooltip arrow when showArrow is true', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - wrapper.find('.target').simulate('click'); - expect(wrapper.find('.rc-tooltip-content').html()).toBe( + fireEvent.click(container.querySelector('.target')); + expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( '
', ); }); it('should hide tooltip arrow when showArrow is false', () => { - const wrapper = mount( + const { container } = render( {
Click this
, ); - wrapper.find('.target').simulate('click'); - expect(wrapper.find('.rc-tooltip-content').html()).toBe( + fireEvent.click(container.querySelector('.target')); + expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( '
', ); }); }); it('visible', () => { - const wrapper = mount( - Tooltip content} visible={false}> -
- , - ); + const App = () => { + const [open, setOpen] = useState(false); + return ( + Tooltip content} visible={open}> +
{ + setOpen(true); + }} + /> + + ); + }; + const { container } = render(); - expect(wrapper.exists('.x-content')).toBeFalsy(); + expect(container.querySelector('.x-content')).toBeFalsy(); - wrapper.setProps({ visible: true }); - expect(wrapper.exists('.x-content')).toBeTruthy(); + fireEvent.click(container.querySelector('.target')); + expect(container.querySelector('.x-content')).toBeTruthy(); }); }); diff --git a/tests/popup.test.js b/tests/popup.test.tsx similarity index 100% rename from tests/popup.test.js rename to tests/popup.test.tsx diff --git a/tests/setup.js b/tests/setup.js index 684b8a6f..8623ee6b 100644 --- a/tests/setup.js +++ b/tests/setup.js @@ -1,8 +1,38 @@ -global.requestAnimationFrame = global.requestAnimationFrame || function requestAnimationFrame(cb) { - return setTimeout(cb, 0); -}; +const React = require('react'); +const util = require('util'); -const Enzyme = require('enzyme'); -const Adapter = require('enzyme-adapter-react-16'); +// eslint-disable-next-line no-console +console.log('Current React Version:', React.version); -Enzyme.configure({ adapter: new Adapter() }); +/* eslint-disable global-require */ +if (typeof window !== 'undefined') { + global.window.resizeTo = (width, height) => { + global.window.innerWidth = width || global.window.innerWidth; + global.window.innerHeight = height || global.window.innerHeight; + global.window.dispatchEvent(new Event('resize')); + }; + global.window.scrollTo = () => {}; + // ref: https://github.com/ant-design/ant-design/issues/18774 + if (!window.matchMedia) { + Object.defineProperty(global.window, 'matchMedia', { + writable: true, + configurable: true, + value: jest.fn((query) => ({ + matches: query.includes('max-width'), + addListener: jest.fn(), + removeListener: jest.fn(), + })), + }); + } + + // Fix css-animation or rc-motion deps on these + // https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35 + // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44 + window.AnimationEvent = window.AnimationEvent || window.Event; + window.TransitionEvent = window.TransitionEvent || window.Event; + + // ref: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom + // ref: https://github.com/jsdom/jsdom/issues/2524 + Object.defineProperty(window, 'TextEncoder', { writable: true, value: util.TextEncoder }); + Object.defineProperty(window, 'TextDecoder', { writable: true, value: util.TextDecoder }); +} diff --git a/tsconfig.json b/tsconfig.json index eee6c53d..a640dcb3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,5 +13,5 @@ "rc-tooltip": ["src/index.tsx"] } }, - "include": [".dumi/**/*", ".dumirc.ts", "./src/**/*.ts", "./src/**/*.tsx", "./docs/**/*.tsx"] + "include": [".dumi/**/*", ".dumirc.ts", "./src/**/*.ts", "./src/**/*.tsx", "./docs/**/*.tsx", "./tests/**/*.tsx"] } From 187be03f5cf260a843b50fa45d597260f5d01ee8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sun, 15 Jan 2023 21:08:28 +0800 Subject: [PATCH 15/41] feat: tooltip support show-arrow cls when showArrow not falsy (#430) * feat: tooltip support show-arrow cls when showArrow not falsy * feat: optimize code * feat: reset resolutions * chore: merge master * feat: optimize code --- src/Tooltip.tsx | 7 +++++-- tests/index.test.tsx | 5 +++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index db8e353f..8bd9f72f 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -5,6 +5,7 @@ import type { TriggerProps } from 'rc-trigger'; import type { AlignType, AnimationType, ActionType } from 'rc-trigger/lib/interface'; import { placements } from './placements'; import Popup from './Popup'; +import classNames from 'classnames'; export interface TooltipProps extends Pick { trigger?: ActionType | ActionType[]; @@ -64,7 +65,7 @@ const Tooltip = (props: TooltipProps, ref) => { arrowContent, overlay, id, - showArrow, + showArrow = true, ...restProps } = props; @@ -101,7 +102,9 @@ const Tooltip = (props: TooltipProps, ref) => { return ( { , ); fireEvent.click(container.querySelector('.target')); + expect(container.querySelector('.rc-tooltip').classList).toContain('rc-tooltip-show-arrow'); expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( '
', ); @@ -191,6 +192,7 @@ describe('rc-tooltip', () => { , ); fireEvent.click(container.querySelector('.target')); + expect(container.querySelector('.rc-tooltip').classList).toContain('rc-tooltip-show-arrow'); expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( '
', ); @@ -208,6 +210,9 @@ describe('rc-tooltip', () => { , ); fireEvent.click(container.querySelector('.target')); + expect(container.querySelector('.rc-tooltip').classList).not.toContain( + 'rc-tooltip-show-arrow', + ); expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( '
', ); From d58ccd04efe9d32ff530bd733f0d698e6889cd5f Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Sun, 15 Jan 2023 21:22:00 +0800 Subject: [PATCH 16/41] v5.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b298c33c..0952b17c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.2.2", + "version": "5.3.0", "description": "React Tooltip", "keywords": [ "react", From 74bf8a78ab619f5451edd9e1805cd5cadc92991c Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Sun, 15 Jan 2023 23:39:04 +0800 Subject: [PATCH 17/41] Revert "v5.3.0" This reverts commit d58ccd04efe9d32ff530bd733f0d698e6889cd5f. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0952b17c..b298c33c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.3.0", + "version": "5.2.2", "description": "React Tooltip", "keywords": [ "react", From abb7d8bd6aa494057e20952a6519652716894258 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Sun, 15 Jan 2023 23:48:40 +0800 Subject: [PATCH 18/41] v5.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b298c33c..0952b17c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.2.2", + "version": "5.3.0", "description": "React Tooltip", "keywords": [ "react", From e9ba0fd4736fc30aae4a0ba6b545d5433fd8142f Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Sun, 15 Jan 2023 23:50:53 +0800 Subject: [PATCH 19/41] Revert "v5.3.0" This reverts commit abb7d8bd6aa494057e20952a6519652716894258. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0952b17c..b298c33c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.3.0", + "version": "5.2.2", "description": "React Tooltip", "keywords": [ "react", From bf78c2efd0f2ba3e56e37e986566a77f19907653 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Sun, 15 Jan 2023 23:51:14 +0800 Subject: [PATCH 20/41] v5.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b298c33c..0952b17c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.2.2", + "version": "5.3.0", "description": "React Tooltip", "keywords": [ "react", From 2b86fcea82bf0241f129cf24ddc5e8c8a42eac43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Wed, 18 Jan 2023 14:06:57 +0800 Subject: [PATCH 21/41] feat: remove *-show-arrow cls when showArrow is true (#433) * feat: remove *-show-arrow cls when showArrow is true * feat: update test case --- src/Tooltip.tsx | 5 +---- tests/index.test.tsx | 2 -- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 8bd9f72f..c703e353 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -5,7 +5,6 @@ import type { TriggerProps } from 'rc-trigger'; import type { AlignType, AnimationType, ActionType } from 'rc-trigger/lib/interface'; import { placements } from './placements'; import Popup from './Popup'; -import classNames from 'classnames'; export interface TooltipProps extends Pick { trigger?: ActionType | ActionType[]; @@ -102,9 +101,7 @@ const Tooltip = (props: TooltipProps, ref) => { return ( { , ); fireEvent.click(container.querySelector('.target')); - expect(container.querySelector('.rc-tooltip').classList).toContain('rc-tooltip-show-arrow'); expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( '
', ); @@ -192,7 +191,6 @@ describe('rc-tooltip', () => { , ); fireEvent.click(container.querySelector('.target')); - expect(container.querySelector('.rc-tooltip').classList).toContain('rc-tooltip-show-arrow'); expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( '
', ); From 72554ebb0750990a36744158757a0a8cb969a616 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 18 Jan 2023 14:15:40 +0800 Subject: [PATCH 22/41] v5.3.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0952b17c..751f33c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.3.0", + "version": "5.3.1", "description": "React Tooltip", "keywords": [ "react", From fb9d8bdbc800496859615e135d4b5bc544d3eda4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Wed, 8 Feb 2023 14:38:02 +0800 Subject: [PATCH 23/41] refactor: Use `@rc-component/trigger` (#438) * refactor: replace with @rc-trigger * chore: update deps * chore: update deps * chore: clean up * chore: update deps * test: Update test --- .fatherrc.js | 14 ++--- assets/bootstrap_white.less | 6 +- docs/demo/point.md | 8 +++ docs/examples/point.tsx | 56 +++++++++++++++++ package.json | 26 ++++---- src/Popup.tsx | 20 +----- src/Tooltip.tsx | 37 +++-------- src/placements.tsx | 32 +++++----- tests/__mocks__/@rc-component/trigger.js | 3 + tests/__mocks__/rc-trigger.js | 3 - tests/index.test.tsx | 78 ++++++++++-------------- tsconfig.json | 2 +- 12 files changed, 148 insertions(+), 137 deletions(-) create mode 100644 docs/demo/point.md create mode 100644 docs/examples/point.tsx create mode 100644 tests/__mocks__/@rc-component/trigger.js delete mode 100644 tests/__mocks__/rc-trigger.js diff --git a/.fatherrc.js b/.fatherrc.js index 912aa0aa..4ddbafd1 100644 --- a/.fatherrc.js +++ b/.fatherrc.js @@ -1,9 +1,5 @@ -export default { - cjs: 'babel', - esm: { type: 'babel', importLibToEs: true }, - preCommit: { - eslint: true, - prettier: true, - }, - runtimeHelpers: true, -}; +import { defineConfig } from 'father'; + +export default defineConfig({ + plugins: ['@rc-component/father-plugin'], +}); \ No newline at end of file diff --git a/assets/bootstrap_white.less b/assets/bootstrap_white.less index 07b47858..b6deb247 100644 --- a/assets/bootstrap_white.less +++ b/assets/bootstrap_white.less @@ -69,7 +69,8 @@ &-placement-top &-arrow, &-placement-topLeft &-arrow, &-placement-topRight &-arrow{ - bottom: -@tooltip-arrow-width + @tooltip-shadow-width; + // bottom: -@tooltip-arrow-width + @tooltip-shadow-width; + transform: translate(-50%, @tooltip-arrow-width - @tooltip-shadow-width); margin-left: -@tooltip-arrow-width; border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-top-color: @tooltip-arrow-color; @@ -161,7 +162,8 @@ &-placement-bottom &-arrow, &-placement-bottomLeft &-arrow, &-placement-bottomRight &-arrow { - top: -@tooltip-arrow-width + @tooltip-shadow-width;; + // top: -@tooltip-arrow-width + @tooltip-shadow-width;; + transform: translate(-50%, -@tooltip-arrow-width + @tooltip-shadow-width); margin-left: -@tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-bottom-color: @tooltip-arrow-color; diff --git a/docs/demo/point.md b/docs/demo/point.md new file mode 100644 index 00000000..073a89bc --- /dev/null +++ b/docs/demo/point.md @@ -0,0 +1,8 @@ +--- +title: Point +nav: + title: Demo + path: /demo +--- + + \ No newline at end of file diff --git a/docs/examples/point.tsx b/docs/examples/point.tsx new file mode 100644 index 00000000..d59ce6a2 --- /dev/null +++ b/docs/examples/point.tsx @@ -0,0 +1,56 @@ +import Tooltip from 'rc-tooltip'; +import React from 'react'; +import '../../assets/bootstrap_white.less'; + +const text = Tooltip Text; + +const Test = () => { + const scrollRef = React.useRef(); + + return ( +
+
+
+ } + > +
+ Hover Me +
+ +
+
+
+ ); +}; + +export default Test; diff --git a/package.json b/package.json index 751f33c9..c452f86a 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,11 @@ "url": "git@github.com:react-component/tooltip.git" }, "license": "MIT", + "maintainers": [ + "yiminghe@gmail.com" + ], + "main": "lib/index", + "module": "es/index", "files": [ "dist", "lib", @@ -24,25 +29,23 @@ "assets/*.css", "assets/*.less" ], - "main": "lib/index", - "module": "es/index", "scripts": { - "start": "dumi dev", + "compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css", "docs:build": "dumi build", "docs:deploy": "gh-pages -d .doc", - "compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css", - "coverage": "father test --coverage", "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js", "now-build": "npm run build", "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", - "test": "father test" + "start": "dumi dev", + "test": "rc-test" }, "dependencies": { "@babel/runtime": "^7.11.2", - "classnames": "^2.3.1", - "rc-trigger": "^5.3.1" + "@rc-component/trigger": "^1.0.4", + "classnames": "^2.3.1" }, "devDependencies": { + "@rc-component/father-plugin": "^1.0.0", "@testing-library/react": "^13.4.0", "@types/jest": "^26.0.0", "@types/react": "^18.0.26", @@ -51,18 +54,15 @@ "cross-env": "^7.0.0", "dumi": "^2.1.1", "eslint": "^7.1.0", - "father": "^2.23.1", - "father-build": "^1.18.6", + "father": "^4.0.0", "gh-pages": "^3.1.0", "less": "^3.11.1", "np": "^7.1.0", + "rc-test": "^7.0.9", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^4.0.5" }, - "maintainers": [ - "yiminghe@gmail.com" - ], "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" diff --git a/src/Popup.tsx b/src/Popup.tsx index 6357e7bd..cbaa9cf3 100644 --- a/src/Popup.tsx +++ b/src/Popup.tsx @@ -1,36 +1,20 @@ -import * as React from 'react'; import classNames from 'classnames'; +import * as React from 'react'; export interface ContentProps { prefixCls?: string; children: (() => React.ReactNode) | React.ReactNode; id?: string; overlayInnerStyle?: React.CSSProperties; - arrowContent?: React.ReactNode; className?: string; style?: React.CSSProperties; - showArrow?: boolean; } export default function Popup(props: ContentProps) { - const { - showArrow, - arrowContent, - children, - prefixCls, - id, - overlayInnerStyle, - className, - style, - } = props; + const { children, prefixCls, id, overlayInnerStyle, className, style } = props; return (
- {showArrow !== false && ( -
- {arrowContent} -
- )} diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index c703e353..bb836d3e 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -1,8 +1,8 @@ +import type { TriggerProps } from '@rc-component/trigger'; +import Trigger from '@rc-component/trigger'; +import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface'; import * as React from 'react'; -import { useRef, useImperativeHandle, forwardRef } from 'react'; -import Trigger from 'rc-trigger'; -import type { TriggerProps } from 'rc-trigger'; -import type { AlignType, AnimationType, ActionType } from 'rc-trigger/lib/interface'; +import { forwardRef, useImperativeHandle, useRef } from 'react'; import { placements } from './placements'; import Popup from './Popup'; @@ -26,11 +26,7 @@ export interface TooltipProps extends Pick HTMLElement; - destroyTooltipOnHide?: - | boolean - | { - keepParent?: boolean; - }; + destroyTooltipOnHide?: boolean; align?: AlignType; showArrow?: boolean; arrowContent?: React.ReactNode; @@ -77,28 +73,11 @@ const Tooltip = (props: TooltipProps, ref) => { } const getPopupElement = () => ( - + {overlay} ); - let destroyTooltip = false; - let autoDestroy = false; - if (typeof destroyTooltipOnHide === 'boolean') { - destroyTooltip = destroyTooltipOnHide; - } else if (destroyTooltipOnHide && typeof destroyTooltipOnHide === 'object') { - const { keepParent } = destroyTooltipOnHide; - destroyTooltip = keepParent === true; - autoDestroy = keepParent === false; - } - return ( { popupAnimation={animation} popupMotion={motion} defaultPopupVisible={defaultVisible} - destroyPopupOnHide={destroyTooltip} - autoDestroy={autoDestroy} + autoDestroy={destroyTooltipOnHide} mouseLeaveDelay={mouseLeaveDelay} popupStyle={overlayStyle} mouseEnterDelay={mouseEnterDelay} + arrow={showArrow} {...extraProps} > {children} diff --git a/src/placements.tsx b/src/placements.tsx index 789dce36..6371e889 100644 --- a/src/placements.tsx +++ b/src/placements.tsx @@ -1,82 +1,84 @@ -import { BuildInPlacements } from 'rc-trigger'; +import type { BuildInPlacements } from '@rc-component/trigger'; -const autoAdjustOverflow = { - adjustX: 1, +const autoAdjustOverflowTopBottom = { + shiftX: 64, adjustY: 1, }; +const autoAdjustOverflowLeftRight = { adjustX: 1, shiftY: true }; + const targetOffset = [0, 0]; export const placements: BuildInPlacements = { left: { points: ['cr', 'cl'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowLeftRight, offset: [-4, 0], targetOffset, }, right: { points: ['cl', 'cr'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowLeftRight, offset: [4, 0], targetOffset, }, top: { points: ['bc', 'tc'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowTopBottom, offset: [0, -4], targetOffset, }, bottom: { points: ['tc', 'bc'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowTopBottom, offset: [0, 4], targetOffset, }, topLeft: { points: ['bl', 'tl'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowTopBottom, offset: [0, -4], targetOffset, }, leftTop: { points: ['tr', 'tl'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowLeftRight, offset: [-4, 0], targetOffset, }, topRight: { points: ['br', 'tr'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowTopBottom, offset: [0, -4], targetOffset, }, rightTop: { points: ['tl', 'tr'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowLeftRight, offset: [4, 0], targetOffset, }, bottomRight: { points: ['tr', 'br'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowTopBottom, offset: [0, 4], targetOffset, }, rightBottom: { points: ['bl', 'br'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowLeftRight, offset: [4, 0], targetOffset, }, bottomLeft: { points: ['tl', 'bl'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowTopBottom, offset: [0, 4], targetOffset, }, leftBottom: { points: ['br', 'bl'], - overflow: autoAdjustOverflow, + overflow: autoAdjustOverflowLeftRight, offset: [-4, 0], targetOffset, }, diff --git a/tests/__mocks__/@rc-component/trigger.js b/tests/__mocks__/@rc-component/trigger.js new file mode 100644 index 00000000..887c966d --- /dev/null +++ b/tests/__mocks__/@rc-component/trigger.js @@ -0,0 +1,3 @@ +import Trigger from '@rc-component/trigger/lib/mock'; + +export default Trigger; diff --git a/tests/__mocks__/rc-trigger.js b/tests/__mocks__/rc-trigger.js deleted file mode 100644 index 32303075..00000000 --- a/tests/__mocks__/rc-trigger.js +++ /dev/null @@ -1,3 +0,0 @@ -import Trigger from 'rc-trigger/lib/mock'; - -export default Trigger; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 2a9fc44e..6784be1a 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import { render, fireEvent } from '@testing-library/react'; +import { act, fireEvent, render } from '@testing-library/react'; +import React from 'react'; import Tooltip from '../src'; const verifyContent = (wrapper: HTMLElement, content: string) => { @@ -19,6 +19,15 @@ describe('rc-tooltip', () => { jest.useRealTimers(); }); + async function waitFakeTimers() { + for (let i = 0; i < 100; i += 1) { + await act(async () => { + jest.advanceTimersByTime(100); + await Promise.resolve(); + }); + } + } + describe('shows and hides itself on click', () => { it('using an element overlay', () => { const { container } = render( @@ -30,7 +39,9 @@ describe('rc-tooltip', () => {
Click this
, ); + fireEvent.click(container.querySelector('.target')); + verifyContent(container, 'Tooltip content'); }); @@ -81,11 +92,16 @@ describe('rc-tooltip', () => { expect(domRef.current).toBeTruthy(); }); }); + describe('destroyTooltipOnHide', () => { - const destroyVerifyContent = (wrapper: HTMLElement, content: string) => { + const destroyVerifyContent = async (wrapper: HTMLElement, content: string) => { fireEvent.click(wrapper.querySelector('.target')); + await waitFakeTimers(); + expect(wrapper.querySelector('.x-content').textContent).toBe(content); + fireEvent.click(wrapper.querySelector('.target')); + await waitFakeTimers(); }; it('default value', () => { const { container } = render( @@ -100,7 +116,8 @@ describe('rc-tooltip', () => { fireEvent.click(container.querySelector('.target')); verifyContent(container, 'Tooltip content'); }); - it('should only remove tooltip when value is true', () => { + + it('should only remove tooltip when value is true', async () => { const { container } = render( {
Click this
, ); - destroyVerifyContent(container, 'Tooltip content'); - expect(container.innerHTML).toBe('
Click this
'); - }); - it('should only remove tooltip when keepParent is true', () => { - const { container } = render( - Tooltip content} - > -
Click this
- , - ); - destroyVerifyContent(container, 'Tooltip content'); - expect(container.innerHTML).toBe('
Click this
'); - }); - it('should remove tooltip and container when keepParent is false', () => { - const { container } = render( - Tooltip content} - > -
Click this
- , - ); - destroyVerifyContent(container, 'Tooltip content'); - expect(container.innerHTML).toBe('
Click this
'); + await destroyVerifyContent(container, 'Tooltip content'); + expect(document.querySelector('.x-content')).toBeFalsy(); }); }); @@ -165,7 +154,7 @@ describe('rc-tooltip', () => { it('should show tooltip arrow default', () => { const { container } = render( Tooltip content} @@ -174,14 +163,12 @@ describe('rc-tooltip', () => { , ); fireEvent.click(container.querySelector('.target')); - expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( - '
', - ); + expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy(); }); it('should show tooltip arrow when showArrow is true', () => { const { container } = render( Tooltip content} @@ -191,14 +178,13 @@ describe('rc-tooltip', () => { , ); fireEvent.click(container.querySelector('.target')); - expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( - '
', - ); + console.log(container.innerHTML); + expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy(); }); it('should hide tooltip arrow when showArrow is false', () => { const { container } = render( Tooltip content} @@ -211,15 +197,13 @@ describe('rc-tooltip', () => { expect(container.querySelector('.rc-tooltip').classList).not.toContain( 'rc-tooltip-show-arrow', ); - expect(container.querySelector('.rc-tooltip-content').outerHTML).toBe( - '
', - ); + expect(container.querySelector('.rc-tooltip-arrow')).toBeFalsy(); }); }); it('visible', () => { const App = () => { - const [open, setOpen] = useState(false); + const [open, setOpen] = React.useState(false); return ( Tooltip content} visible={open}>
Date: Wed, 8 Feb 2023 15:12:17 +0800 Subject: [PATCH 24/41] 6.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c452f86a..92451396 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "5.3.1", + "version": "6.0.0", "description": "React Tooltip", "keywords": [ "react", From eb23ffc8d936775921cf34e287a226ab03ebbe99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Feb 2023 23:10:42 +0800 Subject: [PATCH 25/41] chore: fix missing def --- src/Tooltip.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index bb836d3e..56dfdffe 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -1,4 +1,4 @@ -import type { TriggerProps } from '@rc-component/trigger'; +import type { TriggerProps, TriggerRef } from '@rc-component/trigger'; import Trigger from '@rc-component/trigger'; import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface'; import * as React from 'react'; @@ -37,7 +37,11 @@ export interface TooltipProps extends Pick { +export interface TooltipRef { + forceAlign: VoidFunction; +} + +const Tooltip = (props: TooltipProps, ref: React.Ref) => { const { overlayClassName, trigger = ['hover'], @@ -64,8 +68,8 @@ const Tooltip = (props: TooltipProps, ref) => { ...restProps } = props; - const domRef = useRef(null); - useImperativeHandle(ref, () => domRef.current); + const triggerRef = useRef(null); + useImperativeHandle(ref, () => triggerRef.current); const extraProps = { ...restProps }; if ('visible' in props) { @@ -86,7 +90,7 @@ const Tooltip = (props: TooltipProps, ref) => { action={trigger} builtinPlacements={placements} popupPlacement={placement} - ref={domRef} + ref={triggerRef} popupAlign={align} getPopupContainer={getTooltipContainer} onPopupVisibleChange={onVisibleChange} From c91ecc419e3f5c7b09797ea5c083242b2748efc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Feb 2023 23:11:21 +0800 Subject: [PATCH 26/41] 6.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 92451396..40cd8254 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "6.0.0", + "version": "6.0.1", "description": "React Tooltip", "keywords": [ "react", From a6285d15a8e708d757490dfd67daa34634219212 Mon Sep 17 00:00:00 2001 From: Amumu Date: Thu, 20 Apr 2023 10:21:53 +0800 Subject: [PATCH 27/41] feat: arrow support className (#449) * feat: arrow support className * chore: clear --- README.md | 2 +- package.json | 2 +- src/Tooltip.tsx | 4 ++-- tests/index.test.tsx | 19 ++++++++++++++++++- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 4522ff5d..450e1c86 100644 --- a/README.md +++ b/README.md @@ -170,7 +170,7 @@ Online examples: showArrow - boolean + boolean | { className?: string } true arrow visible diff --git a/package.json b/package.json index 40cd8254..4404efbf 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@babel/runtime": "^7.11.2", - "@rc-component/trigger": "^1.0.4", + "@rc-component/trigger": "^1.10.0", "classnames": "^2.3.1" }, "devDependencies": { diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 56dfdffe..bc1a0d01 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -1,4 +1,4 @@ -import type { TriggerProps, TriggerRef } from '@rc-component/trigger'; +import type { TriggerProps, TriggerRef, ArrowType } from '@rc-component/trigger'; import Trigger from '@rc-component/trigger'; import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface'; import * as React from 'react'; @@ -28,7 +28,7 @@ export interface TooltipProps extends Pick HTMLElement; destroyTooltipOnHide?: boolean; align?: AlignType; - showArrow?: boolean; + showArrow?: boolean | ArrowType; arrowContent?: React.ReactNode; id?: string; children?: React.ReactElement; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 6784be1a..e8529930 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -178,9 +178,26 @@ describe('rc-tooltip', () => { , ); fireEvent.click(container.querySelector('.target')); - console.log(container.innerHTML); expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy(); }); + it('should show tooltip arrow when showArrow is object', () => { + const { container } = render( + Tooltip content} + showArrow={{ + className: 'abc' + }} + > +
Click this
+ , + ); + fireEvent.click(container.querySelector('.target')); + expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy(); + expect(container.querySelector('.rc-tooltip-arrow').classList.contains('abc')).toBeTruthy(); + }); it('should hide tooltip arrow when showArrow is false', () => { const { container } = render( Date: Fri, 21 Apr 2023 10:32:46 +0800 Subject: [PATCH 28/41] docs: site doc (#450) --- .dumirc.ts | 8 +++ README.md | 169 ++++++++---------------------------------------- package.json | 3 +- src/Tooltip.tsx | 5 +- 4 files changed, 38 insertions(+), 147 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index f7a1213b..e6e98c80 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,6 +1,12 @@ import { defineConfig } from 'dumi'; import path from 'path'; +const isProdSite = + // 不是预览模式 同时是生产环境 + process.env.PREVIEW !== 'true' && process.env.NODE_ENV === 'production'; + +const name = 'tooltip'; + export default defineConfig({ alias: { 'rc-tooltip$': path.resolve('src'), @@ -12,4 +18,6 @@ export default defineConfig({ name: 'Tooltip', logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', }, + base: isProdSite ? `/${name}/` : '/', + publicPath: isProdSite ? `/${name}/` : '/', }); diff --git a/README.md b/README.md index 450e1c86..581e8aa2 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ React Tooltip -[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url] +[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url] [npm-image]: https://img.shields.io/npm/v/rc-tooltip.svg?style=flat-square [npm-url]: https://npmjs.org/package/rc-tooltip @@ -24,9 +24,8 @@ React Tooltip ## Browsers support | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | -| --------- | --------- | --------- | --------- | --------- | -| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ | - +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ | ## Install @@ -47,7 +46,7 @@ ReactDOM.render( tooltip}> hover , - container + container, ); ``` @@ -62,144 +61,26 @@ Online examples: ### Props - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
overlayClassNamestringadditional className added to popup overlay
triggerstring | string[]['hover']which actions cause tooltip shown. enum of 'hover','click','focus'
mouseEnterDelaynumber0delay time to show when mouse enter.unit: s.
mouseLeaveDelaynumber0.1delay time to hide when mouse leave.unit: s.
overlayStyleObjectadditional style of overlay node
prefixClsStringrc-tooltipprefix class name
transitionNameString|Objectsame as https://github.com/react-component/animate
onVisibleChangeFunctioncall when visible is changed
afterVisibleChangeFunctioncall after visible is changed
visiblebooleanwhether tooltip is visible
defaultVisiblebooleanwhether tooltip is visible initially
placementStringone of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'rightTop', 'rightBottom', 'leftTop', 'leftBottom']
alignObject: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)value will be merged into placement's config
onPopupAlignfunction(popupDomNode, align)callback when popup node is aligned
overlayReact.Element | () => React.Elementpopup content
overlayInnerStyleObjectset overlay inner style
showArrowboolean | { className?: string }truearrow visible
arrowContentReact.Nodenullarrow content
getTooltipContainerfunctionFunction returning html node which will act as tooltip container. By default the tooltip attaches to the body. If you want to change the container, simply return a new element.
destroyTooltipOnHideboolean | { keepParent: boolean }falsewhether destroy tooltip when tooltip is hidden.In general, destroyTooltipOnHide will only remove itself instead of parent container of it. Parent container will be removed include tooltip when keepParent is true
idStringId which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support.
+| name | type | default | description | +| -------------------- | ----------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| trigger | string \| string\[] | 'hover' | which actions cause tooltip shown. enum of 'hover','click','focus' | +| visible | boolean | false | whether tooltip is visible | +| defaultVisible | boolean | false | whether tooltip is visible by default | +| placement | string | 'right' | tooltip placement. enum of 'top','left','right','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom' | +| motion | object | | Config popup motion. Please ref demo for example | +| onVisibleChange | (visible: boolean) => void; | | Callback when visible change | +| afterVisibleChange | (visible: boolean) => void; | | Callback after visible change | +| overlay | ReactNode \| () => ReactNode | | tooltip overlay content | +| overlayStyle | object | | style of tooltip overlay | +| overlayClassName | string | | className of tooltip overlay | +| prefixCls | string | 'rc-tooltip' | prefix class name of tooltip | +| mouseEnterDelay | number | 0 | delay time (in second) before tooltip shows when mouse enter | +| mouseLeaveDelay | number | 0.1 | delay time (in second) before tooltip hides when mouse leave | +| getTooltipContainer | (triggerNode: HTMLElement) => HTMLElement | () => document.body | get container of tooltip, default to body | +| destroyTooltipOnHide | boolean | false | destroy tooltip when it is hidden | +| align | object | | align config of tooltip. Please ref demo for usage example | +| showArrow | boolean \| object | false | whether to show arrow of tooltip | +| zIndex | number | | config popup tooltip zIndex | ## Important Note @@ -208,6 +89,7 @@ Online examples: ## Accessibility For accessibility purpose you can use the `id` prop to link your tooltip with another element. For example attaching it to an input element: + ```js ``` + If you do it like this, a screenreader would read the content of your tooltip if you focus the input element. **NOTE:** `role="tooltip"` is also added to expose the purpose of the tooltip element to a screenreader. diff --git a/package.json b/package.json index 4404efbf..ff19db9c 100644 --- a/package.json +++ b/package.json @@ -32,10 +32,11 @@ "scripts": { "compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css", "docs:build": "dumi build", - "docs:deploy": "gh-pages -d .doc", + "docs:deploy": "gh-pages -d dist", "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js", "now-build": "npm run build", "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", + "postpublish": "npm run docs:build && npm run docs:deploy", "start": "dumi dev", "test": "rc-test" }, diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index bc1a0d01..0a1518ab 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -1,4 +1,4 @@ -import type { TriggerProps, TriggerRef, ArrowType } from '@rc-component/trigger'; +import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger'; import Trigger from '@rc-component/trigger'; import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface'; import * as React from 'react'; @@ -32,7 +32,6 @@ export interface TooltipProps extends Pick) => { const triggerRef = useRef(null); useImperativeHandle(ref, () => triggerRef.current); - const extraProps = { ...restProps }; + const extraProps: Partial = { ...restProps }; if ('visible' in props) { extraProps.popupVisible = props.visible; } From 595be48b3f135aae53d9c05f3dd56e485ba2a020 Mon Sep 17 00:00:00 2001 From: Charlie Blevins Date: Thu, 20 Jul 2023 00:00:56 -0400 Subject: [PATCH 29/41] patch: export tooltip ref (#454) * patch: export tooltip ref * patch: export TooltipRef as a type --------- Co-authored-by: Charlie Blevins --- src/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index ff0529f7..6da28f5a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,7 @@ -import Tooltip from './Tooltip'; import Popup from './Popup'; +import Tooltip from './Tooltip'; +export type { TooltipRef } from './Tooltip'; export { Popup }; export default Tooltip; From f3ffdb1c194bbe2778a12da3df3a4211d3fb9b84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Fri, 22 Sep 2023 14:24:11 +0800 Subject: [PATCH 30/41] feat: pass fresh (#456) --- package.json | 2 +- src/Tooltip.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ff19db9c..36962987 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ }, "dependencies": { "@babel/runtime": "^7.11.2", - "@rc-component/trigger": "^1.10.0", + "@rc-component/trigger": "^1.17.0", "classnames": "^2.3.1" }, "devDependencies": { diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 0a1518ab..67f69223 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -6,7 +6,8 @@ import { forwardRef, useImperativeHandle, useRef } from 'react'; import { placements } from './placements'; import Popup from './Popup'; -export interface TooltipProps extends Pick { +export interface TooltipProps + extends Pick { trigger?: ActionType | ActionType[]; defaultVisible?: boolean; visible?: boolean; From 6090a105fa9abadba9a26fb40dd87c0022e4cfda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 22 Sep 2023 14:27:15 +0800 Subject: [PATCH 31/41] 6.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 36962987..733d590b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "6.0.1", + "version": "6.1.0", "description": "React Tooltip", "keywords": [ "react", From aca75b4a1e276bb236ffab1f4c2565f78497c9ab Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 10 Oct 2023 17:41:34 +0800 Subject: [PATCH 32/41] Update README.md --- README.md | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 581e8aa2..089a87ff 100644 --- a/README.md +++ b/README.md @@ -2,20 +2,31 @@ React Tooltip -[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url] - -[npm-image]: https://img.shields.io/npm/v/rc-tooltip.svg?style=flat-square -[npm-url]: https://npmjs.org/package/rc-tooltip +[![NPM version][npm-image]][npm-url] +[![npm download][download-image]][download-url] +[![build status][github-actions-image]][github-actions-url] +[![Codecov][codecov-image]][codecov-url] +[![bundle size][bundlephobia-image]][bundlephobia-url] +[![dumi][dumi-image]][dumi-url] + +[npm-image]: http://img.shields.io/npm/v/rc-tooltip.svg?style=flat-square +[npm-url]: http://npmjs.org/package/rc-tooltip +[travis-image]: https://img.shields.io/travis/react-component/tooltip/master?style=flat-square +[travis-url]: https://travis-ci.com/react-component/tooltip [github-actions-image]: https://github.com/react-component/tooltip/workflows/CI/badge.svg [github-actions-url]: https://github.com/react-component/tooltip/actions -[coveralls-image]: https://img.shields.io/coveralls/react-component/tooltip.svg?style=flat-square -[coveralls-url]: https://coveralls.io/r/react-component/tooltip?branch=master -[gemnasium-image]: https://img.shields.io/gemnasium/react-component/tooltip.svg?style=flat-square -[gemnasium-url]: https://gemnasium.com/react-component/tooltip -[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square -[node-url]: https://nodejs.org/download/ +[codecov-image]: https://img.shields.io/codecov/c/github/react-component/tooltip/master.svg?style=flat-square +[codecov-url]: https://app.codecov.io/gh/react-component/tooltip +[david-url]: https://david-dm.org/react-component/tooltip +[david-image]: https://david-dm.org/react-component/tooltip/status.svg?style=flat-square +[david-dev-url]: https://david-dm.org/react-component/tooltip?type=dev +[david-dev-image]: https://david-dm.org/react-component/tooltip/dev-status.svg?style=flat-square [download-image]: https://img.shields.io/npm/dm/rc-tooltip.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-tooltip +[bundlephobia-url]: https://bundlephobia.com/package/rc-tooltip +[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-tooltip +[dumi-url]: https://github.com/umijs/dumi +[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square ## Screenshot From 88ded8a08fe613161cff4b70ab224fe59cef4323 Mon Sep 17 00:00:00 2001 From: Amumu Date: Tue, 10 Oct 2023 05:42:12 -0500 Subject: [PATCH 33/41] fix: fix npm files (#458) * fix: fix npm files * chore: unused script --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index 733d590b..e537def5 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "main": "lib/index", "module": "es/index", "files": [ - "dist", "lib", "es", "assets/*.css", @@ -34,7 +33,6 @@ "docs:build": "dumi build", "docs:deploy": "gh-pages -d dist", "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js", - "now-build": "npm run build", "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", "postpublish": "npm run docs:build && npm run docs:deploy", "start": "dumi dev", From 65b94dd0765e3e942ef4222e8d9e2c641f44aa64 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 10 Oct 2023 19:03:49 +0800 Subject: [PATCH 34/41] 6.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e537def5..edf6e539 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "6.1.0", + "version": "6.1.1", "description": "React Tooltip", "keywords": [ "react", From 966131ea949ac05706fadd7b6a2c9901fe0cd48e Mon Sep 17 00:00:00 2001 From: Amumu Date: Tue, 10 Oct 2023 20:53:27 -0500 Subject: [PATCH 35/41] chore: pick types from upstream (#459) * chore: pick from upstream type * chore: more types --- src/Tooltip.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 67f69223..6f6c2d94 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -7,7 +7,16 @@ import { placements } from './placements'; import Popup from './Popup'; export interface TooltipProps - extends Pick { + extends Pick< + TriggerProps, + | 'onPopupAlign' + | 'builtinPlacements' + | 'fresh' + | 'children' + | 'mouseLeaveDelay' + | 'mouseEnterDelay' + | 'prefixCls' + > { trigger?: ActionType | ActionType[]; defaultVisible?: boolean; visible?: boolean; @@ -23,16 +32,12 @@ export interface TooltipProps overlay: (() => React.ReactNode) | React.ReactNode; overlayStyle?: React.CSSProperties; overlayClassName?: string; - prefixCls?: string; - mouseEnterDelay?: number; - mouseLeaveDelay?: number; getTooltipContainer?: (node: HTMLElement) => HTMLElement; destroyTooltipOnHide?: boolean; align?: AlignType; showArrow?: boolean | ArrowType; arrowContent?: React.ReactNode; id?: string; - children?: React.ReactElement; overlayInnerStyle?: React.CSSProperties; zIndex?: number; } From 06cb7993450ffe2c39caaf8f43957f2ed61b7698 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Tue, 17 Oct 2023 21:21:30 +0800 Subject: [PATCH 36/41] docs: update demo (#461) --- assets/bootstrap_white.less | 2 ++ tsconfig.json | 22 +++++++++++++++++----- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/assets/bootstrap_white.less b/assets/bootstrap_white.less index b6deb247..e123dd12 100644 --- a/assets/bootstrap_white.less +++ b/assets/bootstrap_white.less @@ -104,6 +104,7 @@ margin-top: -@tooltip-arrow-width; border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; border-right-color: @tooltip-arrow-color; + transform: translateX(calc(-100% + @tooltip-shadow-width)); } &-placement-right &-arrow-inner, @@ -135,6 +136,7 @@ margin-top: -@tooltip-arrow-width; border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; border-left-color: @tooltip-arrow-color; + transform: translateX(calc(100% - @tooltip-shadow-width)); } &-placement-left &-arrow-inner, diff --git a/tsconfig.json b/tsconfig.json index 9d404f76..33bd1ce3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,10 +8,22 @@ "skipLibCheck": true, "esModuleInterop": true, "paths": { - "@/*": ["src/*"], - "@@/*": [".dumi/tmp/*"], - "rc-tooltip": ["src/index.tsx"] + "@/*": [ + "src/*" + ], + "@@/*": [ + ".dumi/tmp/*" + ], + "rc-tooltip": [ + "src/index.tsx" + ] } }, - "include": [".dumi/**/*", ".dumirc.ts", "./src/**/*.ts", "./src/**/*.tsx", "./docs/**/*.tsx", "./tests/**/*.tsx"] -} + "include": [ + ".dumirc.ts", + "./src/**/*.ts", + "./src/**/*.tsx", + "./docs/**/*.tsx", + "./tests/**/*.tsx" + ] +} \ No newline at end of file From d02322908836892bcc6085ac28d033e8fe5cc3de Mon Sep 17 00:00:00 2001 From: Amumu Date: Tue, 17 Oct 2023 20:44:23 -0500 Subject: [PATCH 37/41] chore: So many chores (#460) * fix: fix dev * demo * chore: fix * demo redirect * fix * ci * ci --- .dumi/app.tsx | 10 ++++++++++ .dumi/tsconfig.json | 6 ++++++ .github/workflows/react-component-ci.yml | 8 ++++---- README.md | 4 ++-- package.json | 3 ++- src/Tooltip.tsx | 2 +- 6 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 .dumi/app.tsx create mode 100644 .dumi/tsconfig.json diff --git a/.dumi/app.tsx b/.dumi/app.tsx new file mode 100644 index 00000000..32140877 --- /dev/null +++ b/.dumi/app.tsx @@ -0,0 +1,10 @@ +import { Navigate } from 'dumi'; +import * as React from 'react'; + +export function patchClientRoutes({ routes }) { + routes[0].children.unshift({ + id: 'demo-redirect', + path: '/demo', + element: , + }); +} diff --git a/.dumi/tsconfig.json b/.dumi/tsconfig.json new file mode 100644 index 00000000..79711a82 --- /dev/null +++ b/.dumi/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../tsconfig.json", + "include": [ + "**/*" + ] +} \ No newline at end of file diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml index 432a3fb3..467f037f 100644 --- a/.github/workflows/react-component-ci.yml +++ b/.github/workflows/react-component-ci.yml @@ -15,7 +15,7 @@ jobs: - uses: actions/setup-node@v1 with: - node-version: '12' + node-version: '14' - name: cache package-lock.json uses: actions/cache@v2 @@ -43,7 +43,7 @@ jobs: - name: install if: steps.node_modules_cache_id.outputs.cache-hit != 'true' run: npm ci - + lint: runs-on: ubuntu-latest steps: @@ -66,7 +66,7 @@ jobs: run: npm run lint needs: setup - + compile: runs-on: ubuntu-latest steps: @@ -89,7 +89,7 @@ jobs: run: npm run compile needs: setup - + coverage: runs-on: ubuntu-latest steps: diff --git a/README.md b/README.md index 089a87ff..42c4d808 100644 --- a/README.md +++ b/README.md @@ -64,9 +64,9 @@ ReactDOM.render( ## Examples `npm start` and then go to - + -Online examples: +Online demo: ## API diff --git a/package.json b/package.json index edf6e539..d5c48a62 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ ], "scripts": { "compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css", + "prepare": "dumi setup", "docs:build": "dumi build", "docs:deploy": "gh-pages -d dist", "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js", @@ -51,7 +52,7 @@ "@types/react-dom": "^18.0.10", "@types/warning": "^3.0.0", "cross-env": "^7.0.0", - "dumi": "^2.1.1", + "dumi": "^2.2.13", "eslint": "^7.1.0", "father": "^4.0.0", "gh-pages": "^3.1.0", diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 6f6c2d94..1cfc4150 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -74,7 +74,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref) => { } = props; const triggerRef = useRef(null); - useImperativeHandle(ref, () => triggerRef.current); + useImperativeHandle(ref, () => triggerRef.current as TriggerRef); const extraProps: Partial = { ...restProps }; if ('visible' in props) { From c8d83d1485b4d5dbd7f29eab037f45ae281f285b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 26 Oct 2023 17:53:42 +0800 Subject: [PATCH 38/41] feat: Tooltip ref support nativeElement (#463) --- package.json | 2 +- src/Tooltip.tsx | 3 ++- tests/index.test.tsx | 16 ++++++++++++++-- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index d5c48a62..6b6c22ec 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@babel/runtime": "^7.11.2", - "@rc-component/trigger": "^1.17.0", + "@rc-component/trigger": "^1.18.0", "classnames": "^2.3.1" }, "devDependencies": { diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 1cfc4150..944f7119 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -43,6 +43,7 @@ export interface TooltipProps } export interface TooltipRef { + nativeElement: HTMLElement; forceAlign: VoidFunction; } @@ -74,7 +75,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref) => { } = props; const triggerRef = useRef(null); - useImperativeHandle(ref, () => triggerRef.current as TriggerRef); + useImperativeHandle(ref, () => triggerRef.current); const extraProps: Partial = { ...restProps }; if ('visible' in props) { diff --git a/tests/index.test.tsx b/tests/index.test.tsx index e8529930..d167d0cd 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -1,6 +1,6 @@ import { act, fireEvent, render } from '@testing-library/react'; import React from 'react'; -import Tooltip from '../src'; +import Tooltip, { TooltipRef } from '../src'; const verifyContent = (wrapper: HTMLElement, content: string) => { expect(wrapper.querySelector('.x-content').textContent).toBe(content); @@ -188,7 +188,7 @@ describe('rc-tooltip', () => { placement="left" overlay={Tooltip content} showArrow={{ - className: 'abc' + className: 'abc', }} >
Click this
@@ -239,4 +239,16 @@ describe('rc-tooltip', () => { fireEvent.click(container.querySelector('.target')); expect(container.querySelector('.x-content')).toBeTruthy(); }); + + it('ref support nativeElement', () => { + const nodeRef = React.createRef(); + + const { container } = render( + }> +