@dnb/eufemia/cjs/components/list/ListScrollView.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _ScrollView = _interopRequireDefault(require("../../fragments/scroll-view/ScrollView.js"));
var _useIsomorphicLayoutEffect = require("../../shared/helpers/useIsomorphicLayoutEffect.js");
var _ListContext = require("./ListContext.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const defaultListItemOutlineCompensation = '0.125rem';
function ListScrollView(props) {
  var _parentContext$varian, _parentContext$separa;
  const parentContext = (0, _react.useContext)(_ListContext.ListContext);
  const {
    className,
    children,
    maxVisibleListItems,
    skeleton,
    disabled,
    style,
    innerRef,
    ...rest
  } = props;
  const localRef = (0, _react.useRef)(null);
  const [measuredMaxHeight, setMeasuredMaxHeight] = (0, _react.useState)(undefined);
  const [outlineCompensation, setOutlineCompensation] = (0, _react.useState)(defaultListItemOutlineCompensation);
  const hasValidMaxVisibleListItems = typeof maxVisibleListItems === 'number' && Number.isFinite(maxVisibleListItems) && maxVisibleListItems > 0;
  const fallbackMaxHeight = hasValidMaxVisibleListItems ? `calc(var(--item-height, 4rem) * ${maxVisibleListItems})` : undefined;
  const measureMaxHeight = (0, _react.useCallback)(() => {
    if (!hasValidMaxVisibleListItems || style !== null && style !== void 0 && style.maxHeight) {
      setMeasuredMaxHeight(undefined);
      return;
    }
    setOutlineCompensation(getListItemOutlineCompensation(localRef.current));
    const measuredHeight = getVisibleListItemsHeight(localRef.current, maxVisibleListItems);
    setMeasuredMaxHeight(measuredHeight ? `${measuredHeight}px` : undefined);
  }, [hasValidMaxVisibleListItems, maxVisibleListItems, style === null || style === void 0 ? void 0 : style.maxHeight]);
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
    if (!innerRef) {
      return;
    }
    if (typeof innerRef === 'function') {
      innerRef(localRef.current);
      return;
    }
    innerRef.current = localRef.current;
  }, [innerRef]);
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
    measureMaxHeight();
  }, [children, measureMaxHeight]);
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
    if (!hasValidMaxVisibleListItems || style !== null && style !== void 0 && style.maxHeight) {
      return;
    }
    window.addEventListener('resize', measureMaxHeight);
    return () => {
      window.removeEventListener('resize', measureMaxHeight);
    };
  }, [hasValidMaxVisibleListItems, measureMaxHeight, style === null || style === void 0 ? void 0 : style.maxHeight]);
  const resolvedMaxHeight = style !== null && style !== void 0 && style.maxHeight ? undefined : measuredMaxHeight || fallbackMaxHeight;
  const scrollViewStyle = {
    ...(resolvedMaxHeight ? {
      maxHeight: `calc(${resolvedMaxHeight} + ${outlineCompensation})`,
      marginBottom: `-${outlineCompensation}`
    } : null),
    ...style
  };
  const scrollViewContent = _react.default.createElement(_ScrollView.default, _extends({
    className: (0, _classnames.default)("dnb-list__card__scroll-view dnb-list--inset-outline", className),
    interactive: "auto",
    ref: localRef,
    style: scrollViewStyle
  }, rest), children);
  const appliedSkeleton = skeleton !== null && skeleton !== void 0 ? skeleton : parentContext === null || parentContext === void 0 ? void 0 : parentContext.skeleton;
  const appliedDisabled = disabled !== null && disabled !== void 0 ? disabled : parentContext === null || parentContext === void 0 ? void 0 : parentContext.disabled;
  return _react.default.createElement(_ListContext.ListContext.Provider, {
    value: {
      variant: (_parentContext$varian = parentContext === null || parentContext === void 0 ? void 0 : parentContext.variant) !== null && _parentContext$varian !== void 0 ? _parentContext$varian : 'basic',
      separated: (_parentContext$separa = parentContext === null || parentContext === void 0 ? void 0 : parentContext.separated) !== null && _parentContext$separa !== void 0 ? _parentContext$separa : false,
      skeleton: appliedSkeleton,
      disabled: appliedDisabled
    }
  }, scrollViewContent);
}
function getVisibleListItemsHeight(scrollViewElement, maxVisibleListItems) {
  if (!scrollViewElement) {
    return null;
  }
  const listElement = scrollViewElement.querySelector('.dnb-list__container');
  if (!(listElement instanceof HTMLElement)) {
    return null;
  }
  const items = Array.from(listElement.children).filter(element => element instanceof HTMLElement);
  const firstVisibleItem = items[0];
  const lastVisibleItem = items[maxVisibleListItems - 1];
  if (!firstVisibleItem || !lastVisibleItem) {
    return null;
  }
  return Math.ceil(lastVisibleItem.offsetTop + lastVisibleItem.offsetHeight - firstVisibleItem.offsetTop);
}
function getListItemOutlineCompensation(scrollViewElement) {
  if (!scrollViewElement || typeof getComputedStyle === 'undefined') {
    return defaultListItemOutlineCompensation;
  }
  const cardElement = scrollViewElement.closest('.dnb-card');
  const targetElement = (cardElement === null || cardElement === void 0 ? void 0 : cardElement.querySelector('.dnb-list__container')) || scrollViewElement.querySelector('.dnb-list__container');
  if (!(targetElement instanceof HTMLElement)) {
    return defaultListItemOutlineCompensation;
  }
  const outlineWidth = getComputedStyle(targetElement).getPropertyValue('--item-outline-width').trim();
  return doubleCssLength(outlineWidth) || defaultListItemOutlineCompensation;
}
function doubleCssLength(value) {
  if (!value) {
    return null;
  }
  const match = value.match(/^(-?\d*\.?\d+)([a-z%]+)$/i);
  if (match) {
    return `${parseFloat(match[1]) * 2}${match[2]}`;
  }
  return `calc(${value} * 2)`;
}
ListScrollView._supportsSpacingProps = true;
var _default = exports.default = ListScrollView;
//# sourceMappingURL=ListScrollView.js.map