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

Generic block editor.

import { createElement, Fragment } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { check, aspectRatio as aspectRatioIcon } from '@gechiui/icons';
import { DropdownMenu, MenuGroup, MenuItem } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import { POPOVER_PROPS } from './constants';
import { useImageEditingContext } from './context';

function AspectGroup(_ref) {
  let {
    aspectRatios,
    isDisabled,
    label,
    onClick,
    value
  } = _ref;
  return createElement(MenuGroup, {
    label: label
  }, aspectRatios.map(_ref2 => {
    let {
      title,
      aspect
    } = _ref2;
    return createElement(MenuItem, {
      key: aspect,
      disabled: isDisabled,
      onClick: () => {
        onClick(aspect);
      },
      role: "menuitemradio",
      isSelected: aspect === value,
      icon: aspect === value ? check : undefined
    }, title);
  }));
}

export default function AspectRatioDropdown(_ref3) {
  let {
    toggleProps
  } = _ref3;
  const {
    isInProgress,
    aspect,
    setAspect,
    defaultAspect
  } = useImageEditingContext();
  return createElement(DropdownMenu, {
    icon: aspectRatioIcon,
    label: __('长宽比'),
    popoverProps: POPOVER_PROPS,
    toggleProps: toggleProps,
    className: "gc-block-image__aspect-ratio"
  }, _ref4 => {
    let {
      onClose
    } = _ref4;
    return createElement(Fragment, null, createElement(AspectGroup, {
      isDisabled: isInProgress,
      onClick: newAspect => {
        setAspect(newAspect);
        onClose();
      },
      value: aspect,
      aspectRatios: [{
        title: __('原始'),
        aspect: defaultAspect
      }, {
        title: __('实心方块'),
        aspect: 1
      }]
    }), createElement(AspectGroup, {
      label: __('横向'),
      isDisabled: isInProgress,
      onClick: newAspect => {
        setAspect(newAspect);
        onClose();
      },
      value: aspect,
      aspectRatios: [{
        title: __('16:10'),
        aspect: 16 / 10
      }, {
        title: __('16:9'),
        aspect: 16 / 9
      }, {
        title: __('4:3'),
        aspect: 4 / 3
      }, {
        title: __('3:2'),
        aspect: 3 / 2
      }]
    }), createElement(AspectGroup, {
      label: __('肖像'),
      isDisabled: isInProgress,
      onClick: newAspect => {
        setAspect(newAspect);
        onClose();
      },
      value: aspect,
      aspectRatios: [{
        title: __('10:16'),
        aspect: 10 / 16
      }, {
        title: __('9:16'),
        aspect: 9 / 16
      }, {
        title: __('3:4'),
        aspect: 3 / 4
      }, {
        title: __('2:3'),
        aspect: 2 / 3
      }]
    }));
  });
}
//# sourceMappingURL=aspect-ratio-dropdown.js.map