@wordpress/block-editor
Version:
303 lines (301 loc) • 11.1 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
var spacing_input_control_exports = {};
__export(spacing_input_control_exports, {
default: () => SpacingInputControl
});
module.exports = __toCommonJS(spacing_input_control_exports);
var import_components = require("@wordpress/components");
var import_data = require("@wordpress/data");
var import_element = require("@wordpress/element");
var import_compose = require("@wordpress/compose");
var import_i18n = require("@wordpress/i18n");
var import_icons = require("@wordpress/icons");
var import_use_settings = require("../../use-settings");
var import_store = require("../../../store");
var import_utils = require("../utils");
var import_jsx_runtime = require("react/jsx-runtime");
var 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
}) {
value = (0, import_utils.getPresetValueFromCustomValue)(value, spacingSizes);
let selectListSizes = spacingSizes;
const showRangeControl = spacingSizes.length <= import_utils.RANGE_CONTROL_MAX_SIZE;
const disableCustomSpacingSizes = (0, import_data.useSelect)((select) => {
const editorSettings = select(import_store.store).getSettings();
return editorSettings?.disableCustomSpacingSizes;
});
const [showCustomValueControl, setShowCustomValueControl] = (0, import_element.useState)(
!disableCustomSpacingSizes && value !== void 0 && !(0, import_utils.isValueSpacingPreset)(value)
);
const [minValue, setMinValue] = (0, import_element.useState)(minimumCustomValue);
const previousValue = (0, import_compose.usePrevious)(value);
if (!!value && previousValue !== value && !(0, import_utils.isValueSpacingPreset)(value) && showCustomValueControl !== true) {
setShowCustomValueControl(true);
}
const [availableUnits] = (0, import_use_settings.useSettings)("spacing.units");
const units = (0, import_components.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ["px", "em", "rem"]
});
let currentValue = null;
const showCustomValueInSelectList = !showRangeControl && !showCustomValueControl && value !== void 0 && (!(0, import_utils.isValueSpacingPreset)(value) || (0, import_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, import_i18n.sprintf)((0, import_i18n.__)("Custom (%s)"), value)
) : (0, import_i18n.__)("Mixed"),
slug: "custom",
size: value
}
];
currentValue = selectListSizes.length - 1;
} else if (!isMixed) {
currentValue = !showCustomValueControl ? (0, import_utils.getSliderValueFromPreset)(value, spacingSizes) : (0, import_utils.getCustomValueFromPreset)(value, spacingSizes);
}
const selectedUnit = (0, import_element.useMemo)(
() => (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(currentValue),
[currentValue]
)[1] || units[0]?.value;
const setInitialValue = () => {
if (value === void 0) {
onChange("0");
}
};
const customTooltipContent = (newValue) => value === void 0 ? void 0 : spacingSizes[newValue]?.name;
const customRangeValue = parseFloat(currentValue, 10);
const getNewCustomValue = (newSize) => {
const isNumeric = !isNaN(parseFloat(newSize));
const nextValue = isNumeric ? newSize : void 0;
return nextValue;
};
const getNewPresetValue = (newSize, controlType) => {
const size = parseInt(newSize, 10);
if (controlType === "selectList") {
if (size === 0) {
return void 0;
}
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, import_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: void 0
}));
const sideLabel = import_utils.ALL_SIDES.includes(side) && showSideInLabel ? import_utils.LABELS[side] : "";
const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
const ariaLabel = (0, import_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, import_i18n._x)("%1$s %2$s", "spacing"),
sideLabel,
typeLabel
).trim();
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { className: "spacing-sizes-control__wrapper", children: [
icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Icon,
{
className: "spacing-sizes-control__icon",
icon,
size: 24
}
),
showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalUnitControl,
{
onMouseOver,
onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut,
onChange: (newSize) => onChange(getNewCustomValue(newSize)),
value: currentValue,
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, import_jsx_runtime.jsx)(
import_components.RangeControl,
{
__next40pxDefaultSize: true,
onMouseOver,
onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut,
value: customRangeValue,
min: 0,
max: CUSTOM_VALUE_SETTINGS[selectedUnit]?.max ?? 10,
step: CUSTOM_VALUE_SETTINGS[selectedUnit]?.steps ?? 0.1,
withInputField: false,
onChange: handleCustomValueSliderChange,
className: "spacing-sizes-control__custom-value-range",
__nextHasNoMarginBottom: true,
label: ariaLabel,
hideLabelFromVision: true
}
)
] }),
showRangeControl && !showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.RangeControl,
{
__next40pxDefaultSize: true,
onMouseOver,
onMouseOut,
className: "spacing-sizes-control__range-control",
value: currentValue,
onChange: (newSize) => onChange(getNewPresetValue(newSize)),
onMouseDown: (event) => {
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,
label: ariaLabel,
hideLabelFromVision: true,
__nextHasNoMarginBottom: true,
onFocus: onMouseOver,
onBlur: onMouseOut
}
),
!showRangeControl && !showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_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,
label: ariaLabel,
hideLabelFromVision: true,
size: "__unstable-large",
onMouseOver,
onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut
}
),
!disableCustomSpacingSizes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Button,
{
label: showCustomValueControl ? (0, import_i18n.__)("Use size preset") : (0, import_i18n.__)("Set custom size"),
icon: import_icons.settings,
onClick: () => {
setShowCustomValueControl(!showCustomValueControl);
},
isPressed: showCustomValueControl,
size: "small",
className: "spacing-sizes-control__custom-toggle",
iconSize: 24
}
)
] });
}
//# sourceMappingURL=spacing-input-control.js.map