Skip to content

update destroyTooltipOnHide to destroyOnHidden #495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 19, 2025
Merged

update destroyTooltipOnHide to destroyOnHidden #495

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d067a1f
update destroyTooltipOnHide to destroyOnHidden
li-jia-nan May 18, 2025
a613739
update destroyTooltipOnHide to destroyOnHidden
li-jia-nan May 18, 2025
e8f563c
fix: fix CI
li-jia-nan May 19, 2025
ed1dafa
fix: fix CI
li-jia-nan May 19, 2025
e351c6b
fix: fix CI
li-jia-nan May 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .dumirc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default defineConfig({
name: 'Tooltip',
logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
},
outputPath: '.doc',
base: isProdSite ? `/${name}/` : '/',
publicPath: isProdSite ? `/${name}/` : '/',
});
39 changes: 39 additions & 0 deletions .github/workflows/site-deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
name: Deploy website
on:
push:
tags:
- '*'
workflow_dispatch:

permissions:
contents: write

jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v3

- name: setup node
uses: actions/setup-node@v1
with:
node-version: 14

- name: create package-lock.json
run: npm i --package-lock-only --ignore-scripts

- name: Install dependencies
run: npm ci

- name: build Docs
run: npm run build

- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
force_orphan: true
user_name: 'github-actions[bot]'
user_email: 'github-actions[bot]@users.noreply.github.com'
5 changes: 3 additions & 2 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
bun.lockb
44 changes: 22 additions & 22 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,28 +72,28 @@ Online demo: <https://react-component.github.io/tooltip/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

Expand Down
9 changes: 5 additions & 4 deletions docs/examples/arrowContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,22 @@ import Tooltip from 'rc-tooltip';
import '../../assets/bootstrap_white.less';

const text = <span>Tooltip Text</span>;
const styles = {

const styles: React.CSSProperties = {
display: 'table-cell',
height: '60px',
width: '80px',
textAlign: 'center',
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 = () => (
<div style={{ display: 'table', padding: 120 }}>
<div style={rowStyle}>
<Tooltip
Expand Down
6 changes: 2 additions & 4 deletions docs/examples/formError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,8 @@ class Test extends Component {
});
};

handleChange = (e) => {
this.setState({
visible: !e.target.value,
});
handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
this.setState({ visible: !e.target.value });
};

render() {
Expand Down
8 changes: 3 additions & 5 deletions docs/examples/onVisibleChange.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLAnchorElement, MouseEvent>) {
e.preventDefault();
}

Expand All @@ -16,10 +16,8 @@ class Test extends Component {
visible: false,
} as TestState;

onVisibleChange = visible => {
this.setState({
visible,
});
onVisibleChange = (visible: boolean) => {
this.setState({ visible });
};

onDestroy = () => {
Expand Down
5 changes: 3 additions & 2 deletions docs/examples/placement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import '../../assets/bootstrap.less';
import Popup from '../../src/Popup';

const text = <span>Tooltip Text</span>;

const styles: React.CSSProperties = {
display: 'table-cell',
height: '60px',
Expand All @@ -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 = () => (
<>
<div style={{ display: 'table', padding: 120 }}>
<div style={rowStyle}>
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/point.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import '../../assets/bootstrap_white.less';

const text = <span>Tooltip Text</span>;

const Test = () => {
const scrollRef = React.useRef<HTMLDivElement>();
const Test: React.FC = () => {
const scrollRef = React.useRef<HTMLDivElement>(null);

return (
<div style={{ padding: 10 }}>
Expand Down
10 changes: 5 additions & 5 deletions docs/examples/showArrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import type { CSSProperties } from 'react';
import React from 'react';
import Tooltip from 'rc-tooltip';
import '../../assets/bootstrap_white.less';

const text = <span>Tooltip Text</span>;
const styles = {

const styles: React.CSSProperties = {
display: 'table-cell',
height: '60px',
width: '80px',
textAlign: 'center',
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 = () => (
<div style={{ display: 'table', padding: 120 }}>
<div style={rowStyle}>
<Tooltip placement="left" overlay={text} showArrow={false}>
Expand Down
10 changes: 5 additions & 5 deletions docs/examples/simple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -19,7 +19,7 @@ interface TestState {

class Test extends Component<any, TestState> {
state = {
destroyTooltipOnHide: false,
destroyOnHidden: false,
destroyTooltipOptions: [
{
name: "don't destroy",
Expand Down Expand Up @@ -95,7 +95,7 @@ class Test extends Component<any, TestState> {
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,
});
};

Expand Down Expand Up @@ -137,7 +137,7 @@ class Test extends Component<any, TestState> {
</label>
&nbsp;&nbsp;&nbsp;&nbsp;
<label>
destroyTooltipOnHide:
destroyOnHidden:
<select onChange={this.onDestroyChange}>
{this.state.destroyTooltipOptions.map(({ name, value }) => (
<option key={value} value={value}>
Expand Down Expand Up @@ -209,7 +209,7 @@ class Test extends Component<any, TestState> {
placement={this.state.placement}
mouseEnterDelay={0}
mouseLeaveDelay={0.1}
destroyTooltipOnHide={this.state.destroyTooltipOnHide}
destroyOnHidden={this.state.destroyOnHidden}
trigger={Object.keys(this.state.trigger) as ActionType[]}
onVisibleChange={this.onVisibleChange}
overlay={<div style={{ height: 50, width: 50 }}>i am a tooltip</div>}
Expand Down
11 changes: 0 additions & 11 deletions now.json
View file
Open in desktop

This file was deleted.

17 changes: 9 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"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 dist",
"docs:deploy": "npm run docs:build && gh-pages -d dist",
"lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
"now-build": "npm run docs:build",
"prepare": "dumi setup",
Expand All @@ -48,10 +48,11 @@
},
"devDependencies": {
"@rc-component/np": "^1.0.3",
"@testing-library/react": "^14.0.0",
"@testing-library/react": "^16.3.0",
"@types/jest": "^29.4.0",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"@types/node": "^22.15.18",
"@types/react": "^19.1.4",
"@types/react-dom": "^19.1.5",
"@types/warning": "^3.0.0",
"cross-env": "^7.0.0",
"dumi": "^2.2.13",
Expand All @@ -61,12 +62,12 @@
"gh-pages": "^3.1.0",
"less": "^4.1.1",
"rc-test": "^7.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"typescript": "^4.0.5"
},
"peerDependencies": {
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
}
}
17 changes: 13 additions & 4 deletions src/Popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,16 @@ export interface ContentProps {
bodyClassName?: string;
}

export default function Popup(props: ContentProps) {
const { children, prefixCls, id, overlayInnerStyle: innerStyle, bodyClassName, className, style } =
props;
const Popup: React.FC<ContentProps> = (props) => {
const {
children,
prefixCls,
id,
overlayInnerStyle: innerStyle,
bodyClassName,
className,
style,
} = props;

return (
<div className={classNames(`${prefixCls}-content`, className)} style={style}>
Expand All @@ -27,4 +34,6 @@ export default function Popup(props: ContentProps) {
</div>
</div>
);
}
};

export default Popup;
Loading