@wordpress/components
Version:
UI components for WordPress.
77 lines (70 loc) • 2.37 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 { MenuTitleActionsUI, MenuTitleHeadingUI, MenuTitleUI } from '../styles/navigation-styles';
import { useNavigationMenuContext } from './context';
import { SEARCH_FOCUS_DELAY } from '../constants';
export default function NavigationMenuTitle({
hasSearch,
onSearch,
search,
title,
titleAction
}) {
const [isSearching, setIsSearching] = useState(false);
const {
menu
} = useNavigationMenuContext();
const searchButtonRef = useRef();
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(() => {
searchButtonRef.current.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(MenuTitleHeadingUI, {
as: "h2",
className: "components-navigation__menu-title-heading",
variant: "title.small"
}, createElement("span", {
id: menuTitleId
}, title), (hasSearch || titleAction) && createElement(MenuTitleActionsUI, null, titleAction, hasSearch && createElement(Button, {
isSmall: true,
isTertiary: true,
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