Skip to content

Commit 848a197

Browse files
zombieJzombieJ
authored
refactor: Trigger align logic (#324)
* chore: init * chore: add wrapper * chore: clean up * chore: offset of it * add demo * doc: add transform for test * chore: support transform * chore: click not to hide * chore: support dealy * chore: rerender for target * chore: use left & top * chore: simplify * feat: align logic * chore: flip * feat: shifting support * chore: handle offset * chore: support offset * simplify * chore: move align logic out of popup * chore: all trigger resize * chore: strech * chore: align className * chore: add focus & blur delay * chore: more props * chore: maskClosable * chore: fill rest props * chore: fix motion * chore: do align all of it * chore: support arrow * chore: shiftX support overflow value * chore: shiftY support overflow value * chore: auto arrow position * chore: fix align logic * chore: clean up * test: align clsName * test: stopPop * test: fix test logic * fix: contextMenu click * fix: align useEvent * fix: merged props * test: fix test logic * test: fix test logic * fix: nest click * test: basic test case * chore: support point * chore: fix open align logic * chore: fix blink * test: point * fix: motion config logic * test: rm test * test: adjust * test: coverage
1 parent 7590937 commit 848a197

31 files changed

+1945
-1756
lines changed

‎assets/index.less‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,35 @@
22

33
.@{triggerPrefixCls} {
44
position: absolute;
5-
left: -9999px;
65
top: -9999px;
6+
left: -9999px;
77
z-index: 1050;
88

99
&-hidden {
1010
display: none;
1111
}
12-
12+
1313
.effect() {
1414
animation-duration: 0.3s;
1515
animation-fill-mode: both;
1616
}
1717

18-
&-zoom-enter,&-zoom-appear {
18+
&-zoom-enter,
19+
&-zoom-appear {
1920
opacity: 0;
20-
.effect();
21-
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
2221
animation-play-state: paused;
22+
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
23+
.effect();
2324
}
2425

2526
&-zoom-leave {
2627
.effect();
27-
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
2828
animation-play-state: paused;
29+
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
2930
}
3031

31-
&-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
32+
&-zoom-enter&-zoom-enter-active,
33+
&-zoom-appear&-zoom-appear-active {
3234
animation-name: rcTriggerZoomIn;
3335
animation-play-state: running;
3436
}
@@ -38,31 +40,40 @@
3840
animation-play-state: running;
3941
}
4042

43+
&-arrow {
44+
width: 0px;
45+
height: 0px;
46+
background: #000;
47+
border-radius: 100vw;
48+
box-shadow: 0 0 0 3px black;
49+
z-index: 1;
50+
}
51+
4152
@keyframes rcTriggerZoomIn {
4253
0% {
43-
opacity: 0;
44-
transform-origin: 50% 50%;
4554
transform: scale(0, 0);
55+
transform-origin: 50% 50%;
56+
opacity: 0;
4657
}
4758
100% {
48-
opacity: 1;
49-
transform-origin: 50% 50%;
5059
transform: scale(1, 1);
60+
transform-origin: 50% 50%;
61+
opacity: 1;
5162
}
5263
}
5364
@keyframes rcTriggerZoomOut {
5465
0% {
55-
opacity: 1;
56-
transform-origin: 50% 50%;
5766
transform: scale(1, 1);
67+
transform-origin: 50% 50%;
68+
opacity: 1;
5869
}
5970
100% {
60-
opacity: 0;
61-
transform-origin: 50% 50%;
6271
transform: scale(0, 0);
72+
transform-origin: 50% 50%;
73+
opacity: 0;
6374
}
6475
}
6576
}
6677

67-
@import "./index/Mask";
68-
@import "./index/Mobile";
78+
@import './index/Mask';
79+
@import './index/Mobile';

‎docs/demos/container.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Container
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/container.tsx"></code>

‎docs/examples/case.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
.rc-trigger-popup-placement-right {
2-
border-width: 10px!important;
3-
}
1+
// .rc-trigger-popup-placement-right {
2+
// border-width: 10px!important;
3+
// }
44

55
// ======================= Popup =======================
66
.case-motion {

‎docs/examples/click-nested.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint no-console:0 */
22

3-
import React from 'react';
43
import Trigger from 'rc-trigger';
4+
import React from 'react';
55
import '../../assets/index.less';
66

77
const builtinPlacements = {

‎docs/examples/container.tsx‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
/* eslint no-console:0 */
2+
import Trigger from 'rc-trigger';
3+
import React from 'react';
4+
import '../../assets/index.less';
5+
6+
const builtinPlacements = {
7+
topLeft: {
8+
points: ['bl', 'tl'],
9+
overflow: {
10+
shiftX: 50,
11+
adjustY: true,
12+
},
13+
offset: [0, -50],
14+
},
15+
bottomLeft: {
16+
points: ['tl', 'bl'],
17+
overflow: {
18+
adjustX: true,
19+
adjustY: true,
20+
},
21+
},
22+
top: {
23+
points: ['bc', 'tc'],
24+
overflow: {
25+
shiftX: 50,
26+
adjustY: true,
27+
},
28+
offset: [0, -10],
29+
},
30+
bottom: {
31+
points: ['tc', 'bc'],
32+
overflow: {
33+
shiftX: true,
34+
adjustY: true,
35+
},
36+
offset: [0, 10],
37+
},
38+
left: {
39+
points: ['cr', 'cl'],
40+
overflow: {
41+
adjustX: true,
42+
shiftY: true,
43+
},
44+
offset: [-10, 0],
45+
},
46+
right: {
47+
points: ['cl', 'cr'],
48+
overflow: {
49+
adjustX: true,
50+
shiftY: 24,
51+
},
52+
offset: [10, 0],
53+
},
54+
};
55+
56+
const popupPlacement = 'topLeft';
57+
58+
export default () => {
59+
console.log('Demo Render!');
60+
61+
const [scale, setScale] = React.useState('1');
62+
63+
const rootRef = React.useRef<HTMLDivElement>();
64+
const popHolderRef = React.useRef<HTMLDivElement>();
65+
const scrollRef = React.useRef<HTMLDivElement>();
66+
67+
React.useEffect(() => {
68+
scrollRef.current.scrollLeft = window.innerWidth;
69+
scrollRef.current.scrollTop = window.innerHeight / 2;
70+
}, []);
71+
72+
return (
73+
<div
74+
id="demo-root"
75+
ref={rootRef}
76+
style={{ background: 'rgba(0, 0, 255, 0.1)', padding: 16 }}
77+
>
78+
<input
79+
type="number"
80+
value={scale}
81+
onChange={(e) => setScale(e.target.value)}
82+
style={{
83+
position: 'fixed',
84+
left: 0,
85+
top: 0,
86+
zIndex: 9999,
87+
}}
88+
/>
89+
<div
90+
id="demo-holder"
91+
ref={popHolderRef}
92+
style={{
93+
position: 'relative',
94+
width: 0,
95+
height: 0,
96+
zIndex: 999,
97+
// Transform
98+
transform: `scale(${scale})`,
99+
transformOrigin: 'top left',
100+
}}
101+
/>
102+
<div
103+
ref={scrollRef}
104+
style={{
105+
border: '1px solid red',
106+
padding: 10,
107+
height: '100vh',
108+
background: '#FFF',
109+
position: 'relative',
110+
overflow: 'auto',
111+
}}
112+
>
113+
<div
114+
style={{
115+
height: '200vh',
116+
paddingTop: `100vh`,
117+
width: 'calc(300vw)',
118+
display: 'flex',
119+
justifyContent: 'center',
120+
alignItems: 'start',
121+
}}
122+
>
123+
<Trigger
124+
arrow
125+
forceRender
126+
action="click"
127+
popup={
128+
<div
129+
style={{
130+
background: 'yellow',
131+
border: '1px solid blue',
132+
width: 200,
133+
height: 60,
134+
opacity: 0.9,
135+
}}
136+
>
137+
Popup
138+
</div>
139+
}
140+
popupStyle={{ boxShadow: '0 0 5px red' }}
141+
popupVisible
142+
getPopupContainer={() => popHolderRef.current}
143+
popupPlacement={popupPlacement}
144+
builtinPlacements={builtinPlacements}
145+
stretch="minWidth"
146+
>
147+
<span
148+
style={{
149+
display: 'inline-block',
150+
background: 'green',
151+
color: '#FFF',
152+
paddingBlock: 30,
153+
paddingInline: 70,
154+
opacity: 0.9,
155+
transform: 'scale(0.6)',
156+
}}
157+
>
158+
Target
159+
</span>
160+
</Trigger>
161+
</div>
162+
</div>
163+
</div>
164+
);
165+
};

‎docs/examples/simple.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,41 @@
11
/* eslint no-console:0 */
22

3-
import React from 'react';
43
import Trigger from 'rc-trigger';
4+
import React from 'react';
55
import '../../assets/index.less';
66

77
const builtinPlacements = {
88
left: {
99
points: ['cr', 'cl'],
10+
offset: [-10, 0],
1011
},
1112
right: {
1213
points: ['cl', 'cr'],
14+
offset: [10, 0],
1315
},
1416
top: {
1517
points: ['bc', 'tc'],
18+
offset: [0, -10],
1619
},
1720
bottom: {
1821
points: ['tc', 'bc'],
22+
offset: [0, 10],
1923
},
2024
topLeft: {
2125
points: ['bl', 'tl'],
26+
offset: [0, -10],
2227
},
2328
topRight: {
2429
points: ['br', 'tr'],
30+
offset: [0, -10],
2531
},
2632
bottomRight: {
2733
points: ['tr', 'br'],
34+
offset: [0, 10],
2835
},
2936
bottomLeft: {
3037
points: ['tl', 'bl'],
38+
offset: [0, 10],
3139
},
3240
};
3341

@@ -353,6 +361,7 @@ class Test extends React.Component<any, TestState> {
353361
// mouseLeaveDelay={0.1}
354362
action={Object.keys(state.trigger)}
355363
builtinPlacements={builtinPlacements}
364+
arrow
356365
popupStyle={{
357366
border: '1px solid red',
358367
padding: 10,

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,12 @@
6161
},
6262
"dependencies": {
6363
"@babel/runtime": "^7.18.3",
64+
"@rc-component/portal": "^1.1.0",
6465
"classnames": "^2.2.6",
6566
"rc-align": "^4.0.0",
6667
"rc-motion": "^2.0.0",
67-
"rc-util": "^5.19.2"
68+
"rc-resize-observer": "^1.3.0",
69+
"rc-util": "^5.27.1"
6870
},
6971
"peerDependencies": {
7072
"react": ">=16.9.0",

0 commit comments

Comments
 (0)