Skip to content

Commit 91ec132

Browse files
zombieJzombieJ
authored
refactor: rename to container (#505)
* refactor: rename to container * refactor: uniqueCotnainer * chore: of it * chore: of it * chore: update deps * test: update test
1 parent 0228bed commit 91ec132

File tree

8 files changed

+50
-49
lines changed

8 files changed

+50
-49
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>

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"test": "rc-test"
4242
},
4343
"dependencies": {
44-
"@rc-component/trigger": "^3.6.7",
44+
"@rc-component/trigger": "^3.6.15",
4545
"@rc-component/util": "^1.3.0",
4646
"classnames": "^2.3.1"
4747
},
@@ -64,10 +64,11 @@
6464
"rc-test": "^7.0.9",
6565
"react": "^19.1.0",
6666
"react-dom": "^19.1.0",
67-
"typescript": "^4.0.5"
67+
"typescript": "^4.0.5",
68+
"prettier": "^3.6.2"
6869
},
6970
"peerDependencies": {
7071
"react": ">=18.0.0",
7172
"react-dom": ">=18.0.0"
7273
}
73-
}
74+
}

‎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: 3 additions & 3 deletions
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' | 'uniqueContainer';
1212

1313
export interface TooltipProps
1414
extends Pick<
@@ -154,8 +154,8 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
154154
popupStyle={styles?.root}
155155
mouseEnterDelay={mouseEnterDelay}
156156
arrow={mergedArrow}
157-
uniqueBgClassName={classNames?.uniqueBody}
158-
uniqueBgStyle={styles?.uniqueBody}
157+
uniqueContainerClassName={classNames?.uniqueContainer}
158+
uniqueContainerStyle={styles?.uniqueContainer}
159159
{...extraProps}
160160
>
161161
{getChildren()}

‎tests/index.test.tsx‎

Lines changed: 35 additions & 35 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-container',
323323
arrow: 'custom-arrow',
324324
};
325325

@@ -335,19 +335,19 @@ 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
342342
expect(tooltipElement).toHaveClass('custom-root');
343-
expect(tooltipBodyElement).toHaveClass('custom-body');
343+
expect(tooltipBodyElement).toHaveClass('custom-container');
344344
expect(tooltipArrowElement).toHaveClass('custom-arrow');
345345
});
346346

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-container',
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,21 +393,21 @@ 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
400400
expect(tooltipElement).toHaveClass('custom-root');
401401
expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
402-
expect(tooltipBodyElement).toHaveClass('custom-body');
402+
expect(tooltipBodyElement).toHaveClass('custom-container');
403403
expect(tooltipBodyElement).toHaveStyle({ color: 'red' });
404404
expect(tooltipArrowElement).toHaveClass('custom-arrow');
405405
expect(tooltipArrowElement).toHaveStyle({ borderColor: 'green' });
406406
});
407407

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

413413
const partialStyles = {
@@ -427,50 +427,50 @@ 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
434434
expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
435-
expect(tooltipBodyElement).toHaveClass('custom-body');
435+
expect(tooltipBodyElement).toHaveClass('custom-container');
436436

437437
// Verify that unconfigured elements don't have custom class names or styles
438438
expect(tooltipElement).not.toHaveClass('custom-root');
439439
expect(tooltipArrowElement).not.toHaveClass('custom-arrow');
440440
});
441441

442-
it('should pass uniqueBody to Trigger as uniqueBgClassName and uniqueBgStyle', () => {
443-
// Test that the component renders without errors when uniqueBody is provided
444-
render(
445-
<UniqueProvider>
446-
<Tooltip
447-
classNames={{ uniqueBody: 'unique-body-class' }}
448-
styles={{ uniqueBody: { color: 'red' } }}
449-
overlay={<div>Tooltip content</div>}
450-
visible
451-
unique
452-
>
453-
<button>Trigger</button>
454-
</Tooltip>
455-
</UniqueProvider>,
456-
);
442+
it('should pass uniqueContainer to Trigger as uniqueContainerClassName and uniqueContainerStyle', () => {
443+
// Test that the component renders without errors when uniqueContainer is provided
444+
expect(() => {
445+
render(
446+
<UniqueProvider>
447+
<Tooltip
448+
classNames={{ uniqueContainer: 'unique-container-class' }}
449+
styles={{ uniqueContainer: { color: 'red' } }}
450+
overlay={<div>Tooltip content</div>}
451+
visible
452+
unique
453+
>
454+
<button>Trigger</button>
455+
</Tooltip>
456+
</UniqueProvider>,
457+
);
458+
}).not.toThrow();
457459

458-
// Test that uniqueBody doesn't break the normal tooltip functionality
459-
expect(document.querySelector('.unique-body-class')).toHaveStyle({
460-
color: 'red',
461-
});
460+
// Test that uniqueContainer doesn't break the normal tooltip functionality
461+
// Note: The actual DOM behavior depends on @rc-component/trigger implementation
462462
});
463463

464464
it('should not break when showArrow is false', () => {
465465
const customClassNames = {
466466
root: 'custom-root',
467-
body: 'custom-body',
467+
container: 'custom-container',
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
@@ -496,7 +496,7 @@ describe('rc-tooltip', () => {
496496
// Other styles still take effect
497497
expect(tooltipElement).toHaveClass('custom-root');
498498
expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
499-
expect(tooltipBodyElement).toHaveClass('custom-body');
499+
expect(tooltipBodyElement).toHaveClass('custom-container');
500500
expect(tooltipBodyElement).toHaveStyle({ color: 'red' });
501501
});
502502
});

0 commit comments

Comments
 (0)