@wordpress/block-editor
Version:
250 lines (221 loc) • 8.47 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = SpacingInputControl;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _useSetting = _interopRequireDefault(require("../../use-setting"));
var _store = require("../../../store");
var _utils = require("../utils");
/**
* 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
}
};
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 <= 8;
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 previousValue = (0, _compose.usePrevious)(value);
if (!!value && previousValue !== value && !(0, _utils.isValueSpacingPreset)(value) && showCustomValueControl !== true) {
setShowCustomValueControl(true);
}
const units = (0, _components.__experimentalUseCustomUnits)({
availableUnits: (0, _useSetting.default)('spacing.units') || ['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: A custom measurement, eg. 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.map((_newValue, index) => ({
value: index,
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, All sides etc.). 2. Type of spacing being modified (Padding, margin, etc)
(0, _i18n.__)('%1$s %2$s'), sideLabel, typeLabel).trim();
return (0, _element.createElement)(_components.__experimentalHStack, {
className: "spacing-sizes-control__wrapper"
}, icon && (0, _element.createElement)(_components.Icon, {
className: "spacing-sizes-control__icon",
icon: icon,
size: 24
}), showCustomValueControl && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalUnitControl, {
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut,
onChange: newSize => onChange(getNewCustomValue(newSize)),
value: currentValue,
units: units,
min: minimumCustomValue,
placeholder: allPlaceholder,
disableUnits: isMixed,
label: ariaLabel,
hideLabelFromVision: true,
className: "spacing-sizes-control__custom-value-input",
size: '__unstable-large'
}), (0, _element.createElement)(_components.RangeControl, {
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
})), showRangeControl && !showCustomValueControl && (0, _element.createElement)(_components.RangeControl, {
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 && (0, _element.createElement)(_components.CustomSelectControl, {
className: "spacing-sizes-control__custom-select-control",
value: options.find(option => option.key === currentValue) || '' // passing undefined here causes a downshift controlled/uncontrolled warning
,
onChange: selection => {
onChange(getNewPresetValue(selection.selectedItem.key, 'selectList'));
},
options: options,
label: ariaLabel,
hideLabelFromVision: true,
__nextUnconstrainedWidth: true,
size: '__unstable-large',
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
onFocus: onMouseOver,
onBlur: onMouseOut
}), !disableCustomSpacingSizes && (0, _element.createElement)(_components.Button, {
label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
icon: _icons.settings,
onClick: () => {
setShowCustomValueControl(!showCustomValueControl);
},
isPressed: showCustomValueControl,
isSmall: true,
className: "spacing-sizes-control__custom-toggle",
iconSize: 24
}));
}
//# sourceMappingURL=spacing-input-control.js.map