@gechiui/block-editor/src/components/image-editor/zoom-dropdown.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { ToolbarButton, RangeControl, Dropdown } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { search } from '@gechiui/icons';

/**
 * Internal dependencies
 */
import { MIN_ZOOM, MAX_ZOOM, POPOVER_PROPS } from './constants';
import { useImageEditingContext } from './context';

export default function ZoomDropdown() {
	const { isInProgress, zoom, setZoom } = useImageEditingContext();
	return (
		<Dropdown
			contentClassName="gc-block-image__zoom"
			popoverProps={ POPOVER_PROPS }
			renderToggle={ ( { isOpen, onToggle } ) => (
				<ToolbarButton
					icon={ search }
					label={ __( '缩放' ) }
					onClick={ onToggle }
					aria-expanded={ isOpen }
					disabled={ isInProgress }
				/>
			) }
			renderContent={ () => (
				<RangeControl
					label={ __( '缩放' ) }
					min={ MIN_ZOOM }
					max={ MAX_ZOOM }
					value={ Math.round( zoom ) }
					onChange={ setZoom }
				/>
			) }
		/>
	);
}