@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
217 lines (216 loc) • 9.35 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as i from "react";
import a from "prop-types";
import { Keys as n, classNames as y, Draggable as w, getTabIndex as S, dispatchEvent as x, createPropsContext as T, withPropsContext as E } from "@progress/kendo-react-common";
import { provideLocalizationService as D, registerForLocalization as C } from "@progress/kendo-react-intl";
import { sliderIncreaseValue as d, messages as h, sliderDecreaseValue as m, sliderDragTitle as u } from "../messages/index.mjs";
import { SLIDER_LABEL_ATTRIBUTE as I } from "./SliderLabel.mjs";
import { Button as v } from "@progress/kendo-react-buttons";
import { caretAltUpIcon as g, caretAltLeftIcon as f, caretAltRightIcon as b, caretAltDownIcon as k } from "@progress/kendo-svg-icons";
const p = class p extends i.Component {
constructor(s) {
super(s), this.state = {
value: this.props.defaultValue === void 0 ? this.props.min : this.props.defaultValue,
focused: !1,
dir: this.props.dir
}, this._sliderTrack = null, this._element = null, this.buttons = (t) => {
if (!t.enabled)
return t.children;
const e = this.state.dir === "rtl" ? this.props.vertical ? g : f : this.props.vertical ? g : b, l = this.state.dir === "rtl" ? this.props.vertical ? k : b : this.props.vertical ? k : f, r = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-up" : "caret-alt-left" : this.props.vertical ? "caret-alt-up" : "caret-alt-right", o = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-down" : "caret-alt-right" : this.props.vertical ? "caret-alt-down" : "caret-alt-left";
return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
v,
{
className: "k-button-decrease",
rounded: "full",
icon: o,
svgIcon: l,
title: t.decrementTitle,
onClick: t.decrement
}
), t.children, /* @__PURE__ */ i.createElement(
v,
{
className: "k-button-increase",
rounded: "full",
icon: r,
svgIcon: e,
title: t.incrementTitle,
onClick: t.increment
}
));
}, this.focus = () => {
this._element && this._element.focus();
}, this.isLabel = (t) => {
let e = t;
for (; e; ) {
if (e.getAttribute(I))
return !0;
e = e.parentElement;
}
return !1;
}, this.onFocus = () => {
this.setState({ focused: !0 });
}, this.onBlur = () => {
this.setState({ focused: !1 });
}, this.onKeyDown = (t) => {
let e;
t.keyCode === n.left || t.keyCode === n.down ? e = this.state.value - (this.props.step || 0) : t.keyCode === n.right || t.keyCode === n.up ? e = this.state.value + (this.props.step || 0) : t.keyCode === n.pageDown ? e = this.state.value - (this.props.largeStep || 0) : t.keyCode === n.pageUp ? e = this.state.value + (this.props.largeStep || 0) : t.keyCode === n.home ? e = this.props.min : t.keyCode === n.end && (e = this.props.max), e !== void 0 && (t.preventDefault(), this.change(t, e));
}, this.decrement = (t) => {
t.preventDefault(), this.change(t, this.state.value - (this.props.step || 0));
}, this.increment = (t) => {
t.preventDefault(), this.change(t, this.state.value + (this.props.step || 0));
}, this.dragStart = (t) => {
this.isLabel(t.event.originalEvent.target) || (t.event.isTouch && t.event.originalEvent.preventDefault(), this.drag(t));
}, this.dragOver = (t) => {
t.event.originalEvent.preventDefault(), this.drag(t);
}, this.drag = (t) => {
const e = t.element.getBoundingClientRect(), l = this.props.vertical ? e.bottom - t.event.clientY : this.state.dir === "rtl" ? e.right - t.event.clientX : t.event.clientX - e.left, r = this.props.vertical ? e.height : e.width, o = l / r;
this.change(t, this.props.min + o * (this.props.max - this.props.min));
};
}
/**
* @hidden
*/
static getDerivedStateFromProps(s, t) {
const e = s.value !== void 0 ? s.value : t.value, { min: l, max: r } = s;
return e === void 0 ? null : { value: Math.min(Math.max(e, l), r) };
}
/**
* @hidden
*/
componentDidMount() {
if (!this.state.dir && window && this._element) {
const s = window.getComputedStyle(this._element).direction;
s && this.setState({ dir: s });
}
}
/**
* @hidden
*/
render() {
const s = D(this), t = (this.state.value - this.props.min) / (this.props.max - this.props.min) * 100, e = this.props.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, l = this.props.vertical ? { paddingTop: 0, height: "100%" } : {};
return /* @__PURE__ */ i.createElement(
"div",
{
ref: (r) => this._element = r,
dir: this.state.dir,
id: this.props.id,
style: { gap: 0, ...this.props.style },
onFocus: this.onFocus,
onBlur: this.onBlur,
onKeyDown: this.onKeyDown,
className: y(
"k-slider",
{
"k-focus": this.state.focused,
"k-disabled": this.props.disabled,
"k-slider-horizontal": !this.props.vertical,
"k-slider-vertical": this.props.vertical
},
this.props.className
)
},
/* @__PURE__ */ i.createElement(
this.buttons,
{
enabled: this.props.buttons,
decrement: this.decrement,
increment: this.increment,
incrementTitle: s.toLanguageString(d, h[d]),
decrementTitle: s.toLanguageString(m, h[m])
},
/* @__PURE__ */ i.createElement(w, { onDrag: this.dragOver, onPress: this.dragStart, autoScroll: !1 }, /* @__PURE__ */ i.createElement(
"div",
{
className: "k-slider-track-wrap",
style: {
flexGrow: 1,
position: "relative",
touchAction: "none",
...e
}
},
this.props.children && /* @__PURE__ */ i.createElement("ul", { className: "k-reset k-slider-items", style: { margin: 0, ...l } }, i.Children.map(this.props.children, (r, o) => r && i.cloneElement(
r,
{
position: 100 * (r.props.position - this.props.min) / (this.props.max - this.props.min),
vertical: this.props.vertical,
firstTick: o === 0,
lastTick: o === i.Children.count(this.props.children) - 1
},
r.props.children
))),
/* @__PURE__ */ i.createElement(
"div",
{
className: "k-slider-track",
style: this.props.vertical ? { bottom: 0, height: "100%" } : { [this.state.dir === "rtl" ? "right" : "left"]: 0, width: "100%" },
ref: (r) => this._sliderTrack = r
},
/* @__PURE__ */ i.createElement(
"div",
{
className: "k-slider-selection",
style: this.props.vertical ? { height: t + "%" } : { width: t + "%" }
}
),
/* @__PURE__ */ i.createElement(
"span",
{
role: "slider",
"aria-valuemin": this.props.min,
"aria-valuemax": this.props.max,
"aria-valuenow": this.state.value,
"aria-valuetext": String(this.state.value),
"aria-orientation": this.props.vertical ? "vertical" : void 0,
"aria-disabled": this.props.disabled ? "true" : void 0,
"aria-labelledby": this.props.ariaLabelledBy,
"aria-describedby": this.props.ariaDescribedBy,
"aria-label": this.props.ariaLabel,
tabIndex: S(this.props.tabIndex, this.props.disabled, void 0),
className: "k-draghandle k-draghandle-end",
title: s.toLanguageString(u, h[u]),
style: this.props.vertical ? { bottom: "calc(" + t + "%)", zIndex: 1 } : this.state.dir === "rtl" ? { right: "calc(" + t + "% - 13px)", zIndex: 1 } : { left: "calc(" + t + "%)", zIndex: 1 }
}
)
)
))
)
);
}
/**
* @hidden
*/
get sliderTrack() {
return this._sliderTrack;
}
change(s, t) {
t = Math.min(Math.max(t, this.props.min), this.props.max), this.setState({ value: t }), x(this.props.onChange, s, this, { value: t });
}
};
p.displayName = "Slider", p.propTypes = {
min: a.number.isRequired,
max: a.number.isRequired,
value: a.number,
vertical: a.bool,
id: a.string,
ariaLabelledBy: a.string,
ariaDescribedBy: a.string,
ariaLabel: a.string
// TODO: validation when buttons is set to true, but no step is provided
};
let c = p;
const L = T(), A = E(L, c);
A.displayName = "KendoReactSlider";
C(c);
export {
A as Slider,
L as SliderPropsContext,
c as SliderWithoutContext
};