@wordpress/edit-site 7.3.0 → 7.4.0

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -1,304 +0,0 @@
-import { useState, useMemo, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	Flex,
-	FlexItem,
-	SearchControl,
-	TextHighlight,
-	Composite,
-	__experimentalText as WCText,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { useDebouncedInput } from '@wordpress/compose';
-import { focus } from '@wordpress/dom';
-import { safeDecodeURI } from '@wordpress/url';
-import { mapToIHasNameAndId } from './utils';
-
-const EMPTY_ARRAY = [];
-
-function SuggestionListItem( {
-	suggestion,
-	search,
-	onSelect,
-	entityForSuggestions,
-} ) {
-	const baseCssClass =
-		'edit-site-custom-template-modal__suggestions_list__list-item';
-	return (
-		<Composite.Item
-			render={
-				<Button
-					__next40pxDefaultSize
-					role="option"
-					className={ baseCssClass }
-					onClick={ () =>
-						onSelect(
-							entityForSuggestions.config.getSpecificTemplate(
-								suggestion
-							)
-						)
-					}
-				/>
-			}
-		>
-			<WCText
-				size="body"
-				lineHeight={ 1.53846153846 } // 20px
-				weight="var(--wpds-typography-font-weight-emphasis)"
-				className={ `${ baseCssClass }__title` }
-			>
-				<TextHighlight
-					text={ decodeEntities( suggestion.name ) }
-					highlight={ search }
-				/>
-			</WCText>
-			{ suggestion.link && (
-				<WCText
-					size="body"
-					lineHeight={ 1.53846153846 } // 20px
-					className={ `${ baseCssClass }__info` }
-				>
-					{ safeDecodeURI( suggestion.link ) }
-				</WCText>
-			) }
-		</Composite.Item>
-	);
-}
-
-function useSearchSuggestions( entityForSuggestions, search ) {
-	const { config } = entityForSuggestions;
-	const query = useMemo(
-		() => ( {
-			order: 'asc',
-			context: 'view',
-			search,
-			per_page: search ? 20 : 10,
-			...config.queryArgs( search ),
-		} ),
-		[ search, config ]
-	);
-	const { records: searchResults, hasResolved: searchHasResolved } =
-		useEntityRecords(
-			entityForSuggestions.type,
-			entityForSuggestions.slug,
-			query
-		);
-	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
-	useEffect( () => {
-		if ( ! searchHasResolved ) {
-			return;
-		}
-		let newSuggestions = EMPTY_ARRAY;
-		if ( searchResults?.length ) {
-			newSuggestions = searchResults;
-			if ( config.recordNamePath ) {
-				newSuggestions = mapToIHasNameAndId(
-					newSuggestions,
-					config.recordNamePath
-				);
-			}
-		}
-		// Update suggestions only when the query has resolved, so as to keep
-		// the previous results in the UI.
-		setSuggestions( newSuggestions );
-	}, [ searchResults, searchHasResolved ] );
-	return suggestions;
-}
-
-function SuggestionList( { entityForSuggestions, onSelect } ) {
-	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
-	const suggestions = useSearchSuggestions(
-		entityForSuggestions,
-		debouncedSearch
-	);
-	const { labels } = entityForSuggestions;
-	const [ showSearchControl, setShowSearchControl ] = useState( false );
-	if ( ! showSearchControl && suggestions?.length > 9 ) {
-		setShowSearchControl( true );
-	}
-	return (
-		<>
-			{ showSearchControl && (
-				<SearchControl
-					onChange={ setSearch }
-					value={ search }
-					label={ labels.search_items }
-					placeholder={ labels.search_items }
-				/>
-			) }
-			{ !! suggestions?.length && (
-				<Composite
-					orientation="vertical"
-					role="listbox"
-					className="edit-site-custom-template-modal__suggestions_list"
-					aria-label={ __( 'Suggestions list' ) }
-				>
-					{ suggestions.map( ( suggestion ) => (
-						<SuggestionListItem
-							key={ suggestion.slug }
-							suggestion={ suggestion }
-							search={ debouncedSearch }
-							onSelect={ onSelect }
-							entityForSuggestions={ entityForSuggestions }
-						/>
-					) ) }
-				</Composite>
-			) }
-			{ debouncedSearch && ! suggestions?.length && (
-				<WCText
-					as="p"
-					className="edit-site-custom-template-modal__no-results"
-				>
-					{ labels.not_found }
-				</WCText>
-			) }
-		</>
-	);
-}
-
-function AddCustomTemplateModalContent( {
-	onSelect,
-	entityForSuggestions,
-	onBack,
-	containerRef,
-} ) {
-	const [ showSearchEntities, setShowSearchEntities ] = useState();
-
-	// Focus on the first focusable element when the modal opens.
-	// We handle focus management in the parent modal, just need to focus on the first focusable element.
-	useEffect( () => {
-		if ( containerRef.current ) {
-			const [ firstFocusable ] = focus.focusable.find(
-				containerRef.current
-			);
-			firstFocusable?.focus();
-		}
-	}, [ showSearchEntities ] );
-
-	return (
-		<VStack
-			spacing={ 4 }
-			className="edit-site-custom-template-modal__contents-wrapper"
-			alignment="left"
-		>
-			{ ! showSearchEntities && (
-				<>
-					<WCText as="p">
-						{ __(
-							'Select whether to create a single template for all items or a specific one.'
-						) }
-					</WCText>
-					<Flex
-						className="edit-site-custom-template-modal__contents"
-						gap="4"
-						align="initial"
-					>
-						<FlexItem
-							isBlock
-							as={ Button }
-							onClick={ () => {
-								const {
-									slug,
-									title,
-									description,
-									templatePrefix,
-								} = entityForSuggestions.template;
-								onSelect( {
-									slug,
-									title,
-									description,
-									templatePrefix,
-								} );
-							} }
-						>
-							<WCText
-								as="span"
-								weight="var(--wpds-typography-font-weight-emphasis)"
-								lineHeight={ 1.53846153846 } // 20px
-							>
-								{ entityForSuggestions.labels.all_items }
-							</WCText>
-							<WCText
-								as="span"
-								lineHeight={ 1.53846153846 } // 20px
-							>
-								{
-									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
-									__( 'For all items' )
-								}
-							</WCText>
-						</FlexItem>
-						<FlexItem
-							isBlock
-							as={ Button }
-							onClick={ () => {
-								setShowSearchEntities( true );
-							} }
-						>
-							<WCText
-								as="span"
-								weight="var(--wpds-typography-font-weight-emphasis)"
-								lineHeight={ 1.53846153846 } // 20px
-							>
-								{ entityForSuggestions.labels.singular_name }
-							</WCText>
-							<WCText
-								as="span"
-								lineHeight={ 1.53846153846 } // 20px
-							>
-								{
-									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
-									__( 'For a specific item' )
-								}
-							</WCText>
-						</FlexItem>
-					</Flex>
-					<Flex justify="right">
-						<Button
-							__next40pxDefaultSize
-							variant="tertiary"
-							onClick={ onBack }
-						>
-							{ __( 'Back' ) }
-						</Button>
-					</Flex>
-				</>
-			) }
-			{ showSearchEntities && (
-				<>
-					<WCText as="p">
-						{ __(
-							'This template will be used only for the specific item chosen.'
-						) }
-					</WCText>
-					<SuggestionList
-						entityForSuggestions={ entityForSuggestions }
-						onSelect={ onSelect }
-					/>
-					<Flex justify="right">
-						<Button
-							__next40pxDefaultSize
-							variant="tertiary"
-							onClick={ () => {
-								// If general template exists, go directly back to main screen
-								// instead of showing the choice screen
-								if ( entityForSuggestions.hasGeneralTemplate ) {
-									onBack();
-								} else {
-									setShowSearchEntities( false );
-								}
-							} }
-						>
-							{ __( 'Back' ) }
-						</Button>
-					</Flex>
-				</>
-			) }
-		</VStack>
-	);
-}
-
-export default AddCustomTemplateModalContent;