@gechiui/block-editor/src/components/block-pattern-setup/setup-toolbar.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
import { Button } from '@gechiui/components';
import {
	chevronRight,
	chevronLeft,
	grid,
	stretchFullWidth,
} from '@gechiui/icons';

/**
 * Internal dependencies
 */
import { VIEWMODES } from './constants';

const Actions = ( { onStartBlank, onBlockPatternSelect } ) => (
	<div className="block-editor-block-pattern-setup__actions">
		<Button onClick={ onStartBlank }>{ __( '开始空白' ) }</Button>
		<Button variant="primary" onClick={ onBlockPatternSelect }>
			{ __( '选择' ) }
		</Button>
	</div>
);

const CarouselNavigation = ( {
	handlePrevious,
	handleNext,
	activeSlide,
	totalSlides,
} ) => (
	<div className="block-editor-block-pattern-setup__navigation">
		<Button
			icon={ chevronLeft }
			label={ __( '上一样板' ) }
			onClick={ handlePrevious }
			disabled={ activeSlide === 0 }
		/>
		<Button
			icon={ chevronRight }
			label={ __( '下一样板' ) }
			onClick={ handleNext }
			disabled={ activeSlide === totalSlides - 1 }
		/>
	</div>
);

const SetupToolbar = ( {
	viewMode,
	setViewMode,
	handlePrevious,
	handleNext,
	activeSlide,
	totalSlides,
	onBlockPatternSelect,
	onStartBlank,
} ) => {
	const isCarouselView = viewMode === VIEWMODES.carousel;
	const displayControls = (
		<div className="block-editor-block-pattern-setup__display-controls">
			<Button
				icon={ stretchFullWidth }
				label={ __( '轮播视图' ) }
				onClick={ () => setViewMode( VIEWMODES.carousel ) }
				isPressed={ isCarouselView }
			/>
			<Button
				icon={ grid }
				label={ __( '网格视图' ) }
				onClick={ () => setViewMode( VIEWMODES.grid ) }
				isPressed={ viewMode === VIEWMODES.grid }
			/>
		</div>
	);
	return (
		<div className="block-editor-block-pattern-setup__toolbar">
			{ isCarouselView && (
				<CarouselNavigation
					handlePrevious={ handlePrevious }
					handleNext={ handleNext }
					activeSlide={ activeSlide }
					totalSlides={ totalSlides }
				/>
			) }
			{ displayControls }
			{ isCarouselView && (
				<Actions
					onBlockPatternSelect={ onBlockPatternSelect }
					onStartBlank={ onStartBlank }
				/>
			) }
		</div>
	);
};

export default SetupToolbar;