react-instantsearch
Version:
⚡ Lightning-fast search for React, by Algolia
81 lines (79 loc) • 3.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Stats", {
enumerable: true,
get: function() {
return Stats;
}
});
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _instantsearchuicomponents = require("instantsearch-ui-components");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
// Delay before announcing an update, so that rapid changes (e.g. typing in the
// search box) settle into a single announcement instead of piling up. Mirrors
// the debounce used by GOV.UK's accessible-autocomplete.
var ANNOUNCEMENT_DELAY = 1400;
var visuallyHiddenStyle = {
position: 'absolute',
width: 1,
height: 1,
padding: 0,
margin: -1,
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
border: 0
};
function Stats(_0) {
var _0_classNames = _0.classNames, classNames = _0_classNames === void 0 ? {} : _0_classNames, nbHits = _0.nbHits, processingTimeMS = _0.processingTimeMS, nbSortedHits = _0.nbSortedHits, areHitsSorted = _0.areHitsSorted, translations = _0.translations, props = _object_without_properties._(_0, [
"classNames",
"nbHits",
"processingTimeMS",
"nbSortedHits",
"areHitsSorted",
"translations"
]);
var translationOptions = {
nbHits: nbHits,
processingTimeMS: processingTimeMS,
nbSortedHits: nbSortedHits,
areHitsSorted: areHitsSorted
};
var nextAnnouncement = translations.announcementText ? translations.announcementText(translationOptions) : '';
var _useState = _sliced_to_array._((0, _react.useState)(''), 2), announcement = _useState[0], setAnnouncement = _useState[1];
var timerRef = (0, _react.useRef)(undefined);
var isInitialRef = (0, _react.useRef)(true);
(0, _react.useEffect)(function() {
// Don't announce the initial results, only subsequent changes.
if (isInitialRef.current) {
isInitialRef.current = false;
return undefined;
}
clearTimeout(timerRef.current);
timerRef.current = setTimeout(function() {
setAnnouncement(nextAnnouncement);
}, ANNOUNCEMENT_DELAY);
return function() {
return clearTimeout(timerRef.current);
};
}, [
nextAnnouncement
]);
return /*#__PURE__*/ _react.default.createElement("div", _object_spread_props._(_object_spread._({}, props), {
className: (0, _instantsearchuicomponents.cx)('ais-Stats', classNames.root, props.className)
}), /*#__PURE__*/ _react.default.createElement("span", {
className: "ais-Stats-text"
}, translations.rootElementText(translationOptions)), /*#__PURE__*/ _react.default.createElement("span", {
className: "ais-Stats-announcement",
role: "status",
"aria-live": "polite",
"aria-atomic": "true",
style: visuallyHiddenStyle
}, announcement));
}