@wordpress/block-editor
Version:
217 lines (213 loc) • 5.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = HeightControl;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _useSettings = require("../use-settings");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const RANGE_CONTROL_CUSTOM_SETTINGS = {
px: {
max: 1000,
step: 1
},
'%': {
max: 100,
step: 1
},
vw: {
max: 100,
step: 1
},
vh: {
max: 100,
step: 1
},
em: {
max: 50,
step: 0.1
},
rem: {
max: 50,
step: 0.1
},
svw: {
max: 100,
step: 1
},
lvw: {
max: 100,
step: 1
},
dvw: {
max: 100,
step: 1
},
svh: {
max: 100,
step: 1
},
lvh: {
max: 100,
step: 1
},
dvh: {
max: 100,
step: 1
},
vi: {
max: 100,
step: 1
},
svi: {
max: 100,
step: 1
},
lvi: {
max: 100,
step: 1
},
dvi: {
max: 100,
step: 1
},
vb: {
max: 100,
step: 1
},
svb: {
max: 100,
step: 1
},
lvb: {
max: 100,
step: 1
},
dvb: {
max: 100,
step: 1
},
vmin: {
max: 100,
step: 1
},
svmin: {
max: 100,
step: 1
},
lvmin: {
max: 100,
step: 1
},
dvmin: {
max: 100,
step: 1
},
vmax: {
max: 100,
step: 1
},
svmax: {
max: 100,
step: 1
},
lvmax: {
max: 100,
step: 1
},
dvmax: {
max: 100,
step: 1
}
};
/**
* HeightControl renders a linked unit control and range control for adjusting the height of a block.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md
*
* @param {Object} props
* @param {?string} props.label A label for the control.
* @param {( value: string ) => void } props.onChange Called when the height changes.
* @param {string} props.value The current height value.
*
* @return {Component} The component to be rendered.
*/
function HeightControl({
label = (0, _i18n.__)('Height'),
onChange,
value
}) {
var _RANGE_CONTROL_CUSTOM, _RANGE_CONTROL_CUSTOM2;
const customRangeValue = parseFloat(value);
const [availableUnits] = (0, _useSettings.useSettings)('spacing.units');
const units = (0, _components.__experimentalUseCustomUnits)({
availableUnits: availableUnits || ['%', 'px', 'em', 'rem', 'vh', 'vw']
});
const selectedUnit = (0, _element.useMemo)(() => (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value), [value])[1] || units[0]?.value || 'px';
const handleSliderChange = next => {
onChange([next, selectedUnit].join(''));
};
const handleUnitChange = newUnit => {
// Attempt to smooth over differences between currentUnit and newUnit.
// This should slightly improve the experience of switching between unit types.
const [currentValue, currentUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
if (['em', 'rem'].includes(newUnit) && currentUnit === 'px') {
// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
onChange((currentValue / 16).toFixed(2) + newUnit);
} else if (['em', 'rem'].includes(currentUnit) && newUnit === 'px') {
// Convert to pixel value assuming a root size of 16px.
onChange(Math.round(currentValue * 16) + newUnit);
} else if (['%', 'vw', 'svw', 'lvw', 'dvw', 'vh', 'svh', 'lvh', 'dvh', 'vi', 'svi', 'lvi', 'dvi', 'vb', 'svb', 'lvb', 'dvb', 'vmin', 'svmin', 'lvmin', 'dvmin', 'vmax', 'svmax', 'lvmax', 'dvmax'].includes(newUnit) && currentValue > 100) {
// When converting to `%` or viewport-relative units, cap the new value at 100.
onChange(100 + newUnit);
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
className: "block-editor-height-control",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
as: "legend",
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
value: value,
units: units,
onChange: onChange,
onUnitChange: handleUnitChange,
min: 0,
size: "__unstable-large",
label: label,
hideLabelFromVision: true
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
marginX: 2,
marginBottom: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
__next40pxDefaultSize: true,
value: customRangeValue,
min: 0,
max: (_RANGE_CONTROL_CUSTOM = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.max) !== null && _RANGE_CONTROL_CUSTOM !== void 0 ? _RANGE_CONTROL_CUSTOM : 100,
step: (_RANGE_CONTROL_CUSTOM2 = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.step) !== null && _RANGE_CONTROL_CUSTOM2 !== void 0 ? _RANGE_CONTROL_CUSTOM2 : 0.1,
withInputField: false,
onChange: handleSliderChange,
__nextHasNoMarginBottom: true,
label: label,
hideLabelFromVision: true
})
})
})]
})]
});
}
//# sourceMappingURL=index.js.map