fomantic-ui-react/esm/sticky/Sticky.js

Fomantic-UI React -- A React Component Library.

/**
 * fomantic-ui-react v0.0.1-alpha.10
 * (c) 2022 FireLoong <fireloong@foxmail.com>
 * @license MIT
 */

import { _ as _defineProperty, a as _objectWithoutProperties } from '../_chunks/dep-9f1126c1.js';
import { _ as _slicedToArray } from '../_chunks/dep-dc9b74a1.js';
import { useState, useRef, useEffect, createElement } from 'react';
import classNames from 'classnames';
import _ from 'lodash';
import { useMap, useWindowScroll, useWindowSize } from 'react-use';
import { uniq } from '../_util/classNamesUniq.js';

var _excluded = ["as", "className", "context", "setSize", "pushing", "topOffset", "bottomOffset", "children", "style"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var Sticky = function Sticky(_ref) {
  var _ref$as = _ref.as,
      as = _ref$as === void 0 ? "div" : _ref$as,
      className = _ref.className,
      context = _ref.context,
      _ref$setSize = _ref.setSize,
      setSize = _ref$setSize === void 0 ? true : _ref$setSize,
      pushing = _ref.pushing,
      _ref$topOffset = _ref.topOffset,
      topOffset = _ref$topOffset === void 0 ? 0 : _ref$topOffset,
      _ref$bottomOffset = _ref.bottomOffset,
      bottomOffset = _ref$bottomOffset === void 0 ? 0 : _ref$bottomOffset,
      children = _ref.children,
      style = _ref.style,
      props = _objectWithoutProperties(_ref, _excluded);

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      width = _useState2[0],
      setWidth = _useState2[1];

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      height = _useState4[0],
      setHeight = _useState4[1];

  var _useState5 = useState(0),
      _useState6 = _slicedToArray(_useState5, 2),
      currentTop = _useState6[0],
      setCurrentTop = _useState6[1];

  var _useState7 = useState(0),
      _useState8 = _slicedToArray(_useState7, 2),
      contextTop = _useState8[0],
      setContextTop = _useState8[1];

  var _useState9 = useState(0),
      _useState10 = _slicedToArray(_useState9, 2),
      contextHeight = _useState10[0],
      setContextHeight = _useState10[1];

  var _useState11 = useState(false),
      _useState12 = _slicedToArray(_useState11, 2),
      fixed = _useState12[0],
      setFixed = _useState12[1];

  var _useState13 = useState(false),
      _useState14 = _slicedToArray(_useState13, 2),
      bound = _useState14[0],
      setBound = _useState14[1];

  var _useState15 = useState(false),
      _useState16 = _slicedToArray(_useState15, 2),
      top = _useState16[0],
      setTop = _useState16[1];

  var _useState17 = useState(false),
      _useState18 = _slicedToArray(_useState17, 2),
      bottom = _useState18[0],
      setBottom = _useState18[1];

  var _useState19 = useState(false),
      _useState20 = _slicedToArray(_useState19, 2),
      pushed = _useState20[0],
      setPushed = _useState20[1];

  var _useMap = useMap(),
      _useMap2 = _slicedToArray(_useMap, 2),
      styles = _useMap2[0],
      set = _useMap2[1].set;

  var _useWindowScroll = useWindowScroll(),
      x = _useWindowScroll.x,
      y = _useWindowScroll.y;

  var _useWindowSize = useWindowSize(),
      winH = _useWindowSize.height;

  var ref = useRef(null);
  useEffect(function () {
    var _ref$current, _ref$current2, _ref$current3, _context$current, _context$current2;

    setWidth(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollWidth) || 0);
    setHeight(((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollHeight) || 0);
    setCurrentTop(((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.offsetTop) || 0);
    setContextTop((context === null || context === void 0 ? void 0 : (_context$current = context.current) === null || _context$current === void 0 ? void 0 : _context$current.offsetTop) || 0);
    setContextHeight((context === null || context === void 0 ? void 0 : (_context$current2 = context.current) === null || _context$current2 === void 0 ? void 0 : _context$current2.scrollHeight) || 0);
  }, []);
  useEffect(function () {
    if (contextHeight > 0) {
      console.log(y, contextTop + currentTop + height - winH);

      if (pushing && pushed) {
        if (y < contextTop + currentTop + height - winH) {
          setPushed(false);
        } else if (y < contextHeight + contextTop - winH) {
          setFixed(true);
          setTop(false);
          setBound(false);
          setBottom(true);
        } else {
          setBound(true);
          setBottom(true);
          setFixed(false);
          setTop(false);
          set("top", void 0);
          set("marginTop", void 0);
        }
      } else {
        if (_.inRange(y, contextTop + currentTop - topOffset - 10, contextHeight + contextTop - topOffset - height)) {
          setFixed(true);
          setTop(true);
          setBound(false);
          setBottom(false);
          set("top", topOffset);
          set("marginTop", 10);

          if (setSize) {
            set("width", width);
            set("height", height);
          }
        } else if (y > contextHeight + contextTop - topOffset - height) {
          setBound(true);
          setBottom(true);
          setFixed(false);
          setTop(false);
          set("top", void 0);
          set("marginTop", void 0);
          setPushed(true);
        } else {
          setFixed(false);
          setTop(false);
          setBound(false);
          setBottom(false);
          setPushed(false);
          set("top", void 0);
          set("marginTop", void 0);

          if (setSize) {
            set("width", void 0);
            set("height", void 0);
          }
        }
      }
    }
  }, [x, y, contextHeight, winH]);

  if (!as) {
    as = "div";
  }

  return /*#__PURE__*/createElement(as, _objectSpread({
    ref: ref,
    className: uniq(classNames("ui", "sticky", {
      fixed: fixed,
      bound: bound,
      top: top,
      bottom: bottom
    }, className)),
    style: _objectSpread(_objectSpread({}, style), styles)
  }, props), children);
};

Sticky.displayName = "Sticky";

export { Sticky as default };
//# sourceMappingURL=Sticky.js.map