123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- 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;
- }
- };
|