@wordpress/block-editor
Version:
127 lines (126 loc) • 3.86 kB
JavaScript
// packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
import { check, aspectRatio as aspectRatioIcon } from "@wordpress/icons";
import { DropdownMenu, MenuGroup, MenuItem } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useSettings } from "../use-settings";
import { POPOVER_PROPS } from "./constants";
import { useImageEditingContext } from "./context";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function AspectRatioGroup({
aspectRatios,
isDisabled,
label,
onClick,
value
}) {
return /* @__PURE__ */ jsx(MenuGroup, { label, children: aspectRatios.map(({ name, slug, ratio }) => /* @__PURE__ */ jsx(
MenuItem,
{
disabled: isDisabled,
onClick: () => {
onClick(ratio);
},
role: "menuitemradio",
isSelected: ratio === value,
icon: ratio === value ? check : void 0,
children: name
},
slug
)) });
}
function ratioToNumber(str) {
const [a, b, ...rest] = str.split("/").map(Number);
if (a <= 0 || b <= 0 || Number.isNaN(a) || Number.isNaN(b) || rest.length) {
return NaN;
}
return b ? a / b : a;
}
function presetRatioAsNumber({ ratio, ...rest }) {
return {
ratio: ratioToNumber(ratio),
...rest
};
}
function AspectRatioDropdown({ toggleProps }) {
const { isInProgress, aspect, setAspect, defaultAspect } = useImageEditingContext();
const [defaultRatios, themeRatios, showDefaultRatios] = useSettings(
"dimensions.aspectRatios.default",
"dimensions.aspectRatios.theme",
"dimensions.defaultAspectRatios"
);
return /* @__PURE__ */ jsx(
DropdownMenu,
{
icon: aspectRatioIcon,
label: __("Aspect Ratio"),
popoverProps: POPOVER_PROPS,
toggleProps,
children: ({ onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
AspectRatioGroup,
{
isDisabled: isInProgress,
onClick: (newAspect) => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: [
// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
{
slug: "original",
name: __("Original"),
ratio: defaultAspect
},
...showDefaultRatios ? defaultRatios.map(presetRatioAsNumber).filter(({ ratio }) => ratio === 1) : []
]
}
),
themeRatios?.length > 0 && /* @__PURE__ */ jsx(
AspectRatioGroup,
{
label: __("Theme"),
isDisabled: isInProgress,
onClick: (newAspect) => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: themeRatios
}
),
showDefaultRatios && /* @__PURE__ */ jsx(
AspectRatioGroup,
{
label: __("Landscape"),
isDisabled: isInProgress,
onClick: (newAspect) => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({ ratio }) => ratio > 1)
}
),
showDefaultRatios && /* @__PURE__ */ jsx(
AspectRatioGroup,
{
label: __("Portrait"),
isDisabled: isInProgress,
onClick: (newAspect) => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({ ratio }) => ratio < 1)
}
)
] })
}
);
}
export {
AspectRatioDropdown as default,
ratioToNumber
};
//# sourceMappingURL=aspect-ratio-dropdown.js.map