185 lines
5.9 KiB
Java
185 lines
5.9 KiB
Java
import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
|
|
import _defineProperty from 'babel-runtime/helpers/defineProperty';
|
|
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
|
import debounce from 'lodash/debounce';
|
|
import PropTypes from '../_util/vue-types';
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
import { filterEmpty, initDefaultProps, isValidElement, getComponentFromProp, getListeners } from '../_util/props-util';
|
|
import { cloneElement } from '../_util/vnode';
|
|
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
|
|
|
|
export var SpinSize = PropTypes.oneOf(['small', 'default', 'large']);
|
|
|
|
export var SpinProps = function SpinProps() {
|
|
return {
|
|
prefixCls: PropTypes.string,
|
|
spinning: PropTypes.bool,
|
|
size: SpinSize,
|
|
wrapperClassName: PropTypes.string,
|
|
tip: PropTypes.string,
|
|
delay: PropTypes.number,
|
|
indicator: PropTypes.any
|
|
};
|
|
};
|
|
|
|
// Render indicator
|
|
var defaultIndicator = void 0;
|
|
|
|
function shouldDelay(spinning, delay) {
|
|
return !!spinning && !!delay && !isNaN(Number(delay));
|
|
}
|
|
|
|
export function setDefaultIndicator(Content) {
|
|
defaultIndicator = typeof Content.indicator === 'function' ? Content.indicator : function (h) {
|
|
return h(Content.indicator);
|
|
};
|
|
}
|
|
|
|
export default {
|
|
name: 'ASpin',
|
|
mixins: [BaseMixin],
|
|
props: initDefaultProps(SpinProps(), {
|
|
size: 'default',
|
|
spinning: true,
|
|
wrapperClassName: ''
|
|
}),
|
|
inject: {
|
|
configProvider: { 'default': function _default() {
|
|
return ConfigConsumerProps;
|
|
} }
|
|
},
|
|
data: function data() {
|
|
var spinning = this.spinning,
|
|
delay = this.delay;
|
|
|
|
var shouldBeDelayed = shouldDelay(spinning, delay);
|
|
this.originalUpdateSpinning = this.updateSpinning;
|
|
this.debouncifyUpdateSpinning(this.$props);
|
|
return {
|
|
sSpinning: spinning && !shouldBeDelayed
|
|
};
|
|
},
|
|
mounted: function mounted() {
|
|
this.updateSpinning();
|
|
},
|
|
updated: function updated() {
|
|
var _this = this;
|
|
|
|
this.$nextTick(function () {
|
|
_this.debouncifyUpdateSpinning();
|
|
_this.updateSpinning();
|
|
});
|
|
},
|
|
beforeDestroy: function beforeDestroy() {
|
|
this.cancelExistingSpin();
|
|
},
|
|
|
|
methods: {
|
|
debouncifyUpdateSpinning: function debouncifyUpdateSpinning(props) {
|
|
var _ref = props || this.$props,
|
|
delay = _ref.delay;
|
|
|
|
if (delay) {
|
|
this.cancelExistingSpin();
|
|
this.updateSpinning = debounce(this.originalUpdateSpinning, delay);
|
|
}
|
|
},
|
|
updateSpinning: function updateSpinning() {
|
|
var spinning = this.spinning,
|
|
sSpinning = this.sSpinning;
|
|
|
|
if (sSpinning !== spinning) {
|
|
this.setState({ sSpinning: spinning });
|
|
}
|
|
},
|
|
cancelExistingSpin: function cancelExistingSpin() {
|
|
var updateSpinning = this.updateSpinning;
|
|
|
|
if (updateSpinning && updateSpinning.cancel) {
|
|
updateSpinning.cancel();
|
|
}
|
|
},
|
|
getChildren: function getChildren() {
|
|
if (this.$slots && this.$slots['default']) {
|
|
return filterEmpty(this.$slots['default']);
|
|
}
|
|
return null;
|
|
},
|
|
renderIndicator: function renderIndicator(h, prefixCls) {
|
|
// const h = this.$createElement
|
|
var dotClassName = prefixCls + '-dot';
|
|
var 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;
|
|
}
|
|
if (isValidElement(indicator)) {
|
|
return cloneElement(indicator, { 'class': dotClassName });
|
|
}
|
|
|
|
if (defaultIndicator && isValidElement(defaultIndicator(h))) {
|
|
return cloneElement(defaultIndicator(h), { 'class': dotClassName });
|
|
}
|
|
|
|
return h(
|
|
'span',
|
|
{ 'class': dotClassName + ' ' + prefixCls + '-dot-spin' },
|
|
[h('i', { 'class': prefixCls + '-dot-item' }), h('i', { 'class': prefixCls + '-dot-item' }), h('i', { 'class': prefixCls + '-dot-item' }), h('i', { 'class': prefixCls + '-dot-item' })]
|
|
);
|
|
}
|
|
},
|
|
render: function render(h) {
|
|
var _spinClassName;
|
|
|
|
var _$props = this.$props,
|
|
size = _$props.size,
|
|
customizePrefixCls = _$props.prefixCls,
|
|
tip = _$props.tip,
|
|
wrapperClassName = _$props.wrapperClassName,
|
|
restProps = _objectWithoutProperties(_$props, ['size', 'prefixCls', 'tip', 'wrapperClassName']);
|
|
|
|
var getPrefixCls = this.configProvider.getPrefixCls;
|
|
var prefixCls = getPrefixCls('spin', customizePrefixCls);
|
|
|
|
var sSpinning = this.sSpinning;
|
|
|
|
var spinClassName = (_spinClassName = {}, _defineProperty(_spinClassName, prefixCls, true), _defineProperty(_spinClassName, prefixCls + '-sm', size === 'small'), _defineProperty(_spinClassName, prefixCls + '-lg', size === 'large'), _defineProperty(_spinClassName, prefixCls + '-spinning', sSpinning), _defineProperty(_spinClassName, prefixCls + '-show-text', !!tip), _spinClassName);
|
|
|
|
var spinElement = h(
|
|
'div',
|
|
_mergeJSXProps([restProps, { 'class': spinClassName }]),
|
|
[this.renderIndicator(h, prefixCls), tip ? h(
|
|
'div',
|
|
{ 'class': prefixCls + '-text' },
|
|
[tip]
|
|
) : null]
|
|
);
|
|
var children = this.getChildren();
|
|
if (children) {
|
|
var _containerClassName;
|
|
|
|
var containerClassName = (_containerClassName = {}, _defineProperty(_containerClassName, prefixCls + '-container', true), _defineProperty(_containerClassName, prefixCls + '-blur', sSpinning), _containerClassName);
|
|
|
|
return h(
|
|
'div',
|
|
_mergeJSXProps([{ on: getListeners(this) }, {
|
|
'class': [prefixCls + '-nested-loading', wrapperClassName]
|
|
}]),
|
|
[sSpinning && h(
|
|
'div',
|
|
{ key: 'loading' },
|
|
[spinElement]
|
|
), h(
|
|
'div',
|
|
{ 'class': containerClassName, key: 'container' },
|
|
[children]
|
|
)]
|
|
);
|
|
}
|
|
return spinElement;
|
|
}
|
|
}; |