@react-md/form
Version:
This package is for creating all the different form input types.
116 lines • 3.83 kB
JavaScript
import { getPercentage, nearest } from "@react-md/utils";
/**
* Gets the number of steps in the allowed range of values.
*
* @internal
* @remarks \@since 2.5.0
*/
export var getSteps = function (min, max, step) {
return Math.abs(max - min) / step;
};
/**
*
* @internal
* @remarks \@since 2.5.0
*/
export var getJumpValue = function (min, max, step, jump) {
var steps = getSteps(min, max, step);
var value = jump !== null && jump !== void 0 ? jump : (steps / 10) * step;
if (Number.isInteger(step)) {
return Math.ceil(value);
}
return value;
};
/**
* @internal
* @remarks \@since 2.5.0
*/
export var isMouseEvent = function (event) {
return event.type === "mousedown" ||
event.type === "mousemove" ||
event.type === "mouseup";
};
/**
* @internal
* @remarks \@since 2.5.0
*/
export var isTouchEvent = function (event) {
return event.type === "touchstart" ||
event.type === "touchmove" ||
event.type === "touchend";
};
/**
* @internal
* @remarks \@since 2.5.0
*/
export var isRangeSlider = function (controls) { return Array.isArray(controls.value); };
/**
* This is used to get the next value for the slider while being dragged via
* mouse or touch.
*
* @internal
* @remarks \@since 2.5.0
*/
export var getDragValue = function (_a) {
var min = _a.min, max = _a.max, step = _a.step, vertical = _a.vertical, clientX = _a.clientX, clientY = _a.clientY, left = _a.left, top = _a.top, height = _a.height, width = _a.width, isRtl = _a.isRtl, minValue = _a.minValue, maxValue = _a.maxValue;
var sliderSize = vertical ? height : width;
var sliderPosition = vertical ? top + height : left;
var cursorPosition = vertical ? clientY : clientX;
var difference = vertical
? sliderPosition - cursorPosition
: cursorPosition - sliderPosition;
var distanceDragged = Math.min(Math.max(0, difference), sliderSize);
var percentageDragged = distanceDragged / sliderSize;
if (isRtl && !vertical) {
percentageDragged = 1 - percentageDragged;
}
var range = max - min;
var steps = getSteps(min, max, step);
var value = percentageDragged * range + min;
var rounded = nearest(value, minValue, maxValue, steps, range);
return {
value: rounded,
current: percentageDragged,
};
};
/**
* Small util to get the drag percentage for the thumbs within a slider. This
* makes sure to use the current `dragValue` when possible so that the thumb
* moves with the mouse/touch instead of only for the current values. See
* {@link getDragValue} for more examples.
*
* @remarks \@since 2.5.0
* @internal
*/
export var getDragPercentage = function (_a) {
var min = _a.min, max = _a.max, dragging = _a.dragging, dragValue = _a.dragValue, draggingIndex = _a.draggingIndex, thumb1Value = _a.thumb1Value, thumb2Value = _a.thumb2Value;
var thumb1Percentage = dragging && draggingIndex === 0
? dragValue
: getPercentage({
min: min,
max: max,
value: thumb1Value,
validate: false,
});
var thumb2Percentage;
if (typeof thumb2Value === "number") {
var percentage = getPercentage({
min: min,
max: max,
value: thumb2Value,
validate: false,
});
thumb1Percentage = Math.min(thumb1Percentage, percentage);
thumb2Percentage =
dragging && draggingIndex === 1
? Math.max(thumb1Percentage, dragValue)
: percentage;
}
return {
thumb1Percentage: "".concat(thumb1Percentage * 100, "%"),
thumb2Percentage: typeof thumb2Percentage === "number"
? "".concat(thumb2Percentage * 100, "%")
: undefined,
};
};
//# sourceMappingURL=utils.js.map