zarm/lib/affix/index.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _bem = require("@zarm-design/bem");

var _throttle = _interopRequireDefault(require("lodash/throttle"));

var _react = _interopRequireWildcard(require("react"));

var _configProvider = require("../config-provider");

var _dom = require("../utils/dom");

var _events = _interopRequireDefault(require("../utils/events"));

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

var DEFAULT_SCROLL_CONTAINER = _dom.canUseDOM ? window : undefined;
var Affix = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var className = props.className,
      style = props.style,
      children = props.children,
      offsetBottom = props.offsetBottom,
      offsetTop = props.offsetTop,
      onChange = props.onChange,
      scrollContainer = props.scrollContainer;

  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = (0, _bem.createBEM)('affix', {
    prefixCls: prefixCls
  });
  var cls = bem([className]);

  var _useState = (0, _react.useState)({
    affixed: false,
    width: 0,
    height: 0
  }),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      affixState = _useState2[0],
      setAffixState = _useState2[1];

  var savePlaceholderNode = ref || /*#__PURE__*/_react.default.createRef();

  var timerRef = (0, _react.useRef)(0);
  var fixedNodeTopRef = (0, _react.useRef)('offsetBottom' in props ? -10000 : 10000);
  var getContainer = (0, _react.useCallback)(function () {
    var container = typeof scrollContainer === 'function' ? scrollContainer() : scrollContainer;
    return !container ? window : container;
  }, [scrollContainer]);

  var getContainerRect = function getContainerRect() {
    if (!_dom.canUseDOM) {
      return {
        top: 0,
        bottom: 0
      };
    }

    var container = getContainer();
    return container !== window ? container.getBoundingClientRect() : {
      top: 0,
      bottom: container.innerHeight,
      width: 0,
      height: 0
    };
  };

  var getAffixed = function getAffixed() {
    var containerRect = getContainerRect();

    if (typeof offsetBottom !== 'undefined' && fixedNodeTopRef.current + offsetBottom >= containerRect.bottom) {
      return true;
    }

    if (typeof offsetBottom === 'undefined' && typeof offsetTop !== 'undefined' && fixedNodeTopRef.current - offsetTop <= containerRect.top) {
      return true;
    }

    return false;
  };

  var onPositionUpdate = (0, _throttle.default)(function () {
    var affixed = affixState.affixed;
    var target = savePlaceholderNode.current;

    if (!target) {
      return false;
    }

    var _target$getBoundingCl = target === null || target === void 0 ? void 0 : target.getBoundingClientRect(),
        top = _target$getBoundingCl.top,
        width = _target$getBoundingCl.width,
        height = _target$getBoundingCl.height;

    fixedNodeTopRef.current = top;
    var currentAffixed = getAffixed();

    if (currentAffixed !== affixed) {
      setAffixState({
        affixed: currentAffixed,
        // use 'auto' when get width or height is 0
        width: width === 0 ? 'auto' : width,
        height: height === 0 ? 'auto' : height
      });
      onChange && onChange(currentAffixed);
    }
  }, 10);

  var getAffixStyle = function getAffixStyle() {
    var containerRect = getContainerRect();
    var affixed = getAffixed();
    var width = affixState.width,
        height = affixState.height;

    if (affixed && offsetBottom != null) {
      return {
        position: 'fixed',
        bottom: offsetBottom,
        width: width,
        height: height
      };
    }

    if (affixed && offsetTop != null) {
      return {
        position: 'fixed',
        top: containerRect.top + offsetTop,
        width: width,
        height: height
      };
    }

    return {};
  };

  (0, _react.useEffect)(function () {
    // wait for ref not null
    timerRef.current = window.setTimeout(function () {
      _events.default.on(getContainer(), 'scroll', onPositionUpdate);

      if (offsetBottom != null) {
        onPositionUpdate();
      }
    });
    return function () {
      var container = getContainer();

      _events.default.off(container, 'scroll', onPositionUpdate);

      window.clearTimeout(timerRef.current);
    };
  }, [getContainer, offsetBottom, onPositionUpdate]);
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: savePlaceholderNode
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: affixState.affixed ? cls : className,
    style: _objectSpread(_objectSpread({}, style), getAffixStyle())
  }, children));
});
Affix.displayName = 'Affix';
Affix.defaultProps = {
  scrollContainer: DEFAULT_SCROLL_CONTAINER,
  offsetTop: 0
};
var _default = Affix;
exports.default = _default;