@meve/ui/es/list/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import Loading from '../loading';
import Ripple from '../ripple';
import { createNamespace } from '../utils/create';
import { toPxNum, getParentScroller } from '../utils/elements';
import { nextTick } from '../utils/components';
import { props } from './props';





var _createNamespace = createNamespace('list'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var ListPlugin = createComponent({
  props: props,
  directives: {
    Ripple: Ripple
  },
  data: function data() {
    return {
      scroller: null
    };
  },
  mounted: function mounted() {
    this.initScroller();
  },
  beforeDestroy: function beforeDestroy() {
    this.scroller.removeEventListener('scroll', this.check);
  },
  methods: {
    initScroller: function initScroller() {
      var immediateCheck = this.immediateCheck,
          check = this.check,
          list = this.list;
      this.scroller = getParentScroller(list);
      immediateCheck && check();
      this.scroller.addEventListener('scroll', check);
    },
    load: function load() {
      this.$emit('update:error', false);
      this.$emit('update:loading', true);
      this.$emit('load');
    },
    check: function check() {
      var _this = this;

      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var loading, finished, error, load, isReachBottom;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                loading = _this.loading, finished = _this.finished, error = _this.error, load = _this.load, isReachBottom = _this.isReachBottom;
                _context.next = 3;
                return nextTick();

              case 3:
                if (!loading && !finished && !error && isReachBottom()) {
                  load();
                }

              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }))();
    },
    isReachBottom: function isReachBottom() {
      var scroller = this.scroller,
          detector = this.$refs.detector,
          offset = this.offset;
      var containerBottom = scroller === window ? window.innerHeight : scroller.getBoundingClientRect().bottom;

      var _detector$getBounding = detector.getBoundingClientRect(),
          detectorBottom = _detector$getBounding.bottom;

      return detectorBottom - toPxNum(offset) <= containerBottom;
    },
    renderLoading: function renderLoading() {
      var h = this.$createElement;
      var loading = this.loading,
          loadingText = this.loadingText;

      if (!loading) {
        return;
      }

      if (this.hasSlots('loading')) {
        return this.slots('loading');
      }

      return h("div", {
        "class": namespace('__loading')
      }, [h("div", {
        "class": namespace('__loading-text')
      }, [loadingText != null ? loadingText : '加载中']), h(Loading, {
        "attrs": {
          "list-cover": true,
          "size": 22,
          "loading": true
        },
        "class": namespace('__loading-icon')
      })]);
    },
    renderFinished: function renderFinished() {
      var h = this.$createElement;
      var finished = this.finished,
          finishedText = this.finishedText;

      if (!finished) {
        return;
      }

      if (this.hasSlots('finished')) {
        return this.slots('finished');
      }

      return h("div", {
        "class": namespace('__finished')
      }, [finishedText != null ? finishedText : '暂无更多']);
    },
    renderError: function renderError() {
      var h = this.$createElement;
      var error = this.error,
          errorText = this.errorText,
          load = this.load;

      if (!error) {
        return;
      }

      if (this.hasSlots('error')) {
        return this.slots('error');
      }

      return h("div", {
        "class": namespace('__error'),
        "directives": [{
          name: "ripple",
          value: true
        }],
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
              attrs[_key - 1] = arguments[_key];
            }

            load.apply(void 0, [$event].concat(attrs));
          }
        })
      }, [errorText != null ? errorText : '加载失败, 点击重试']);
    }
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "ref": "list",
      "class": [namespace(), 'm--box']
    }, [this.slots(), this.renderLoading(), this.renderFinished(), this.renderError(), h("div", {
      "ref": "detector",
      "class": namespace('__detector')
    })]);
  }
});
export var _ListComponent = ListPlugin;
export default ListPlugin;