UNPKG

react-instantsearch

Version:
81 lines (79 loc) 3.32 kB
'use strict'; 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)); }