@wordpress/block-editor/build/components/dimensions-tool/aspect-ratio-tool.js

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = AspectRatioTool;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _useSettings = require("../use-settings");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
 */

/**
 * @callback AspectRatioToolPropsOnChange
 * @param {string} [value] New aspect ratio value.
 * @return {void} No return.
 */

/**
 * @typedef {Object} AspectRatioToolProps
 * @property {string}                       [panelId]          ID of the panel this tool is associated with.
 * @property {string}                       [value]            Current aspect ratio value.
 * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.
 * @property {SelectControlProps[]}         [options]          Aspect ratio options.
 * @property {string}                       [defaultValue]     Default aspect ratio value.
 * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
 */function AspectRatioTool({
  panelId,
  value,
  onChange = () => {},
  options,
  defaultValue = 'auto',
  hasValue,
  isShownByDefault = true
}) {
  // Match the CSS default so if the value is used directly in CSS it will look correct in the control.
  const displayValue = value !== null && value !== void 0 ? value : 'auto';
  const [defaultRatios, themeRatios, showDefaultRatios] = (0, _useSettings.useSettings)('dimensions.aspectRatios.default', 'dimensions.aspectRatios.theme', 'dimensions.defaultAspectRatios');
  const themeOptions = themeRatios?.map(({
    name,
    ratio
  }) => ({
    label: name,
    value: ratio
  }));
  const defaultOptions = defaultRatios?.map(({
    name,
    ratio
  }) => ({
    label: name,
    value: ratio
  }));
  const aspectRatioOptions = [{
    label: (0, _i18n._x)('Original', 'Aspect ratio option for dimensions control'),
    value: 'auto'
  }, ...(showDefaultRatios ? defaultOptions : []), ...(themeOptions ? themeOptions : []), {
    label: (0, _i18n._x)('Custom', 'Aspect ratio option for dimensions control'),
    value: 'custom',
    disabled: true,
    hidden: true
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
    hasValue: hasValue ? hasValue : () => displayValue !== defaultValue,
    label: (0, _i18n.__)('Aspect ratio'),
    onDeselect: () => onChange(undefined),
    isShownByDefault: isShownByDefault,
    panelId: panelId,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
      label: (0, _i18n.__)('Aspect ratio'),
      value: displayValue,
      options: options !== null && options !== void 0 ? options : aspectRatioOptions,
      onChange: onChange,
      size: "__unstable-large",
      __nextHasNoMarginBottom: true
    })
  });
}
//# sourceMappingURL=aspect-ratio-tool.js.map