@wordpress/block-editor
Version:
104 lines (99 loc) • 3.9 kB
JavaScript
/**
* WordPress dependencies
*/
import { __experimentalToolsPanelItem as ToolsPanelItem, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption } from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import { __, _x } from '@wordpress/i18n';
/**
* @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[]}
*/
import { jsx as _jsx } from "react/jsx-runtime";
const 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.')
}];
/**
* @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.
*/
export default 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 = useMemo(() => {
return options.reduce((acc, option) => {
acc[option.value] = option.help;
return acc;
}, {});
}, [options]);
return /*#__PURE__*/_jsx(ToolsPanelItem, {
label: __('Scale'),
isShownByDefault: isShownByDefault,
hasValue: () => displayValue !== defaultValue,
onDeselect: () => onChange(defaultValue),
panelId: panelId,
children: /*#__PURE__*/_jsx(ToggleGroupControl, {
__nextHasNoMarginBottom: true,
label: __('Scale'),
isBlock: true,
help: scaleHelp[displayValue],
value: displayValue,
onChange: onChange,
size: "__unstable-large",
children: options.map(option => /*#__PURE__*/_jsx(ToggleGroupControlOption, {
...option
}, option.value))
})
});
}
//# sourceMappingURL=scale-tool.js.map