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

UI components for WordPress.

"use strict";

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

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

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

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

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

var _animate = require("../../animate");

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

var _menuTitleSearch = _interopRequireDefault(require("./menu-title-search"));

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

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

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function NavigationMenuTitle(_ref) {
  let {
    hasSearch,
    onSearch,
    search,
    title,
    titleAction
  } = _ref;
  const [isSearching, setIsSearching] = (0, _element.useState)(false);
  const {
    menu
  } = (0, _context.useNavigationMenuContext)();
  const searchButtonRef = (0, _element.useRef)(null);

  if (!title) {
    return null;
  }

  const onCloseSearch = () => {
    setIsSearching(false); // Wait for the slide-in animation to complete before focusing the search button.
    // eslint-disable-next-line @wordpress/react-no-unsafe-timeout

    setTimeout(() => {
      var _searchButtonRef$curr;

      (_searchButtonRef$curr = searchButtonRef.current) === null || _searchButtonRef$curr === void 0 ? void 0 : _searchButtonRef$curr.focus();
    }, _constants.SEARCH_FOCUS_DELAY);
  };

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

  const searchButtonLabel = (0, _i18n.sprintf)((0, _i18n.__)('Search in %s'), title);
  return (0, _element.createElement)(_navigationStyles.MenuTitleUI, {
    className: "components-navigation__menu-title"
  }, !isSearching && (0, _element.createElement)(_navigationStyles.GroupTitleUI, {
    as: "h2",
    className: "components-navigation__menu-title-heading",
    level: 3
  }, (0, _element.createElement)("span", {
    id: menuTitleId
  }, title), (hasSearch || titleAction) && (0, _element.createElement)(_navigationStyles.MenuTitleActionsUI, null, titleAction, hasSearch && (0, _element.createElement)(_button.default, {
    isSmall: true,
    variant: "tertiary",
    label: searchButtonLabel,
    onClick: () => setIsSearching(true),
    ref: searchButtonRef
  }, (0, _element.createElement)(_icons.Icon, {
    icon: _icons.search
  })))), isSearching && (0, _element.createElement)("div", {
    className: (0, _animate.getAnimateClassName)({
      type: 'slide-in',
      origin: 'left'
    })
  }, (0, _element.createElement)(_menuTitleSearch.default, {
    onCloseSearch: onCloseSearch,
    onSearch: onSearch,
    search: search,
    title: title
  })));
}
//# sourceMappingURL=menu-title.js.map