@gitlab/ui/dist/components/base/infinite_scroll/examples/infinite_scroll.two_way.example.js

GitLab UI Components

import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  }
}

function _iterableToArray(iter) {
  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance");
}

var ITEMS_BATCH_SIZE = 10;
var INIT_ITEMS_COUNT = 20;
var colors = ['Violet', 'Indigo', 'Blue', 'Green', 'Yellow', 'Orange', 'Red'];
var planets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
var key = 0;

var createItem = function createItem() {
  key += 1;
  return {
    key: key,
    content: "".concat(colors[key % colors.length], " ").concat(planets[key % planets.length])
  };
};

var createArray = function createArray(num) {
  var res = [];

  for (var i = 0; i < num; i += 1) {
    res.push(createItem());
  }

  return res;
};

var script = {
  data: function data() {
    return {
      isLoading: false,
      fetchedItems: createArray(INIT_ITEMS_COUNT),
      loadTimer: null
    };
  },
  methods: {
    topReached: function topReached() {
      var _this = this;

      clearTimeout(this.loadTimer);
      this.isLoading = true;
      this.loadTimer = setTimeout(function () {
        var _this$fetchedItems;

        (_this$fetchedItems = _this.fetchedItems).unshift.apply(_this$fetchedItems, _toConsumableArray(createArray(ITEMS_BATCH_SIZE)));

        _this.isLoading = false;
      }, 1000);
    },
    bottomReached: function bottomReached() {
      var _this2 = this;

      clearTimeout(this.loadTimer);
      this.isLoading = true;
      this.loadTimer = setTimeout(function () {
        var _this2$fetchedItems;

        (_this2$fetchedItems = _this2.fetchedItems).push.apply(_this2$fetchedItems, _toConsumableArray(createArray(ITEMS_BATCH_SIZE)));

        _this2.isLoading = false;
      }, 1000);
    }
  }
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems.length},on:{"topReached":_vm.topReached,"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item.key,staticClass:"list-group-item"},[_vm._v("\n        "+_vm._s(item.content)+"\n      ")])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[(_vm.isLoading)?_c('gl-loading-icon'):_c('span',[_vm._v(_vm._s(_vm.fetchedItems.length)+" items loaded, scroll up or down for more")])],1)]},proxy:true}])})};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

export default __vue_component__;