linkmore-design/es/affix/index.js

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _extends from "@babel/runtime/helpers/esm/extends";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
var _dec, _dec2, _class, _class2;
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import { ConfigContext } from "../config-provider";
import { throttleByAnimationFrameDecorator } from "../_util/throttleByAnimationFrame";
import { addObserveTarget, getFixedBottom, getFixedTop, getTargetRect, removeObserveTarget } from "./utils";
function getDefaultTarget() {
  return typeof window !== 'undefined' ? window : null;
}

// Affix
var AffixStatus;
(function (AffixStatus) {
  AffixStatus[AffixStatus["None"] = 0] = "None";
  AffixStatus[AffixStatus["Prepare"] = 1] = "Prepare";
})(AffixStatus || (AffixStatus = {}));
var Affix = (_dec = throttleByAnimationFrameDecorator(), _dec2 = throttleByAnimationFrameDecorator(), (_class = (_class2 = /*#__PURE__*/function (_React$Component) {
  _inherits(Affix, _React$Component);
  var _super = _createSuper(Affix);
  function Affix() {
    var _this;
    _classCallCheck(this, Affix);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _super.call.apply(_super, [this].concat(args));
    _defineProperty(_assertThisInitialized(_this), "state", {
      status: AffixStatus.None,
      lastAffix: false,
      prevTarget: null
    });
    _defineProperty(_assertThisInitialized(_this), "placeholderNode", void 0);
    _defineProperty(_assertThisInitialized(_this), "fixedNode", void 0);
    _defineProperty(_assertThisInitialized(_this), "timeout", void 0);
    _defineProperty(_assertThisInitialized(_this), "context", void 0);
    _defineProperty(_assertThisInitialized(_this), "getOffsetTop", function () {
      var _this$props = _this.props,
        offsetBottom = _this$props.offsetBottom,
        offsetTop = _this$props.offsetTop;
      return offsetBottom === undefined && offsetTop === undefined ? 0 : offsetTop;
    });
    _defineProperty(_assertThisInitialized(_this), "getOffsetBottom", function () {
      return _this.props.offsetBottom;
    });
    _defineProperty(_assertThisInitialized(_this), "savePlaceholderNode", function (node) {
      _this.placeholderNode = node;
    });
    _defineProperty(_assertThisInitialized(_this), "saveFixedNode", function (node) {
      _this.fixedNode = node;
    });
    _defineProperty(_assertThisInitialized(_this), "measure", function () {
      var _this$state = _this.state,
        status = _this$state.status,
        lastAffix = _this$state.lastAffix;
      var onChange = _this.props.onChange;
      var targetFunc = _this.getTargetFunc();
      if (status !== AffixStatus.Prepare || !_this.fixedNode || !_this.placeholderNode || !targetFunc) {
        return;
      }
      var offsetTop = _this.getOffsetTop();
      var offsetBottom = _this.getOffsetBottom();
      var targetNode = targetFunc();
      if (!targetNode) {
        return;
      }
      var newState = {
        status: AffixStatus.None
      };
      var targetRect = getTargetRect(targetNode);
      var placeholderReact = getTargetRect(_this.placeholderNode);
      var fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
      var fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
      if (placeholderReact.top === 0 && placeholderReact.left === 0 && placeholderReact.width === 0 && placeholderReact.height === 0) {
        return;
      }
      if (fixedTop !== undefined) {
        newState.affixStyle = {
          position: 'fixed',
          top: fixedTop,
          width: placeholderReact.width,
          height: placeholderReact.height
        };
        newState.placeholderStyle = {
          width: placeholderReact.width,
          height: placeholderReact.height
        };
      } else if (fixedBottom !== undefined) {
        newState.affixStyle = {
          position: 'fixed',
          bottom: fixedBottom,
          width: placeholderReact.width,
          height: placeholderReact.height
        };
        newState.placeholderStyle = {
          width: placeholderReact.width,
          height: placeholderReact.height
        };
      }
      newState.lastAffix = !!newState.affixStyle;
      if (onChange && lastAffix !== newState.lastAffix) {
        onChange(newState.lastAffix);
      }
      _this.setState(newState);
    });
    _defineProperty(_assertThisInitialized(_this), "prepareMeasure", function () {
      // event param is used before. Keep compatible ts define here.
      _this.setState({
        status: AffixStatus.Prepare,
        affixStyle: undefined,
        placeholderStyle: undefined
      });

      // Test if `updatePosition` called
      if (process.env.NODE_ENV === 'test') {
        var _ref = _this.props,
          onTestUpdatePosition = _ref.onTestUpdatePosition;
        onTestUpdatePosition === null || onTestUpdatePosition === void 0 ? void 0 : onTestUpdatePosition();
      }
    });
    return _this;
  }
  _createClass(Affix, [{
    key: "getTargetFunc",
    value: function getTargetFunc() {
      var getTargetContainer = this.context.getTargetContainer;
      var target = this.props.target;
      if (target !== undefined) {
        return target;
      }
      return getTargetContainer !== null && getTargetContainer !== void 0 ? getTargetContainer : getDefaultTarget;
    }

    // Event handler
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;
      var targetFunc = this.getTargetFunc();
      if (targetFunc) {
        // [Legacy] Wait for parent component ref has its value.
        // We should use target as directly element instead of function which makes element check hard.
        this.timeout = setTimeout(function () {
          addObserveTarget(targetFunc(), _this2);
          // Mock Event object.
          _this2.updatePosition();
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var prevTarget = this.state.prevTarget;
      var targetFunc = this.getTargetFunc();
      var newTarget = (targetFunc === null || targetFunc === void 0 ? void 0 : targetFunc()) || null;
      if (prevTarget !== newTarget) {
        removeObserveTarget(this);
        if (newTarget) {
          addObserveTarget(newTarget, this);
          // Mock Event object.
          this.updatePosition();
        }

        // eslint-disable-next-line react/no-did-update-set-state
        this.setState({
          prevTarget: newTarget
        });
      }
      if (prevProps.offsetTop !== this.props.offsetTop || prevProps.offsetBottom !== this.props.offsetBottom) {
        this.updatePosition();
      }
      this.measure();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      clearTimeout(this.timeout);
      removeObserveTarget(this);
      this.updatePosition.cancel();
      // https://github.com/ant-design/ant-design/issues/22683
      this.lazyUpdatePosition.cancel();
    }
  }, {
    key: "updatePosition",
    value:
    // Handle realign logic
    function updatePosition() {
      this.prepareMeasure();
    }
  }, {
    key: "lazyUpdatePosition",
    value: function lazyUpdatePosition() {
      var targetFunc = this.getTargetFunc();
      var affixStyle = this.state.affixStyle;

      // Check position change before measure to make Safari smooth
      if (targetFunc && affixStyle) {
        var offsetTop = this.getOffsetTop();
        var offsetBottom = this.getOffsetBottom();
        var targetNode = targetFunc();
        if (targetNode && this.placeholderNode) {
          var targetRect = getTargetRect(targetNode);
          var placeholderReact = getTargetRect(this.placeholderNode);
          var fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
          var fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
          if (fixedTop !== undefined && affixStyle.top === fixedTop || fixedBottom !== undefined && affixStyle.bottom === fixedBottom) {
            return;
          }
        }
      }

      // Directly call prepare measure since it's already throttled.
      this.prepareMeasure();
    }

    // =================== Render ===================
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;
      var _this$state2 = this.state,
        affixStyle = _this$state2.affixStyle,
        placeholderStyle = _this$state2.placeholderStyle;
      var _this$props2 = this.props,
        affixPrefixCls = _this$props2.affixPrefixCls,
        children = _this$props2.children;
      var className = classNames(_defineProperty({}, affixPrefixCls, !!affixStyle));
      var props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange', 'affixPrefixCls']);
      // Omit this since `onTestUpdatePosition` only works on test.
      if (process.env.NODE_ENV === 'test') {
        props = omit(props, ['onTestUpdatePosition']);
      }
      return /*#__PURE__*/React.createElement(ResizeObserver, {
        onResize: function onResize() {
          _this3.updatePosition();
        }
      }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
        ref: this.savePlaceholderNode
      }), affixStyle && /*#__PURE__*/React.createElement("div", {
        style: placeholderStyle,
        "aria-hidden": "true"
      }), /*#__PURE__*/React.createElement("div", {
        className: className,
        ref: this.saveFixedNode,
        style: affixStyle
      }, /*#__PURE__*/React.createElement(ResizeObserver, {
        onResize: function onResize() {
          _this3.updatePosition();
        }
      }, children))));
    }
  }]);
  return Affix;
}(React.Component), _defineProperty(_class2, "contextType", ConfigContext), _class2), (_applyDecoratedDescriptor(_class.prototype, "updatePosition", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "updatePosition"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "lazyUpdatePosition", [_dec2], Object.getOwnPropertyDescriptor(_class.prototype, "lazyUpdatePosition"), _class.prototype)), _class)); // just use in test
var AffixFC = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var customizePrefixCls = props.prefixCls;
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var affixPrefixCls = getPrefixCls('affix', customizePrefixCls);
  var affixProps = _objectSpread(_objectSpread({}, props), {}, {
    affixPrefixCls: affixPrefixCls
  });
  return /*#__PURE__*/React.createElement(Affix, _extends({}, affixProps, {
    ref: ref
  }));
});
if (process.env.NODE_ENV !== 'production') {
  AffixFC.displayName = 'Affix';
}
export default AffixFC;