@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
63 lines (62 loc) • 3.28 kB
JavaScript
"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