Skip to content

Commit 53334ff

Browse files
tangjinzhoutangjinzhou
committed
feat: update spin class
1 parent ffef54c commit 53334ff

File tree

7 files changed

+32
-21
lines changed

7 files changed

+32
-21
lines changed

‎components/list/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
153153
<div class="demo-loadmore-list ant-list ant-list-split ant-list-loading ant-list-something-after-last-item">
154154
<div class="ant-spin-nested-loading">
155155
<div>
156-
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
156+
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
157157
</div>
158158
<div class="ant-spin-container ant-spin-blur">
159159
<div style="min-height: 53;"></div>

‎components/spin/Spin.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,8 @@ export default {
8484
},
8585
render () {
8686
const { size, prefixCls, tip, wrapperClassName, ...restProps } = this.$props
87-
const { notCssAnimationSupported, $slots, stateSpinning } = this
88-
87+
const { notCssAnimationSupported, stateSpinning } = this
88+
const dotClassName = `${prefixCls}-dot`
8989
const spinClassName = {
9090
[prefixCls]: true,
9191
[`${prefixCls}-sm`]: size === 'small',
@@ -100,10 +100,10 @@ export default {
100100
}
101101
let spinIndicator = null
102102
if (isValidElement(indicator)) {
103-
spinIndicator = cloneElement(indicator, { class: `${prefixCls}-dot` })
103+
spinIndicator = cloneElement(indicator, { class: dotClassName })
104104
}
105105
spinIndicator = spinIndicator || (
106-
<span class={`${prefixCls}-dot`}>
106+
<span class={`${dotClassName} ${prefixCls}-dot-spin`}>
107107
<i />
108108
<i />
109109
<i />

‎components/spin/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
44
<div>
5-
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
5+
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
66
</div>
77
`;
88

@@ -29,7 +29,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
2929

3030
exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
3131
<div class="example">
32-
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
32+
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
3333
</div>
3434
`;
3535

@@ -48,17 +48,17 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
4848

4949
exports[`renders ./components/spin/demo/size.md correctly 1`] = `
5050
<div>
51-
<div class="ant-spin ant-spin-sm ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
52-
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
53-
<div class="ant-spin ant-spin-lg ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
51+
<div class="ant-spin ant-spin-sm ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
52+
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
53+
<div class="ant-spin ant-spin-lg ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
5454
</div>
5555
`;
5656

5757
exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
5858
<div>
5959
<div class="ant-spin-nested-loading">
6060
<div>
61-
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span>
61+
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span>
6262
<div class="ant-spin-text">Loading...</div>
6363
</div>
6464
</div>

‎components/spin/__tests__/__snapshots__/index.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Spin should only affect the spin element when set style to a nested <Spin>xx</Spin> 1`] = `
4-
<span tag="div" class="ant-spin-nested-loading" style="background: red;"><div><div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
4+
<span tag="div" class="ant-spin-nested-loading" style="background: red;"><div><div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
55
</div>
66
<div class="ant-spin-container ant-spin-blur">
77
<div>content</div>

‎components/spin/style/index.less‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
&-nested-loading {
2424
position: relative;
2525
> div > .@{spin-prefix-cls} {
26+
display: block;
2627
position: absolute;
2728
height: 100%;
2829
max-height: 320px;
@@ -77,17 +78,16 @@
7778
}
7879

7980
&-blur {
81+
pointer-events: none;
82+
user-select: none;
8083
overflow: hidden;
8184
opacity: 0.7;
8285
-webkit-filter: blur(0.5px);
8386
filter: blur(0.5px);
8487

8588
/* autoprefixer: off */
8689
filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)";
87-
// workround for a strange style bug in safari:
88-
// https://github.com/ant-design/ant-design/issues/4622
89-
// have no clue why this works
90-
-webkit-transform: translateZ(0);
90+
9191
&:after {
9292
content: '';
9393
position: absolute;
@@ -114,9 +114,10 @@
114114
&-dot {
115115
position: relative;
116116
display: inline-block;
117+
font-size: @spin-dot-size;
118+
117119
.square(@spin-dot-size);
118-
transform: rotate(45deg);
119-
animation: antRotate 1.2s infinite linear;
120+
120121
i {
121122
width: 9px;
122123
height: 9px;
@@ -148,12 +149,20 @@
148149
animation-delay: 1.2s;
149150
}
150151
}
152+
153+
&-spin {
154+
transform: rotate(45deg);
155+
animation: antRotate 1.2s infinite linear;
156+
}
151157
}
152158

153159
// Sizes
154160
// ------------------------------
161+
155162
// small
156163
&-sm &-dot {
164+
font-size: @spin-dot-size-sm;
165+
157166
.square(@spin-dot-size-sm);
158167
i {
159168
width: 6px;
@@ -163,6 +172,8 @@
163172

164173
// large
165174
&-lg &-dot {
175+
font-size: @spin-dot-size-lg;
176+
166177
.square(@spin-dot-size-lg);
167178
i {
168179
width: 14px;
@@ -193,4 +204,4 @@
193204
to {
194205
transform: rotate(405deg);
195206
}
196-
}
207+
}

‎components/table/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
44
<div class="ant-table-wrapper">
55
<div class="ant-spin-nested-loading ant-table-without-pagination ant-table-spin-holder">
66
<div>
7-
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
7+
<div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
88
</div>
99
<div class="ant-spin-container ant-spin-blur">
1010
<div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-empty">

‎components/table/__tests__/__snapshots__/empty.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
112112
`;
113113
114114
exports[`Table renders empty table without emptyText when loading 1`] = `
115-
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading ant-table-without-pagination ant-table-spin-holder"><div><div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
115+
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading ant-table-without-pagination ant-table-spin-holder"><div><div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
116116
</div>
117117
<div class="ant-spin-container ant-spin-blur">
118118
<div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-empty">

0 commit comments

Comments
 (0)