@gechiui/block-editor/src/components/inserter/block-patterns-explorer/explorer.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { Modal } from '@gechiui/components';
import { useState } from '@gechiui/element';
import { __ } from '@gechiui/i18n';

/**
 * Internal dependencies
 */
import PatternExplorerSidebar from './sidebar';
import PatternList from './patterns-list';

function PatternsExplorer( { initialCategory, patternCategories } ) {
	const [ filterValue, setFilterValue ] = useState( '' );
	const [ selectedCategory, setSelectedCategory ] = useState(
		initialCategory?.name
	);
	return (
		<div className="block-editor-block-patterns-explorer">
			<PatternExplorerSidebar
				selectedCategory={ selectedCategory }
				patternCategories={ patternCategories }
				onClickCategory={ setSelectedCategory }
				filterValue={ filterValue }
				setFilterValue={ setFilterValue }
			/>
			<PatternList
				filterValue={ filterValue }
				selectedCategory={ selectedCategory }
				patternCategories={ patternCategories }
			/>
		</div>
	);
}

function PatternsExplorerModal( { onModalClose, ...restProps } ) {
	return (
		<Modal
			title={ __( '样板' ) }
			closeLabel={ __( '关闭' ) }
			onRequestClose={ onModalClose }
			isFullScreen
		>
			<PatternsExplorer { ...restProps } />
		</Modal>
	);
}

export default PatternsExplorerModal;