@wordpress/block-editor
Version:
90 lines (89 loc) • 2.61 kB
JavaScript
// packages/block-editor/src/components/dimensions-tool/scale-tool.js
import {
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption
} from "@wordpress/components";
import { useMemo } from "@wordpress/element";
import { __, _x } from "@wordpress/i18n";
import { jsx } from "react/jsx-runtime";
var DEFAULT_SCALE_OPTIONS = [
{
value: "fill",
label: _x("Fill", "Scale option for dimensions control"),
help: __("Fill the space by stretching the content.")
},
{
value: "contain",
label: _x("Contain", "Scale option for dimensions control"),
help: __("Fit the content to the space without clipping.")
},
{
value: "cover",
label: _x("Cover", "Scale option for dimensions control"),
help: __("Fill the space by clipping what doesn't fit.")
},
{
value: "none",
label: _x("None", "Scale option for dimensions control"),
help: __(
"Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding."
)
},
{
value: "scale-down",
label: _x("Scale down", "Scale option for dimensions control"),
help: __(
"Scale down the content to fit the space if it is too big. Content that is too small will have additional padding."
)
}
];
function ScaleTool({
panelId,
value,
onChange,
options = DEFAULT_SCALE_OPTIONS,
defaultValue = DEFAULT_SCALE_OPTIONS[0].value,
isShownByDefault = true
}) {
const displayValue = value ?? "fill";
const scaleHelp = useMemo(() => {
return options.reduce((acc, option) => {
acc[option.value] = option.help;
return acc;
}, {});
}, [options]);
return /* @__PURE__ */ jsx(
ToolsPanelItem,
{
label: __("Scale"),
isShownByDefault,
hasValue: () => displayValue !== defaultValue,
onDeselect: () => onChange(defaultValue),
panelId,
children: /* @__PURE__ */ jsx(
ToggleGroupControl,
{
__nextHasNoMarginBottom: true,
label: __("Scale"),
isBlock: true,
help: scaleHelp[displayValue],
value: displayValue,
onChange,
size: "__unstable-large",
children: options.map((option) => /* @__PURE__ */ jsx(
ToggleGroupControlOption,
{
...option
},
option.value
))
}
)
}
);
}
export {
ScaleTool as default
};
//# sourceMappingURL=scale-tool.js.map