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

Generic block editor.

/**
 * WordPress dependencies
 */
import { SelectControl, __experimentalNumberControl as NumberControl, __experimentalHStack as HStack, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import useDimensionHandler from './use-dimension-handler';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const IMAGE_SIZE_PRESETS = [25, 50, 75, 100];
const noop = () => {};

/**
 * Get scaled width and height for the given scale.
 *
 * @param {number} scale       The scale to get the scaled width and height for.
 * @param {number} imageWidth  The image width.
 * @param {number} imageHeight The image height.
 *
 * @return {Object} The scaled width and height.
 */
function getScaledWidthAndHeight(scale, imageWidth, imageHeight) {
  const scaledWidth = Math.round(imageWidth * (scale / 100));
  const scaledHeight = Math.round(imageHeight * (scale / 100));
  return {
    scaledWidth,
    scaledHeight
  };
}
export default function ImageSizeControl({
  imageSizeHelp,
  imageWidth,
  imageHeight,
  imageSizeOptions = [],
  isResizable = true,
  slug,
  width,
  height,
  onChange,
  onChangeImage = noop
}) {
  const {
    currentHeight,
    currentWidth,
    updateDimension,
    updateDimensions
  } = useDimensionHandler(height, width, imageHeight, imageWidth, onChange);

  /**
   * Updates the dimensions for the given scale.
   * Handler for toggle group control change.
   *
   * @param {number} scale The scale to update the dimensions for.
   */
  const handleUpdateDimensions = scale => {
    if (undefined === scale) {
      updateDimensions();
      return;
    }
    const {
      scaledWidth,
      scaledHeight
    } = getScaledWidthAndHeight(scale, imageWidth, imageHeight);
    updateDimensions(scaledHeight, scaledWidth);
  };

  /**
   * Add the stored image preset value to toggle group control.
   */
  const selectedValue = IMAGE_SIZE_PRESETS.find(scale => {
    const {
      scaledWidth,
      scaledHeight
    } = getScaledWidthAndHeight(scale, imageWidth, imageHeight);
    return currentWidth === scaledWidth && currentHeight === scaledHeight;
  });
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [imageSizeOptions && imageSizeOptions.length > 0 && /*#__PURE__*/_jsx(SelectControl, {
      __nextHasNoMarginBottom: true,
      label: __('Resolution'),
      value: slug,
      options: imageSizeOptions,
      onChange: onChangeImage,
      help: imageSizeHelp,
      size: "__unstable-large"
    }), isResizable && /*#__PURE__*/_jsxs("div", {
      className: "block-editor-image-size-control",
      children: [/*#__PURE__*/_jsxs(HStack, {
        align: "baseline",
        spacing: "3",
        children: [/*#__PURE__*/_jsx(NumberControl, {
          className: "block-editor-image-size-control__width",
          label: __('Width'),
          value: currentWidth,
          min: 1,
          onChange: value => updateDimension('width', value),
          size: "__unstable-large"
        }), /*#__PURE__*/_jsx(NumberControl, {
          className: "block-editor-image-size-control__height",
          label: __('Height'),
          value: currentHeight,
          min: 1,
          onChange: value => updateDimension('height', value),
          size: "__unstable-large"
        })]
      }), /*#__PURE__*/_jsx(ToggleGroupControl, {
        label: __('Image size presets'),
        hideLabelFromVision: true,
        onChange: handleUpdateDimensions,
        value: selectedValue,
        isBlock: true,
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        children: IMAGE_SIZE_PRESETS.map(scale => {
          return /*#__PURE__*/_jsx(ToggleGroupControlOption, {
            value: scale,
            label: sprintf(/* translators: Percentage value. */
            __('%d%%'), scale)
          }, scale);
        })
      })]
    })]
  });
}
//# sourceMappingURL=index.js.map