@wordpress/components
Version:
UI components for WordPress.
62 lines (61 loc) • 1.58 kB
JavaScript
// packages/components/src/color-picker/input-with-slider.tsx
import { HStack } from "../h-stack";
import { Text } from "../text";
import { RangeControl, NumberControlWrapper } from "./styles";
import { COLORS } from "../utils/colors-values";
import InputControlPrefixWrapper from "../input-control/input-prefix-wrapper";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var InputWithSlider = ({
min,
max,
label,
abbreviation,
onChange,
value
}) => {
const onNumberControlChange = (newValue) => {
if (!newValue) {
onChange(0);
return;
}
if (typeof newValue === "string") {
onChange(parseInt(newValue, 10));
return;
}
onChange(newValue);
};
return /* @__PURE__ */ _jsxs(HStack, {
spacing: 4,
children: [/* @__PURE__ */ _jsx(NumberControlWrapper, {
__next40pxDefaultSize: true,
min,
max,
label,
hideLabelFromVision: true,
value,
onChange: onNumberControlChange,
prefix: /* @__PURE__ */ _jsx(InputControlPrefixWrapper, {
children: /* @__PURE__ */ _jsx(Text, {
color: COLORS.theme.accent,
lineHeight: 1,
children: abbreviation
})
}),
spinControls: "none"
}), /* @__PURE__ */ _jsx(RangeControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label,
hideLabelFromVision: true,
min,
max,
value,
onChange,
withInputField: false
})]
});
};
export {
InputWithSlider
};
//# sourceMappingURL=input-with-slider.js.map