github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update spin

pull/1790/head
tangjinzhou 2020-02-17 14:46:12 +08:00
parent e5a89524dc
commit c91f709ff2
4 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
dev: { dev: {
componentName: 'form', // dev components componentName: 'spin', // dev components
}, },
}; };

31
components/spin/Spin.jsx
View File

@ -30,12 +30,12 @@ function shouldDelay(spinning, delay) {
return !!spinning && !!delay && !isNaN(Number(delay)); return !!spinning && !!delay && !isNaN(Number(delay));
} }
export function setDefaultIndicator(content) { export function setDefaultIndicator(Content) {
defaultIndicator = defaultIndicator =
typeof content.indicator === 'function' typeof Content.indicator === 'function'
? content.indicator ? Content.indicator
: h => { : h => {
return <content.indicator />; return <Content.indicator />;
}; };
} }
@ -69,14 +69,13 @@ export default {
}); });
}, },
beforeDestroy() { beforeDestroy() {
if (this.updateSpinning && this.updateSpinning.cancel) { this.cancelExistingSpin();
this.updateSpinning.cancel();
}
}, },
methods: { methods: {
debouncifyUpdateSpinning(props) { debouncifyUpdateSpinning(props) {
const { delay } = props || this.$props; const { delay } = props || this.$props;
if (delay) { if (delay) {
this.cancelExistingSpin();
this.updateSpinning = debounce(this.originalUpdateSpinning, delay); this.updateSpinning = debounce(this.originalUpdateSpinning, delay);
} }
}, },
@ -86,6 +85,12 @@ export default {
this.setState({ sSpinning: spinning }); this.setState({ sSpinning: spinning });
} }
}, },
cancelExistingSpin() {
const { updateSpinning } = this;
if (updateSpinning && updateSpinning.cancel) {
updateSpinning.cancel();
}
},
getChildren() { getChildren() {
if (this.$slots && this.$slots.default) { if (this.$slots && this.$slots.default) {
return filterEmpty(this.$slots.default); return filterEmpty(this.$slots.default);
@ -96,6 +101,10 @@ export default {
// const h = this.$createElement // const h = this.$createElement
const dotClassName = `${prefixCls}-dot`; const dotClassName = `${prefixCls}-dot`;
let indicator = getComponentFromProp(this, 'indicator'); let indicator = getComponentFromProp(this, 'indicator');
// should not be render default indicator when indicator value is null
if (indicator === null) {
return null;
}
if (Array.isArray(indicator)) { if (Array.isArray(indicator)) {
indicator = filterEmpty(indicator); indicator = filterEmpty(indicator);
indicator = indicator.length === 1 ? indicator[0] : indicator; indicator = indicator.length === 1 ? indicator[0] : indicator;
@ -110,10 +119,10 @@ export default {
return ( return (
<span class={`${dotClassName} ${prefixCls}-dot-spin`}> <span class={`${dotClassName} ${prefixCls}-dot-spin`}>
<i /> <i class={`${prefixCls}-dot-item`} />
<i /> <i class={`${prefixCls}-dot-item`} />
<i /> <i class={`${prefixCls}-dot-item`} />
<i /> <i class={`${prefixCls}-dot-item`} />
</span> </span>
); );
}, },

12
components/spin/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,7 +2,7 @@
exports[`renders ./components/spin/demo/basic.md correctly 1`] = ` exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
<div> <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> <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
</div> </div>
`; `;
@ -33,7 +33,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
exports[`renders ./components/spin/demo/inside.md correctly 1`] = ` exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
<div class="example"> <div class="example">
<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> <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
</div> </div>
`; `;
@ -52,9 +52,9 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
exports[`renders ./components/spin/demo/size.md correctly 1`] = ` exports[`renders ./components/spin/demo/size.md correctly 1`] = `
<div> <div>
<div class="ant-spin ant-spin-sm ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-sm ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></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> <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
<div class="ant-spin ant-spin-lg ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div> <div class="ant-spin ant-spin-lg ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
</div> </div>
`; `;
@ -62,7 +62,7 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
<div> <div>
<div class="ant-spin-nested-loading"> <div class="ant-spin-nested-loading">
<div> <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 class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
<div class="ant-spin-text">Loading...</div> <div class="ant-spin-text">Loading...</div>
</div> </div>
</div> </div>

2
components/spin/__tests__/__snapshots__/index.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Spin should only affect the spin element when set style to a nested <Spin>xx</Spin> 1`] = ` exports[`Spin should only affect the spin element when set style to a nested <Spin>xx</Spin> 1`] = `
<div class="ant-spin-nested-loading" style="background: red;"> <div class="ant-spin-nested-loading" style="background: red;">
<div> <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> <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></div>
</div> </div>
<div class="ant-spin-container ant-spin-blur"> <div class="ant-spin-container ant-spin-blur">
<div>content</div> <div>content</div>