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

DNB Eufemia Design System UI Library

"use client";

import { useContext, useRef } from 'react';
import { clsx } from 'clsx';
import SharedContext from "../../shared/Context.js";
import { FilterContext, FilterConnectedIdContext } from "./FilterContext.js";
import { useSharedState } from "../../shared/helpers/useSharedState.js";
import { useSpacing } from "../space/SpacingUtils.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import P from "../../elements/P.js";
import HeightAnimation from "../HeightAnimation.js";
import Skeleton from "../skeleton/Skeleton.js";
import { jsx as _jsx } from "react/jsx-runtime";
function FilterResultCount({
  connectedTo,
  resultCount: resultCountProp,
  alwaysVisible,
  children,
  className,
  ...spacingRest
}) {
  var _ref, _ref2, _ref3, _sharedData$resultLoa, _context$hasActiveFil, _lastVisibleResultCou;
  const sharedContext = useContext(SharedContext);
  const {
    resultCountMessage
  } = sharedContext.getTranslation({}).Filter;
  const context = useContext(FilterContext);
  const connectedId = useContext(FilterConnectedIdContext);
  const resolvedId = (_ref = connectedTo !== null && connectedTo !== void 0 ? connectedTo : connectedId) !== null && _ref !== void 0 ? _ref : context?.id;
  const {
    data: sharedData
  } = useSharedState(resolvedId);
  const resultCount = (_ref2 = resultCountProp !== null && resultCountProp !== void 0 ? resultCountProp : sharedData?.resultCount) !== null && _ref2 !== void 0 ? _ref2 : context?.resultCount;
  const isLoading = (_ref3 = (_sharedData$resultLoa = sharedData?.resultLoading) !== null && _sharedData$resultLoa !== void 0 ? _sharedData$resultLoa : context?.resultLoading) !== null && _ref3 !== void 0 ? _ref3 : false;
  const hasActiveFilters = context?.behavior === 'manual' ? context.appliedState.search.length > 0 || Object.keys(context.appliedState.filters).length > 0 : (_context$hasActiveFil = context?.hasActiveFilters) !== null && _context$hasActiveFil !== void 0 ? _context$hasActiveFil : Boolean(sharedData?.search || sharedData?.filters && Object.keys(sharedData.filters).length > 0);
  const spacingProps = useSpacing(spacingRest, {
    className: clsx('dnb-filter__result-count', className)
  });
  const isVisible = (resultCount !== undefined || isLoading) && (alwaysVisible || hasActiveFilters);
  const lastVisibleResultCountRef = useRef(undefined);
  if (isVisible && resultCount !== undefined) {
    lastVisibleResultCountRef.current = resultCount;
  }
  const displayedResultCount = isVisible ? resultCount : (_lastVisibleResultCou = lastVisibleResultCountRef.current) !== null && _lastVisibleResultCou !== void 0 ? _lastVisibleResultCou : resultCount;
  const message = children || resultCountMessage.replace('%s', String(displayedResultCount !== null && displayedResultCount !== void 0 ? displayedResultCount : 0));
  return _jsx(HeightAnimation, {
    open: isVisible,
    className: "dnb-filter__result-count-wrapper",
    children: _jsx(Skeleton, {
      show: isLoading,
      children: _jsx(P, {
        top: "small",
        ...spacingProps,
        children: message
      })
    })
  });
}
withComponentMarkers(FilterResultCount, {
  _supportsSpacingProps: true
});
export default FilterResultCount;
//# sourceMappingURL=FilterResultCount.js.map