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

Generic block editor.

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

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

import { Button, ButtonGroup, SelectControl, TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const IMAGE_SIZE_PRESETS = [25, 50, 75, 100];
export default function ImageSizeControl({
  imageWidth,
  imageHeight,
  imageSizeOptions = [],
  isResizable = true,
  slug,
  width,
  height,
  onChange,
  onChangeImage = noop
}) {
  var _ref, _ref2;

  function updateDimensions(nextWidth, nextHeight) {
    return () => {
      onChange({
        width: nextWidth,
        height: nextHeight
      });
    };
  }

  return createElement(Fragment, null, !isEmpty(imageSizeOptions) && createElement(SelectControl, {
    label: __('Image size'),
    value: slug,
    options: imageSizeOptions,
    onChange: onChangeImage
  }), isResizable && createElement("div", {
    className: "block-editor-image-size-control"
  }, createElement("p", {
    className: "block-editor-image-size-control__row"
  }, __('Image dimensions')), createElement("div", {
    className: "block-editor-image-size-control__row"
  }, createElement(TextControl, {
    type: "number",
    className: "block-editor-image-size-control__width",
    label: __('Width'),
    value: (_ref = width !== null && width !== void 0 ? width : imageWidth) !== null && _ref !== void 0 ? _ref : '',
    min: 1,
    onChange: value => onChange({
      width: parseInt(value, 10)
    })
  }), createElement(TextControl, {
    type: "number",
    className: "block-editor-image-size-control__height",
    label: __('Height'),
    value: (_ref2 = height !== null && height !== void 0 ? height : imageHeight) !== null && _ref2 !== void 0 ? _ref2 : '',
    min: 1,
    onChange: value => onChange({
      height: parseInt(value, 10)
    })
  })), createElement("div", {
    className: "block-editor-image-size-control__row"
  }, createElement(ButtonGroup, {
    "aria-label": __('Image size presets')
  }, IMAGE_SIZE_PRESETS.map(scale => {
    const scaledWidth = Math.round(imageWidth * (scale / 100));
    const scaledHeight = Math.round(imageHeight * (scale / 100));
    const isCurrent = width === scaledWidth && height === scaledHeight;
    return createElement(Button, {
      key: scale,
      isSmall: true,
      isPrimary: isCurrent,
      isPressed: isCurrent,
      onClick: updateDimensions(scaledWidth, scaledHeight)
    }, scale, "%");
  })), createElement(Button, {
    isSmall: true,
    onClick: updateDimensions()
  }, __('Reset')))));
}
//# sourceMappingURL=index.js.map