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 = {
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));
}
export function setDefaultIndicator(content) {
export function setDefaultIndicator(Content) {
defaultIndicator =
typeof content.indicator === 'function'
? content.indicator
typeof Content.indicator === 'function'
? Content.indicator
: h => {
return <content.indicator />;
return <Content.indicator />;
};
}
@ -69,14 +69,13 @@ export default {
});
},
beforeDestroy() {
if (this.updateSpinning && this.updateSpinning.cancel) {
this.updateSpinning.cancel();
}
this.cancelExistingSpin();
},
methods: {
debouncifyUpdateSpinning(props) {
const { delay } = props || this.$props;
if (delay) {
this.cancelExistingSpin();
this.updateSpinning = debounce(this.originalUpdateSpinning, delay);
}
},
@ -86,6 +85,12 @@ export default {
this.setState({ sSpinning: spinning });
}
},
cancelExistingSpin() {
const { updateSpinning } = this;
if (updateSpinning && updateSpinning.cancel) {
updateSpinning.cancel();
}
},
getChildren() {
if (this.$slots && this.$slots.default) {
return filterEmpty(this.$slots.default);
@ -96,6 +101,10 @@ export default {
// const h = this.$createElement
const dotClassName = `${prefixCls}-dot`;
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)) {
indicator = filterEmpty(indicator);
indicator = indicator.length === 1 ? indicator[0] : indicator;
@ -110,10 +119,10 @@ export default {
return (
<span class={`${dotClassName} ${prefixCls}-dot-spin`}>
<i />
<i />
<i />
<i />
<i class={`${prefixCls}-dot-item`} />
<i class={`${prefixCls}-dot-item`} />
<i class={`${prefixCls}-dot-item`} />
<i class={`${prefixCls}-dot-item`} />
</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`] = `
<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>
`;
@ -33,7 +33,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
<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>
`;
@ -52,9 +52,9 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
exports[`renders ./components/spin/demo/size.md correctly 1`] = `
<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-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></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 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 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>
`;
@ -62,7 +62,7 @@ exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
<div>
<div class="ant-spin-nested-loading">
<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>
</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`] = `
<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>
<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 class="ant-spin-container ant-spin-blur">
<div>content</div>