From 53334ff491c616dadcef89e587db8e14a868ffbf Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Sun, 17 Jun 2018 10:49:56 +0800 Subject: [PATCH] feat: update spin class --- .../__tests__/__snapshots__/demo.test.js.snap | 2 +- components/spin/Spin.jsx | 8 +++--- .../__tests__/__snapshots__/demo.test.js.snap | 12 ++++----- .../__snapshots__/index.test.js.snap | 2 +- components/spin/style/index.less | 25 +++++++++++++------ .../__tests__/__snapshots__/demo.test.js.snap | 2 +- .../__snapshots__/empty.test.js.snap | 2 +- 7 files changed, 32 insertions(+), 21 deletions(-) diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index 882bde13e..5d26d443f 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -153,7 +153,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
-
+
diff --git a/components/spin/Spin.jsx b/components/spin/Spin.jsx index 0c63dd1ec..a17757f31 100644 --- a/components/spin/Spin.jsx +++ b/components/spin/Spin.jsx @@ -84,8 +84,8 @@ export default { }, render () { const { size, prefixCls, tip, wrapperClassName, ...restProps } = this.$props - const { notCssAnimationSupported, $slots, stateSpinning } = this - + const { notCssAnimationSupported, stateSpinning } = this + const dotClassName = `${prefixCls}-dot` const spinClassName = { [prefixCls]: true, [`${prefixCls}-sm`]: size === 'small', @@ -100,10 +100,10 @@ export default { } let spinIndicator = null if (isValidElement(indicator)) { - spinIndicator = cloneElement(indicator, { class: `${prefixCls}-dot` }) + spinIndicator = cloneElement(indicator, { class: dotClassName }) } spinIndicator = spinIndicator || ( - + diff --git a/components/spin/__tests__/__snapshots__/demo.test.js.snap b/components/spin/__tests__/__snapshots__/demo.test.js.snap index d225c566e..40d263c3f 100644 --- a/components/spin/__tests__/__snapshots__/demo.test.js.snap +++ b/components/spin/__tests__/__snapshots__/demo.test.js.snap @@ -2,7 +2,7 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
-
+
`; @@ -29,7 +29,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = ` exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
-
+
`; @@ -48,9 +48,9 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = ` exports[`renders ./components/spin/demo/size.md correctly 1`] = `
-
-
-
+
+
+
`; @@ -58,7 +58,7 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
-
+
Loading...
diff --git a/components/spin/__tests__/__snapshots__/index.test.js.snap b/components/spin/__tests__/__snapshots__/index.test.js.snap index e332c7ba0..d97d35e34 100644 --- a/components/spin/__tests__/__snapshots__/index.test.js.snap +++ b/components/spin/__tests__/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Spin should only affect the spin element when set style to a nested xx 1`] = ` -
+
content
diff --git a/components/spin/style/index.less b/components/spin/style/index.less index d3e8f3481..977589125 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -23,6 +23,7 @@ &-nested-loading { position: relative; > div > .@{spin-prefix-cls} { + display: block; position: absolute; height: 100%; max-height: 320px; @@ -77,6 +78,8 @@ } &-blur { + pointer-events: none; + user-select: none; overflow: hidden; opacity: 0.7; -webkit-filter: blur(0.5px); @@ -84,10 +87,7 @@ /* autoprefixer: off */ filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)"; - // workround for a strange style bug in safari: - // https://github.com/ant-design/ant-design/issues/4622 - // have no clue why this works - -webkit-transform: translateZ(0); + &:after { content: ''; position: absolute; @@ -114,9 +114,10 @@ &-dot { position: relative; display: inline-block; + font-size: @spin-dot-size; + .square(@spin-dot-size); - transform: rotate(45deg); - animation: antRotate 1.2s infinite linear; + i { width: 9px; height: 9px; @@ -148,12 +149,20 @@ animation-delay: 1.2s; } } + + &-spin { + transform: rotate(45deg); + animation: antRotate 1.2s infinite linear; + } } // Sizes // ------------------------------ + // small &-sm &-dot { + font-size: @spin-dot-size-sm; + .square(@spin-dot-size-sm); i { width: 6px; @@ -163,6 +172,8 @@ // large &-lg &-dot { + font-size: @spin-dot-size-lg; + .square(@spin-dot-size-lg); i { width: 14px; @@ -193,4 +204,4 @@ to { transform: rotate(405deg); } -} +} \ No newline at end of file diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index 36bd1940b..5ace398ad 100644 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -4,7 +4,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
-
+
diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.js.snap index d11ef2042..c9c0d8f6e 100644 --- a/components/table/__tests__/__snapshots__/empty.test.js.snap +++ b/components/table/__tests__/__snapshots__/empty.test.js.snap @@ -112,7 +112,7 @@ exports[`Table renders empty table with fixed columns 1`] = ` `; exports[`Table renders empty table without emptyText when loading 1`] = ` -
+