Skip to content

Commit 4ee6ffd

Browse files
zombieJzombieJ
committed
refactor: rename to container
1 parent 0228bed commit 4ee6ffd

File tree

7 files changed

+21
-21
lines changed

7 files changed

+21
-21
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ Online demo: <https://react-component.github.io/tooltip/demo>
9292
| align | object | | align config of tooltip. Please ref demo for usage example |
9393
| showArrow | boolean \| object | false | whether to show arrow of tooltip |
9494
| zIndex | number | | config popup tooltip zIndex |
95-
| classNames | classNames?: { root?: string; body?: string;}; | | Semantic DOM class |
96-
| styles | styles?: {root?: React.CSSProperties;body?: React.CSSProperties;}; | | Semantic DOM styles |
95+
| classNames | classNames?: { root?: string; container?: string;}; | | Semantic DOM class |
96+
| styles | styles?: {root?: React.CSSProperties;container?: React.CSSProperties;}; | | Semantic DOM styles |
9797

9898
## Important Note
9999

‎docs/examples/placement.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ const Test: React.FC = () => (
9494
<h5>Debug Usage</h5>
9595
<Popup
9696
prefixCls="rc-tooltip"
97-
classNames={{ body: 'rc-tooltip-placement-top' }}
98-
styles={{ body: { display: 'inline-block', position: 'relative' } }}
97+
classNames={{ container: 'rc-tooltip-placement-top' }}
98+
styles={{ container: { display: 'inline-block', position: 'relative' } }}
9999
>
100100
Test
101101
</Popup>

‎docs/examples/point.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const Test: React.FC = () => {
3030
<Tooltip
3131
placement="top"
3232
overlay={text}
33-
styles={{ body: { width: 300, height: 50 } }}
33+
styles={{ container: { width: 300, height: 50 } }}
3434
popupVisible
3535
arrowContent={<div className="rc-tooltip-arrow-inner" />}
3636
>

‎docs/examples/simple.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ class Test extends Component<any, TestState> {
217217
offset: [this.state.offsetX, this.state.offsetY],
218218
}}
219219
motion={{ motionName: this.state.transitionName }}
220-
styles={{ body: state.overlayInnerStyle }}
220+
styles={{ container: state.overlayInnerStyle }}
221221
>
222222
<div style={{ height: 100, width: 100, border: '1px solid red' }}>trigger</div>
223223
</Tooltip>

‎src/Popup.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const Popup: React.FC<ContentProps> = (props) => {
1818
return (
1919
<div
2020
id={id}
21-
className={cls(`${prefixCls}-body`, classNames?.body, className)}
22-
style={{ ...styles?.body, ...style }}
21+
className={cls(`${prefixCls}-container`, classNames?.container, className)}
22+
style={{ ...styles?.container, ...style }}
2323
role="tooltip"
2424
>
2525
{typeof children === 'function' ? children() : children}

‎src/Tooltip.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useImperativeHandle, useRef } from 'react';
88
import { placements } from './placements';
99
import Popup from './Popup';
1010

11-
export type SemanticName = 'root' | 'arrow' | 'body' | 'uniqueBody';
11+
export type SemanticName = 'root' | 'arrow' | 'container' | 'uniqueBody';
1212

1313
export interface TooltipProps
1414
extends Pick<

‎tests/index.test.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -319,7 +319,7 @@ describe('rc-tooltip', () => {
319319
it('should apply custom classNames to all semantic elements', () => {
320320
const customClassNames = {
321321
root: 'custom-root',
322-
body: 'custom-body',
322+
container: 'custom-body',
323323
arrow: 'custom-arrow',
324324
};
325325

@@ -335,7 +335,7 @@ describe('rc-tooltip', () => {
335335
);
336336

337337
const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
338-
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
338+
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
339339
const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
340340

341341
// Verify classNames
@@ -347,7 +347,7 @@ describe('rc-tooltip', () => {
347347
it('should apply custom styles to all semantic elements', () => {
348348
const customStyles = {
349349
root: { backgroundColor: 'blue', zIndex: 1000 },
350-
body: { color: 'red', fontSize: '14px' },
350+
container: { color: 'red', fontSize: '14px' },
351351
arrow: { borderColor: 'green' },
352352
};
353353

@@ -358,7 +358,7 @@ describe('rc-tooltip', () => {
358358
);
359359

360360
const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
361-
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
361+
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
362362
const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
363363

364364
// Verify styles
@@ -370,13 +370,13 @@ describe('rc-tooltip', () => {
370370
it('should apply both classNames and styles simultaneously', () => {
371371
const customClassNames = {
372372
root: 'custom-root',
373-
body: 'custom-body',
373+
container: 'custom-body',
374374
arrow: 'custom-arrow',
375375
};
376376

377377
const customStyles = {
378378
root: { backgroundColor: 'blue' },
379-
body: { color: 'red' },
379+
container: { color: 'red' },
380380
arrow: { borderColor: 'green' },
381381
};
382382

@@ -393,7 +393,7 @@ describe('rc-tooltip', () => {
393393
);
394394

395395
const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
396-
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
396+
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
397397
const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
398398

399399
// Verify that classNames and styles work simultaneously
@@ -407,7 +407,7 @@ describe('rc-tooltip', () => {
407407

408408
it('should work with partial classNames and styles', () => {
409409
const partialClassNames = {
410-
body: 'custom-body',
410+
container: 'custom-body',
411411
};
412412

413413
const partialStyles = {
@@ -427,7 +427,7 @@ describe('rc-tooltip', () => {
427427
);
428428

429429
const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
430-
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
430+
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
431431
const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow') as HTMLElement;
432432

433433
// Verify partial configuration takes effect
@@ -464,13 +464,13 @@ describe('rc-tooltip', () => {
464464
it('should not break when showArrow is false', () => {
465465
const customClassNames = {
466466
root: 'custom-root',
467-
body: 'custom-body',
467+
container: 'custom-body',
468468
arrow: 'custom-arrow', // 即使配置了arrow，但不显示箭头时不应该报错
469469
};
470470

471471
const customStyles = {
472472
root: { backgroundColor: 'blue' },
473-
body: { color: 'red' },
473+
container: { color: 'red' },
474474
arrow: { borderColor: 'green' },
475475
};
476476

@@ -487,7 +487,7 @@ describe('rc-tooltip', () => {
487487
);
488488

489489
const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
490-
const tooltipBodyElement = container.querySelector('.rc-tooltip-body') as HTMLElement;
490+
const tooltipBodyElement = container.querySelector('.rc-tooltip-container') as HTMLElement;
491491
const tooltipArrowElement = container.querySelector('.rc-tooltip-arrow');
492492

493493
// Verify when arrow is not shown

0 commit comments

Comments
 (0)