@wordpress/components
Version:
UI components for WordPress.
80 lines (72 loc) • 2.52 kB
JavaScript
import { createElement } from "@wordpress/element";
/**
* WordPress dependencies
*/
import { useRef, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { Icon, search as searchIcon } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { getAnimateClassName } from '../../animate';
import Button from '../../button';
import MenuTitleSearch from './menu-title-search';
import { GroupTitleUI, MenuTitleActionsUI, MenuTitleUI } from '../styles/navigation-styles';
import { useNavigationMenuContext } from './context';
import { SEARCH_FOCUS_DELAY } from '../constants';
export default function NavigationMenuTitle(_ref) {
let {
hasSearch,
onSearch,
search,
title,
titleAction
} = _ref;
const [isSearching, setIsSearching] = useState(false);
const {
menu
} = useNavigationMenuContext();
const searchButtonRef = 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();
}, SEARCH_FOCUS_DELAY);
};
const menuTitleId = `components-navigation__menu-title-${menu}`;
/* translators: search button label for menu search box. %s: menu title */
const searchButtonLabel = sprintf(__('Search in %s'), title);
return createElement(MenuTitleUI, {
className: "components-navigation__menu-title"
}, !isSearching && createElement(GroupTitleUI, {
as: "h2",
className: "components-navigation__menu-title-heading",
level: 3
}, createElement("span", {
id: menuTitleId
}, title), (hasSearch || titleAction) && createElement(MenuTitleActionsUI, null, titleAction, hasSearch && createElement(Button, {
isSmall: true,
variant: "tertiary",
label: searchButtonLabel,
onClick: () => setIsSearching(true),
ref: searchButtonRef
}, createElement(Icon, {
icon: searchIcon
})))), isSearching && createElement("div", {
className: getAnimateClassName({
type: 'slide-in',
origin: 'left'
})
}, createElement(MenuTitleSearch, {
onCloseSearch: onCloseSearch,
onSearch: onSearch,
search: search,
title: title
})));
}
//# sourceMappingURL=menu-title.js.map