Skip to content
This repository was archived by the owner on Apr 11, 2025. It is now read-only.

Commit 6dbd35f

Browse files
arvinxxarvinxx
committed
♻️ refactor: 优化实现代码
1 parent 8f30eaa commit 6dbd35f

File tree

6 files changed

+81
-73
lines changed

6 files changed

+81
-73
lines changed

‎docs/components/common/examples/TrafficLight/DisableMax.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,17 @@ const DisableMaximize = () => {
2727
<TrafficLight {...props} disableMaximize />
2828
</Block>
2929
<Block title={'移除最大化:'}>
30-
<TrafficLight {...props} showMaximize={false} />
30+
<TrafficLight {...props} enableMaximize={false} />
3131
</Block>
3232
<Block title={'移除最小化:'}>
33-
<TrafficLight {...props} showMinimize={false} />
33+
<TrafficLight {...props} enableMinimize={false} />
3434
</Block>
3535
<Block title={'移除最小与最大化:'}>
36-
<TrafficLight {...props} showMinimize={false} showMaximize={false} />
36+
<TrafficLight
37+
{...props}
38+
enableMinimize={false}
39+
enableMaximize={false}
40+
/>
3741
</Block>
3842
</div>
3943
);

‎packages/macos-traffic-light/src/CloseIcon.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import type { FC } from 'react';
23
import './icon.less';
34

