@@ -203,7 +207,7 @@ const Demo = () => {
maskMotion={motion ? MaskMotion : null}
maskClosable={maskClosable}
stretch={stretch}
- action={Object.keys(actions).filter((action) => actions[action])}
+ action={actionsKeys}
builtinPlacements={builtinPlacements}
forceRender={forceRender}
popupStyle={{
diff --git a/docs/examples/nested.tsx b/docs/examples/nested.tsx
index 3412438e..12dffe09 100644
--- a/docs/examples/nested.tsx
+++ b/docs/examples/nested.tsx
@@ -67,9 +67,7 @@ const Test = () => {
getPopupContainer={() => containerRef.current}
popup={
I am inner Trigger Popup
}
>
-
- clickToShowInnerTrigger
-
+
clickToShowInnerTrigger
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
index 31b53881..aa4c7033 100644
--- a/docs/examples/simple.tsx
+++ b/docs/examples/simple.tsx
@@ -1,6 +1,6 @@
/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
+import Trigger, { ActionType } from 'rc-trigger';
import React from 'react';
import '../../assets/index.less';
@@ -199,6 +199,9 @@ class Test extends React.Component
{
if (state.destroyed) {
return null;
}
+
+ const actions = Object.keys(state.trigger) as ActionType[];
+
return (
@@ -359,7 +362,7 @@ class Test extends React.Component
{
maskAnimation="fade"
// mouseEnterDelay={0.1}
// mouseLeaveDelay={0.1}
- action={Object.keys(state.trigger)}
+ action={actions}
builtinPlacements={builtinPlacements}
arrow
popupStyle={{
@@ -370,33 +373,6 @@ class Test extends React.Component {
}}
popup={i am a popup
}
popupTransitionName={state.transitionName}
- mobile={
- state.mobile
- ? {
- popupMotion: {
- motionName: 'rc-trigger-popup-mobile-fade',
- },
- popupClassName: 'rc-trigger-popup-mobile',
- popupStyle: {
- padding: 16,
- borderTop: '1px solid red',
- background: '#FFF',
- textAlign: 'center',
- },
- popupRender: (node) => (
- <>
-
-
-
- {node}
-
- ),
- }
- : null
- }
>
diff --git a/docs/index.md b/docs/index.md
index 2782d1cf..6e9e0db6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,4 +4,4 @@ hero:
description: React Trigger Component
---
-
\ No newline at end of file
+
diff --git a/now.json b/now.json
index 76d28fa1..716cff0a 100644
--- a/now.json
+++ b/now.json
@@ -8,4 +8,4 @@
"config": { "distDir": ".doc" }
}
]
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 7d140862..230ab027 100644
--- a/package.json
+++ b/package.json
@@ -36,25 +36,27 @@
"prepublishOnly": "npm run compile && np --yolo --no-publish",
"lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
"test": "rc-test",
+ "prettier": "prettier --write .",
"coverage": "rc-test --coverage",
"now-build": "npm run build"
},
"devDependencies": {
"@rc-component/father-plugin": "^1.0.0",
"@testing-library/jest-dom": "^6.1.4",
- "@testing-library/react": "^15.0.4",
+ "@testing-library/react": "^16.0.0",
"@types/classnames": "^2.2.10",
"@types/jest": "^29.5.2",
- "@types/node": "^20.11.6",
+ "@types/node": "^22.0.2",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.11",
"@umijs/fabric": "^4.0.1",
"cross-env": "^7.0.1",
"dumi": "^2.1.0",
- "eslint": "^8.51.0",
+ "eslint": "^9.9.1",
"father": "^4.0.0",
"less": "^4.2.0",
"np": "^10.0.5",
+ "prettier": "^3.3.3",
"rc-test": "^7.0.13",
"react": "^18.0.0",
"react-dom": "^18.0.0",
diff --git a/src/hooks/useAlign.ts b/src/hooks/useAlign.ts
index 6c15a09d..8af82525 100644
--- a/src/hooks/useAlign.ts
+++ b/src/hooks/useAlign.ts
@@ -212,6 +212,8 @@ export default function useAlign(
};
} else {
const rect = target.getBoundingClientRect();
+ rect.x = rect.x ?? rect.left;
+ rect.y = rect.y ?? rect.top;
targetRect = {
x: rect.x,
y: rect.y,
@@ -220,6 +222,8 @@ export default function useAlign(
};
}
const popupRect = popupElement.getBoundingClientRect();
+ popupRect.x = popupRect.x ?? popupRect.left;
+ popupRect.y = popupRect.y ?? popupRect.top;
const {
clientWidth,
clientHeight,
diff --git a/tests/align.test.tsx b/tests/align.test.tsx
index 9366cc7c..945b132e 100644
--- a/tests/align.test.tsx
+++ b/tests/align.test.tsx
@@ -26,6 +26,8 @@ describe('Trigger.Align', () => {
getBoundingClientRect: () => ({
x: rectX,
y: rectY,
+ left: rectX,
+ top: rectY,
width: rectWidth,
height: rectHeight,
right: 200,
diff --git a/tests/arrow.test.jsx b/tests/arrow.test.jsx
index 80be36ad..24df7055 100644
--- a/tests/arrow.test.jsx
+++ b/tests/arrow.test.jsx
@@ -53,6 +53,8 @@ describe('Trigger.Arrow', () => {
() => ({
x: 200,
y: 200,
+ left: 200,
+ top: 200,
width: 100,
height: 50,
}),
diff --git a/tests/flip-visibleFirst.test.tsx b/tests/flip-visibleFirst.test.tsx
index e9ef9891..f44c530f 100644
--- a/tests/flip-visibleFirst.test.tsx
+++ b/tests/flip-visibleFirst.test.tsx
@@ -56,6 +56,8 @@ describe('Trigger.VisibleFirst', () => {
let containerRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 100,
height: 100,
};
@@ -63,6 +65,8 @@ describe('Trigger.VisibleFirst', () => {
let targetRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 1,
height: 1,
};
@@ -70,6 +74,8 @@ describe('Trigger.VisibleFirst', () => {
let popupRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 100,
height: 100,
};
@@ -84,18 +90,24 @@ describe('Trigger.VisibleFirst', () => {
containerRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 100,
height: 100,
};
targetRect = {
x: 250,
y: 250,
+ left: 250,
+ top: 250,
width: 1,
height: 1,
};
popupRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 100,
height: 100,
};
diff --git a/tests/flip.test.tsx b/tests/flip.test.tsx
index fa98faee..853ec980 100644
--- a/tests/flip.test.tsx
+++ b/tests/flip.test.tsx
@@ -58,6 +58,8 @@ describe('Trigger.Align', () => {
let spanRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 1,
height: 1,
};
@@ -65,6 +67,8 @@ describe('Trigger.Align', () => {
let popupRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 100,
height: 100,
};
@@ -112,12 +116,16 @@ describe('Trigger.Align', () => {
spanRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 1,
height: 1,
};
popupRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 100,
height: 100,
};
@@ -253,6 +261,8 @@ describe('Trigger.Align', () => {
popupRect = {
x: 100,
y: 1,
+ left: 100,
+ top: 1,
width: 100,
height: 100,
};
@@ -339,9 +349,11 @@ describe('Trigger.Align', () => {
({
x: 100,
y: 100,
+ left: 100,
+ top: 100,
width: 300,
height: 300,
- } as any);
+ }) as any;
const visibleArea = getVisibleArea(initArea, [affectEle]);
expect(visibleArea).toEqual({
@@ -384,6 +396,8 @@ describe('Trigger.Align', () => {
popupRect = {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 200,
height: 200,
};
diff --git a/tests/flipShift.test.tsx b/tests/flipShift.test.tsx
index ed4b3170..d9e02a03 100644
--- a/tests/flipShift.test.tsx
+++ b/tests/flipShift.test.tsx
@@ -79,12 +79,14 @@ const builtinPlacements = {
};
describe('Trigger.Flip+Shift', () => {
- let spanRect = { x: 0, y: 0, width: 0, height: 0 };
+ let spanRect = { x: 0, y: 0, left: 0, top: 0, width: 0, height: 0 };
beforeEach(() => {
spanRect = {
x: 0,
y: 100,
+ left: 0,
+ top: 100,
width: 100,
height: 100,
};
@@ -113,6 +115,8 @@ describe('Trigger.Flip+Shift', () => {
return {
x: 0,
y: 0,
+ left: 0,
+ top: 0,
width: 100,
height: 300,
};
diff --git a/tests/rect.test.tsx b/tests/rect.test.tsx
new file mode 100644
index 00000000..596689f0
--- /dev/null
+++ b/tests/rect.test.tsx
@@ -0,0 +1,77 @@
+import { cleanup, render } from '@testing-library/react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
+import Trigger from '../src';
+import { awaitFakeTimer } from './util';
+
+describe('Trigger.Rect', () => {
+ let targetVisible = true;
+
+ let rectX = 100;
+ let rectY = 100;
+ let rectWidth = 100;
+ let rectHeight = 100;
+
+ beforeAll(() => {
+ spyElementPrototypes(HTMLDivElement, {
+ getBoundingClientRect: () => ({
+ left: rectX,
+ top: rectY,
+ width: rectWidth,
+ height: rectHeight,
+ right: 200,
+ bottom: 200,
+ }),
+ });
+
+ spyElementPrototypes(HTMLElement, {
+ offsetParent: {
+ get: () => (targetVisible ? document.body : null),
+ },
+ });
+ spyElementPrototypes(SVGElement, {
+ offsetParent: {
+ get: () => (targetVisible ? document.body : null),
+ },
+ });
+ });
+
+ beforeEach(() => {
+ targetVisible = true;
+
+ rectX = 100;
+ rectY = 100;
+ rectWidth = 100;
+ rectHeight = 100;
+
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ cleanup();
+ jest.useRealTimers();
+ });
+
+ it('getBoundingClientRect top and left', async () => {
+ render(
+ }
+ popupAlign={{
+ points: ['bc', 'tc'],
+ _experimental: {
+ dynamicInset: true,
+ },
+ }}
+ >
+
+ ,
+ );
+
+ await awaitFakeTimer();
+
+ expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
+ bottom: `100px`,
+ });
+ });
+});
diff --git a/tests/util.tsx b/tests/util.tsx
index c06684f4..c706654d 100644
--- a/tests/util.tsx
+++ b/tests/util.tsx
@@ -1,4 +1,4 @@
-import { act } from "@testing-library/react";
+import { act } from '@testing-library/react';
const autoAdjustOverflow = {
adjustX: 1,
@@ -94,7 +94,6 @@ export function getMouseEvent(type: string, values = {}): FakeMouseEvent {
return new FakeMouseEvent(type, values);
}
-
export async function awaitFakeTimer() {
for (let i = 0; i < 10; i += 1) {
await act(async () => {
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)