From d067a1f9bd70f3013e40bd761080e0d795142534 Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Sun, 18 May 2025 12:00:32 +0800 Subject: [PATCH 1/5] update destroyTooltipOnHide to destroyOnHidden --- .gitignore | 5 ++-- README.md | 44 +++++++++++++++---------------- docs/examples/arrowContent.tsx | 9 ++++--- docs/examples/formError.tsx | 6 ++--- docs/examples/onVisibleChange.tsx | 8 +++--- docs/examples/placement.tsx | 5 ++-- docs/examples/point.tsx | 4 +-- docs/examples/showArrow.tsx | 10 +++---- docs/examples/simple.tsx | 10 +++---- package.json | 13 ++++----- src/Popup.tsx | 17 +++++++++--- src/Tooltip.tsx | 21 +++++++-------- tests/index.test.tsx | 17 ++++++------ 13 files changed, 88 insertions(+), 81 deletions(-) diff --git a/.gitignore b/.gitignore index 93e1cbd0..d34b9854 100644 --- a/.gitignore +++ b/.gitignore @@ -30,15 +30,16 @@ es coverage yarn.lock package-lock.json +pnpm-lock.yaml # umi .umi .umi-production .umi-test -.env.local +.env.local # dumi .dumi/tmp .dumi/tmp-production -bun.lockb \ No newline at end of file +bun.lockb diff --git a/README.md b/README.md index ae51cdcb..6d843ad7 100644 --- a/README.md +++ b/README.md @@ -72,28 +72,28 @@ Online demo: ### Props -| 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 | | deprecated, Please use `styles={{ root: {} }}` | -| overlayClassName | string | | deprecated, Please use `classNames={{ root: {} }}` | -| 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 | -| classNames | classNames?: { root?: string; body?: string;}; | | Semantic DOM class | -| styles | styles?: {root?: React.CSSProperties;body?: React.CSSProperties;}; | | Semantic DOM styles | +| 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 | | deprecated, Please use `styles={{ root: {} }}` | +| overlayClassName | string | | deprecated, Please use `classNames={{ root: {} }}` | +| 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 | +| destroyOnHidden | 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 | +| classNames | classNames?: { root?: string; body?: string;}; | | Semantic DOM class | +| styles | styles?: {root?: React.CSSProperties;body?: React.CSSProperties;}; | | Semantic DOM styles | ## Important Note diff --git a/docs/examples/arrowContent.tsx b/docs/examples/arrowContent.tsx index a5ed068b..61d68d9a 100644 --- a/docs/examples/arrowContent.tsx +++ b/docs/examples/arrowContent.tsx @@ -3,7 +3,8 @@ import Tooltip from 'rc-tooltip'; import '../../assets/bootstrap_white.less'; const text = Tooltip Text; -const styles = { + +const styles: React.CSSProperties = { display: 'table-cell', height: '60px', width: '80px', @@ -11,13 +12,13 @@ const styles = { background: '#f6f6f6', verticalAlign: 'middle', border: '5px solid white', -} as CSSProperties; +}; -const rowStyle = { +const rowStyle: React.CSSProperties = { display: 'table-row', }; -const Test = () => ( +const Test: React.FC = () => (
{ - this.setState({ - visible: !e.target.value, - }); + handleChange = (e: React.ChangeEvent) => { + this.setState({ visible: !e.target.value }); }; render() { diff --git a/docs/examples/onVisibleChange.tsx b/docs/examples/onVisibleChange.tsx index 0de15c25..fb8049b9 100644 --- a/docs/examples/onVisibleChange.tsx +++ b/docs/examples/onVisibleChange.tsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import Tooltip from 'rc-tooltip'; import '../../assets/bootstrap.less'; -function preventDefault(e) { +function preventDefault(e: React.MouseEvent) { e.preventDefault(); } @@ -16,10 +16,8 @@ class Test extends Component { visible: false, } as TestState; - onVisibleChange = visible => { - this.setState({ - visible, - }); + onVisibleChange = (visible: boolean) => { + this.setState({ visible }); }; onDestroy = () => { diff --git a/docs/examples/placement.tsx b/docs/examples/placement.tsx index 987141a7..087a065e 100644 --- a/docs/examples/placement.tsx +++ b/docs/examples/placement.tsx @@ -4,6 +4,7 @@ import '../../assets/bootstrap.less'; import Popup from '../../src/Popup'; const text = Tooltip Text; + const styles: React.CSSProperties = { display: 'table-cell', height: '60px', @@ -14,11 +15,11 @@ const styles: React.CSSProperties = { border: '5px solid white', }; -const rowStyle = { +const rowStyle: React.CSSProperties = { display: 'table-row', }; -const Test = () => ( +const Test: React.FC = () => ( <>
diff --git a/docs/examples/point.tsx b/docs/examples/point.tsx index d59ce6a2..8850763b 100644 --- a/docs/examples/point.tsx +++ b/docs/examples/point.tsx @@ -4,8 +4,8 @@ import '../../assets/bootstrap_white.less'; const text = Tooltip Text; -const Test = () => { - const scrollRef = React.useRef(); +const Test: React.FC = () => { + const scrollRef = React.useRef(null); return (
diff --git a/docs/examples/showArrow.tsx b/docs/examples/showArrow.tsx index 0f7f94ae..bf2a97dc 100644 --- a/docs/examples/showArrow.tsx +++ b/docs/examples/showArrow.tsx @@ -1,10 +1,10 @@ -import type { CSSProperties } from 'react'; import React from 'react'; import Tooltip from 'rc-tooltip'; import '../../assets/bootstrap_white.less'; const text = Tooltip Text; -const styles = { + +const styles: React.CSSProperties = { display: 'table-cell', height: '60px', width: '80px', @@ -12,13 +12,13 @@ const styles = { background: '#f6f6f6', verticalAlign: 'middle', border: '5px solid white', -} as CSSProperties; +}; -const rowStyle = { +const rowStyle: React.CSSProperties = { display: 'table-row', }; -const Test = () => ( +const Test: React.FC = () => (
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx index 8cb3012c..60afc2fe 100644 --- a/docs/examples/simple.tsx +++ b/docs/examples/simple.tsx @@ -7,7 +7,7 @@ import '../../assets/bootstrap.less'; import { placements } from '../../src/placements'; interface TestState { - destroyTooltipOnHide: boolean; + destroyOnHidden: boolean; destroyTooltipOptions: { name: string; value: number }[]; placement: string; transitionName: string; @@ -19,7 +19,7 @@ interface TestState { class Test extends Component { state = { - destroyTooltipOnHide: false, + destroyOnHidden: false, destroyTooltipOptions: [ { name: "don't destroy", @@ -95,7 +95,7 @@ class Test extends Component { onDestroyChange = (e) => { const { value } = e.target; this.setState({ - destroyTooltipOnHide: [false, { keepParent: false }, { keepParent: true }][value] as boolean, + destroyOnHidden: [false, { keepParent: false }, { keepParent: true }][value] as boolean, }); }; @@ -137,7 +137,7 @@ class Test extends Component {