@progress/kendo-react-dateinputs
Version:
React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package
197 lines (196 loc) • 8.07 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 u from "react";
import o from "prop-types";
import { RowHeightService as b, classNames as v, uCalendar as p } from "@progress/kendo-react-common";
import { ScrollerService as P } from "./services/ScrollerService.mjs";
const T = (s, i, t) => Math.min(Math.abs(i - s), t), A = 17, C = 10, x = {
1: (s) => (i) => i + s,
0: (s) => (i) => i - s
}, I = {
1: (s) => (i) => Math.min(i, s),
0: (s) => (i) => Math.max(i, s)
}, M = {
1: (s) => (i) => i < s,
0: (s) => (i) => i > s
}, a = class a extends u.Component {
constructor(i) {
super(i), this.rowHeightService = null, this.scrollContainer = null, this.lastDirection = null, this.lastTotal = 0, this.lastTake = 0, this.animationInProgress = !1, this.restrictScroll = !1, this.scrollTo = (t) => {
const e = this.direction === "vertical" ? "scrollTop" : "scrollLeft";
if (!this.scrollContainer)
return;
const r = this.scrollContainer[e];
this.restrictScroll && e === "scrollTop" && (!Number.isInteger(r) || !Number.isInteger(t)) && Math.abs(r - t) < C || (this.scrollContainer[e] = t);
}, this.scrollToIndex = (t) => {
this.animationInProgress = !1, this.rowHeightService && this.scrollTo(this.rowHeightService.offset(t));
}, this.animateToIndex = (t) => {
if (!this.rowHeightService || !window)
return;
window.cancelAnimationFrame(this.cancelAnimation);
const e = this.rowHeightService.offset(t), r = this.getContainerScrollDirection(e), { start: n, end: l } = this.scrollRange(e, r);
if (n === l)
return;
const f = this.scrollStep(n, l), c = x[r](f), h = I[r](l), d = M[r](c(l)), m = (g) => {
this.animationInProgress = !0;
const S = c(g);
this.scrollTo(h(S)), d(S) ? this.cancelAnimation = window.requestAnimationFrame(() => {
m(S);
}) : this.animationInProgress = !1;
};
this.cancelAnimation = window.requestAnimationFrame(() => {
m(n);
});
}, this.scrollToBottom = () => {
this.rowHeightService && this.scrollTo(this.rowHeightService.totalHeight() + this.props.bottomOffset);
}, this.scrollStep = (t, e) => {
const r = this.props.scrollDuration || a.defaultProps.scrollDuration;
return Math.abs(e - t) / (r / A);
}, this.scrollRange = (t, e) => {
const r = this.containerScrollPosition;
if (parseInt(`${t}`, 10) === parseInt(`${r}`, 10))
return { start: t, end: t };
const n = this.containerMaxScroll(), l = e === 0 ? 1 : -1, f = T(r, t, this.props.maxScrollDifference || 0), c = Math.min(t, n);
return { start: Math.min(Math.max(c + l * f, 0), n), end: c };
}, this.containerMaxScroll = () => this.containerScrollSize - this.containerOffsetSize, this.getContainerScrollDirection = (t) => t < this.containerScrollPosition ? 0 : 1, this.initServices = (t = this.props) => {
const e = this.direction === "vertical" ? t.itemHeight : t.itemWidth;
e !== void 0 && (this.rowHeightService = new b(t.total, e, 0), this.scrollerService.create(
this.rowHeightService,
t.skip,
t.take,
t.total,
t.topOffset,
this.scrollOffsetSize,
this.direction
));
}, this.getContainerProperty = (t) => this.scrollContainer ? this.scrollContainer[t] : 0, this.handleScroll = (t) => {
if (!this.scrollContainer || !this.rowHeightService)
return;
const e = t.target;
this.scrollerService.onScroll({
scrollLeft: e.scrollLeft,
scrollTop: e.scrollTop,
offsetHeight: e.offsetHeight,
offsetWidth: e.offsetWidth
});
const r = this.rowHeightService.index(this.containerScrollPosition - this.props.topOffset), { onScrollAction: n } = this.props, l = {
index: r,
target: e,
scrollAction: this.scrollAction,
pageAction: this.pageAction,
animationInProgress: this.animationInProgress
};
this.props.onScroll && this.props.onScroll.call(void 0, t), n && n.call(void 0, l), this.scrollAction = void 0, this.pageAction = void 0;
}, this.handleScrollAction = (t) => {
this.scrollAction = t;
}, this.handlePageAction = (t) => {
this.pageAction = t;
}, this.scrollerService = new P(this.handleScrollAction, this.handlePageAction), this.restrictScroll = Number.parseFloat(u.version) > 17;
}
get element() {
return this.scrollContainer;
}
get containerOffsetSize() {
return this.getContainerProperty(this.direction === "vertical" ? "offsetHeight" : "offsetWidth");
}
get containerScrollSize() {
return this.getContainerProperty(this.direction === "vertical" ? "scrollHeight" : "scrollWidth");
}
get containerScrollPosition() {
return this.getContainerProperty(this.direction === "vertical" ? "scrollTop" : "scrollLeft");
}
get direction() {
return this.props.direction !== void 0 ? this.props.direction : a.defaultProps.direction;
}
get scrollOffsetSize() {
return this.props.scrollOffsetSize !== void 0 ? this.props.scrollOffsetSize : a.defaultProps.scrollOffsetSize;
}
activeIndex() {
return this.itemIndex(Math.ceil(this.containerScrollPosition));
}
itemIndex(i) {
return this.rowHeightService ? this.rowHeightService.index(i) : 0;
}
itemOffset(i) {
return this.rowHeightService ? this.rowHeightService.offset(i) : 0;
}
isIndexVisible(i) {
if (!this.rowHeightService)
return !1;
const t = this.containerScrollPosition, e = t + this.containerOffsetSize, r = this.rowHeightService.offset(i), n = r + this.rowHeightService.height(i);
return r >= t && n <= e;
}
isListScrolled(i) {
return this.rowHeightService ? this.containerScrollPosition !== this.rowHeightService.offset(i) : !1;
}
componentDidMount() {
const { onMount: i } = this.props;
i && i.call(void 0, this);
}
render() {
const { total: i, take: t, bottomOffset: e, className: r, tabIndex: n, role: l, children: f, unstyled: c } = this.props, h = c && c.uCalendar;
(this.lastTotal !== i || this.lastDirection !== this.direction || this.lastTake !== t) && (this.initServices(), this.lastTotal = i, this.lastDirection = this.direction, this.lastTake = t);
const d = `${(this.rowHeightService ? this.rowHeightService.totalHeight() : 0) + e}`, m = this.direction === "vertical" ? { height: `${d}px` } : { width: `${d}px` }, g = v(
p.scrollableSelector({
c: h
}),
p.scrollable({
c: h,
horizontal: this.direction === "horizontal"
}),
r
), S = v(
p.scrollablePlaceholder({
c: h,
horizontal: this.direction === "horizontal"
})
);
return /* @__PURE__ */ u.createElement(
"div",
{
ref: (H) => {
this.scrollContainer = H;
},
onScroll: this.handleScroll,
className: g,
tabIndex: n,
role: l
},
f,
/* @__PURE__ */ u.createElement("div", { style: m, className: S })
);
}
};
a.propTypes = {
bottomOffset: o.number.isRequired,
className: o.string,
direction: o.oneOf(["horizontal", "vertical"]),
forceScroll: o.bool,
itemHeight: o.number,
itemWidth: o.number,
maxScrollDifference: o.number,
onScroll: o.func,
onScrollAction: o.func,
scrollDuration: o.number,
scrollOffsetSize: o.number,
skip: o.number.isRequired,
tabIndex: o.number,
take: o.number.isRequired,
topOffset: o.number.isRequired,
total: o.number.isRequired,
role: o.string
}, a.defaultProps = {
direction: "vertical",
forceScroll: !1,
scrollOffsetSize: 0,
maxScrollDifference: 100,
scrollDuration: 100
};
let w = a;
export {
w as Virtualization
};