@wordpress/block-editor
Version:
147 lines (144 loc) • 5.41 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = SpacingSizesControl;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _useSpacingSizes = _interopRequireDefault(require("./hooks/use-spacing-sizes"));
var _axial = _interopRequireDefault(require("./input-controls/axial"));
var _separated = _interopRequireDefault(require("./input-controls/separated"));
var _single = _interopRequireDefault(require("./input-controls/single"));
var _linkedButton = _interopRequireDefault(require("./linked-button"));
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* A flexible control for managing spacing values in the block editor. Supports single, axial,
* and separated input controls for different spacing configurations with automatic view selection
* based on current values and available sides.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/spacing-sizes-control/README.md
*
* @example
* ```jsx
* import { __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor';
* import { useState } from '@wordpress/element';
*
* function Example() {
* const [ sides, setSides ] = useState( {
* top: '0px',
* right: '0px',
* bottom: '0px',
* left: '0px',
* } );
*
* return (
* <SpacingSizesControl
* values={ sides }
* onChange={ setSides }
* label="Sides"
* />
* );
* }
* ```
*
* @param {Object} props Component props.
* @param {Object} props.inputProps Additional props for input controls.
* @param {string} props.label Label for the control.
* @param {number} props.minimumCustomValue Minimum value for custom input.
* @param {Function} props.onChange Called when spacing values change.
* @param {Function} props.onMouseOut Called when mouse leaves the control.
* @param {Function} props.onMouseOver Called when mouse enters the control.
* @param {boolean} props.showSideInLabel Show side in control label.
* @param {Array} props.sides Available sides for control.
* @param {boolean} props.useSelect Use select control for predefined values.
* @param {Object} props.values Current spacing values.
* @return {Element} Spacing sizes control component.
*/function SpacingSizesControl({
inputProps,
label: labelProp,
minimumCustomValue = 0,
onChange,
onMouseOut,
onMouseOver,
showSideInLabel = true,
sides = _utils.ALL_SIDES,
useSelect,
values
}) {
const spacingSizes = (0, _useSpacingSizes.default)();
const inputValues = values || _utils.DEFAULT_VALUES;
const hasOneSide = sides?.length === 1;
const hasOnlyAxialSides = sides?.includes('horizontal') && sides?.includes('vertical') && sides?.length === 2;
const [view, setView] = (0, _element.useState)((0, _utils.getInitialView)(inputValues, sides));
const toggleLinked = () => {
setView(view === _utils.VIEWS.axial ? _utils.VIEWS.custom : _utils.VIEWS.axial);
};
const handleOnChange = nextValue => {
const newValues = {
...values,
...nextValue
};
onChange(newValues);
};
const inputControlProps = {
...inputProps,
minimumCustomValue,
onChange: handleOnChange,
onMouseOut,
onMouseOver,
sides,
spacingSizes,
type: labelProp,
useSelect,
values: inputValues
};
const renderControls = () => {
if (view === _utils.VIEWS.axial) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_axial.default, {
...inputControlProps
});
}
if (view === _utils.VIEWS.custom) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_separated.default, {
...inputControlProps
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_single.default, {
side: view,
...inputControlProps,
showSideInLabel: showSideInLabel
});
};
const sideLabel = _utils.ALL_SIDES.includes(view) && showSideInLabel ? _utils.LABELS[view] : '';
const label = (0, _i18n.sprintf)(
// translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).
(0, _i18n._x)('%1$s %2$s', 'spacing'), labelProp, sideLabel).trim();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
className: "spacing-sizes-control",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
className: "spacing-sizes-control__header",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
as: "legend",
className: "spacing-sizes-control__label",
children: label
}), !hasOneSide && !hasOnlyAxialSides && /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkedButton.default, {
label: labelProp,
onClick: toggleLinked,
isLinked: view === _utils.VIEWS.axial
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
spacing: 0.5,
children: renderControls()
})]
});
}
//# sourceMappingURL=index.js.map