@wordpress/components
Version:
UI components for WordPress.
79 lines (76 loc) • 2.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = FocalPointPickerControls;
var _i18n = require("@wordpress/i18n");
var _focalPointPickerStyle = require("./styles/focal-point-picker-style");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const TEXTCONTROL_MIN = 0;
const TEXTCONTROL_MAX = 100;
const noop = () => {};
function FocalPointPickerControls({
__nextHasNoMarginBottom,
hasHelpText,
onChange = noop,
point = {
x: 0.5,
y: 0.5
}
}) {
const valueX = (0, _utils.fractionToPercentage)(point.x);
const valueY = (0, _utils.fractionToPercentage)(point.y);
const handleChange = (value, axis) => {
if (value === undefined) {
return;
}
const num = parseInt(value, 10);
if (!isNaN(num)) {
onChange({
...point,
[axis]: num / 100
});
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_focalPointPickerStyle.ControlWrapper, {
className: "focal-point-picker__controls",
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
hasHelpText: hasHelpText,
gap: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FocalPointUnitControl, {
label: (0, _i18n.__)('Left'),
"aria-label": (0, _i18n.__)('Focal point left position'),
value: [valueX, '%'].join(''),
onChange: next => handleChange(next, 'x'),
dragDirection: "e"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(FocalPointUnitControl, {
label: (0, _i18n.__)('Top'),
"aria-label": (0, _i18n.__)('Focal point top position'),
value: [valueY, '%'].join(''),
onChange: next => handleChange(next, 'y'),
dragDirection: "s"
})]
});
}
function FocalPointUnitControl(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_focalPointPickerStyle.StyledUnitControl, {
__next40pxDefaultSize: true,
className: "focal-point-picker__controls-position-unit-control",
labelPosition: "top",
max: TEXTCONTROL_MAX,
min: TEXTCONTROL_MIN,
units: [{
value: '%',
label: '%'
}],
...props
});
}
//# sourceMappingURL=controls.js.map