@wordpress/components/build/navigation/menu/menu-title-search.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _lodash = require("lodash");

var _icons = require("@wordpress/icons");

var _i18n = require("@wordpress/i18n");

var _keycodes = require("@wordpress/keycodes");

var _button = _interopRequireDefault(require("../../button"));

var _visuallyHidden = _interopRequireDefault(require("../../visually-hidden"));

var _withSpokenMessages = _interopRequireDefault(require("../../higher-order/with-spoken-messages"));

var _context = require("./context");

var _context2 = require("../context");

var _navigationStyles = require("../styles/navigation-styles");

var _constants = require("../constants");

/**
 * External dependencies
 */

/**
 * 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)(); // 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 = (0, _lodash.filter)(items, '_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);
  }, [items, search]);

  const onClose = () => {
    onSearch('');
    onCloseSearch();
  };

  function onKeyDown(event) {
    if (event.keyCode === _keycodes.ESCAPE) {
      event.stopPropagation();
      onClose();
    }
  }

  const menuTitleId = `components-navigation__menu-title-${menu}`;
  const inputId = `components-navigation__menu-title-search-${menu}`;
  /* translators: placeholder for menu search box. %s: menu title */

  const placeholder = (0, _i18n.sprintf)((0, _i18n.__)('Search in %s'), title);
  return (0, _element.createElement)(_navigationStyles.MenuTitleSearchUI, {
    className: "components-navigation__menu-title-search"
  }, (0, _element.createElement)(_icons.Icon, {
    icon: _icons.search
  }), (0, _element.createElement)(_visuallyHidden.default, {
    as: "label",
    htmlFor: inputId,
    id: menuTitleId
  }, placeholder), (0, _element.createElement)("input", {
    autoComplete: "off",
    className: "components-text-control__input",
    id: inputId,
    onChange: event => onSearch(event.target.value),
    onKeyDown: onKeyDown,
    placeholder: placeholder,
    ref: inputRef,
    type: "search",
    value: search
  }), (0, _element.createElement)(_button.default, {
    isSmall: true,
    isTertiary: true,
    label: (0, _i18n.__)('Close search'),
    onClick: onClose
  }, (0, _element.createElement)(_icons.Icon, {
    icon: _icons.closeSmall
  })));
}

var _default = (0, _withSpokenMessages.default)(MenuTitleSearch);

exports.default = _default;
//# sourceMappingURL=menu-title-search.js.map