@react-md/form
Version:
This package is for creating all the different form input types.
91 lines • 6.08 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback } from "react";
import { DEFAULT_SLIDER_ANIMATION_TIME, DEFAULT_SLIDER_GET_VALUE_TEXT, } from "./constants";
import { SliderContainer } from "./SliderContainer";
import { SliderThumb } from "./SliderThumb";
import { SliderTrack } from "./SliderTrack";
import { useSliderControls } from "./useSliderControls";
/**
* The `RangeSlider` component allows the user to select a min and max value from
* a predefined range of numbers. The functionality for controlling the value of
* this component is provided by the `useRangeSlider` hook.
*
* @remarks \@since 2.5.0
*/
export var RangeSlider = forwardRef(function RangeSlider(_a, ref) {
var baseId = _a.baseId, min = _a.min, max = _a.max, step = _a.step, _b = _a.discrete, discrete = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.vertical, vertical = _d === void 0 ? false : _d, label = _a.label, labelProps = _a.labelProps, propTrackProps = _a.trackProps, onBlur = _a.onBlur, onMouseDown = _a.onMouseDown, onTouchStart = _a.onTouchStart, _e = _a.getValueText, getValueText = _e === void 0 ? DEFAULT_SLIDER_GET_VALUE_TEXT : _e, _f = _a.animationDuration, animationDuration = _f === void 0 ? DEFAULT_SLIDER_ANIMATION_TIME : _f, value = _a.value, minimum = _a.minimum, maximum = _a.maximum, increment = _a.increment, incrementJump = _a.incrementJump, decrement = _a.decrement, decrementJump = _a.decrementJump, persist = _a.persist, setValue = _a.setValue, thumb1Props = _a.thumb1Props, _g = _a.thumb1Label, thumb1Label = _g === void 0 ? "Min" : _g, thumb1LabelledBy = _a.thumb1LabelledBy, thumb2Props = _a.thumb2Props, _h = _a.thumb2Label, thumb2Label = _h === void 0 ? "Max" : _h, thumb2LabelledBy = _a.thumb2LabelledBy, props = __rest(_a, ["baseId", "min", "max", "step", "discrete", "disabled", "vertical", "label", "labelProps", "trackProps", "onBlur", "onMouseDown", "onTouchStart", "getValueText", "animationDuration", "value", "minimum", "maximum", "increment", "incrementJump", "decrement", "decrementJump", "persist", "setValue", "thumb1Props", "thumb1Label", "thumb1LabelledBy", "thumb2Props", "thumb2Label", "thumb2LabelledBy"]);
var _j = useSliderControls({
ref: propTrackProps === null || propTrackProps === void 0 ? void 0 : propTrackProps.ref,
thumb1Ref: thumb1Props === null || thumb1Props === void 0 ? void 0 : thumb1Props.ref,
thumb2Ref: thumb2Props === null || thumb2Props === void 0 ? void 0 : thumb2Props.ref,
min: min,
max: max,
step: step,
value: value,
disabled: disabled,
vertical: vertical,
onBlur: onBlur,
onMouseDown: onMouseDown,
onTouchStart: onTouchStart,
animationDuration: animationDuration,
minimum: minimum,
maximum: maximum,
increment: increment,
incrementJump: incrementJump,
decrement: decrement,
decrementJump: decrementJump,
persist: persist,
setValue: setValue,
}), thumb1Ref = _j.thumb1Ref, thumb1Value = _j.thumb1Value, thumb2Ref = _j.thumb2Ref, thumb2Value = _j.thumb2Value, dragging = _j.dragging, draggingIndex = _j.draggingIndex, onKeyDown = _j.onKeyDown, trackProps = __rest(_j, ["thumb1Ref", "thumb1Value", "thumb2Ref", "thumb2Value", "dragging", "draggingIndex", "onKeyDown"]);
var thumb1KeyDown = useCallback(function (event) {
if (thumb1Props === null || thumb1Props === void 0 ? void 0 : thumb1Props.onKeyDown) {
thumb1Props.onKeyDown(event);
}
onKeyDown(event);
}, [thumb1Props, onKeyDown]);
var thumb2KeyDown = useCallback(function (event) {
if (thumb2Props === null || thumb2Props === void 0 ? void 0 : thumb2Props.onKeyDown) {
thumb2Props.onKeyDown(event);
}
onKeyDown(event);
}, [thumb2Props, onKeyDown]);
var thumbProps = {
baseId: baseId,
min: min,
max: max,
discrete: discrete,
disabled: disabled,
vertical: vertical,
animate: !dragging,
animationDuration: animationDuration,
getValueText: getValueText,
};
var labelId = "";
if (label) {
labelId = (labelProps === null || labelProps === void 0 ? void 0 : labelProps.id) || "".concat(baseId, "-label");
}
return (_jsx(SliderContainer, __assign({}, props, { ref: ref, label: label, labelId: labelId, labelProps: labelProps, disabled: disabled, vertical: vertical }, { children: _jsxs(SliderTrack, __assign({ id: baseId }, propTrackProps, trackProps, { animate: !dragging, disabled: disabled, vertical: vertical }, { children: [_jsx(SliderThumb, __assign({ "aria-label": thumb1Label, "aria-labelledby": thumb1LabelledBy }, thumb1Props, thumbProps, { ref: thumb1Ref, value: thumb1Value, index: 0, active: draggingIndex === 0, onKeyDown: thumb1KeyDown })), _jsx(SliderThumb, __assign({ "aria-label": thumb2Label, "aria-labelledby": thumb2LabelledBy }, thumb2Props, thumbProps, { ref: thumb2Ref, value: thumb2Value, index: 1, active: draggingIndex === 1, onKeyDown: thumb2KeyDown }))] })) })));
});
//# sourceMappingURL=RangeSlider.js.map