@wordpress/block-editor/build/components/image-editor/aspect-ratio-dropdown.js

Generic block editor.

"use strict";

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

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

var _icons = require("@wordpress/icons");

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

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

var _constants = require("./constants");

var _context = require("./context");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function AspectGroup({
  aspectRatios,
  isDisabled,
  label,
  onClick,
  value
}) {
  return (0, _element.createElement)(_components.MenuGroup, {
    label: label
  }, aspectRatios.map(({
    title,
    aspect
  }) => (0, _element.createElement)(_components.MenuItem, {
    key: aspect,
    disabled: isDisabled,
    onClick: () => {
      onClick(aspect);
    },
    role: "menuitemradio",
    isSelected: aspect === value,
    icon: aspect === value ? _icons.check : undefined
  }, title)));
}

function AspectRatioDropdown({
  toggleProps
}) {
  const {
    isInProgress,
    aspect,
    setAspect,
    defaultAspect
  } = (0, _context.useImageEditingContext)();
  return (0, _element.createElement)(_components.DropdownMenu, {
    icon: _icons.aspectRatio,
    label: (0, _i18n.__)('Aspect Ratio'),
    popoverProps: _constants.POPOVER_PROPS,
    toggleProps: toggleProps,
    className: "wp-block-image__aspect-ratio"
  }, ({
    onClose
  }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(AspectGroup, {
    isDisabled: isInProgress,
    onClick: newAspect => {
      setAspect(newAspect);
      onClose();
    },
    value: aspect,
    aspectRatios: [// All ratios should be mirrored in PostFeaturedImage in @wordpress/block-library
    {
      title: (0, _i18n.__)('Original'),
      aspect: defaultAspect
    }, {
      title: (0, _i18n.__)('Square'),
      aspect: 1
    }]
  }), (0, _element.createElement)(AspectGroup, {
    label: (0, _i18n.__)('Landscape'),
    isDisabled: isInProgress,
    onClick: newAspect => {
      setAspect(newAspect);
      onClose();
    },
    value: aspect,
    aspectRatios: [{
      title: (0, _i18n.__)('16:10'),
      aspect: 16 / 10
    }, {
      title: (0, _i18n.__)('16:9'),
      aspect: 16 / 9
    }, {
      title: (0, _i18n.__)('4:3'),
      aspect: 4 / 3
    }, {
      title: (0, _i18n.__)('3:2'),
      aspect: 3 / 2
    }]
  }), (0, _element.createElement)(AspectGroup, {
    label: (0, _i18n.__)('Portrait'),
    isDisabled: isInProgress,
    onClick: newAspect => {
      setAspect(newAspect);
      onClose();
    },
    value: aspect,
    aspectRatios: [{
      title: (0, _i18n.__)('10:16'),
      aspect: 10 / 16
    }, {
      title: (0, _i18n.__)('9:16'),
      aspect: 9 / 16
    }, {
      title: (0, _i18n.__)('3:4'),
      aspect: 3 / 4
    }, {
      title: (0, _i18n.__)('2:3'),
      aspect: 2 / 3
    }]
  })));
}
//# sourceMappingURL=aspect-ratio-dropdown.js.map