jnpf-web-vue3/node_modules/ant-design-vue/lib/affix/index.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.affixProps = void 0;
var _vue = require("vue");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classNames = _interopRequireDefault(require("../_util/classNames"));
var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));
var _throttleByAnimationFrame = _interopRequireDefault(require("../_util/throttleByAnimationFrame"));
var _type = require("../_util/type");
var _utils = require("./utils");
var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
var _omit = _interopRequireDefault(require("../_util/omit"));
var _style = _interopRequireDefault(require("./style"));
function getDefaultTarget() {
  return typeof window !== 'undefined' ? window : null;
}
var AffixStatus;
(function (AffixStatus) {
  AffixStatus[AffixStatus["None"] = 0] = "None";
  AffixStatus[AffixStatus["Prepare"] = 1] = "Prepare";
})(AffixStatus || (AffixStatus = {}));
// Affix
const affixProps = () => ({
  /**
   * 距离窗口顶部达到指定偏移量后触发
   */
  offsetTop: Number,
  /** 距离窗口底部达到指定偏移量后触发 */
  offsetBottom: Number,
  /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
  target: {
    type: Function,
    default: getDefaultTarget
  },
  prefixCls: String,
  /** 固定状态改变时触发的回调函数 */
  onChange: Function,
  onTestUpdatePosition: Function
});
exports.affixProps = affixProps;
const Affix = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'AAffix',
  inheritAttrs: false,
  props: affixProps(),
  setup(props, _ref) {
    let {
      slots,
      emit,
      expose,
      attrs
    } = _ref;
    const placeholderNode = (0, _vue.shallowRef)();
    const fixedNode = (0, _vue.shallowRef)();
    const state = (0, _vue.reactive)({
      affixStyle: undefined,
      placeholderStyle: undefined,
      status: AffixStatus.None,
      lastAffix: false,
      prevTarget: null,
      timeout: null
    });
    const currentInstance = (0, _vue.getCurrentInstance)();
    const offsetTop = (0, _vue.computed)(() => {
      return props.offsetBottom === undefined && props.offsetTop === undefined ? 0 : props.offsetTop;
    });
    const offsetBottom = (0, _vue.computed)(() => props.offsetBottom);
    const measure = () => {
      const {
        status,
        lastAffix
      } = state;
      const {
        target
      } = props;
      if (status !== AffixStatus.Prepare || !fixedNode.value || !placeholderNode.value || !target) {
        return;
      }
      const targetNode = target();
      if (!targetNode) {
        return;
      }
      const newState = {
        status: AffixStatus.None
      };
      const placeholderRect = (0, _utils.getTargetRect)(placeholderNode.value);
      if (placeholderRect.top === 0 && placeholderRect.left === 0 && placeholderRect.width === 0 && placeholderRect.height === 0) {
        return;
      }
      const targetRect = (0, _utils.getTargetRect)(targetNode);
      const fixedTop = (0, _utils.getFixedTop)(placeholderRect, targetRect, offsetTop.value);
      const fixedBottom = (0, _utils.getFixedBottom)(placeholderRect, targetRect, offsetBottom.value);
      if (placeholderRect.top === 0 && placeholderRect.left === 0 && placeholderRect.width === 0 && placeholderRect.height === 0) {
        return;
      }
      if (fixedTop !== undefined) {
        const width = `${placeholderRect.width}px`;
        const height = `${placeholderRect.height}px`;
        newState.affixStyle = {
          position: 'fixed',
          top: fixedTop,
          width,
          height
        };
        newState.placeholderStyle = {
          width,
          height
        };
      } else if (fixedBottom !== undefined) {
        const width = `${placeholderRect.width}px`;
        const height = `${placeholderRect.height}px`;
        newState.affixStyle = {
          position: 'fixed',
          bottom: fixedBottom,
          width,
          height
        };
        newState.placeholderStyle = {
          width,
          height
        };
      }
      newState.lastAffix = !!newState.affixStyle;
      if (lastAffix !== newState.lastAffix) {
        emit('change', newState.lastAffix);
      }
      // update state
      (0, _extends2.default)(state, newState);
    };
    const prepareMeasure = () => {
      (0, _extends2.default)(state, {
        status: AffixStatus.Prepare,
        affixStyle: undefined,
        placeholderStyle: undefined
      });
      // Test if `updatePosition` called
      if (process.env.NODE_ENV === 'test') {
        emit('testUpdatePosition');
      }
    };
    const updatePosition = (0, _throttleByAnimationFrame.default)(() => {
      prepareMeasure();
    });
    const lazyUpdatePosition = (0, _throttleByAnimationFrame.default)(() => {
      const {
        target
      } = props;
      const {
        affixStyle
      } = state;
      // Check position change before measure to make Safari smooth
      if (target && affixStyle) {
        const targetNode = target();
        if (targetNode && placeholderNode.value) {
          const targetRect = (0, _utils.getTargetRect)(targetNode);
          const placeholderRect = (0, _utils.getTargetRect)(placeholderNode.value);
          const fixedTop = (0, _utils.getFixedTop)(placeholderRect, targetRect, offsetTop.value);
          const fixedBottom = (0, _utils.getFixedBottom)(placeholderRect, targetRect, offsetBottom.value);
          if (fixedTop !== undefined && affixStyle.top === fixedTop || fixedBottom !== undefined && affixStyle.bottom === fixedBottom) {
            return;
          }
        }
      }
      // Directly call prepare measure since it's already throttled.
      prepareMeasure();
    });
    expose({
      updatePosition,
      lazyUpdatePosition
    });
    (0, _vue.watch)(() => props.target, val => {
      const newTarget = (val === null || val === void 0 ? void 0 : val()) || null;
      if (state.prevTarget !== newTarget) {
        (0, _utils.removeObserveTarget)(currentInstance);
        if (newTarget) {
          (0, _utils.addObserveTarget)(newTarget, currentInstance);
          // Mock Event object.
          updatePosition();
        }
        state.prevTarget = newTarget;
      }
    });
    (0, _vue.watch)(() => [props.offsetTop, props.offsetBottom], updatePosition);
    (0, _vue.onMounted)(() => {
      const {
        target
      } = props;
      if (target) {
        // [Legacy] Wait for parent component ref has its value.
        // We should use target as directly element instead of function which makes element check hard.
        state.timeout = setTimeout(() => {
          (0, _utils.addObserveTarget)(target(), currentInstance);
          // Mock Event object.
          updatePosition();
        });
      }
    });
    (0, _vue.onUpdated)(() => {
      measure();
    });
    (0, _vue.onUnmounted)(() => {
      clearTimeout(state.timeout);
      (0, _utils.removeObserveTarget)(currentInstance);
      updatePosition.cancel();
      // https://github.com/ant-design/ant-design/issues/22683
      lazyUpdatePosition.cancel();
    });
    const {
      prefixCls
    } = (0, _useConfigInject.default)('affix', props);
    const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
    return () => {
      var _a;
      const {
        affixStyle,
        placeholderStyle,
        status
      } = state;
      const className = (0, _classNames.default)({
        [prefixCls.value]: affixStyle,
        [hashId.value]: true
      });
      const restProps = (0, _omit.default)(props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange', 'onTestUpdatePosition']);
      return wrapSSR((0, _vue.createVNode)(_vcResizeObserver.default, {
        "onResize": updatePosition
      }, {
        default: () => [(0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), attrs), {}, {
          "ref": placeholderNode,
          "data-measure-status": status
        }), [affixStyle && (0, _vue.createVNode)("div", {
          "style": placeholderStyle,
          "aria-hidden": "true"
        }, null), (0, _vue.createVNode)("div", {
          "class": className,
          "ref": fixedNode,
          "style": affixStyle
        }, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)])])]
      }));
    };
  }
});
var _default = exports.default = (0, _type.withInstall)(Affix);