@fe6/water-pro/lib/container-lazy/container-lazy.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = require("vue");

var _skeleton = _interopRequireDefault(require("../skeleton"));

var _useTimeout = require("../_util/hooks/use-timeout");

var _useIntersectionObserver = require("../_util/hooks/use-intersection-observer");

var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));

var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));

var _propsUtil = require("../_util/props-util");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var _default2 = (0, _vue.defineComponent)({
  name: 'AContainerLazy',
  components: {
    Skeleton: _skeleton.default
  },
  inheritAttrs: false,
  props: {
    // Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
    timeout: _vueTypes.default.number,
    // The viewport where the component is located. If the component is scrolling in the page container, the viewport is the container
    viewport: {
      type: typeof window !== 'undefined' ? window.HTMLElement : Object,
      default: function _default() {
        return null;
      }
    },
    // Preload threshold, css unit
    threshold: _vueTypes.default.string.def('0px'),
    // The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
    direction: _vueTypes.default.oneOf(['vertical', 'horizontal']).def('vertical'),
    // The label name of the outer container that wraps the component
    tag: _vueTypes.default.string.def('div'),
    maxWaitingTime: _vueTypes.default.number.def(80),
    // transition name
    transitionName: _vueTypes.default.string.def('container-lazy'),
    prefixCls: _vueTypes.default.string
  },
  emits: ['init'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;

    var _useConfigInject = (0, _useConfigInject2.default)('container-lazy', props),
        prefixClsNew = _useConfigInject.prefixCls;

    var elRef = (0, _vue.ref)(null);
    var state = (0, _vue.reactive)({
      isInit: false,
      loading: false,
      intersectionObserverInstance: null
    });
    (0, _vue.onMounted)(function () {
      immediateInit();
      initIntersectionObserver();
    }); // If there is a set delay time, it will be executed immediately

    function immediateInit() {
      var timeout = props.timeout;
      timeout && (0, _useTimeout.useTimeoutFn)(function () {
        init();
      }, timeout);
    }

    function init() {
      state.loading = true;
      (0, _useTimeout.useTimeoutFn)(function () {
        if (state.isInit) {
          return;
        }

        state.isInit = true;
        emit('init');
      }, props.maxWaitingTime || 80);
    }

    function initIntersectionObserver() {
      var timeout = props.timeout,
          direction = props.direction,
          threshold = props.threshold;

      if (timeout) {
        return;
      } // According to the scrolling direction to construct the viewport margin, used to load in advance


      var rootMargin = '0px';

      switch (direction) {
        case 'vertical':
          rootMargin = "".concat(threshold, " 0px");
          break;

        case 'horizontal':
          rootMargin = "0px ".concat(threshold);
          break;
      }

      try {
        var _useIntersectionObser = (0, _useIntersectionObserver.useIntersectionObserver)({
          rootMargin: rootMargin,
          target: (0, _vue.toRef)(elRef.value, '$el'),
          onIntersect: function onIntersect(entries) {
            var isIntersecting = entries[0].isIntersecting || entries[0].intersectionRatio;

            if (isIntersecting) {
              init();

              if (observer) {
                stop();
              }
            }
          },
          root: (0, _vue.toRef)(props, 'viewport')
        }),
            stop = _useIntersectionObser.stop,
            observer = _useIntersectionObser.observer;
      } catch (e) {
        init();
      }
    }

    return _extends({
      elRef: elRef,
      prefixClsNew: prefixClsNew
    }, (0, _vue.toRefs)(state));
  },
  render: function render() {
    var skeletonNode = null;
    var skeletonChildren = (0, _propsUtil.getSlot)(this, 'skeleton');

    if (skeletonChildren.length > 0) {
      skeletonNode = skeletonChildren;
    } else {
      skeletonNode = (0, _vue.createVNode)(_skeleton.default, null, null);
    }

    var defChildren = (0, _propsUtil.getSlot)(this, 'default', {
      loading: this.loading
    });
    var childrenNode = null;

    if (this.isInit) {
      childrenNode = (0, _vue.createVNode)("div", {
        "key": "component"
      }, [defChildren]);
    } else {
      childrenNode = (0, _vue.createVNode)("div", {
        "key": "skeleton"
      }, [skeletonNode]);
    }

    return (0, _vue.createVNode)(_vue.TransitionGroup, _objectSpread(_objectSpread({}, this.$attrs), {}, {
      "ref": "elRef",
      "class": this.prefixClsNew,
      "name": this.transitionName,
      "tag": this.tag,
      "mode": "out-in"
    }), {
      default: function _default() {
        return [childrenNode];
      }
    });
  }
});

exports.default = _default2;