@dnb/eufemia/fragments/scroll-view/ScrollView.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["interactive", "children", "className", "innerRef"];
import "core-js/modules/web.dom-collections.iterator.js";
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 classnames from 'classnames';
import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
import Context from '../../shared/Context';
import { createSpacingClasses } from '../../components/space/SpacingHelper';
const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
const defaultProps = {
  children: null
};
function ScrollView(localProps) {
  const context = React.useContext(Context);
  const props = extendPropsWithContext(localProps, defaultProps, context.ScrollView);
  const {
      interactive,
      children,
      className = null,
      innerRef
    } = props,
    attributes = _objectWithoutProperties(props, _excluded);
  const mainParams = _objectSpread({
    className: classnames('dnb-scroll-view', createSpacingClasses(props), className)
  }, attributes);
  const ref = React.useRef();
  mainParams.ref = innerRef ? innerRef : ref;
  mainParams.tabIndex = useInteractive({
    interactive,
    children,
    ref: mainParams.ref
  });
  validateDOMAttributes(props, mainParams);
  return React.createElement("div", mainParams, children);
}
function useInteractive(_ref) {
  let {
    interactive,
    children,
    ref
  } = _ref;
  const [isInteractive, setAsInteractive] = React.useState(Boolean(interactive));
  useLayoutEffect(() => {
    if (interactive === 'auto') {
      setAsInteractive(hasScrollbar());
    }
  }, [interactive, children]);
  useLayoutEffect(() => {
    if (interactive === 'auto' && typeof ResizeObserver !== 'undefined') {
      const observer = new ResizeObserver(() => {
        setAsInteractive(hasScrollbar());
      });
      observer.observe(ref.current);
      return () => observer === null || observer === void 0 ? void 0 : observer.disconnect();
    }
  }, [interactive, ref]);
  if (isInteractive) {
    return 0;
  }
  return undefined;
  function hasScrollbar() {
    if (!ref.current) {
      return true;
    }
    return ref.current.scrollWidth - 1 > ref.current.offsetWidth || ref.current.scrollHeight - 1 > ref.current.offsetHeight;
  }
}
const ScrollViewWithRef = React.forwardRef((props, ref) => {
  return React.createElement(ScrollView, _extends({}, props, {
    innerRef: props.innerRef || ref
  }));
});
ScrollView._supportsSpacingProps = true;
ScrollViewWithRef['_supportsSpacingProps'] = true;
export default ScrollViewWithRef;
//# sourceMappingURL=ScrollView.js.map