@react-md/form
Version:
This package is for creating all the different form input types.
146 lines • 6.35 kB
JavaScript
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { nearest } from "@react-md/utils";
import { DEFAULT_SLIDER_MAX, DEFAULT_SLIDER_MIN, DEFAULT_SLIDER_STEP, } from "./constants";
import { getJumpValue, getSteps } from "./utils";
var noop = function () {
// do nothing
};
/**
* This hook is used to control the value and behavior of the `RangeSlider`
* component. The first argument will contain the current slider value while the
* second argument will be all the props required to control the `RangeSlider`
* component.
*
* @param defaultValue - An optional default value to use. When omitted, this
* will be the `[min, max]` values
* @param options - An object containing the `min` and `max` values allowed for
* the slider as well as a `step` to indicate valid values between the `min` and
* `max`.
* @returns an ordered list containing the current value followed by the
* `RangeSlider` props
* @remarks \@since 2.5.0
*/
export function useRangeSlider(defaultValue, _a) {
var _b = _a === void 0 ? {} : _a, _c = _b.min, min = _c === void 0 ? DEFAULT_SLIDER_MIN : _c, _d = _b.max, max = _d === void 0 ? DEFAULT_SLIDER_MAX : _d, _e = _b.step, step = _e === void 0 ? DEFAULT_SLIDER_STEP : _e, propJump = _b.jump, _f = _b.updateOn, updateOn = _f === void 0 ? "change" : _f, _g = _b.onChange, onChange = _g === void 0 ? noop : _g;
var jump = useMemo(function () { return getJumpValue(min, max, step, propJump); }, [min, max, step, propJump]);
// since the `currentValue` is a ref, this state is used to force a re-render
// to get the updated value from the ref.
var _h = __read(useState([]), 2), hack = _h[1];
var _j = __read(useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : [min, max]), 2), value = _j[0], setValue = _j[1];
var currentValue = useRef(value);
var update = useCallback(function (_a) {
var index = _a.index, type = _a.type;
/* istanbul ignore next */
if (process.env.NODE_ENV !== "production") {
if (index !== 0 && index !== 1) {
throw new TypeError("Thumb index must be 0 or 1.");
}
}
setValue(function (_a) {
var _b = __read(_a, 2), thumb1Value = _b[0], thumb2Value = _b[1];
var value;
var minValue = min;
var maxValue = max;
if (index === 0) {
value = thumb1Value;
maxValue = thumb2Value - step;
}
else {
value = thumb2Value;
minValue = thumb1Value + step;
}
switch (type) {
case "min":
value = minValue;
break;
case "max":
value = maxValue;
break;
case "increment":
value += step;
break;
case "decrement":
value -= step;
break;
case "increment-jump":
value += jump;
break;
case "decrement-jump":
value -= jump;
break;
}
value = Math.max(minValue, Math.min(maxValue, value));
return index === 0 ? [value, thumb2Value] : [thumb1Value, value];
});
}, [jump, max, min, step]);
var increment = useCallback(function (index) { return update({ index: index, type: "increment" }); }, [update]);
var incrementJump = useCallback(function (index) { return update({ index: index, type: "increment-jump" }); }, [update]);
var decrement = useCallback(function (index) { return update({ index: index, type: "decrement" }); }, [update]);
var decrementJump = useCallback(function (index) { return update({ index: index, type: "decrement-jump" }); }, [update]);
var minimum = useCallback(function (index) { return update({ index: index, type: "min" }); }, [update]);
var maximum = useCallback(function (index) { return update({ index: index, type: "max" }); }, [update]);
var persist = useCallback(function () {
var _a = __read(currentValue.current, 2), prev1 = _a[0], prev2 = _a[1];
if (prev1 === value[0] && prev2 === value[1]) {
return;
}
onChange(value);
currentValue.current = value;
hack([]);
}, [onChange, value]);
var prev = useRef({ min: min, max: max, step: step });
useEffect(function () {
if (prev.current.min !== min ||
prev.current.max !== max ||
prev.current.step !== step) {
// ensure that if the `min`, `max`, or `step` value changes that the value
// is updated as well. Without this, there will be a runtime error if the
// value is not within the new range.
prev.current = { min: min, max: max, step: step };
var steps = getSteps(min, max, step);
var nextValue = [
nearest(value[0], min, max, steps),
nearest(value[1], min, max, steps),
];
currentValue.current = nextValue;
setValue(nextValue);
}
}, [min, max, step, value]);
if (updateOn === "change" && currentValue.current !== value) {
currentValue.current = value;
}
return [
currentValue.current,
{
min: min,
max: max,
step: step,
value: value,
minimum: minimum,
maximum: maximum,
increment: increment,
incrementJump: incrementJump,
decrement: decrement,
decrementJump: decrementJump,
persist: persist,
setValue: setValue,
},
];
}
//# sourceMappingURL=useRangeSlider.js.map