@wordpress/block-editor
Version:
135 lines (132 loc) • 3.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = AspectRatioDropdown;
exports.ratioToNumber = ratioToNumber;
var _icons = require("@wordpress/icons");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _useSettings = require("../use-settings");
var _constants = require("./constants");
var _context = require("./context");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function AspectRatioGroup({
aspectRatios,
isDisabled,
label,
onClick,
value
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
label: label,
children: aspectRatios.map(({
name,
slug,
ratio
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
disabled: isDisabled,
onClick: () => {
onClick(ratio);
},
role: "menuitemradio",
isSelected: ratio === value,
icon: ratio === value ? _icons.check : undefined,
children: name
}, slug))
});
}
function ratioToNumber(str) {
// TODO: support two-value aspect ratio?
// https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-it-can-take-two-values
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
} = (0, _context.useImageEditingContext)();
const [defaultRatios, themeRatios, showDefaultRatios] = (0, _useSettings.useSettings)('dimensions.aspectRatios.default', 'dimensions.aspectRatios.theme', 'dimensions.defaultAspectRatios');
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
icon: _icons.aspectRatio,
label: (0, _i18n.__)('Aspect Ratio'),
popoverProps: _constants.POPOVER_PROPS,
toggleProps: toggleProps,
children: ({
onClose
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.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: (0, _i18n.__)('Original'),
ratio: defaultAspect
}, ...(showDefaultRatios ? defaultRatios.map(presetRatioAsNumber).filter(({
ratio
}) => ratio === 1) : [])]
}), themeRatios?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectRatioGroup, {
label: (0, _i18n.__)('Theme'),
isDisabled: isInProgress,
onClick: newAspect => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: themeRatios
}), showDefaultRatios && /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectRatioGroup, {
label: (0, _i18n.__)('Landscape'),
isDisabled: isInProgress,
onClick: newAspect => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({
ratio
}) => ratio > 1)
}), showDefaultRatios && /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectRatioGroup, {
label: (0, _i18n.__)('Portrait'),
isDisabled: isInProgress,
onClick: newAspect => {
setAspect(newAspect);
onClose();
},
value: aspect,
aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({
ratio
}) => ratio < 1)
})]
})
});
}
//# sourceMappingURL=aspect-ratio-dropdown.js.map