@wordpress/components
Version:
UI components for WordPress.
68 lines (67 loc) • 2.13 kB
JavaScript
// packages/components/src/angle-picker-control/index.tsx
import clsx from "clsx";
import { forwardRef } from "@wordpress/element";
import { isRTL, __ } from "@wordpress/i18n";
import { Flex, FlexBlock } from "../flex";
import { Spacer } from "../spacer";
import NumberControl from "../number-control";
import AngleCircle from "./angle-circle";
import { UnitText } from "./styles/angle-picker-control-styles";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function UnforwardedAnglePickerControl(props, ref) {
const {
className,
label = __("Angle"),
onChange,
value,
...restProps
} = props;
const handleOnNumberChange = (unprocessedValue) => {
if (onChange === void 0) {
return;
}
const inputValue = unprocessedValue !== void 0 && unprocessedValue !== "" ? parseInt(unprocessedValue, 10) : 0;
onChange(inputValue);
};
const classes = clsx("components-angle-picker-control", className);
const unitText = /* @__PURE__ */ _jsx(UnitText, {
children: "\xB0"
});
const [prefixedUnitText, suffixedUnitText] = isRTL() ? [unitText, null] : [null, unitText];
return /* @__PURE__ */ _jsxs(Flex, {
...restProps,
ref,
className: classes,
gap: 2,
children: [/* @__PURE__ */ _jsx(FlexBlock, {
children: /* @__PURE__ */ _jsx(NumberControl, {
__next40pxDefaultSize: true,
label,
className: "components-angle-picker-control__input-field",
max: 360,
min: 0,
onChange: handleOnNumberChange,
step: "1",
value,
spinControls: "none",
prefix: prefixedUnitText,
suffix: suffixedUnitText
})
}), /* @__PURE__ */ _jsx(Spacer, {
marginBottom: "1",
marginTop: "auto",
children: /* @__PURE__ */ _jsx(AngleCircle, {
"aria-hidden": "true",
value,
onChange
})
})]
});
}
var AnglePickerControl = forwardRef(UnforwardedAnglePickerControl);
var angle_picker_control_default = AnglePickerControl;
export {
AnglePickerControl,
angle_picker_control_default as default
};
//# sourceMappingURL=index.js.map