@vnmfify/core/sticky/sticky.js

```shell npm i @vnmfify/core -S ```

var _excluded = ["className", "style", "position", "offsetTop", "offsetBottom", "offset", "container", "children", "onChange", "onScroll"];

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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { View } from "@vnxjs/components";
import { usePageScroll } from "@vnxjs/vnmf";
import classNames from "classnames";
import * as React from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { useMounted } from "../hooks";
import { prefixClassname } from "../styles";
import { getRect } from "../utils/dom/rect";
import { addUnitPx, unitToPx } from "../utils/format/unit";
import { getSystemRect } from "../utils/system";
export default function Sticky(props) {
  var {
    className,
    style: styleProp,
    position = "top",
    offsetTop: offsetTopProp,
    offsetBottom: offsetBottomProp,
    offset: offsetProp,
    container: containerRef,
    children,
    onChange,
    onScroll
  } = props,
      restProps = _objectWithoutProperties(props, _excluded);

  if (offsetProp) {
    var {
      top,
      bottom
    } = offsetProp;

    if (top) {
      console.warn("[Deprecated] Use the 'offsetTop' prop instead of the 'offset.top' prop.");
    }

    if (bottom) {
      console.warn("[Deprecated] Use the 'offsetBottom' prop instead of the 'offset.bottom' prop.");
    }
  }

  var offsetTop = offsetTopProp !== null && offsetTopProp !== void 0 ? offsetTopProp : offsetProp === null || offsetProp === void 0 ? void 0 : offsetProp.top;
  var offsetBottom = offsetBottomProp !== null && offsetBottomProp !== void 0 ? offsetBottomProp : offsetProp === null || offsetProp === void 0 ? void 0 : offsetProp.bottom;
  var rootRef = useRef();
  var counterRef = useRef(0);
  var [rootRect, setRootRect] = useState({});
  var [fixed, setFixed] = useState(false);
  var [transform, setTransform] = useState(0);
  var offsetValue = useMemo(() => {
    var _ref;

    return unitToPx((_ref = position === "top" ? offsetTop : offsetBottom) !== null && _ref !== void 0 ? _ref : 0);
  }, [offsetBottom, offsetTop, position]);
  var rootStyle = useMemo(() => {
    if (!fixed) {
      return {
        height: "",
        width: ""
      };
    }

    var style = {};

    if (rootRect.height) {
      style.height = addUnitPx(rootRect.height);
    }

    if (rootRect.width) {
      style.width = addUnitPx(rootRect.width);
    }

    return style;
  }, [fixed, rootRect.height, rootRect.width]);
  var stickyStyle = useMemo(() => {
    if (!fixed) {
      return {
        height: "",
        width: "",
        [position]: ""
      };
    }

    var style = {};

    if (rootRect.height) {
      style.height = addUnitPx(rootRect.height);
    }

    if (rootRect.width) {
      style.width = addUnitPx(rootRect.width);
    }

    style.transform = transform ? "translate3d(0, ".concat(addUnitPx(transform), ", 0)") : "";
    style[position] = addUnitPx(offsetValue);
    return style;
  }, [fixed, rootRect.height, rootRect.width, transform, position, offsetValue]);

  function invokeScroll(_x) {
    return _invokeScroll.apply(this, arguments);
  }

  function _invokeScroll() {
    _invokeScroll = _asyncToGenerator(function* (_ref2) {
      var {
        scrollTop
      } = _ref2;

      var __rootRect__ = yield getRect(rootRef);

      if (__rootRect__) {
        setRootRect(__rootRect__);

        if (position === "top") {
          if (containerRef) {
            var containerRect = yield getRect(containerRef);
            var difference = containerRect.bottom - offsetValue - __rootRect__.height;
            setTransform(difference < 0 ? difference : 0);
            setFixed(offsetValue > __rootRect__.top && containerRect.bottom > 0);
          } else {
            setFixed(offsetValue > __rootRect__.top);
          }
        } else {
          var {
            windowHeight
          } = yield getSystemRect();

          if (containerRef) {
            var _containerRect = yield getRect(containerRef);

            var _difference = windowHeight - _containerRect.top - offsetValue - __rootRect__.height;

            setTransform(_difference < 0 ? _difference : 0);
            setFixed(windowHeight - offsetValue < __rootRect__.bottom && windowHeight > _containerRect.top);
          } else {
            setFixed(windowHeight - offsetValue < __rootRect__.bottom);
          }
        }
      }

      onScroll === null || onScroll === void 0 ? void 0 : onScroll({
        scrollTop
      });
    });
    return _invokeScroll.apply(this, arguments);
  }

  useEffect(() => {
    if (counterRef.current > 0) {
      onChange === null || onChange === void 0 ? void 0 : onChange(fixed);
    }

    counterRef.current++;
  }, [fixed, onChange]);
  useMounted(() => invokeScroll({
    scrollTop: 0
  }));
  usePageScroll(_ref3 => {
    var {
      scrollTop
    } = _ref3;
    return invokeScroll({
      scrollTop
    });
  });
  return /*#__PURE__*/React.createElement(View, _objectSpread({
    ref: rootRef,
    style: _objectSpread(_objectSpread({}, styleProp), rootStyle)
  }, restProps), /*#__PURE__*/React.createElement(View, {
    style: stickyStyle,
    className: classNames(prefixClassname("sticky"), {
      [prefixClassname("sticky--fixed")]: fixed
    }, className),
    children: children
  }));
}
//# sourceMappingURL=sticky.js.map