@wordpress/components
Version:
UI components for WordPress.
71 lines (70 loc) • 1.94 kB
JavaScript
// packages/components/src/focal-point-picker/controls.tsx
import { __ } from "@wordpress/i18n";
import { StyledUnitControl, ControlWrapper } from "./styles/focal-point-picker-style";
import { fractionToPercentage } from "./utils";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var TEXTCONTROL_MIN = 0;
var TEXTCONTROL_MAX = 100;
var noop = () => {
};
function FocalPointPickerControls({
__nextHasNoMarginBottom,
hasHelpText,
onChange = noop,
point = {
x: 0.5,
y: 0.5
}
}) {
const valueX = fractionToPercentage(point.x);
const valueY = fractionToPercentage(point.y);
const handleChange = (value, axis) => {
if (value === void 0) {
return;
}
const num = parseInt(value, 10);
if (!isNaN(num)) {
onChange({
...point,
[axis]: num / 100
});
}
};
return /* @__PURE__ */ _jsxs(ControlWrapper, {
className: "focal-point-picker__controls",
__nextHasNoMarginBottom,
hasHelpText,
gap: 4,
children: [/* @__PURE__ */ _jsx(FocalPointUnitControl, {
label: __("Left"),
"aria-label": __("Focal point left position"),
value: [valueX, "%"].join(""),
onChange: (next) => handleChange(next, "x"),
dragDirection: "e"
}), /* @__PURE__ */ _jsx(FocalPointUnitControl, {
label: __("Top"),
"aria-label": __("Focal point top position"),
value: [valueY, "%"].join(""),
onChange: (next) => handleChange(next, "y"),
dragDirection: "s"
})]
});
}
function FocalPointUnitControl(props) {
return /* @__PURE__ */ _jsx(StyledUnitControl, {
__next40pxDefaultSize: true,
className: "focal-point-picker__controls-position-unit-control",
labelPosition: "top",
max: TEXTCONTROL_MAX,
min: TEXTCONTROL_MIN,
units: [{
value: "%",
label: "%"
}],
...props
});
}
export {
FocalPointPickerControls as default
};
//# sourceMappingURL=controls.js.map