@wordpress/block-editor
Version:
337 lines (334 loc) • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = SpacingInputControl;
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _useSettings = require("../../use-settings");
var _store = require("../../../store");
var _utils = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const CUSTOM_VALUE_SETTINGS = {
px: {
max: 300,
steps: 1
},
'%': {
max: 100,
steps: 1
},
vw: {
max: 100,
steps: 1
},
vh: {
max: 100,
steps: 1
},
em: {
max: 10,
steps: 0.1
},
rm: {
max: 10,
steps: 0.1
},
svw: {
max: 100,
steps: 1
},
lvw: {
max: 100,
steps: 1
},
dvw: {
max: 100,
steps: 1
},
svh: {
max: 100,
steps: 1
},
lvh: {
max: 100,
steps: 1
},
dvh: {
max: 100,
steps: 1
},
vi: {
max: 100,
steps: 1
},
svi: {
max: 100,
steps: 1
},
lvi: {
max: 100,
steps: 1
},
dvi: {
max: 100,
steps: 1
},
vb: {
max: 100,
steps: 1
},
svb: {
max: 100,
steps: 1
},
lvb: {
max: 100,
steps: 1
},
dvb: {
max: 100,
steps: 1
},
vmin: {
max: 100,
steps: 1
},
svmin: {
max: 100,
steps: 1
},
lvmin: {
max: 100,
steps: 1
},
dvmin: {
max: 100,
steps: 1
},
vmax: {
max: 100,
steps: 1
},
svmax: {
max: 100,
steps: 1
},
lvmax: {
max: 100,
steps: 1
},
dvmax: {
max: 100,
steps: 1
}
};
function SpacingInputControl({
icon,
isMixed = false,
minimumCustomValue,
onChange,
onMouseOut,
onMouseOver,
showSideInLabel = true,
side,
spacingSizes,
type,
value
}) {
var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
value = (0, _utils.getPresetValueFromCustomValue)(value, spacingSizes);
let selectListSizes = spacingSizes;
const showRangeControl = spacingSizes.length <= _utils.RANGE_CONTROL_MAX_SIZE;
const disableCustomSpacingSizes = (0, _data.useSelect)(select => {
const editorSettings = select(_store.store).getSettings();
return editorSettings?.disableCustomSpacingSizes;
});
const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!disableCustomSpacingSizes && value !== undefined && !(0, _utils.isValueSpacingPreset)(value));
const [minValue, setMinValue] = (0, _element.useState)(minimumCustomValue);
const previousValue = (0, _compose.usePrevious)(value);
if (!!value && previousValue !== value && !(0, _utils.isValueSpacingPreset)(value) && showCustomValueControl !== true) {
setShowCustomValueControl(true);
}
const [availableUnits] = (0, _useSettings.useSettings)('spacing.units');
const units = (0, _components.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['px', 'em', 'rem']
});
let currentValue = null;
const showCustomValueInSelectList = !showRangeControl && !showCustomValueControl && value !== undefined && (!(0, _utils.isValueSpacingPreset)(value) || (0, _utils.isValueSpacingPreset)(value) && isMixed);
if (showCustomValueInSelectList) {
selectListSizes = [...spacingSizes, {
name: !isMixed ?
// translators: %s: A custom measurement, e.g. a number followed by a unit like 12px.
(0, _i18n.sprintf)((0, _i18n.__)('Custom (%s)'), value) : (0, _i18n.__)('Mixed'),
slug: 'custom',
size: value
}];
currentValue = selectListSizes.length - 1;
} else if (!isMixed) {
currentValue = !showCustomValueControl ? (0, _utils.getSliderValueFromPreset)(value, spacingSizes) : (0, _utils.getCustomValueFromPreset)(value, spacingSizes);
}
const selectedUnit = (0, _element.useMemo)(() => (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(currentValue), [currentValue])[1] || units[0]?.value;
const setInitialValue = () => {
if (value === undefined) {
onChange('0');
}
};
const customTooltipContent = newValue => value === undefined ? undefined : spacingSizes[newValue]?.name;
const customRangeValue = parseFloat(currentValue, 10);
const getNewCustomValue = newSize => {
const isNumeric = !isNaN(parseFloat(newSize));
const nextValue = isNumeric ? newSize : undefined;
return nextValue;
};
const getNewPresetValue = (newSize, controlType) => {
const size = parseInt(newSize, 10);
if (controlType === 'selectList') {
if (size === 0) {
return undefined;
}
if (size === 1) {
return '0';
}
} else if (size === 0) {
return '0';
}
return `var:preset|spacing|${spacingSizes[newSize]?.slug}`;
};
const handleCustomValueSliderChange = next => {
onChange([next, selectedUnit].join(''));
};
const allPlaceholder = isMixed ? (0, _i18n.__)('Mixed') : null;
const options = selectListSizes.map((size, index) => ({
key: index,
name: size.name
}));
const marks = spacingSizes.slice(1, spacingSizes.length - 1).map((_newValue, index) => ({
value: index + 1,
label: undefined
}));
const sideLabel = _utils.ALL_SIDES.includes(side) && showSideInLabel ? _utils.LABELS[side] : '';
const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
const ariaLabel = (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'), sideLabel, typeLabel).trim();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
className: "spacing-sizes-control__wrapper",
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
className: "spacing-sizes-control__icon",
icon: icon,
size: 24
}), showCustomValueControl && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut,
onChange: newSize => onChange(getNewCustomValue(newSize)),
value: currentValue,
units: units,
min: minValue,
placeholder: allPlaceholder,
disableUnits: isMixed,
label: ariaLabel,
hideLabelFromVision: true,
className: "spacing-sizes-control__custom-value-input",
size: "__unstable-large",
onDragStart: () => {
if (value?.charAt(0) === '-') {
setMinValue(0);
}
},
onDrag: () => {
if (value?.charAt(0) === '-') {
setMinValue(0);
}
},
onDragEnd: () => {
setMinValue(minimumCustomValue);
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
__next40pxDefaultSize: true,
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut,
value: customRangeValue,
min: 0,
max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[selectedUnit]?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit]?.steps) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
withInputField: false,
onChange: handleCustomValueSliderChange,
className: "spacing-sizes-control__custom-value-range",
__nextHasNoMarginBottom: true,
label: ariaLabel,
hideLabelFromVision: true
})]
}), showRangeControl && !showCustomValueControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
__next40pxDefaultSize: true,
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
className: "spacing-sizes-control__range-control",
value: currentValue,
onChange: newSize => onChange(getNewPresetValue(newSize)),
onMouseDown: event => {
// If mouse down is near start of range set initial value to 0, which
// prevents the user have to drag right then left to get 0 setting.
if (event?.nativeEvent?.offsetX < 35) {
setInitialValue();
}
},
withInputField: false,
"aria-valuenow": currentValue,
"aria-valuetext": spacingSizes[currentValue]?.name,
renderTooltipContent: customTooltipContent,
min: 0,
max: spacingSizes.length - 1,
marks: marks,
label: ariaLabel,
hideLabelFromVision: true,
__nextHasNoMarginBottom: true,
onFocus: onMouseOver,
onBlur: onMouseOut
}), !showRangeControl && !showCustomValueControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CustomSelectControl, {
className: "spacing-sizes-control__custom-select-control",
value:
// passing empty string as a fallback to continue using the
// component in controlled mode
options.find(option => option.key === currentValue) || '',
onChange: selection => {
onChange(getNewPresetValue(selection.selectedItem.key, 'selectList'));
},
options: options,
label: ariaLabel,
hideLabelFromVision: true,
size: "__unstable-large",
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut
}), !disableCustomSpacingSizes && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
icon: _icons.settings,
onClick: () => {
setShowCustomValueControl(!showCustomValueControl);
},
isPressed: showCustomValueControl,
size: "small",
className: "spacing-sizes-control__custom-toggle",
iconSize: 24
})]
});
}
//# sourceMappingURL=spacing-input-control.js.map