@wordpress/components
Version:
UI components for WordPress.
72 lines (70 loc) • 2.03 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InputWithSlider = void 0;
var _hStack = require("../h-stack");
var _text = require("../text");
var _styles = require("./styles");
var _colorsValues = require("../utils/colors-values");
var _inputPrefixWrapper = _interopRequireDefault(require("../input-control/input-prefix-wrapper"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* Internal dependencies
*/
const 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__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
spacing: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NumberControlWrapper, {
__next40pxDefaultSize: true,
min: min,
max: max,
label: label,
hideLabelFromVision: true,
value: value,
onChange: onNumberControlChange,
prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputPrefixWrapper.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_text.Text, {
color: _colorsValues.COLORS.theme.accent,
lineHeight: 1,
children: abbreviation
})
}),
spinControls: "none"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RangeControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: label,
hideLabelFromVision: true,
min: min,
max: max,
value: value
// @ts-expect-error
// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
,
onChange: onChange,
withInputField: false
})]
});
};
exports.InputWithSlider = InputWithSlider;
//# sourceMappingURL=input-with-slider.js.map