@wordpress/block-editor
Version:
109 lines (103 loc) • 4.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ScaleTool;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
*/
/**
* The descriptions are purposely made generic as object-fit could be used for
* any replaced element. Provide your own set of options if you need different
* help text or labels.
*
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
*
* @type {SelectControlProps[]}
*/const DEFAULT_SCALE_OPTIONS = [{
value: 'fill',
label: (0, _i18n._x)('Fill', 'Scale option for dimensions control'),
help: (0, _i18n.__)('Fill the space by stretching the content.')
}, {
value: 'contain',
label: (0, _i18n._x)('Contain', 'Scale option for dimensions control'),
help: (0, _i18n.__)('Fit the content to the space without clipping.')
}, {
value: 'cover',
label: (0, _i18n._x)('Cover', 'Scale option for dimensions control'),
help: (0, _i18n.__)("Fill the space by clipping what doesn't fit.")
}, {
value: 'none',
label: (0, _i18n._x)('None', 'Scale option for dimensions control'),
help: (0, _i18n.__)('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: (0, _i18n._x)('Scale down', 'Scale option for dimensions control'),
help: (0, _i18n.__)('Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.')
}];
/**
* @callback ScaleToolPropsOnChange
* @param {string} nextValue New scale value.
* @return {void}
*/
/**
* @typedef {Object} ScaleToolProps
* @property {string} [panelId] ID of the panel that contains the controls.
* @property {string} [value] Current scale value.
* @property {ScaleToolPropsOnChange} [onChange] Callback to update the scale value.
* @property {SelectControlProps[]} [options] Scale options.
* @property {string} [defaultValue] Default scale value.
* @property {boolean} [showControl=true] Whether to show the control.
* @property {boolean} [isShownByDefault=true] Whether the tool panel is shown by default.
*/
/**
* A tool to select the CSS object-fit property for the image.
*
* @param {ScaleToolProps} props
*
* @return {import('react').ReactElement} The scale tool.
*/
function ScaleTool({
panelId,
value,
onChange,
options = DEFAULT_SCALE_OPTIONS,
defaultValue = DEFAULT_SCALE_OPTIONS[0].value,
isShownByDefault = true
}) {
// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
const displayValue = value !== null && value !== void 0 ? value : 'fill';
const scaleHelp = (0, _element.useMemo)(() => {
return options.reduce((acc, option) => {
acc[option.value] = option.help;
return acc;
}, {});
}, [options]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Scale'),
isShownByDefault: isShownByDefault,
hasValue: () => displayValue !== defaultValue,
onDeselect: () => onChange(defaultValue),
panelId: panelId,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Scale'),
isBlock: true,
help: scaleHelp[displayValue],
value: displayValue,
onChange: onChange,
size: "__unstable-large",
children: options.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
...option
}, option.value))
})
});
}
//# sourceMappingURL=scale-tool.js.map