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

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

import { createVNode as _createVNode } from "vue";

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); }

/** @format */
import { defineComponent, reactive, onMounted, ref, toRef, toRefs, TransitionGroup } from 'vue';
import Skeleton from '../skeleton';
import { useTimeoutFn } from '../_util/hooks/use-timeout';
import { useIntersectionObserver } from '../_util/hooks/use-intersection-observer';
import useConfigInject from '../_util/hooks/useConfigInject';
import PropTypes from '../_util/vue-types';
import { getSlot } from '../_util/props-util';
export default defineComponent({
  name: 'AContainerLazy',
  components: {
    Skeleton: Skeleton
  },
  inheritAttrs: false,
  props: {
    // Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
    timeout: PropTypes.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: PropTypes.string.def('0px'),
    // The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
    direction: PropTypes.oneOf(['vertical', 'horizontal']).def('vertical'),
    // The label name of the outer container that wraps the component
    tag: PropTypes.string.def('div'),
    maxWaitingTime: PropTypes.number.def(80),
    // transition name
    transitionName: PropTypes.string.def('container-lazy'),
    prefixCls: PropTypes.string
  },
  emits: ['init'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;

    var _useConfigInject = useConfigInject('container-lazy', props),
        prefixClsNew = _useConfigInject.prefixCls;

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

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

    function init() {
      state.loading = true;
      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 = useIntersectionObserver({
          rootMargin: rootMargin,
          target: toRef(elRef.value, '$el'),
          onIntersect: function onIntersect(entries) {
            var isIntersecting = entries[0].isIntersecting || entries[0].intersectionRatio;

            if (isIntersecting) {
              init();

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

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

    if (skeletonChildren.length > 0) {
      skeletonNode = skeletonChildren;
    } else {
      skeletonNode = _createVNode(Skeleton, null, null);
    }

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

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

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