2020-06-04 10:35:33 +00:00
|
|
|
import { inject, cloneVNode, isVNode } from 'vue';
|
2019-03-18 12:00:00 +00:00
|
|
|
import debounce from 'lodash/debounce';
|
2019-01-12 03:33:27 +00:00
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
2020-06-04 10:35:33 +00:00
|
|
|
import { filterEmpty, initDefaultProps, getComponent } from '../_util/props-util';
|
2019-03-18 12:00:00 +00:00
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2018-03-19 02:16:27 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
export const SpinSize = PropTypes.oneOf(['small', 'default', 'large']);
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2018-03-29 14:08:04 +00:00
|
|
|
export const SpinProps = () => ({
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
spinning: PropTypes.bool,
|
2018-09-05 13:28:54 +00:00
|
|
|
size: SpinSize,
|
2018-03-29 14:08:04 +00:00
|
|
|
wrapperClassName: PropTypes.string,
|
|
|
|
tip: PropTypes.string,
|
|
|
|
delay: PropTypes.number,
|
2018-06-16 14:57:11 +00:00
|
|
|
indicator: PropTypes.any,
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-03-29 14:08:04 +00:00
|
|
|
|
2018-09-05 13:28:54 +00:00
|
|
|
// Render indicator
|
2019-01-12 03:33:27 +00:00
|
|
|
let defaultIndicator;
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
function shouldDelay(spinning, delay) {
|
|
|
|
return !!spinning && !!delay && !isNaN(Number(delay));
|
2018-11-30 03:56:41 +00:00
|
|
|
}
|
|
|
|
|
2020-03-07 11:45:13 +00:00
|
|
|
export function setDefaultIndicator(Content) {
|
2020-06-04 10:35:33 +00:00
|
|
|
const Indicator = Content.indicator;
|
2019-01-12 03:33:27 +00:00
|
|
|
defaultIndicator =
|
2020-06-04 10:35:33 +00:00
|
|
|
typeof Indicator === 'function'
|
|
|
|
? Indicator
|
|
|
|
: () => {
|
|
|
|
return <Indicator />;
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
|
|
|
|
2018-02-09 09:09:50 +00:00
|
|
|
export default {
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ASpin',
|
2018-02-09 09:09:50 +00:00
|
|
|
mixins: [BaseMixin],
|
2020-06-04 10:35:33 +00:00
|
|
|
inheritAttrs: false,
|
2018-03-29 14:08:04 +00:00
|
|
|
props: initDefaultProps(SpinProps(), {
|
|
|
|
size: 'default',
|
|
|
|
spinning: true,
|
|
|
|
wrapperClassName: '',
|
|
|
|
}),
|
2020-06-04 07:04:39 +00:00
|
|
|
setup() {
|
|
|
|
return {
|
|
|
|
configProvider: inject('configProvider', ConfigConsumerProps),
|
|
|
|
};
|
2019-03-18 12:00:00 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
data() {
|
|
|
|
const { spinning, delay } = this;
|
2019-09-18 12:03:13 +00:00
|
|
|
const shouldBeDelayed = shouldDelay(spinning, delay);
|
2019-03-18 12:00:00 +00:00
|
|
|
this.originalUpdateSpinning = this.updateSpinning;
|
|
|
|
this.debouncifyUpdateSpinning(this.$props);
|
2018-02-09 09:09:50 +00:00
|
|
|
return {
|
2019-09-18 12:03:13 +00:00
|
|
|
sSpinning: spinning && !shouldBeDelayed,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-02-09 09:09:50 +00:00
|
|
|
},
|
2019-03-18 12:00:00 +00:00
|
|
|
mounted() {
|
|
|
|
this.updateSpinning();
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
updated() {
|
2018-11-30 03:56:41 +00:00
|
|
|
this.$nextTick(() => {
|
2019-03-18 12:00:00 +00:00
|
|
|
this.debouncifyUpdateSpinning();
|
|
|
|
this.updateSpinning();
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-11-30 03:56:41 +00:00
|
|
|
},
|
2020-06-11 08:13:09 +00:00
|
|
|
beforeUnmount() {
|
2020-03-07 11:45:13 +00:00
|
|
|
this.cancelExistingSpin();
|
2018-11-30 03:56:41 +00:00
|
|
|
},
|
2018-02-09 09:09:50 +00:00
|
|
|
methods: {
|
2019-03-18 12:00:00 +00:00
|
|
|
debouncifyUpdateSpinning(props) {
|
|
|
|
const { delay } = props || this.$props;
|
2019-05-28 03:37:38 +00:00
|
|
|
if (delay) {
|
2020-03-07 11:45:13 +00:00
|
|
|
this.cancelExistingSpin();
|
2019-03-18 12:00:00 +00:00
|
|
|
this.updateSpinning = debounce(this.originalUpdateSpinning, delay);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
updateSpinning() {
|
2019-01-12 03:33:27 +00:00
|
|
|
const { spinning, sSpinning } = this;
|
2018-11-30 03:56:41 +00:00
|
|
|
if (sSpinning !== spinning) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.setState({ sSpinning: spinning });
|
2018-11-30 03:56:41 +00:00
|
|
|
}
|
|
|
|
},
|
2020-03-07 11:45:13 +00:00
|
|
|
cancelExistingSpin() {
|
|
|
|
const { updateSpinning } = this;
|
|
|
|
if (updateSpinning && updateSpinning.cancel) {
|
|
|
|
updateSpinning.cancel();
|
|
|
|
}
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
getChildren() {
|
2018-02-11 03:15:12 +00:00
|
|
|
if (this.$slots && this.$slots.default) {
|
2020-06-04 10:35:33 +00:00
|
|
|
return filterEmpty(this.$slots.default());
|
2018-02-11 03:15:12 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
return null;
|
2018-02-09 09:09:50 +00:00
|
|
|
},
|
2019-03-18 12:00:00 +00:00
|
|
|
renderIndicator(h, prefixCls) {
|
2019-01-12 03:33:27 +00:00
|
|
|
const dotClassName = `${prefixCls}-dot`;
|
2020-06-04 07:04:39 +00:00
|
|
|
let indicator = getComponent(this, 'indicator');
|
2020-03-07 11:45:13 +00:00
|
|
|
// should not be render default indicator when indicator value is null
|
|
|
|
if (indicator === null) {
|
|
|
|
return null;
|
|
|
|
}
|
2018-09-05 13:28:54 +00:00
|
|
|
if (Array.isArray(indicator)) {
|
2019-01-12 03:33:27 +00:00
|
|
|
indicator = filterEmpty(indicator);
|
|
|
|
indicator = indicator.length === 1 ? indicator[0] : indicator;
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2020-06-04 10:35:33 +00:00
|
|
|
if (isVNode(indicator)) {
|
2020-06-04 07:04:39 +00:00
|
|
|
return cloneVNode(indicator, { class: dotClassName });
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
|
|
|
|
2020-06-04 10:35:33 +00:00
|
|
|
if (defaultIndicator && isVNode(defaultIndicator(h))) {
|
2020-06-04 07:04:39 +00:00
|
|
|
return cloneVNode(defaultIndicator(h), { class: dotClassName });
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<span class={`${dotClassName} ${prefixCls}-dot-spin`}>
|
2020-03-07 11:45:13 +00:00
|
|
|
<i class={`${prefixCls}-dot-item`} />
|
|
|
|
<i class={`${prefixCls}-dot-item`} />
|
|
|
|
<i class={`${prefixCls}-dot-item`} />
|
|
|
|
<i class={`${prefixCls}-dot-item`} />
|
2018-09-05 13:28:54 +00:00
|
|
|
</span>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
2018-02-09 09:09:50 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render(h) {
|
2020-06-04 10:35:33 +00:00
|
|
|
const { size, prefixCls: customizePrefixCls, tip, wrapperClassName } = this.$props;
|
|
|
|
const { class: cls, style, ...divProps } = this.$attrs;
|
2019-09-11 14:35:25 +00:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-03-18 12:00:00 +00:00
|
|
|
const prefixCls = getPrefixCls('spin', customizePrefixCls);
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const { sSpinning } = this;
|
2018-02-09 09:09:50 +00:00
|
|
|
const spinClassName = {
|
|
|
|
[prefixCls]: true,
|
|
|
|
[`${prefixCls}-sm`]: size === 'small',
|
|
|
|
[`${prefixCls}-lg`]: size === 'large',
|
2018-11-30 03:56:41 +00:00
|
|
|
[`${prefixCls}-spinning`]: sSpinning,
|
2018-09-05 13:28:54 +00:00
|
|
|
[`${prefixCls}-show-text`]: !!tip,
|
2020-06-04 10:35:33 +00:00
|
|
|
[cls]: true,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-02-09 09:09:50 +00:00
|
|
|
|
|
|
|
const spinElement = (
|
2020-06-04 10:35:33 +00:00
|
|
|
<div {...divProps} style={style} class={spinClassName}>
|
2019-03-18 12:00:00 +00:00
|
|
|
{this.renderIndicator(h, prefixCls)}
|
2018-02-09 09:09:50 +00:00
|
|
|
{tip ? <div class={`${prefixCls}-text`}>{tip}</div> : null}
|
|
|
|
</div>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
|
|
|
const children = this.getChildren();
|
2018-02-11 03:15:12 +00:00
|
|
|
if (children) {
|
2018-02-09 09:09:50 +00:00
|
|
|
const containerClassName = {
|
|
|
|
[`${prefixCls}-container`]: true,
|
2018-11-30 03:56:41 +00:00
|
|
|
[`${prefixCls}-blur`]: sSpinning,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-02-09 09:09:50 +00:00
|
|
|
|
2018-02-11 03:15:12 +00:00
|
|
|
return (
|
2020-06-04 10:35:33 +00:00
|
|
|
<div class={[`${prefixCls}-nested-loading`, wrapperClassName]}>
|
2019-01-12 03:33:27 +00:00
|
|
|
{sSpinning && <div key="loading">{spinElement}</div>}
|
|
|
|
<div class={containerClassName} key="container">
|
2018-02-11 03:15:12 +00:00
|
|
|
{children}
|
2018-02-09 09:09:50 +00:00
|
|
|
</div>
|
2019-01-05 03:24:25 +00:00
|
|
|
</div>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-02-09 09:09:50 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
return spinElement;
|
2018-02-09 09:09:50 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|