@react-md/form
Version:
This package is for creating all the different form input types.
63 lines • 4.37 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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import cn from "classnames";
import { bem } from "@react-md/utils";
import { DEFAULT_SLIDER_ANIMATION_TIME, DEFAULT_SLIDER_GET_VALUE_TEXT, DEFAULT_SLIDER_MAX, DEFAULT_SLIDER_MIN, } from "./constants";
import { SliderValue } from "./SliderValue";
import { useDiscreteValueVisibility } from "./useDiscreteValueVisibility";
var styles = bem("rmd-slider-thumb");
/**
* The slider thumb implements the `role="slider"` for the `Slider` and
* `RangeSlider` components.
*
* @remarks \@since 2.5.0
*/
export var SliderThumb = forwardRef(function SliderThumb(_a, ref) {
var propId = _a.id, baseId = _a.baseId, className = _a.className, _b = _a.min, min = _b === void 0 ? DEFAULT_SLIDER_MIN : _b, _c = _a.max, max = _c === void 0 ? DEFAULT_SLIDER_MAX : _c, _d = _a.animationDuration, animationDuration = _d === void 0 ? DEFAULT_SLIDER_ANIMATION_TIME : _d, _e = _a.getValueText, getValueText = _e === void 0 ? DEFAULT_SLIDER_GET_VALUE_TEXT : _e, name = _a.name, value = _a.value, index = _a.index, _f = _a.active, active = _f === void 0 ? false : _f, _g = _a.animate, animate = _g === void 0 ? false : _g, _h = _a.discrete, discrete = _h === void 0 ? false : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.vertical, vertical = _k === void 0 ? false : _k, _l = _a.tabIndex, tabIndex = _l === void 0 ? disabled ? -1 : 0 : _l, propOnBlur = _a.onBlur, propOnFocus = _a.onFocus, props = __rest(_a, ["id", "baseId", "className", "min", "max", "animationDuration", "getValueText", "name", "value", "index", "active", "animate", "discrete", "disabled", "vertical", "tabIndex", "onBlur", "onFocus"]);
var id = propId || "".concat(baseId, "-thumb-").concat(index + 1);
var isFirst = index === 0;
var _m = useDiscreteValueVisibility({
active: active,
animate: animate,
discrete: discrete,
disabled: disabled,
onBlur: propOnBlur,
onFocus: propOnFocus,
animationDuration: animationDuration,
}), onBlur = _m.onBlur, onFocus = _m.onFocus, animateValue = _m.animateValue, visible = _m.visible;
var styleOptions = {
h: !vertical,
h1: !vertical && isFirst,
h2: !vertical && !isFirst,
v: vertical,
v1: vertical && isFirst,
v2: vertical && !isFirst,
active: active,
animate: animate,
disabled: disabled,
};
return (_jsxs(_Fragment, { children: [disabled && (_jsx("span", { className: cn(styles(__assign(__assign({}, styleOptions), { mask: true, "mask-h": !vertical, "mask-v": vertical })), className) })), _jsx("span", __assign({}, props, { id: id, ref: ref, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": getValueText(value) || undefined, "aria-disabled": disabled || undefined, "aria-orientation": (vertical && "vertical") || undefined, tabIndex: tabIndex, onBlur: onBlur, onFocus: onFocus, className: cn(styles(__assign(__assign({}, styleOptions), { "disabled-h": disabled && !vertical, "disabled-v": disabled && vertical })), className) })), _jsx("input", { id: "".concat(id, "-value"), type: "hidden", name: name, value: value }), _jsx(SliderValue, __assign({ id: "".concat(id, "-value"), visible: visible, index: index, animate: animateValue, discrete: discrete, vertical: vertical }, { children: value }))] }));
});
//# sourceMappingURL=SliderThumb.js.map