@gechiui/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("@gechiui/element");

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

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

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

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

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

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function AspectGroup(_ref) {
  let {
    aspectRatios,
    isDisabled,
    label,
    onClick,
    value
  } = _ref;
  return (0, _element.createElement)(_components.MenuGroup, {
    label: label
  }, aspectRatios.map(_ref2 => {
    let {
      title,
      aspect
    } = _ref2;
    return (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(_ref3) {
  let {
    toggleProps
  } = _ref3;
  const {
    isInProgress,
    aspect,
    setAspect,
    defaultAspect
  } = (0, _context.useImageEditingContext)();
  return (0, _element.createElement)(_components.DropdownMenu, {
    icon: _icons.aspectRatio,
    label: (0, _i18n.__)('长宽比'),
    popoverProps: _constants.POPOVER_PROPS,
    toggleProps: toggleProps,
    className: "gc-block-image__aspect-ratio"
  }, _ref4 => {
    let {
      onClose
    } = _ref4;
    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(AspectGroup, {
      isDisabled: isInProgress,
      onClick: newAspect => {
        setAspect(newAspect);
        onClose();
      },
      value: aspect,
      aspectRatios: [{
        title: (0, _i18n.__)('原始'),
        aspect: defaultAspect
      }, {
        title: (0, _i18n.__)('实心方块'),
        aspect: 1
      }]
    }), (0, _element.createElement)(AspectGroup, {
      label: (0, _i18n.__)('横向'),
      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.__)('肖像'),
      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