@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) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

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__;