Skip to content

Commit b3ea148

Browse files
zombieJclaude
zombieJ
and
claude
authored
refactor: remove -inner div element to simplify DOM structure (#297)
Co-authored-by: Claude (GLM-4.7) <noreply@anthropic.com>
1 parent 66acc45 commit b3ea148

3 files changed

Lines changed: 57 additions & 113 deletions

File tree

‎assets/index.less‎

Lines changed: 57 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,97 @@
11
@checkboxPrefixCls: rc-checkbox;
2-
@checkboxInnerPrefixCls: ~"@{checkboxPrefixCls}-inner";
32

43
/* Default state */
54
.@{checkboxPrefixCls} {
6-
white-space: nowrap;
7-
cursor: pointer;
8-
outline: none;
9-
display: inline-block;
105
position: relative;
6+
display: inline-block;
7+
width: 14px;
8+
height: 14px;
119
line-height: 1;
10+
white-space: nowrap;
1211
vertical-align: middle;
12+
background-color: #ffffff;
13+
border-color: #d9d9d9;
14+
border-style: solid;
15+
border-width: 1px;
16+
border-radius: 3px;
17+
outline: none;
18+
cursor: pointer;
19+
transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55),
20+
background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
1321

14-
&:hover .@{checkboxInnerPrefixCls},
15-
&-input:focus + .@{checkboxInnerPrefixCls} {
22+
&:hover,
23+
&-input:focus + & {
1624
border-color: #3dbcf6;
1725
}
1826

19-
&-inner {
20-
&:after {
21-
-webkit-transform: rotate(45deg);
22-
transform: rotate(45deg);
23-
position: absolute;
24-
left: 4px;
25-
top: 1px;
26-
display: table;
27-
width: 5px;
28-
height: 8px;
29-
border: 2px solid #ffffff;
30-
border-top: 0;
31-
border-left: 0;
32-
content: ' ';
33-
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
34-
animation-duration: 0.3s;
35-
animation-name: amCheckboxOut;
36-
}
37-
38-
position: relative;
39-
top: 0;
40-
left: 0;
41-
display: inline-block;
42-
width: 14px;
43-
height: 14px;
44-
border-width: 1px;
45-
border-style: solid;
46-
border-radius: 3px;
47-
border-color: #d9d9d9;
48-
background-color: #ffffff;
49-
transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
27+
&:after {
28+
position: absolute;
29+
top: 1px;
30+
left: 4px;
31+
display: table;
32+
width: 5px;
33+
height: 8px;
34+
border: 2px solid #ffffff;
35+
border-top: 0;
36+
border-left: 0;
37+
-webkit-transform: rotate(45deg);
38+
transform: rotate(45deg);
39+
animation-name: amCheckboxOut;
40+
animation-duration: 0.3s;
41+
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
42+
content: ' ';
5043
}
5144

5245
&-input {
5346
position: absolute;
47+
top: 0;
48+
right: 0;
49+
bottom: 0;
5450
left: 0;
5551
z-index: 9999;
5652
cursor: pointer;
5753
opacity: 0;
58-
top: 0;
59-
bottom: 0;
60-
right: 0;
6154
}
6255
}
6356

6457
/* Checked state */
6558
.@{checkboxPrefixCls}-checked {
59+
background-color: #3dbcf6;
60+
border-color: #3dbcf6;
6661

6762
&:hover {
68-
.@{checkboxInnerPrefixCls} {
69-
border-color: #3dbcf6;
70-
}
71-
}
72-
73-
.@{checkboxInnerPrefixCls} {
7463
border-color: #3dbcf6;
75-
background-color: #3dbcf6;
76-
77-
&:after {
78-
transform: rotate(45deg);
79-
position: absolute;
80-
left: 4px;
81-
top: 1px;
82-
display: table;
83-
width: 5px;
84-
height: 8px;
85-
border: 2px solid #ffffff;
86-
border-top: 0;
87-
border-left: 0;
88-
content: ' ';
89-
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
90-
animation-duration: 0.3s;
91-
animation-name: amCheckboxOut;
92-
}
64+
}
9365

94-
@media print {
95-
box-shadow: inset 0 0 0 16px #3dbcf6;
96-
}
66+
@media print {
67+
box-shadow: inset 0 0 0 16px #3dbcf6;
9768
}
9869
}
9970

10071
.@{checkboxPrefixCls}-disabled {
72+
background-color: #f3f3f3;
73+
border-color: #d9d9d9;
10174

102-
&.@{checkboxPrefixCls}-checked {
75+
&:after {
76+
border-color: #f3f3f3;
77+
animation-name: none;
78+
}
10379

104-
&:hover {
105-
.@{checkboxInnerPrefixCls} {
106-
border-color: #d9d9d9;
107-
}
80+
&.@{checkboxPrefixCls}-checked {
81+
background-color: #f3f3f3;
82+
border-color: #d9d9d9;
83+
&:after {
84+
border-color: #cccccc;
85+
animation-name: none;
10886
}
10987

110-
.@{checkboxInnerPrefixCls} {
111-
background-color: #f3f3f3;
112-
border-color: #d9d9d9;
113-
114-
&:after {
115-
animation-name: none;
116-
border-color: #cccccc;
117-
}
118-
119-
@media print {
120-
box-shadow: inset 0 0 0 16px #f3f3f3;
121-
}
88+
@media print {
89+
box-shadow: inset 0 0 0 16px #f3f3f3;
12290
}
12391
}
12492

12593
&:hover {
126-
.@{checkboxInnerPrefixCls} {
127-
border-color: #d9d9d9;
128-
}
129-
}
130-
131-
.@{checkboxInnerPrefixCls} {
13294
border-color: #d9d9d9;
133-
background-color: #f3f3f3;
134-
&:after {
135-
animation-name: none;
136-
border-color: #f3f3f3;
137-
}
13895
}
13996

14097
.@{checkboxPrefixCls}-input {
@@ -144,14 +101,14 @@
144101

145102
@keyframes amCheckboxIn {
146103
0% {
147-
opacity: 0;
148-
transform-origin: 50% 50%;
149104
transform: scale(0, 0) rotate(45deg);
105+
transform-origin: 50% 50%;
106+
opacity: 0;
150107
}
151108
100% {
152-
opacity: 1;
153-
transform-origin: 50% 50%;
154109
transform: scale(1, 1) rotate(45deg);
110+
transform-origin: 50% 50%;
111+
opacity: 1;
155112
}
156113
}
157114

‎src/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
9898
checked={!!rawValue}
9999
type={type}
100100
/>
101-
<span className={`${prefixCls}-inner`} />
102101
</span>
103102
);
104103
});

‎tests/__snapshots__/index.test.tsx.snap‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ exports[`rc-checkbox click checkbox 1`] = `
88
class="rc-checkbox-input"
99
type="checkbox"
1010
/>
11-
<span
12-
class="rc-checkbox-inner"
13-
/>
1411
</span>
1512
`;
1613

@@ -22,9 +19,6 @@ exports[`rc-checkbox click radio 1`] = `
2219
class="rc-checkbox-input"
2320
type="radio"
2421
/>
25-
<span
26-
class="rc-checkbox-inner"
27-
/>
2822
</span>
2923
`;
3024

@@ -37,9 +31,6 @@ exports[`rc-checkbox control mode 1`] = `
3731
class="rc-checkbox-input"
3832
type="checkbox"
3933
/>
40-
<span
41-
class="rc-checkbox-inner"
42-
/>
4334
</span>
4435
`;
4536

@@ -51,8 +42,5 @@ exports[`rc-checkbox works 1`] = `
5142
class="rc-checkbox-input"
5243
type="checkbox"
5344
/>
54-
<span
55-
class="rc-checkbox-inner"
56-
/>
5745
</span>
5846
`;

0 commit comments

Comments
 (0)