@wordpress/block-editor
Version:
144 lines (143 loc) • 4.08 kB
JavaScript
// packages/block-editor/src/components/height-control/index.js
import { useMemo } from "@wordpress/element";
import {
BaseControl,
RangeControl,
Flex,
FlexItem,
__experimentalSpacer as Spacer,
__experimentalUseCustomUnits as useCustomUnits,
__experimentalUnitControl as UnitControl,
__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useSettings } from "../use-settings";
import { jsx, jsxs } from "react/jsx-runtime";
var RANGE_CONTROL_CUSTOM_SETTINGS = {
px: { max: 1e3, 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 }
};
function HeightControl({
label = __("Height"),
onChange,
value
}) {
const customRangeValue = parseFloat(value);
const [availableUnits] = useSettings("spacing.units");
const units = useCustomUnits({
availableUnits: availableUnits || [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
});
const selectedUnit = useMemo(
() => parseQuantityAndUnitFromRawValue(value),
[value]
)[1] || units[0]?.value || "px";
const handleSliderChange = (next) => {
onChange([next, selectedUnit].join(""));
};
const handleUnitChange = (newUnit) => {
const [currentValue, currentUnit] = parseQuantityAndUnitFromRawValue(value);
if (["em", "rem"].includes(newUnit) && currentUnit === "px") {
onChange((currentValue / 16).toFixed(2) + newUnit);
} else if (["em", "rem"].includes(currentUnit) && newUnit === "px") {
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) {
onChange(100 + newUnit);
}
};
return /* @__PURE__ */ jsxs("fieldset", { className: "block-editor-height-control", children: [
/* @__PURE__ */ jsx(BaseControl.VisualLabel, { as: "legend", children: label }),
/* @__PURE__ */ jsxs(Flex, { children: [
/* @__PURE__ */ jsx(FlexItem, { isBlock: true, children: /* @__PURE__ */ jsx(
UnitControl,
{
value,
units,
onChange,
onUnitChange: handleUnitChange,
min: 0,
size: "__unstable-large",
label,
hideLabelFromVision: true
}
) }),
/* @__PURE__ */ jsx(FlexItem, { isBlock: true, children: /* @__PURE__ */ jsx(Spacer, { marginX: 2, marginBottom: 0, children: /* @__PURE__ */ jsx(
RangeControl,
{
__next40pxDefaultSize: true,
value: customRangeValue,
min: 0,
max: RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.max ?? 100,
step: RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.step ?? 0.1,
withInputField: false,
onChange: handleSliderChange,
__nextHasNoMarginBottom: true,
label,
hideLabelFromVision: true
}
) }) })
] })
] });
}
export {
HeightControl as default
};
//# sourceMappingURL=index.js.map