@dnb/eufemia/components/filter/FilterContent.js

DNB Eufemia Design System UI Library

"use client";

import { useContext, useRef } from 'react';
import { clsx } from 'clsx';
import Skeleton from "../skeleton/Skeleton.js";
import { useSharedState } from "../../shared/helpers/useSharedState.js";
import { FilterConnectedIdContext, FilterContext } from "./FilterContext.js";
import HeightAnimation from "../height-animation/HeightAnimation.js";
import { useSpacing } from "../space/SpacingUtils.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import AriaLive from "../aria-live/AriaLive.js";
import SharedContext from "../../shared/Context.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function FilterContent({
  connectedTo,
  className,
  children,
  ...spacingRest
}) {
  var _ref, _data$resultLoading, _data$resultCount;
  const context = useContext(FilterContext);
  const sharedContext = useContext(SharedContext);
  const {
    resultCountMessage,
    noResultsMessage
  } = sharedContext.getTranslation({}).Filter;
  const resolvedId = connectedTo !== null && connectedTo !== void 0 ? connectedTo : context?.id;
  if (!resolvedId && !context) {
    throw new Error('Filter.Content requires a connectedTo prop or must be used inside a Filter.Root.');
  }
  const {
    data
  } = useSharedState(resolvedId);
  const isLoading = (_ref = (_data$resultLoading = data?.resultLoading) !== null && _data$resultLoading !== void 0 ? _data$resultLoading : context?.resultLoading) !== null && _ref !== void 0 ? _ref : false;
  const resultCount = (_data$resultCount = data?.resultCount) !== null && _data$resultCount !== void 0 ? _data$resultCount : context?.resultCount;
  const hadLoading = useRef(false);
  if (isLoading) {
    hadLoading.current = true;
  }
  const ariaLiveAnnouncement = (() => {
    if (isLoading || resultCount === undefined) {
      return '';
    }
    if (resultCount === 0) {
      return noResultsMessage;
    }
    return resultCountMessage.replace('%s', String(resultCount));
  })();
  const spacingProps = useSpacing(spacingRest, {
    className: clsx('dnb-filter__content', className)
  });
  return _jsxs(FilterConnectedIdContext, {
    value: resolvedId,
    children: [_jsx(Skeleton, {
      show: isLoading,
      ...spacingProps,
      children: hadLoading.current ? _jsx(HeightAnimation, {
        children: children
      }) : children
    }), _jsx(AriaLive, {
      priority: "high",
      delay: 1000,
      children: ariaLiveAnnouncement
    })]
  });
}
withComponentMarkers(FilterContent, {
  _supportsSpacingProps: true
});
export default FilterContent;
//# sourceMappingURL=FilterContent.js.map