@ohu-mobile/core/lib/Skeleton/Skeleton.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
var _vueStrictProp = _interopRequireDefault(require("vue-strict-prop"));
var _defineComponent = require("../_utils/defineComponent");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Skeleton = (0, _defineComponent.defineComponent)('skeleton').create({
  props: {
    loading: (0, _vueStrictProp.default)(Boolean).default(false),
    shape: _vueStrictProp.default.ofStringLiterals('rect', 'circle').default('rect'),
    title: (0, _vueStrictProp.default)(Boolean).default(false),
    titleWidth: (0, _vueStrictProp.default)(String).default('40%'),
    rows: (0, _vueStrictProp.default)(Number).validator(function (v) {
      return v >= 0;
    }).default(0),
    row: (0, _vueStrictProp.default)(Boolean).default(false),
    rowWidth: (0, _vueStrictProp.default)(Array, String).default(function () {
      return ['100%', '100%', '60%'];
    }),
    avatar: (0, _vueStrictProp.default)(Boolean).default(false),
    avatarSize: (0, _vueStrictProp.default)(String).default(''),
    animateDisable: (0, _vueStrictProp.default)(Boolean).default(false),
    animate: _vueStrictProp.default.ofStringLiterals('blink', 'scan').default('scan'),
    duration: (0, _vueStrictProp.default)(Number).default(1800)
  },
  render: function render() {
    var h = arguments[0];
    var animate = this.animate,
      animateDisable = this.animateDisable,
      loading = this.loading,
      shape = this.shape,
      row = this.row,
      rows = this.rows,
      rowWidth = this.rowWidth,
      avatar = this.avatar,
      avatarSize = this.avatarSize,
      title = this.title,
      titleWidth = this.titleWidth,
      duration = this.duration,
      $slots = this.$slots;
    var animationDuration = "".concat(duration, "ms");
    var style = {
      webkitAnimationDuration: animationDuration,
      animationDuration: animationDuration
    };
    var currentShape = avatar ? 'circle' : shape;
    var cls = this.$rootCls().is(!animateDisable && animate).is(currentShape).is(avatar && 'avatar').is(title && 'title').is(row && 'row');
    var content;
    // compound: title, rows, avatar
    var hasRows = rows > 0;
    var isCompound = hasRows || title && avatar;
    if (!isCompound) {
      var singleElStyle = style;
      if (title) {
        singleElStyle.width = titleWidth;
      }
      if (avatar && avatarSize) {
        singleElStyle.width = avatarSize;
        singleElStyle.height = avatarSize;
      }
      if (row) {
        if (typeof rowWidth === 'string') {
          singleElStyle.width = rowWidth;
        } else if (typeof rowWidth[0] === 'string') {
          singleElStyle.width = rowWidth[0];
        }
      }
      content = h("div", {
        "class": cls,
        "style": singleElStyle
      });
    } else {
      var avatarProps = {
        props: {
          animate: animate,
          animateDisable: animateDisable,
          avatar: true,
          avatarSize: avatarSize,
          duration: duration
        }
      };
      var titleProps = {
        props: {
          animate: animate,
          animateDisable: animateDisable,
          title: true,
          titleWidth: titleWidth,
          duration: duration
        }
      };
      var leftContent = $slots.left ? $slots.left : avatar && h(Skeleton, (0, _babelHelperVueJsxMergeProps.default)([{}, avatarProps]));
      var skeletonContentCls = cls.element('content');
      var rightContent = $slots.content ? h("div", {
        "class": skeletonContentCls
      }, [$slots.content]) : h("div", {
        "class": skeletonContentCls
      }, [title && h(Skeleton, (0, _babelHelperVueJsxMergeProps.default)([{}, titleProps])), hasRows && new Array(rows).fill(0).map(function (_, index) {
        var currentRowWidth;
        if (typeof rowWidth === 'string') {
          currentRowWidth = rowWidth;
        } else {
          currentRowWidth = rowWidth[index % rowWidth.length];
        }
        var rowProps = {
          props: {
            animate: animate,
            animateDisable: animateDisable,
            row: true,
            rowWidth: currentRowWidth,
            duration: duration
          }
        };
        return h(Skeleton, (0, _babelHelperVueJsxMergeProps.default)([{}, rowProps]));
      })]);
      content = h("div", {
        "class": this.$bem.block('skeletons')
      }, [leftContent, rightContent]);
    }
    if ($slots.default) {
      return loading ? content : $slots.default[0];
    }
    return content;
  }
});
var _default = exports.default = Skeleton;