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

Generic block editor.

import { createElement, Fragment } from "@gechiui/element";

/**
 * 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(_ref) {
  let {
    imageWidth,
    imageHeight,
    imageSizeOptions = [],
    isResizable = true,
    slug,
    width,
    height,
    onChange,
    onChangeImage = noop
  } = _ref;
  const {
    currentHeight,
    currentWidth,
    updateDimension,
    updateDimensions
  } = useDimensionHandler(height, width, imageHeight, imageWidth, onChange);
  return createElement(Fragment, null, !isEmpty(imageSizeOptions) && createElement(SelectControl, {
    label: __('图片尺寸'),
    value: slug,
    options: imageSizeOptions,
    onChange: onChangeImage
  }), isResizable && createElement("div", {
    className: "block-editor-image-size-control"
  }, createElement("p", {
    className: "block-editor-image-size-control__row"
  }, __('图片尺寸')), createElement("div", {
    className: "block-editor-image-size-control__row"
  }, createElement(TextControl, {
    type: "number",
    className: "block-editor-image-size-control__width",
    label: __('宽度'),
    value: currentWidth,
    min: 1,
    onChange: value => updateDimension('width', value)
  }), createElement(TextControl, {
    type: "number",
    className: "block-editor-image-size-control__height",
    label: __('高度'),
    value: currentHeight,
    min: 1,
    onChange: value => updateDimension('height', value)
  })), createElement("div", {
    className: "block-editor-image-size-control__row"
  }, createElement(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 createElement(Button, {
      key: scale,
      isSmall: true,
      variant: isCurrent ? 'primary' : undefined,
      isPressed: isCurrent,
      onClick: () => updateDimensions(scaledHeight, scaledWidth)
    }, scale, "%");
  })), createElement(Button, {
    isSmall: true,
    onClick: () => updateDimensions()
  }, __('重置')))));
}
//# sourceMappingURL=index.js.map