@elementor/editor-site-navigation 0.11.0 → 0.12.0

package/src/components/panel/posts-list/post-list-item.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Post } from '../../../types';
+import ListItemRename from './list-items/list-item-rename';
+import ListItemCreate from './list-items/list-item-create';
+import ListItemDuplicate from './list-items/list-item-duplicate';
+import ListItemView from './list-items/list-item-view';
+import { usePostListContext } from '../../../contexts/post-list-context';
+
+export default function PostListItem( { post }: { post?: Post } ) {
+	const { editMode } = usePostListContext();
+
+	if ( 'rename' === editMode.mode && post?.id && post?.id === editMode.details.postId ) {
+		return <ListItemRename post={ post } />;
+	}
+
+	if ( 'create' === editMode.mode && ! post ) {
+		return <ListItemCreate />;
+	}
+
+	if ( 'duplicate' === editMode.mode && ! post ) {
+		return <ListItemDuplicate />;
+	}
+
+	if ( ! post ) {
+		return null;
+	}
+
+	return <ListItemView post={ post } />;
+}

package/src/components/panel/posts-list/posts-collapsible-list.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { PageTypeIcon } from '@elementor/icons';
+import { Skeleton, Box, List } from '@elementor/ui';
+import { usePosts } from '../../../hooks/use-posts';
+import { usePostListContext } from '../../../contexts/post-list-context';
+import { postTypesMap } from '../../../api/post';
+import CollapsibleList from './collapsible-list';
+import PostListItem from './post-list-item';
+
+type Props = {
+	isOpenByDefault?: boolean,
+}
+
+export default function PostsCollapsibleList( { isOpenByDefault = false }: Props ) {
+	const { type, editMode } = usePostListContext();
+	const { data: posts, isLoading: postsLoading } = usePosts( type );
+
+	if ( ! posts || postsLoading ) {
+		return (
+			<Box spacing={ 4 } sx={ { px: 6 } }>
+				<Skeleton variant="text" sx={ { fontSize: '2rem' } } />
+				<Skeleton variant="rounded" width="100%" height="48" />
+			</Box>
+		);
+	}
+
+	const label = `${ postTypesMap[ type ].labels.plural_name } (${ posts.length.toString() })`;
+
+	return (
+		<List dense>
+			<CollapsibleList
+				label={ label }
+				Icon={ PageTypeIcon }
+				isOpenByDefault={ isOpenByDefault || false }
+			>
+				{ posts.map( ( post ) => <PostListItem key={ post.id } post={ post } /> ) }
+				{
+					[ 'duplicate', 'create' ].includes( editMode.mode ) &&
+						<PostListItem />
+				}
+			</CollapsibleList>
+		</List>
+	);
+}

package/src/components/panel/shell.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { Box, List } from '@elementor/ui';
+import { Box } from '@elementor/ui';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import PagesCollapsibleList from './pages-list/pages-collapsible-list';
 import { __ } from '@wordpress/i18n';
