@react-md/form
Version:
This package is for creating all the different form input types.
68 lines • 4.93 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 } from "react/jsx-runtime";
import { forwardRef } 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 `Slider` component allows the user to select a single value from a range
* of numbers. The functionality for controlling the value of this component is
* provided by the `useSlider` hook.
*
* @remarks \@since 2.5.0
*/
export var Slider = forwardRef(function Slider(_a, ref) {
var baseId = _a.baseId, propTrackProps = _a.trackProps, label = _a.label, labelProps = _a.labelProps, thumbLabel = _a.thumbLabel, thumbLabelledBy = _a.thumbLabelledBy, thumbProps = _a.thumbProps, 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, 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, props = __rest(_a, ["baseId", "trackProps", "label", "labelProps", "thumbLabel", "thumbLabelledBy", "thumbProps", "min", "max", "step", "discrete", "disabled", "vertical", "onBlur", "onMouseDown", "onTouchStart", "getValueText", "animationDuration", "value", "minimum", "maximum", "increment", "incrementJump", "decrement", "decrementJump", "persist", "setValue"]);
var _g = useSliderControls({
ref: propTrackProps === null || propTrackProps === void 0 ? void 0 : propTrackProps.ref,
thumb1Ref: thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps.ref,
min: min,
max: max,
step: step,
value: value,
disabled: disabled,
vertical: vertical,
onBlur: onBlur,
onKeyDown: thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps.onKeyDown,
onMouseDown: onMouseDown,
onTouchStart: onTouchStart,
animationDuration: animationDuration,
minimum: minimum,
maximum: maximum,
increment: increment,
incrementJump: incrementJump,
decrement: decrement,
decrementJump: decrementJump,
persist: persist,
setValue: setValue,
}), thumb1Ref = _g.thumb1Ref, thumb1Value = _g.thumb1Value, _thumb2Ref = _g.thumb2Ref, _thumb2Value = _g.thumb2Value, dragging = _g.dragging, draggingIndex = _g.draggingIndex, onKeyDown = _g.onKeyDown, trackProps = __rest(_g, ["thumb1Ref", "thumb1Value", "thumb2Ref", "thumb2Value", "dragging", "draggingIndex", "onKeyDown"]);
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: _jsx(SliderTrack, __assign({ id: baseId }, propTrackProps, trackProps, { animate: !dragging, disabled: disabled, vertical: vertical }, { children: _jsx(SliderThumb, __assign({}, thumbProps, { "aria-label": thumbLabel, "aria-labelledby": thumbLabelledBy || labelId, baseId: baseId, ref: thumb1Ref, getValueText: getValueText, min: min, max: max, discrete: discrete, disabled: disabled, vertical: vertical, animate: !dragging, animationDuration: animationDuration, value: thumb1Value, index: 0, active: draggingIndex === 0, onKeyDown: onKeyDown })) })) })));
});
//# sourceMappingURL=Slider.js.map