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

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ImageSizeControl;

var _element = require("@wordpress/element");

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _useDimensionHandler = _interopRequireDefault(require("./use-dimension-handler"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const IMAGE_SIZE_PRESETS = [25, 50, 75, 100];

const noop = () => {};

function ImageSizeControl({
  imageSizeHelp,
  imageWidth,
  imageHeight,
  imageSizeOptions = [],
  isResizable = true,
  slug,
  width,
  height,
  onChange,
  onChangeImage = noop
}) {
  const {
    currentHeight,
    currentWidth,
    updateDimension,
    updateDimensions
  } = (0, _useDimensionHandler.default)(height, width, imageHeight, imageWidth, onChange);
  return (0, _element.createElement)(_element.Fragment, null, imageSizeOptions && imageSizeOptions.length > 0 && (0, _element.createElement)(_components.SelectControl, {
    __nextHasNoMarginBottom: true,
    label: (0, _i18n.__)('Resolution'),
    value: slug,
    options: imageSizeOptions,
    onChange: onChangeImage,
    help: imageSizeHelp,
    size: "__unstable-large"
  }), isResizable && (0, _element.createElement)("div", {
    className: "block-editor-image-size-control"
  }, (0, _element.createElement)(_components.__experimentalHStack, {
    align: "baseline",
    spacing: "3"
  }, (0, _element.createElement)(_components.__experimentalNumberControl, {
    className: "block-editor-image-size-control__width",
    label: (0, _i18n.__)('Width'),
    value: currentWidth,
    min: 1,
    onChange: value => updateDimension('width', value),
    size: "__unstable-large"
  }), (0, _element.createElement)(_components.__experimentalNumberControl, {
    className: "block-editor-image-size-control__height",
    label: (0, _i18n.__)('Height'),
    value: currentHeight,
    min: 1,
    onChange: value => updateDimension('height', value),
    size: "__unstable-large"
  })), (0, _element.createElement)(_components.__experimentalHStack, null, (0, _element.createElement)(_components.ButtonGroup, {
    "aria-label": (0, _i18n.__)('Image size presets')
  }, 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 (0, _element.createElement)(_components.Button, {
      key: scale,
      isSmall: true,
      variant: isCurrent ? 'primary' : undefined,
      isPressed: isCurrent,
      onClick: () => updateDimensions(scaledHeight, scaledWidth)
    }, scale, "%");
  })), (0, _element.createElement)(_components.Button, {
    isSmall: true,
    onClick: () => updateDimensions()
  }, (0, _i18n.__)('Reset')))));
}
//# sourceMappingURL=index.js.map