@gechiui/block-editor/src/components/image-size-control/index.js

Generic block editor.

/**
 * External dependencies
 */
import { isEmpty, noop } from 'lodash';

/**
 * GeChiUI dependencies
 */
import {
	Button,
	ButtonGroup,
	SelectControl,
	TextControl,
} from '@gechiui/components';
import { __ } from '@gechiui/i18n';

/**
 * Internal dependencies
 */
import useDimensionHandler from './use-dimension-handler';

const IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];

export default function ImageSizeControl( {
	imageWidth,
	imageHeight,
	imageSizeOptions = [],
	isResizable = true,
	slug,
	width,
	height,
	onChange,
	onChangeImage = noop,
} ) {
	const {
		currentHeight,
		currentWidth,
		updateDimension,
		updateDimensions,
	} = useDimensionHandler( height, width, imageHeight, imageWidth, onChange );

	return (
		<>
			{ ! isEmpty( imageSizeOptions ) && (
				<SelectControl
					label={ __( '图片尺寸' ) }
					value={ slug }
					options={ imageSizeOptions }
					onChange={ onChangeImage }
				/>
			) }
			{ isResizable && (
				<div className="block-editor-image-size-control">
					<p className="block-editor-image-size-control__row">
						{ __( '图片尺寸' ) }
					</p>
					<div className="block-editor-image-size-control__row">
						<TextControl
							type="number"
							className="block-editor-image-size-control__width"
							label={ __( '宽度' ) }
							value={ currentWidth }
							min={ 1 }
							onChange={ ( value ) =>
								updateDimension( 'width', value )
							}
						/>
						<TextControl
							type="number"
							className="block-editor-image-size-control__height"
							label={ __( '高度' ) }
							value={ currentHeight }
							min={ 1 }
							onChange={ ( value ) =>
								updateDimension( 'height', value )
							}
						/>
					</div>
					<div className="block-editor-image-size-control__row">
						<ButtonGroup aria-label={ __( '图片尺寸预设' ) }>
							{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
								const scaledWidth = Math.round(
									imageWidth * ( scale / 100 )
								);
								const scaledHeight = Math.round(
									imageHeight * ( scale / 100 )
								);

								const isCurrent =
									currentWidth === scaledWidth &&
									currentHeight === scaledHeight;

								return (
									<Button
										key={ scale }
										isSmall
										variant={
											isCurrent ? 'primary' : undefined
										}
										isPressed={ isCurrent }
										onClick={ () =>
											updateDimensions(
												scaledHeight,
												scaledWidth
											)
										}
									>
										{ scale }%
									</Button>
								);
							} ) }
						</ButtonGroup>
						<Button isSmall onClick={ () => updateDimensions() }>
							{ __( '重置' ) }
						</Button>
					</div>
				</div>
			) }
		</>
	);
}