modal for the rename function

WordPress · May 24, 2023 · 5296e28 · 5296e28
1 parent ef9338a
commit 5296e28
Showing 1 changed file with 71 additions and 32 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
@@ -4,13 +4,18 @@
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import {
 	__experimentalUseNavigator as useNavigator,
-	Spinner,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
 	DropdownMenu,
+	Spinner,
+	TextControl,
 	MenuItem,
 	MenuGroup,
+	Modal,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { BlockEditorProvider } from '@wordpress/block-editor';
@@ -47,6 +52,8 @@ export default function SidebarNavigationScreenNavigationMenu() {
 
 	const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug;
 
+	const [ isOpen, setOpen ] = useState( false );
+
 	if ( isLoading ) {
 		return (
 			<SidebarNavigationScreenWrapper
@@ -78,7 +85,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 
 	return (
 		<SidebarNavigationScreenWrapper
-			actions={ ScreenNavigationMoreMenu( postId ) }
+			actions={ ScreenNavigationMoreMenu( postId, isOpen, setOpen ) }
 			title={ decodeEntities( menuTitle ) }
 			description={ __(
 				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
@@ -166,37 +173,69 @@ const POPOVER_PROPS = {
 	variant: 'toolbar',
 };
 
-function ScreenNavigationMoreMenu( navigationMenuID ) {
+function ScreenNavigationMoreMenu( navigationMenuID, isOpen, setOpen ) {
 	const { deleteEntityRecord } = useDispatch( coreStore );
+	const closeModal = () => setOpen( false );
+	const openModal = () => setOpen( true );
 	return (
-		<DropdownMenu
-			className="sidebar-navigation__more-menu"
-			icon={ moreVertical }
-			popoverProps={ POPOVER_PROPS }
-		>
-			{ ( { onClose } ) => (
-				<div>
-					<MenuGroup>
-						<MenuItem>{ __( 'Rename' ) }</MenuItem>
-						<MenuItem>{ __( 'Duplicate' ) }</MenuItem>
-						<MenuItem
-							isDestructive
-							isTertiary
-							onClick={ () => {
-								deleteEntityRecord(
-									'postType',
-									'wp_navigation',
-									navigationMenuID,
-									{ force: true }
-								);
-								onClose();
-							} }
-						>
-							{ __( 'Delete' ) }
-						</MenuItem>
-					</MenuGroup>
-				</div>
+		<>
+			<DropdownMenu
+				className="sidebar-navigation__more-menu"
+				icon={ moreVertical }
+				popoverProps={ POPOVER_PROPS }
+			>
+				{ ( { onClose } ) => (
+					<div>
+						<MenuGroup>
+							<MenuItem onClick={ openModal }>
+								{ __( 'Rename' ) }
+							</MenuItem>
+							<MenuItem>{ __( 'Duplicate' ) }</MenuItem>
+							<MenuItem
+								isDestructive
+								isTertiary
+								onClick={ () => {
+									deleteEntityRecord(
+										'postType',
+										'wp_navigation',
+										navigationMenuID,
+										{ force: true }
+									);
+									onClose();
+								} }
+							>
+								{ __( 'Delete' ) }
+							</MenuItem>
+						</MenuGroup>
+					</div>
+				) }
+			</DropdownMenu>
+
+			{ isOpen && (
+				<Modal title="Rename" onRequestClose={ closeModal }>
+					<form>
+						<VStack spacing="3">
+							<TextControl
+								__nextHasNoMarginBottom
+								value="NAME!"
+								placeholder={ __( 'Navigation title' ) }
+							/>
+							<HStack justify="right">
+								<Button
+									variant="tertiary"
+									onClick={ closeModal }
+								>
+									{ __( 'Cancel' ) }
+								</Button>
+
+								<Button variant="primary" type="submit">
+									{ __( 'Ok' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
 			) }
-		</DropdownMenu>
+		</>
 	);
 }