@wordpress/components
Version:
UI components for WordPress.
64 lines (59 loc) • 1.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.floatClamp = floatClamp;
exports.useControlledRangeValue = useControlledRangeValue;
var _element = require("@wordpress/element");
var _hooks = require("../utils/hooks");
var _math = require("../utils/math");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* A float supported clamp function for a specific value.
*
* @param value The value to clamp.
* @param min The minimum value.
* @param max The maximum value.
*
* @return A (float) number
*/
function floatClamp(value, min, max) {
if (typeof value !== 'number') {
return null;
}
return parseFloat(`${(0, _math.clamp)(value, min, max)}`);
}
/**
* Hook to store a clamped value, derived from props.
*
* @param settings
* @return The controlled value and the value setter.
*/
function useControlledRangeValue(settings) {
const {
min,
max,
value: valueProp,
initial
} = settings;
const [state, setInternalState] = (0, _hooks.useControlledState)(floatClamp(valueProp, min, max), {
initial: floatClamp(initial !== null && initial !== void 0 ? initial : null, min, max),
fallback: null
});
const setState = (0, _element.useCallback)(nextValue => {
if (nextValue === null) {
setInternalState(null);
} else {
setInternalState(floatClamp(nextValue, min, max));
}
}, [min, max, setInternalState]);
// `state` can't be an empty string because we specified a fallback value of
// `null` in `useControlledState`
return [state, setState];
}
//# sourceMappingURL=utils.js.map