-import AddNewPageButton from './add-new-page-button';
+import PostsCollapsibleList from './posts-list/posts-collapsible-list';
+import { PostListContextProvider } from '../../contexts/post-list-context';
+import AddNewButton from './add-new-button';
 
 const Shell = () => {
 	return (
@@ -12,16 +13,16 @@ const Shell = () => {
 				<PanelHeaderTitle>{ __( 'Pages', 'elementor' ) }</PanelHeaderTitle>
 			</PanelHeader>
 			<PanelBody>
-				<Box
-					display="flex"
-					justifyContent="flex-end"
-					alignItems="center"
-				>
-					<AddNewPageButton />
-				</Box>
-				<List dense>
-					<PagesCollapsibleList isOpenByDefault={ true } />
-				</List>
+				<PostListContextProvider type={ 'page' }>
+					<Box
+						display="flex"
+						justifyContent="flex-end"
+						alignItems="center"
+					>
+						<AddNewButton />
+					</Box>
+					<PostsCollapsibleList isOpenByDefault={ true } />
+				</PostListContextProvider>
 			</PanelBody>
 		</Panel>
 	);

package/src/contexts/post-list-context.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { useState, useContext, createContext, Dispatch, SetStateAction, ReactNode } from 'react';
+import { Slug } from '../api/post';
+
+export type EditMode = {
+	mode: 'rename',
+	details: {
+		postId: number,
+	},
+} | {
+	mode: 'create',
+	details: Record<string, never>,
+} | {
+	mode: 'duplicate',
+	details: {
+		postId: number,
+		title: string,
+	},
+} | {
+	mode: 'none',
+	details: Record<string, never>,
+};
+
+type ContextType = {
+	type: Slug,
+	editMode: EditMode,
+	setEditMode: Dispatch<SetStateAction<EditMode>>,
+	resetEditMode: () => void,
+};
+
+const defaultValues: ContextType = {
+	type: 'page',
+	editMode: { mode: 'none', details: {} },
+	setEditMode: () => null,
+	resetEditMode: () => null,
+};
+
+export const PostListContext = createContext<ContextType>( defaultValues );
+
+export const PostListContextProvider = ( {
+	type,
+	children,
+}: {
+	type: ContextType[ 'type' ],
+	children: ReactNode,
+} ) => {
+	const [ editMode, setEditMode ] = useState( defaultValues.editMode );
+
+	const resetEditMode = () => {
+		setEditMode( defaultValues.editMode );
+	};
+
+	return (
+		<PostListContext.Provider value={ {
+			type,
+			editMode,
+			setEditMode,
+			resetEditMode,
+		} }>
+			{ children }
+		</PostListContext.Provider>
+	);
+};
+
+export function usePostListContext() {
+	const context = useContext( PostListContext );
+
+	if ( ! context ) {
+		throw new Error( 'The `usePostListContext()` hook must be used within an `<PostListContextProvider />`' );
+	}
+
+	return context;
+}

package/src/hooks/__tests__/use-posts.test.ts

@@ -27,7 +27,7 @@ describe( '@elementor/site-settings/use-posts', () => {
 		const { component } = renderHookWithQuery( () => usePosts( 'page' ) );
 
 		// Assert.
-		const expectedPath = `/wp/v2/pages?status=any&per_page=-1&_fields=${ encodeURIComponent( 'id,type,title,link,status' ) }`;
+		const expectedPath = `/wp/v2/pages?status=any&per_page=-1&order=asc&_fields=${ encodeURIComponent( 'id,type,title,link,status' ) }`;
 
 		expect( apiFetch ).toHaveBeenCalledWith( {
 			path: expectedPath,

package/src/components/panel/actions-menu/page-actions-menu.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { Divider, Menu, MenuProps } from '@elementor/ui';
-import Rename from '../pages-actions/rename';
-import Duplicate from '../pages-actions/duplicate';
-import Delete from '../pages-actions/delete';
-import { Post } from '../../../types';
-import View from '../pages-actions/view';
-import SetHome from '../pages-actions/set-home';
-
-type Props = MenuProps & {
-	page: Post
-};
-
-export default function PageActionsMenu( { page, ...props }: Props ) {
-	return (
-		<Menu
-			PaperProps={ { sx: { mt: 4, width: 200 } } }
-			MenuListProps={ { dense: true } }
-			{ ...props }
-		>
-			<Rename />
-			<Duplicate />
-			<Delete page={ page } />
-			<View />
-			<Divider />
-			<SetHome page={ page } />
-		</Menu>
-	);
-}

package/src/components/panel/add-new-page-button.tsx

@@ -1,15 +0,0 @@
-import { Button } from '@elementor/ui';
-import { PlusIcon } from '@elementor/icons';
-import * as React from 'react';
-
-export default function AddNewPageButton() {
-	return (
-		<Button
-			sx={ { mt: 4, mb: 4, mr: 5 } }
-			startIcon={ <PlusIcon /> }
-			onClick={ () => null }
-		>
-			Add New
-		</Button>
-	);
-}

package/src/components/panel/pages-actions/duplicate.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { CopyIcon } from '@elementor/icons';
-import ActionMenuItem from '../actions-menu/action-menu-item';
-
-export default function Duplicate() {
-	return (
-		<ActionMenuItem
-			title={ __( 'Duplicate', 'elementor' ) }
-			icon={ CopyIcon }
-			onClick={ () => null }
-		/>
-	);
-}

package/src/components/panel/pages-actions/rename.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { EraseIcon } from '@elementor/icons';
-import { __ } from '@wordpress/i18n';
-import ActionMenuItem from '../actions-menu/action-menu-item';
-
-export default function Rename() {
-	return (
-		<ActionMenuItem
-			title={ __( 'Rename', 'elementor' ) }
-			icon={ EraseIcon }
-			onClick={ () => null }
-		/>
-	);
-}

package/src/components/panel/pages-actions/view.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { EyeIcon } from '@elementor/icons';
-import { __ } from '@wordpress/i18n';
-import ActionMenuItem from '../actions-menu/action-menu-item';
-
-export default function View() {
-	return (
-		<ActionMenuItem
-			title={ __( 'View Page', 'elementor' ) } // TODO 21/06/2023 : post label should come from post type
-			icon={ EyeIcon }
-			onClick={ () => null }
-		/>
-	);
-}

package/src/components/panel/pages-list/page-list-item.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import {
-	bindMenu,
-	bindTrigger,
-	ListItem,
-	ListItemButton,
-	ListItemIcon,
-	ListItemText,
-	ToggleButton,
-	usePopupState,
-} from '@elementor/ui';
-import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
-import { Post } from '../../../types';
-import { useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
-import PageTitleAndStatus from '../../shared/page-title-and-status';
-import PageActionsMenu from '../actions-menu/page-actions-menu';
-
-export default function PageListItem( { page }: { page: Post } ) {
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: 'page-actions',
-	} );
-
-	const activeDocument = useActiveDocument();
-	const navigateToDocument = useNavigateToDocument();
-
-	const isActive = activeDocument?.id === page.id;
-
-	return (
-		<>
-			<ListItem
-				disablePadding
-				secondaryAction={
-					<ToggleButton
-						value
-						color="secondary"
-						size="small"
-						selected={ popupState.isOpen }
-						{ ...bindTrigger( popupState ) }
-					>
-						<DotsVerticalIcon fontSize="small" />
-					</ToggleButton>
-				}
-			>
-				<ListItemButton
-					selected={ isActive }
-					onClick={ () => navigateToDocument( page.id ) }
-					dense
-				>
-					<ListItemIcon />
-					<ListItemText
-						disableTypography={ true }
-					>
-						<PageTitleAndStatus page={ page } />
-					</ListItemText>
-					{ page.isHome &&
-						<ListItemIcon>
-							<HomeIcon color="disabled" />
-						</ListItemIcon>
-					}
-				</ListItemButton>
-			</ListItem>
-			<PageActionsMenu page={ page } { ...bindMenu( popupState ) } />
-		</>
-	);
-}

package/src/components/panel/pages-list/pages-collapsible-list.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import CollapsibleList from './collapsible-list';
-import { PageTypeIcon } from '@elementor/icons';
-import { Skeleton, Box } from '@elementor/ui';
-import PageListItem from './page-list-item';
-import { usePosts } from '../../../hooks/use-posts';
-import { __ } from '@wordpress/i18n';
-
-type Props = {
-	isOpenByDefault?: boolean;
-}
-
-export default function PagesCollapsibleList( { isOpenByDefault = false }: Props ) {
-	const { data: pages, isLoading: pagesLoading } = usePosts( 'page' );
-
-	if ( ! pages || pagesLoading ) {
-		return (
-			<Box spacing={ 4 } sx={ { px: 6 } }>
-				<Skeleton variant="text" sx={ { fontSize: '2rem' } } />
-				<Skeleton variant="rounded" width="100%" height="48" />
-			</Box>
-		);
-	}
-
-	// translators: %s: Number of pages
-	const label = __( 'Pages (%s)', 'elementor' ).replace( '%s', ( pages.length ).toString() );
-
-	return (
-		<CollapsibleList
-			label={ label }
-			Icon={ PageTypeIcon }
-			isOpenByDefault={ isOpenByDefault }
-		>
-			{ pages.map( ( page ) => <PageListItem key={ page.id } page={ page } /> ) }
-		</CollapsibleList>
-	);
-}