@wordpress/components
Version:
UI components for WordPress.
91 lines (87 loc) • 3.02 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _withSpokenMessages = _interopRequireDefault(require("../../higher-order/with-spoken-messages"));
var _context = require("./context");
var _context2 = require("../context");
var _constants = require("../constants");
var _searchControl = _interopRequireDefault(require("../../search-control"));
var _navigationStyles = require("../styles/navigation-styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function MenuTitleSearch({
debouncedSpeak,
onCloseSearch,
onSearch,
search,
title
}) {
const {
navigationTree: {
items
}
} = (0, _context2.useNavigationContext)();
const {
menu
} = (0, _context.useNavigationMenuContext)();
const inputRef = (0, _element.useRef)(null);
// Wait for the slide-in animation to complete before autofocusing the input.
// This prevents scrolling to the input during the animation.
(0, _element.useEffect)(() => {
const delayedFocus = setTimeout(() => {
inputRef.current?.focus();
}, _constants.SEARCH_FOCUS_DELAY);
return () => {
clearTimeout(delayedFocus);
};
}, []);
(0, _element.useEffect)(() => {
if (!search) {
return;
}
const count = Object.values(items).filter(item => item._isVisible).length;
const resultsFoundMessage = (0, _i18n.sprintf)(/* translators: %d: number of results. */
(0, _i18n._n)('%d result found.', '%d results found.', count), count);
debouncedSpeak(resultsFoundMessage);
// Not adding deps for now, as it would require either a larger refactor.
// See https://github.com/WordPress/gutenberg/pull/44090
}, [items, search]);
const onClose = () => {
onSearch?.('');
onCloseSearch();
};
const onKeyDown = event => {
if (event.code === 'Escape' && !event.defaultPrevented) {
event.preventDefault();
onClose();
}
};
const inputId = `components-navigation__menu-title-search-${menu}`;
const placeholder = (0, _i18n.sprintf)(/* translators: placeholder for menu search box. %s: menu title */
(0, _i18n.__)('Search %s'), title?.toLowerCase() || '').trim();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.MenuTitleSearchControlWrapper, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchControl.default, {
__nextHasNoMarginBottom: true,
className: "components-navigation__menu-search-input",
id: inputId,
onChange: value => onSearch?.(value),
onKeyDown: onKeyDown,
placeholder: placeholder,
onClose: onClose,
ref: inputRef,
value: search
})
});
}
var _default = exports.default = (0, _withSpokenMessages.default)(MenuTitleSearch);
//# sourceMappingURL=menu-title-search.js.map