@onesy/ui-react/esm/SpyScroll/SpyScroll.js

UI for React

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ids", "offset", "offsetStart", "addClassName", "addStyle", "onActive", "parent", "className", "style", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { is, unique, isEnvironment } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import { staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
  root: {}
}), {
  name: 'onesy-SpyScroll'
});
const SpyScroll = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useOnesyTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySpyScroll?.props?.default), props_), [props_]);
  const {
      ids,
      offset,
      offsetStart,
      addClassName,
      addStyle,
      onActive,
      parent,
      className,
      style,
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  const refs = {
    root: React.useRef(undefined),
    active: React.useRef([]),
    parent: React.useRef(parent),
    props: React.useRef(undefined),
    onActive: React.useRef(onActive)
  };
  refs.props.current = props;
  refs.parent.current = parent;
  refs.onActive.current = onActive;
  React.useEffect(() => {
    // Listen to window scroll value
    const isVisible = element => new Promise(resolve => {
      if (!(element && refs.root.current)) return resolve(null);
      const observer = new IntersectionObserver(entries => {
        const intersecting = entries?.[0].isIntersecting;

        // clean up
        observer.disconnect();
        return resolve(intersecting);
      }, {
        root: refs.parent.current
      });
      observer.observe(element);
    });
    const method = async () => {
      // Find first active id
      let id;
      const rootElement_ = isEnvironment('browser') ? refs.parent.current || refs.root.current?.ownerDocument || window.document : undefined;
      for (const item of refs.props.current.ids || []) {
        id = await isVisible(rootElement_.querySelector(`#${item}`.replace('##', '#')));
        if (id) {
          id = item;
          break;
        }
      }
      if (id && refs.root.current) {
        // Update all elements in root

        // Remove active className and style from
        // all previous active elements
        for (const element of refs.active.current) {
          // addClassName
          element.classList.remove(refs.props.current.addClassName);

          // addStyle
          if (refs.props.current.addStyle) {
            Object.keys(refs.props.current.addStyle).forEach(item => {
              element.style.removeProperty(item);
            });
          }
        }

        // And add to all elements with href containing #id with addClassName and style
        refs.active.current = unique([
        // a elemnts with id
        ...Array.from(refs.root.current.querySelectorAll(`[href$='#${id}']`)),
        // elements active for multiple ids
        ...Array.from(refs.root.current.querySelectorAll(`[data-onesy-spy-scroll~=${id}]`))]).filter(Boolean);
        for (const element of refs.active.current) {
          // addClassName
          if (!element.classList.contains(refs.props.current.addClassName)) element.classList.add(refs.props.current.addClassName);

          // addStyle
          if (refs.props.current.addStyle) {
            Object.keys(refs.props.current.addStyle).forEach(item => {
              element.style[item] = refs.props.current.addStyle[item];
            });
          }
        }

        // onActive
        if (is('function', refs.onActive.current)) refs.onActive.current(id);
      } else {
        // Remove active className and style from
        // all previous active elements
        for (const element of refs.active.current) {
          // addClassName
          element.classList.remove(refs.props.current.addClassName);

          // addStyle
          if (refs.props.current.addStyle) {
            Object.keys(refs.props.current.addStyle).forEach(item => {
              element.style.removeProperty(item);
            });
          }
        }
      }
    };

    // Initial
    method();
    const rootElement = isEnvironment('browser') ? refs.parent.current || refs.root.current?.ownerDocument || window.document : undefined;
    if (refs.root.current) {
      rootElement.addEventListener('scroll', method);
    }
    return () => {
      if (refs.root.current) {
        rootElement.removeEventListener('scroll', method);
      }
    };
  }, [parent]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, _objectSpread({
    ref: item => {
      if (ref) {
        if (is('function', ref)) ref(item);else ref.current = item;
      }
      refs.root.current = item;
    },
    className: classNames([staticClassName('SpyScroll', theme) && ['onesy-SpyScroll-root'], children.props.className, className, classes.root])
  }, other)));
});
SpyScroll.displayName = 'onesy-SpyScroll';
export default SpyScroll;