@gechiui/block-editor/src/components/block-navigation/dropdown.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { Button, Dropdown } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { useSelect } from '@gechiui/data';
import { forwardRef } from '@gechiui/element';
import { listView } from '@gechiui/icons';

/**
 * Internal dependencies
 */
import ListView from '../list-view';
import { store as blockEditorStore } from '../../store';

function BlockNavigationDropdownToggle( {
	isEnabled,
	onToggle,
	isOpen,
	innerRef,
	...props
} ) {
	return (
		<Button
			{ ...props }
			ref={ innerRef }
			icon={ listView }
			aria-expanded={ isOpen }
			aria-haspopup="true"
			onClick={ isEnabled ? onToggle : undefined }
			/* translators: button label text should, if possible, be under 16 characters. */
			label={ __( '列表视图' ) }
			className="block-editor-block-navigation"
			aria-disabled={ ! isEnabled }
		/>
	);
}

function BlockNavigationDropdown(
	{ isDisabled, __experimentalFeatures, ...props },
	ref
) {
	const hasBlocks = useSelect(
		( select ) => !! select( blockEditorStore ).getBlockCount(),
		[]
	);
	const isEnabled = hasBlocks && ! isDisabled;

	return (
		<Dropdown
			contentClassName="block-editor-block-navigation__popover"
			position="bottom right"
			renderToggle={ ( { isOpen, onToggle } ) => (
				<BlockNavigationDropdownToggle
					{ ...props }
					innerRef={ ref }
					isOpen={ isOpen }
					onToggle={ onToggle }
					isEnabled={ isEnabled }
				/>
			) }
			renderContent={ () => (
				<div className="block-editor-block-navigation__container">
					<p className="block-editor-block-navigation__label">
						{ __( '列表视图' ) }
					</p>

					<ListView
						showNestedBlocks
						__experimentalFeatures={ __experimentalFeatures }
					/>
				</div>
			) }
		/>
	);
}

export default forwardRef( BlockNavigationDropdown );