@@ -9,10 +10,11 @@ const CloseIcon: FC = () => {
910
height="6"
1011
viewBox="0 0 6 6"
1112
xmlns="http://www.w3.org/2000/svg"
13+
data-testid="close-icon"
1214
>
1315
<path
14-
fill-rule="evenodd"
15-
clip-rule="evenodd"
16+
fillRule="evenodd"
17+
clipRule="evenodd"
1618
d="M0.157283 0.151369C0.365251 -0.0521572 0.70045 -0.050193 0.905971 0.155756L3 2.25414L5.09403 0.155756C5.29955 -0.050193 5.63475 -0.0521572 5.84272 0.151369C6.05069 0.354895 6.05267 0.686839 5.84715 0.892788L3.74431 3L5.84715 5.10721C6.05267 5.31316 6.05069 5.64511 5.84272 5.84863C5.63475 6.05216 5.29955 6.05019 5.09403 5.84424L3 3.74586L0.905971 5.84424C0.70045 6.05019 0.365251 6.05216 0.157283 5.84863C-0.0506851 5.64511 -0.0526685 5.31316 0.152853 5.10721L2.25569 3L0.152853 0.892788C-0.0526685 0.686839 -0.0506851 0.354895 0.157283 0.151369Z"
1719
/>
1820
</svg>

‎packages/macos-traffic-light/src/MaximizeIcon.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import React from 'react';
12
import type { FC } from 'react';
23
import './icon.less';
34

4-
const CloseIcon: FC = () => {
5+
const MaximizeIcon: FC = () => {
56
return (
67
<svg
78
className="avx-traffic-light-icon"
@@ -10,14 +11,15 @@ const CloseIcon: FC = () => {
1011
viewBox="0 0 6 6"
1112
fill="none"
1213
xmlns="http://www.w3.org/2000/svg"
14+
data-testid="maximize-icon"
1315
>
1416
<path
15-
fill-rule="evenodd"
16-
clip-rule="evenodd"
17+
fillRule="evenodd"
18+
clipRule="evenodd"
1719
d="M1.45679 0.869873L5.16357 4.23975C5.48486 4.53174 6 4.30371 6 3.86963V0.5C6 0.223877 5.77612 0 5.5 0H1.79321C1.33618 0 1.11865 0.5625 1.45679 0.869873ZM0.853516 1.85352L4.14648 5.14648C4.46143 5.46143 4.23828 6 3.79297 6H0.5C0.223877 6 0 5.77612 0 5.5V2.20703C0 1.76172 0.538574 1.53857 0.853516 1.85352Z"
1820
/>
1921
</svg>
2022
);
2123
};
2224

23-
export default CloseIcon;
25+
export default MaximizeIcon;

‎packages/macos-traffic-light/src/MinimizeIcon.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import type { FC } from 'react';
23
import './icon.less';
34

@@ -9,8 +10,9 @@ const MinimizeIcon: FC = () => {
910
height="2"
1011
viewBox="0 0 8 2"
1112
xmlns="http://www.w3.org/2000/svg"
13+
data-testid="minimize-icon"
1214
>
13-
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2L0 2L0 0L8 0V2Z" />
15+
<path fillRule="evenodd" clipRule="evenodd" d="M8 2L0 2L0 0L8 0V2Z" />
1416
</svg>
1517
);
1618
};

‎packages/macos-traffic-light/src/index.tsx

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import MinimizeIcon from './MinimizeIcon';
88

99
import { useTrafficLight } from './useTrafficLight';
1010

11-
import styles from './style.less';
11+
import './style.less';
1212

1313
interface TrafficLightProps {
1414
/**
@@ -25,15 +25,15 @@ interface TrafficLightProps {
2525
maximize?: (event: MouseEvent) => void;
2626

2727
/**
28-
* 显示最小化
28+
* 允许最小化
2929
* @default true
3030
*/
31-
showMinimize?: boolean;
31+
enableMinimize?: boolean;
3232
/**
3333
* 显示最大化
3434
* @default true
3535
*/
36-
showMaximize?: boolean;
36+
enableMaximize?: boolean;
3737
/**
3838
* 禁用最大化
3939
* @default false
@@ -44,48 +44,52 @@ const TrafficLight: FC<TrafficLightProps> = ({
4444
close,
4545
minimize,
4646
maximize,
47-
showMinimize = true,
48-
showMaximize = true,
47+
enableMinimize = true,
48+
enableMaximize = true,
4949
disableMaximize,
5050
}) => {
5151
const { hover, isFocus, hoverOff, hoverOn } = useTrafficLight();
5252
return (
5353
<div
54-
className={styles.container}
54+
className="avx-traffic-light-container"
5555
onMouseEnter={hoverOn}
5656
onMouseLeave={hoverOff}
57+
data-testid="container"
5758
>
5859
<div
5960
onClick={close}
6061
className={cls({
61-
[styles.close]: true,
62-
[styles.blur]: !isFocus,
62+
'avx-traffic-light-close': true,
63+
'avx-traffic-light-blur': !isFocus,
6364
})}
65+
data-testid="close"
6466
>
6567
{hover ? <CloseIcon /> : null}
6668
</div>
67-
{showMinimize ? (
69+
{enableMinimize ? (
6870
<div
6971
onClick={minimize}
7072
className={cls({
71-
[styles.minus]: true,
72-
[styles.blur]: !isFocus,
73+
'avx-traffic-light-minus': true,
74+
'avx-traffic-light-blur': !isFocus,
7375
})}
76+
data-testid="minimize"
7477
>
7578
{hover ? <MinimizeIcon /> : null}
7679
</div>
7780
) : null}
78-
{showMaximize ? (
81+
{enableMaximize ? (
7982
<div
8083
onClick={(e) => {
8184
if (disableMaximize) return;
8285
maximize(e);
8386
}}
8487
className={cls({
85-
[styles.max]: true,
86-
[styles.blur]: !isFocus,
87-
[styles.disable]: disableMaximize,
88+
'avx-traffic-light-max': true,
89+
'avx-traffic-light-blur': !isFocus,
90+
'avx-traffic-light-disable': disableMaximize,
8891
})}
92+
data-testid="maximize"
8993
>
9094
{!disableMaximize && hover ? <MaximizeIcon /> : null}
9195
</div>

‎packages/macos-traffic-light/src/style.less

Lines changed: 41 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -8,63 +8,57 @@
88
@mac-control-icon-max: #28c940;
99
@mac-control-icon-max-pressed: #1f9a31;
1010

11-
.container {
12-
display: flex;
13-
-webkit-app-region: no-drag;
14-
> * {
15-
margin-right: 8px;
11+
.avx-traffic-light {
12+
&-container {
13+
display: flex;
14+
-webkit-app-region: no-drag;
15+
> * {
16+
margin-right: 8px;
17+
}
1618
}
17-
}
18-
19-
.icon {
20-
position: relative;
21-
width: 12px;
22-
height: 12px;
23-
border: 1px solid @mac-control-icon-border;
24-
border-radius: 100%;
25-
}
2619

27-
.size {
28-
position: absolute;
29-
top: 50%;
30-
left: 50%;
31-
color: @mac-control-icon-color;
32-
font-size: 6px;
33-
transform: translate(-50%, -50%);
34-
}
35-
.close {
36-
.icon;
20+
&-blur {
21+
background: @mac-control-icon-bg;
22+
}
3723

38-
background: @mac-control-icon-close;
39-
&:active {
40-
background: @mac-control-icon-close-pressed;
24+
&-disable {
25+
background: @mac-control-icon-bg;
26+
&:active {
27+
background: @mac-control-icon-bg;
28+
}
4129
}
42-
}
4330

44-
.minus {
45-
.icon;
31+
&-close {
32+
.base-icon;
4633

47-
background: @mac-control-icon-minus;
48-
&:active {
49-
background: @mac-control-icon-minus-pressed;
34+
background: @mac-control-icon-close;
35+
&:active {
36+
background: @mac-control-icon-close-pressed;
37+
}
5038
}
51-
}
52-
.max {
53-
.icon;
5439

55-
background: @mac-control-icon-max;
56-
&:active {
57-
background: @mac-control-icon-max-pressed;
40+
&-minus {
41+
.base-icon;
42+
43+
background: @mac-control-icon-minus;
44+
&:active {
45+
background: @mac-control-icon-minus-pressed;
46+
}
5847
}
59-
}
48+
&-max {
49+
.base-icon;
6050

61-
.blur {
62-
background: @mac-control-icon-bg;
51+
background: @mac-control-icon-max;
52+
&:active {
53+
background: @mac-control-icon-max-pressed;
54+
}
55+
}
6356
}
6457

65-
.disable {
66-
background: @mac-control-icon-bg;
67-
&:active {
68-
background: @mac-control-icon-bg;
69-
}
58+
.base-icon {
59+
position: relative;
60+
width: 12px;
61+
height: 12px;
62+
border: 1px solid @mac-control-icon-border;
63+
border-radius: 100%;
7064
}

0 commit comments

Comments
 (0)