fomantic-ui-react/lib/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
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var defineProperty = require('../_chunks/dep-6ab59a61.js');
var slicedToArray = require('../_chunks/dep-640599ea.js');
var objectWithoutProperties = require('../_chunks/dep-03754121.js');
var React = require('react');
var classNames = require('classnames');
var _ = require('lodash');
var reactUse = require('react-use');
var _util_classNamesUniq = require('../_util/classNamesUniq.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);

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._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;
      var children = _ref.children,
      style = _ref.style,
      props = objectWithoutProperties._objectWithoutProperties(_ref, _excluded);

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

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

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

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

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

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

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

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

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

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

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

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

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

  var ref = React.useRef(null);
  React.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);
  }, []);
  React.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 (___default["default"].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__*/React.createElement(as, _objectSpread({
    ref: ref,
    className: _util_classNamesUniq.uniq(classNames__default["default"]("ui", "sticky", {
      fixed: fixed,
      bound: bound,
      top: top,
      bottom: bottom
    }, className)),
    style: _objectSpread(_objectSpread({}, style), styles)
  }, props), children);
};

Sticky.displayName = "Sticky";

exports["default"] = Sticky;
//# sourceMappingURL=Sticky.js.map