qt-public-ui/lib/Sticky/sticky.js

新设计规范下业务组件库

"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _qtPublicHooks = require("qt-public-hooks");
var _raf = _interopRequireDefault(require("raf"));
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; }
/* eslint-disable no-unused-expressions */
/* eslint-disable @typescript-eslint/no-unused-vars */

var Sticky = function Sticky(props) {
  var children = props.children,
    getContainer = props.getContainer,
    _props$offset = props.offset,
    offset = _props$offset === void 0 ? {
      top: 0,
      bottom: 0
    } : _props$offset,
    onStickyChange = props.onStickyChange,
    _props$zIndex = props.zIndex,
    zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
    _props$barHeight = props.barHeight,
    barHeight = _props$barHeight === void 0 ? 56 : _props$barHeight;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    sticky = _useState2[0],
    setSticky = _useState2[1];
  var stickyRef = (0, _react.useRef)(null);
  var copyStickyRef = (0, _react.useRef)(null);
  var content = typeof children === 'function' ? children(sticky) : children;
  var rafHandler = (0, _react.useRef)();
  var copyContent = _react["default"].cloneElement(content);
  var copyInitOffsetTop = -barHeight || 56;
  var notifySubscribers = (0, _react.useCallback)(function () {
    var _stickyRef$current;
    var rect = (_stickyRef$current = stickyRef.current) === null || _stickyRef$current === void 0 ? void 0 : _stickyRef$current.getBoundingClientRect();
    if (rect) {
      setSticky((rect === null || rect === void 0 ? void 0 : rect.bottom) <= offset.top);
    }
  }, [offset]);
  (0, _qtPublicHooks.useUpdateEffect)(function () {
    var _stickyRef$current2;
    onStickyChange && onStickyChange(sticky);
    var rect = ((_stickyRef$current2 = stickyRef.current) === null || _stickyRef$current2 === void 0 ? void 0 : _stickyRef$current2.getBoundingClientRect()) || {
      width: 0
    };
    if (sticky) {
      // show animation
      rafHandler.current = (0, _raf["default"])(function () {
        if (copyStickyRef && copyStickyRef.current) {
          copyStickyRef.current.style.top = "".concat(-copyInitOffsetTop, "px");
          copyStickyRef.current.style.width = "".concat(rect.width, "px");
          copyStickyRef.current.style.zIndex = "".concat(zIndex);
        }
      });
    } else {
      // hide animation
      rafHandler.current = (0, _raf["default"])(function () {
        if (copyStickyRef && copyStickyRef.current) {
          copyStickyRef.current.style.top = "".concat(copyInitOffsetTop, "px");
          copyStickyRef.current.style.zIndex = 'unset';
          // copyStickyRef.current.style.position = 'absolute';
        }
      });
    }
  }, [sticky]);
  (0, _react.useEffect)(function () {
    var scrollContainer = typeof getContainer === 'function' && stickyRef ? getContainer(stickyRef === null || stickyRef === void 0 ? void 0 : stickyRef.current) : window;
    scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', notifySubscribers);
    return function () {
      if (rafHandler.current) {
        _raf["default"].cancel(rafHandler.current);
        rafHandler.current = null;
      }
      scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', notifySubscribers);
    };
  }, [getContainer, notifySubscribers]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-sticky-wrapper"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-sticky-copy",
    style: {
      top: copyInitOffsetTop,
      display: copyInitOffsetTop ? 'block' : 'none'
    },
    ref: copyStickyRef
  }, copyContent), /*#__PURE__*/_react["default"].createElement("div", {
    ref: stickyRef,
    className: "umui-sticky"
  }, content));
};
Sticky.defaultProps = {
  getContainer: document.body
};
var _default = exports["default"] = Sticky;