organism-react-scroll-nav/build/cjs/src/ui/organisms/ScrollSpy.js

A React scroll spy library with flux

"use strict";

var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("reshow-runtime/helpers/objectSpread2"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("reshow-runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireDefault(require("react"));
var _reactAtomicMolecule = require("react-atomic-molecule");
var _reshowHooks = require("reshow-hooks");
var _scrollStore = _interopRequireDefault(require("../../stores/scrollStore.js"));
var _fastScrollStore = _interopRequireDefault(require("../../stores/fastScrollStore.js"));
var _excluded = ["noDelay", "monitorScroll", "attachDestRetry", "id", "scrollMargin", "children", "container", "className", "attachDest"]; //@ts-check
var useRef = _react["default"].useRef,
  useMemo = _react["default"].useMemo,
  useState = _react["default"].useState,
  useEffect = _react["default"].useEffect,
  useCallback = _react["default"].useCallback;
/**
 * @typedef {any} ScrollSpyProps
 */

/**
 * @param {ScrollSpyProps} props
 */
var useScrollSpy = function useScrollSpy(props) {
  /**
   * monitorScroll use in store, in component just for reset props.
   */
  var _props$noDelay = props.noDelay,
    noDelay = _props$noDelay === void 0 ? false : _props$noDelay,
    _props$monitorScroll = props.monitorScroll,
    monitorScroll = _props$monitorScroll === void 0 ? true : _props$monitorScroll,
    _props$attachDestRetr = props.attachDestRetry,
    attachDestRetry = _props$attachDestRetr === void 0 ? 20 : _props$attachDestRetr,
    id = props.id,
    scrollMargin = props.scrollMargin,
    children = props.children,
    container = props.container,
    className = props.className,
    attachDest = props.attachDest,
    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
  var _useState = useState(id),
    targetId = _useState[0],
    setTargetId = _useState[1];
  var _mount = (0, _reshowHooks.useMounted)();
  var lastEl = useRef(null);

  /** @type {React.RefObject<object>} */
  var lastConfig = useRef({});
  lastConfig.current = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, lastConfig.current), {}, {
    id: targetId,
    attachDest: lastConfig.current.attachDest || attachDest,
    monitorScroll: monitorScroll,
    scrollMargin: scrollMargin
  });
  var nextContainer = useRef(null);
  useEffect(function () {
    var store = noDelay ? _fastScrollStore["default"] : _scrollStore["default"];
    var id = store.scroller.attach(expose);
    lastConfig.current.store = store;
    setTargetId(id);
    return function () {
      store.scroller.detach(expose);
    };
  }, []);
  var warnDebounce = (0, _reshowHooks.useDebounce)(
  /**
   * @param {object} args
   */
  function (args) {
    // for lazy render component, that warn delay 1.5 secs.
    if (!lastEl.current && _mount()) {
      // maybe could get lastEl late.
      console.warn('Please use SemanticUI. props.container -> import {SemanticUI} from "react-atomic-molecule"', args);
    }
  }, 1500);
  var getOffsetEl = useCallback(function () {
    if (lastEl.current) {
      return lastEl.current;
    } else {
      warnDebounce({
        targetId: targetId,
        container: nextContainer.current
      });
    }
  }, [targetId]);
  var expose = {
    lastConfig: lastConfig,
    getOffsetEl: getOffsetEl,
    detach: function detach() {
      return lastConfig.current.store.scroller.detach(expose);
    },
    getId: function getId() {
      return lastConfig.current.id;
    },
    setId: setTargetId,
    getAttachDest: function getAttachDest() {
      return lastConfig.current.attachDest;
    },
    /**
     * @param {object} attachDest the scroll-node
     */
    setAttachDest: function setAttachDest(attachDest) {
      return lastConfig.current.attachDest = attachDest;
    },
    getMonitorScroll: function getMonitorScroll() {
      return lastConfig.current.monitorScroll;
    },
    getScrollMargin: function getScrollMargin() {
      return lastConfig.current.scrollMargin;
    },
    getAttachDestRetry: function getAttachDestRetry() {
      return attachDestRetry;
    }
  };
  restProps.id = targetId;
  restProps.refCb = lastEl;
  restProps.className = (0, _reactAtomicMolecule.mixClass)(className, "spy-tar-" + targetId, "scroll-spy");
  return {
    targetId: targetId,
    className: className,
    children: children,
    container: container,
    noDelay: noDelay,
    nextContainer: nextContainer,
    restProps: restProps
  };
};

/**
 * @param {ScrollSpyProps} props
 */
var ScrollSpy = function ScrollSpy(props) {
  var _useScrollSpy = useScrollSpy(props),
    targetId = _useScrollSpy.targetId,
    children = _useScrollSpy.children,
    container = _useScrollSpy.container,
    noDelay = _useScrollSpy.noDelay,
    nextContainer = _useScrollSpy.nextContainer,
    restProps = _useScrollSpy.restProps;
  return useMemo(function () {
    var hasScrollReceiver = "ScrollReceiver" === (0, _reactAtomicMolecule.getDisplayName)(children) ? true : false;
    var nextProps;
    if (hasScrollReceiver) {
      nextContainer.current = children;
      nextProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, children.props), restProps), {}, {
        scrollMargin: props.scrollMargin,
        targetId: targetId,
        container: container,
        noDelay: noDelay
      });
    } else {
      nextContainer.current = container || _reactAtomicMolecule.SemanticUI;
      nextProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
        children: children
      });
    }
    return (0, _reactAtomicMolecule.build)(nextContainer.current)(nextProps);
  }, [children, targetId]);
};
var _default = exports["default"] = ScrollSpy;
module.exports = exports.default;